/* ═══════════════════════════════════════════════════════════════════════
   sy-scrollfx.css — landing scroll experience v2 (2026-07-02)
   1) PIPELINE — numbered steps with a scroll-driven gold progress rail and
      a sticky visual that crossfades per step (the fiscal.ai-style journey).
   2) STAGGERED REVEALS — [data-sy-stagger] containers cascade their children
      in with a blur-up rise once they enter the viewport.
   3) BUTTON SYSTEM — one consistent pill language: sheen sweep on hover,
      press feedback, visible focus rings, ≥44px touch targets.
   Paired runtime: js/sy-scrollfx.js. Reduced-motion collapses everything
   to static, fully-visible content.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. PIPELINE ─────────────────────────────────────────────────────── */
.sy-pipe{padding:clamp(70px,9vw,130px) 0 clamp(60px,7vw,100px)}
/* 2026-07-06 (user feedback): the product shots read too small and slid
   under the floating nav pill. The pipeline gets a WIDER stage than the
   default 1320px container, and the grid tilts toward the visual column
   (.78/1.22 vs the old .92/1.08) — these are dense real-UI captures and
   need the pixels. */
.sy-pipe .container{max-width:1520px}
.sy-pipe-grid{display:grid;grid-template-columns:26px minmax(0,.78fr) minmax(0,1.22fr);gap:0 clamp(26px,4vw,64px);margin-top:clamp(30px,4vw,54px);align-items:start}
.sy-pipe-rail{position:relative;justify-self:center;width:2px;align-self:stretch;background:rgba(245,241,236,.09);border-radius:2px;overflow:visible}
.sy-pipe-fill{position:absolute;left:0;top:0;width:100%;height:100%;transform:scaleY(0);transform-origin:top;background:linear-gradient(180deg,var(--sy-gold),rgba(232,200,122,.25));border-radius:2px;box-shadow:0 0 14px rgba(232,200,122,.45);will-change:transform}
.sy-pipe-steps{list-style:none;margin:0;padding:0}
/* 2026-07-06 CALM PASS: runway trimmed ~30% (44vh→32vh, 9vh→6vh pads) — the
   long per-step runways read as dead scroll between beats. */
.sy-step{position:relative;min-height:32vh;display:flex;flex-direction:column;justify-content:center;padding:6vh 0}
.sy-step:first-child{padding-top:2vh}
.sy-step:last-child{min-height:24vh}
/* rail node — one gold dot per step, lights when active */
.sy-step::before{content:'';position:absolute;left:calc(-1 * (13px + clamp(26px,4vw,64px)));top:50%;width:9px;height:9px;margin:-5px 0 0 -3.5px;border-radius:50%;background:#20242e;border:1.5px solid rgba(245,241,236,.22);transition:background .35s,border-color .35s,box-shadow .35s}
.sy-step.on::before{background:var(--sy-gold);border-color:var(--sy-gold);box-shadow:0 0 0 5px rgba(232,200,122,.12),0 0 16px rgba(232,200,122,.6)}
.sy-step-num{display:block;font-family:var(--sy-mono,ui-monospace,monospace);font-weight:700;font-size:clamp(30px,3.4vw,44px);line-height:1;letter-spacing:-.02em;color:rgba(245,241,236,.34);transition:font-size .45s cubic-bezier(.22,1,.36,1),color .45s;font-variant-numeric:tabular-nums}
.sy-step.on .sy-step-num{font-size:clamp(52px,5.6vw,80px);color:#EFE7D6}
/* Inactive steps at .32 compressed to near-black on this bg — users read
   ahead; dimming should subordinate, never erase. Floor raised to .6. */
.sy-step-body{margin-top:14px;max-width:430px;opacity:.6;transform:translateY(4px);transition:opacity .45s,transform .45s cubic-bezier(.22,1,.36,1)}
.sy-step.on .sy-step-body{opacity:1;transform:none}
.sy-step-body h3{font-family:var(--sy-font,Inter,system-ui,sans-serif);font-weight:700;font-size:clamp(18px,1.9vw,23px);letter-spacing:-.015em;color:#F5F1EC;margin:0 0 8px}
.sy-step-body p{font-size:15px;line-height:1.64;color:#A0A0AA;margin:0}
.sy-step-body .sy-step-kicker{display:inline-block;font-family:var(--sy-mono,ui-monospace,monospace);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sy-gold);margin-bottom:8px;opacity:.9}
/* sticky visual — top has a HARD FLOOR of 118px so the frame can never
   slide under the floating nav pill (~100px tall incl. offset), no matter
   the viewport height (2026-07-06 fix: images were cut off by the nav). */
.sy-pipe-visual{position:sticky;top:max(118px, calc(50vh - min(31vw,310px)));aspect-ratio:16/10.6;border-radius:18px;overflow:hidden;background:#0b0d12;border:1px solid rgba(245,241,236,.1);box-shadow:0 46px 100px -40px rgba(0,0,0,.85),0 16px 40px -20px rgba(232,200,122,.16)}
.sy-pipe-visual .sy-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;opacity:0;transform:scale(1.045);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform 1.1s cubic-bezier(.22,1,.36,1)}
.sy-pipe-visual .sy-shot.onshot{opacity:1;transform:scale(1)}
.sy-pipe-visual .sy-pipe-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(90% 60% at 50% 110%,rgba(232,200,122,.12),transparent 60%);mix-blend-mode:screen}
.sy-pipe-visual .sy-pipe-frame{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(245,241,236,.06),inset 0 0 70px 8px rgba(0,0,0,.35);border-radius:18px}
.sy-pipe-visual .sy-shot-tag{position:absolute;left:14px;bottom:12px;font-family:var(--sy-mono,ui-monospace,monospace);font-size:11px;letter-spacing:.05em;color:#EFE7D6;background:rgba(9,10,14,.78);border:1px solid rgba(232,200,122,.3);padding:5px 11px;border-radius:100px;backdrop-filter:blur(5px);opacity:0;transform:translateY(6px);transition:opacity .4s .15s,transform .4s .15s}
.sy-pipe-visual .sy-shot-tag.onshot{opacity:1;transform:none}
.sy-pipe-cta{margin-top:6px}
@media(max-width:900px){
  .sy-pipe-grid{grid-template-columns:18px minmax(0,1fr)}
  .sy-pipe-visual{display:none}
  .sy-step{min-height:0;padding:34px 0}
  .sy-step::before{left:calc(-1 * (9px + clamp(26px,4vw,64px)))}
  .sy-step-num{font-size:26px}
  .sy-step.on .sy-step-num{font-size:44px}
}

/* ── 2. STAGGERED REVEALS ───────────────────────────────────────────── */
/* armed only when JS boots (html.sy-anim) — no-JS pages stay visible */
/* 2026-07-06: pre-reveal floor .12 (was 0) — a section can never paint as a
   pure-black band if a jump/anchor lands before the observer fires; blur
   5px→3px = cheaper paints during the reveal. */
html.sy-anim [data-sy-stagger]:not(.sy-in)>*{opacity:.12;transform:translateY(26px);filter:blur(3px)}
[data-sy-stagger].sy-in>*{opacity:1;transform:none;filter:blur(0);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1),filter .7s ease}
[data-sy-stagger].sy-in>*:nth-child(1){transition-delay:.02s}
[data-sy-stagger].sy-in>*:nth-child(2){transition-delay:.09s}
[data-sy-stagger].sy-in>*:nth-child(3){transition-delay:.16s}
[data-sy-stagger].sy-in>*:nth-child(4){transition-delay:.23s}
[data-sy-stagger].sy-in>*:nth-child(5){transition-delay:.30s}
[data-sy-stagger].sy-in>*:nth-child(6){transition-delay:.37s}
[data-sy-stagger].sy-in>*:nth-child(7){transition-delay:.44s}
[data-sy-stagger].sy-in>*:nth-child(8){transition-delay:.51s}
[data-sy-stagger].sy-in>*:nth-child(n+9){transition-delay:.58s}
/* keep hover transforms working after reveal (uc/dt cards translate on hover) */
[data-sy-stagger].sy-done>*{transition-delay:0s!important}

/* ── 3. BUTTON SYSTEM ───────────────────────────────────────────────── */
.eb2-btn,.eb2-btn2,.gs-cta,.plan-cta,.btn-primary,.btn-ghost,.nav-login,.eb2-sound{
  position:relative;overflow:hidden;min-height:44px;touch-action:manipulation;cursor:pointer;-webkit-tap-highlight-color:transparent}
/* sheen sweep across gold primaries */
.eb2-btn::after,.gs-cta::after,.btn-primary::after,.plan-cta-primary::after{
  content:'';position:absolute;top:0;bottom:0;left:-70%;width:46%;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.5) 50%,transparent);
  transform:skewX(-18deg);opacity:0;transition:none}
