/* ============================================================
   SAIDA Motion Language — shared animation styles (all pages)
   ============================================================ */
:root {
  --gold: #C9A227;
  --gold-bright: #E5C04A;
  --ease-out-expo: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Section + staggered reveals ---------- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .9s var(--ease-out-expo), transform .9s var(--ease-out-expo);
}
.reveal.active { opacity: 1; transform: none; }

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease-out-expo), transform .8s var(--ease-out-expo);
}
.reveal-stagger.active > * { opacity: 1; transform: none; }
.reveal-stagger.active > *:nth-child(1) { transition-delay: .06s; }
.reveal-stagger.active > *:nth-child(2) { transition-delay: .16s; }
.reveal-stagger.active > *:nth-child(3) { transition-delay: .26s; }
.reveal-stagger.active > *:nth-child(4) { transition-delay: .36s; }
.reveal-stagger.active > *:nth-child(5) { transition-delay: .46s; }
.reveal-stagger.active > *:nth-child(6) { transition-delay: .56s; }
.reveal-stagger.active > *:nth-child(7) { transition-delay: .66s; }
.reveal-stagger.active > *:nth-child(8) { transition-delay: .76s; }

/* ---------- Card micro-interactions ---------- */
.card-lift {
  transition: transform .45s var(--ease-out-expo),
              box-shadow .45s var(--ease-out-expo),
              border-color .45s var(--ease-out-expo);
  will-change: transform;
}
.card-lift:hover {
  transform: translateY(-6px);
  border-color: rgba(201, 162, 39, .55) !important;
  box-shadow: 0 22px 44px -14px rgba(26, 26, 26, .18),
              0 0 0 1px rgba(201, 162, 39, .12);
}
.card-lift svg.lucide { transition: transform .45s var(--ease-out-expo); }
.card-lift:hover svg.lucide { transform: translateY(-2px) scale(1.12); }

/* ---------- Port badge pulse (relay race) ---------- */
.port-pulse { position: relative; }
.port-pulse::after {
  content: "";
  position: absolute; inset: -2px;
  border-radius: 9999px;
  border: 1.5px solid rgba(201, 162, 39, .55);
  opacity: 0;
  animation: portRing 3.2s var(--ease-out-expo) infinite;
}
@keyframes portRing {
  0%   { transform: scale(.92); opacity: 0; }
  18%  { opacity: .9; }
  60%  { transform: scale(1.22); opacity: 0; }
  100% { transform: scale(1.22); opacity: 0; }
}

/* ---------- Buttons ---------- */
.btn-anim {
  transition: transform .35s var(--ease-out-expo), box-shadow .35s var(--ease-out-expo),
              background-color .35s, border-color .35s;
}
.btn-anim:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(201, 162, 39, .45); }
.btn-anim:active { transform: translateY(0); }
.btn-anim svg.lucide { transition: transform .35s var(--ease-out-expo); }
.btn-anim:hover svg.lucide { transform: translateX(4px); }

/* ---------- Status dot: gold pulse (overrides legacy blue) ---------- */
.pulse-dot {
  box-shadow: 0 0 0 0 rgba(201, 162, 39, .7);
  animation: pulseGold 2s infinite;
}
@keyframes pulseGold {
  0%   { transform: scale(.95); box-shadow: 0 0 0 0 rgba(201, 162, 39, .7); }
  70%  { transform: scale(1);   box-shadow: 0 0 0 6px rgba(201, 162, 39, 0); }
  100% { transform: scale(.95); box-shadow: 0 0 0 0 rgba(201, 162, 39, 0); }
}

/* ---------- Nav link underline ---------- */
.nav-link { position: relative; }
.nav-link::after {
  content: "";
  position: absolute; left: 0; bottom: -4px;
  width: 100%; height: 2px;
  background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease-out-expo);
}
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }

/* ---------- Sticky nav elevation on scroll ---------- */
#siteNav { transition: box-shadow .4s var(--ease-out-expo), background-color .4s var(--ease-out-expo); }
#siteNav.nav-scrolled { box-shadow: 0 10px 30px -18px rgba(26,26,26,.35); background: rgba(250,250,250,.95); }

/* ============================================================
   SAIDA Workflow Diagrams — shared across service pages
   Responsive node-and-rail flows that stack vertically on mobile.
   ============================================================ */
