/* Apple & Linear-style scroll choreography. Enabled only when JS adds .fx to <html>. */
.fx .hero-in{transform:translateY(calc(var(--hp,0)*44px)) scale(calc(1 - var(--hp,0)*.04));opacity:calc(1 - var(--hp,0)*.95);will-change:transform,opacity;transform-origin:50% 0}
.fx .hero-shot{will-change:transform}

/* statement: soft brand tint, pinned, words illuminate with scroll */
.stmt{position:relative;height:145vh;background:linear-gradient(180deg,var(--bg),var(--bg-elev) 22%,color-mix(in srgb,var(--brand-soft) 65%,var(--bg-elev)) 50%,var(--bg-elev) 78%,var(--bg));color:var(--ink)}
.stmt-pin{position:sticky;top:0;height:100vh;height:100dvh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:18px;padding:0 max(20px,calc((100vw - 980px)/2));overflow:hidden}
.stmt .eyebrow{color:var(--brand-hi);position:relative}
.stmt-text{position:relative;margin:0;font-size:clamp(28px,5.4vw,56px);line-height:1.22;font-weight:850;letter-spacing:-.025em}
.stmt-text .sw{color:color-mix(in srgb,var(--ink) 18%,transparent);transition:color .24s ease,text-shadow .24s ease}
.stmt-text .sw.on{color:var(--ink)}
.no-fx .stmt{height:auto;padding:80px 0}.no-fx .stmt-pin{position:static;height:auto}.no-fx .stmt-text .sw{color:var(--ink)}

/* cards: staggered rise with spring easing */
.fx .grid3 .card,.fx .grid4 .card,.fx .grid2 .card,.fx .steps li{opacity:0;transform:translateY(22px);transition:opacity .52s cubic-bezier(.2,.7,.2,1),transform .52s cubic-bezier(.2,.7,.2,1),box-shadow .24s,border-color .24s;transition-delay:calc(var(--i,0)*55ms)}
.fx .grid3 .card.sin,.fx .grid4 .card.sin,.fx .grid2 .card.sin,.fx .steps li.sin{opacity:1;transform:none;filter:none}

/* video showcase grows into frame like an Apple product film */
.fx .showcase .vid{transform:scale(calc(.86 + var(--vp,0)*.14));border-radius:calc(36px - var(--vp,0)*16px);will-change:transform}

/* process steps light up in sequence */
.fx .steps li{border-color:var(--line)}
.fx .steps li.sin{box-shadow:var(--neu-sm),0 0 0 1px var(--brand-soft)}

/* before/after slides in from sides */
.fx .ba-l{transform:translateX(calc((1 - var(--bp,1))*-40px));opacity:calc(.25 + var(--bp,1)*.75)}
.fx .ba-r{transform:translateX(calc((1 - var(--bp,1))*40px));opacity:calc(.25 + var(--bp,1)*.75)}

@media(prefers-reduced-motion:reduce){
  .stmt{height:auto;padding:80px 0}.stmt-pin{position:static;height:auto}.stmt-text .sw{color:var(--ink)}
  .fx .hero-in,.fx .showcase .vid,.fx .ba-l,.fx .ba-r{transform:none;opacity:1;border-radius:var(--r-panel)}
  .fx .grid3 .card,.fx .grid4 .card,.fx .grid2 .card,.fx .steps li{opacity:1;transform:none;filter:none}
}
#example{overflow-x:clip}