.eb2-btn:hover::after,.gs-cta:hover::after,.btn-primary:hover::after,.plan-cta-primary:hover::after{
  opacity:.85;animation:sySheen .8s cubic-bezier(.4,0,.2,1) forwards}
@keyframes sySheen{to{left:130%}}
/* press feedback */
.eb2-btn:active,.eb2-btn2:active,.gs-cta:active,.plan-cta:active,.btn-primary:active,.btn-ghost:active,.nav-login:active{transform:translateY(0) scale(.975)}
/* consistent visible focus */
.eb2-btn:focus-visible,.eb2-btn2:focus-visible,.gs-cta:focus-visible,.plan-cta:focus-visible,
.btn-primary:focus-visible,.btn-ghost:focus-visible,.nav-login:focus-visible,.nav-link:focus-visible,
.nav-secondary:focus-visible,.eb2-sound:focus-visible{
  outline:2px solid var(--sy-gold);outline-offset:3px;border-radius:100px}
/* ghost buttons — gold underglow fill on hover */
.eb2-btn2,.btn-ghost,.plan-cta-ghost{transition:border-color .25s,color .25s,background .25s,transform .2s}
.eb2-btn2:hover,.btn-ghost:hover,.plan-cta-ghost:hover{background:rgba(232,200,122,.08);border-color:rgba(232,200,122,.55)}
/* arrow micro-motion on any button that ends with an arrow character */
.sy-arrow{display:inline-block;transition:transform .25s cubic-bezier(.22,1,.36,1)}
a:hover .sy-arrow,button:hover .sy-arrow{transform:translateX(4px)}

/* ── reduced motion: everything static + visible ────────────────────── */
@media(prefers-reduced-motion:reduce){
  .sy-pipe-fill{transform:scaleY(1)!important;transition:none}
  .sy-step-num,.sy-step-body,.sy-step::before{transition:none!important}
  .sy-step .sy-step-body{opacity:1;transform:none}
  .sy-step-num{color:rgba(245,241,236,.5)}
  .sy-pipe-visual .sy-shot{transition:none}
  [data-sy-stagger]>*{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .eb2-btn::after,.gs-cta::after,.btn-primary::after,.plan-cta-primary::after{display:none}
}