.wf {
  display: flex; flex-wrap: nowrap; align-items: stretch; justify-content: center;
  gap: 10px; width: 100%;
}
.wf-step {
  position: relative; flex: 1 1 0; min-width: 0;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 16px;
  padding: 20px 16px; text-align: center;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  transition: transform .45s var(--ease-out-expo), box-shadow .45s var(--ease-out-expo), border-color .45s var(--ease-out-expo);
}
.wf-step:hover {
  transform: translateY(-5px);
  border-color: rgba(201,162,39,.5);
  box-shadow: 0 20px 40px -16px rgba(26,26,26,.2);
}
.wf-step .wf-ico {
  width: 48px; height: 48px; margin: 0 auto 12px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(212,175,55,.1); color: var(--gold);
  box-shadow: inset 0 2px 4px 0 rgba(0,0,0,.04);
}
.wf-step .wf-tag {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: 6px; display: block;
}
.wf-step h4 { font-family: Inter, sans-serif; font-weight: 700; font-size: .95rem; color: #1A1A1A; line-height: 1.25; margin-bottom: 6px; }
.wf-step p  { font-family: 'JetBrains Mono', monospace; font-size: .72rem; line-height: 1.55; color: #6b7280; }
.wf-arrow { display: flex; align-items: center; justify-content: center; color: #d4af37; flex: 0 0 auto; }
.wf-arrow svg { width: 26px; height: 26px; }

/* Outcome / terminal node accent */
.wf-step.wf-gold { background: linear-gradient(135deg,#fffdf5,#fff); border-color: rgba(201,162,39,.5); }
.wf-step.wf-gold .wf-ico { background: linear-gradient(135deg,#E5C04A,#C9A227); color: #fff; }
.wf-step.wf-dark { background: #1A1A1A; border-color: #1A1A1A; }
.wf-step.wf-dark h4 { color: #fff; }
.wf-step.wf-dark p  { color: #cbd5e1; }
.wf-step.wf-dark .wf-ico { background: rgba(212,175,55,.18); color: var(--gold-bright); }

@media (max-width: 820px) {
  .wf { flex-direction: column; align-items: center; gap: 6px; }
  .wf-step { width: 100%; max-width: 360px; flex: none; }
  .wf-arrow { transform: rotate(90deg); padding: 2px 0; }
}

/* Small labelled "before / after" ledger chips reused on multiple pages */
.tag-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 9999px;
  background: rgba(212,175,55,.08); color: var(--gold); border: 1px solid rgba(212,175,55,.25);
}

/* Funnel "next step" nudge band */
.funnel-nudge { transition: transform .45s var(--ease-out-expo), box-shadow .45s var(--ease-out-expo); }
.funnel-nudge:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -20px rgba(26,26,26,.3); }

/* ============================================================
   Hero glow — soft gold radial behind the new homepage hero
   ============================================================ */
.hero-glow {
  position: absolute; top: -14%; left: 50%; transform: translateX(-50%);
  width: min(1100px, 120vw); height: min(620px, 70vw);
  background: radial-gradient(50% 50% at 50% 38%, rgba(212,175,55,.20) 0%, rgba(212,175,55,.07) 42%, transparent 70%);
  pointer-events: none; z-index: 0; filter: blur(6px);
}
.hero-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(26,26,26,.045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(26,26,26,.045) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 75%);
          mask-image: radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 75%);
}

/* ============================================================
   Examples marquee — auto-scrolling row of automation ideas
   ============================================================ */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
           mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; width: max-content; gap: 12px; animation: marqueeScroll 42s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-row + .marquee-row { margin-top: 12px; }
.marquee-row.rev .marquee-track { animation-direction: reverse; animation-duration: 48s; }
@keyframes marqueeScroll { to { transform: translateX(-50%); } }
.mq-chip {
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  font-family: 'JetBrains Mono', monospace; font-size: 12.5px; font-weight: 700;
  letter-spacing: .02em; color: #3f3a2c;
  padding: 11px 18px; border-radius: 9999px;
  background: #fff; border: 1px solid rgba(201,162,39,.28);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.mq-chip svg, .mq-chip i { color: var(--gold); width: 16px; height: 16px; }

/* ============================================================
   Video cards + social buttons (Follow Along section)
   ============================================================ */
.video-card { position: relative; display: block; border-radius: 18px; overflow: hidden;
  background: #1A1A1A; border: 1px solid rgba(255,255,255,.06);
  transition: transform .45s var(--ease-out-expo), box-shadow .45s var(--ease-out-expo); }
.video-card:hover { transform: translateY(-5px); box-shadow: 0 26px 50px -22px rgba(26,26,26,.55); }
.video-thumb { position: relative; aspect-ratio: 16/9; width: 100%;
  background: radial-gradient(120% 120% at 30% 20%, #2a2a2a 0%, #161616 60%, #0e0e0e 100%); }
.video-thumb::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(212,175,55,.16), transparent 60%); }
.video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2;
  width: 60px; height: 60px; border-radius: 9999px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #E5C04A, #C9A227); color: #1A1A1A;
  box-shadow: 0 12px 30px rgba(201,162,39,.5); transition: transform .35s var(--ease-out-expo); }
.video-card:hover .video-play { transform: translate(-50%,-50%) scale(1.1); }
.video-badge { position: absolute; top: 12px; left: 12px; z-index: 2;
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-bright); background: rgba(0,0,0,.45); border: 1px solid rgba(212,175,55,.35);
  padding: 4px 9px; border-radius: 9999px; backdrop-filter: blur(4px); }
.social-btn { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px;
  border-radius: 14px; background: #fff; border: 1px solid #e5e7eb; color: #1A1A1A;
  transition: transform .35s var(--ease-out-expo), color .35s, border-color .35s, box-shadow .35s; }
.social-btn:hover { transform: translateY(-3px); color: var(--gold); border-color: rgba(201,162,39,.55);
  box-shadow: 0 14px 28px -14px rgba(201,162,39,.5); }

/* "Included free" ribbon chip used on the bundle callouts */
.bundle-ribbon { display: inline-flex; align-items: center; gap: 7px;
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #1A1A1A;
  background: linear-gradient(135deg, #E5C04A, #C9A227); padding: 6px 12px; border-radius: 9999px;
  box-shadow: 0 8px 20px -8px rgba(201,162,39,.6); }

/* ---------- Reduced motion: show everything, no movement ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .card-lift, .card-lift:hover { transform: none; }
  .wf-step:hover, .funnel-nudge:hover { transform: none; }
  .video-card:hover { transform: none; }
  .marquee-track { animation: none !important; }
  .port-pulse::after { animation: none; }
}