/* ============================================================
   The scroll-scrubbed hero
   ============================================================ */
#scrub{height:520vh;position:relative;z-index:3}
.scrub-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  display:flex;align-items:center;justify-content:center}

/* the film plate */
#film{
  width:100vmin;height:100vmin;
  transform-origin:50% 50%;
  will-change:transform;
  background:#fbfcfe;
  /* Feathered edge. While the plate is scaled up to fill the screen the faded
     rim sits outside the viewport, so it only reveals itself as the film
     settles back into a square. */
  -webkit-mask-image:radial-gradient(closest-side,#000 62%,rgba(0,0,0,.62) 84%,transparent 100%);
  mask-image:radial-gradient(closest-side,#000 62%,rgba(0,0,0,.62) 84%,transparent 100%);
}
/* a soft white vignette so the square never shows a hard seam against the page */
.scrub-stage::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 92% 78% at 50% 50%,transparent 52%,rgba(247,249,252,.75) 100%)}

/* ---------- copy beats ---------- */
.beats{position:absolute;inset:0;z-index:4;pointer-events:none}
/* every beat is a full-height flex frame, so the copy can never run past
   the fold however long the line or however small the window */
.beat{position:absolute;inset:0;display:flex;align-items:center;
  padding:92px max(26px,calc(50vw - var(--max)/2)) 88px;
  opacity:0;will-change:opacity,transform}
.beat .in{max-width:min(34ch,560px)}
.beat.center{justify-content:center;text-align:center}
.beat.center .in{max-width:min(30ch,620px)}
.beat.low{align-items:flex-end;padding-bottom:13vh}
.beat h1{font-size:clamp(40px,7vw,88px);font-weight:700;letter-spacing:-.045em;line-height:.98}
.beat h2{font-size:clamp(21px,3.2vw,40px);font-weight:600;letter-spacing:-.032em;line-height:1.14}
.beat p{color:var(--ink-dim);font-size:clamp(13.5px,1.35vw,16px);margin:14px 0 0;max-width:36ch}
.beat.center p{margin-left:auto;margin-right:auto}
.beat .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.beat.center .cta{justify-content:center}
/* a white pad behind the words so they read over the film at any brightness */
.beat .in{position:relative}
.beat .in::before{content:'';position:absolute;inset:-26px -34px;z-index:-1;border-radius:40px;
  background:radial-gradient(ellipse 74% 78% at 34% 50%,rgba(247,249,252,.92),rgba(247,249,252,0) 76%)}
.beat.center .in::before{background:radial-gradient(ellipse 78% 82% at 50% 50%,rgba(247,249,252,.92),rgba(247,249,252,0) 74%)}

/* ---------- progress rail ---------- */
#scrubrail{position:absolute;left:26px;top:50%;transform:translateY(-50%);z-index:5;
  width:1px;height:min(320px,34vh);background:var(--line);overflow:hidden;border-radius:2px}
#scrubrail::after{content:'';position:absolute;left:0;top:0;width:100%;
  height:calc(var(--p,0) * 100%);
  background:linear-gradient(180deg,var(--gr),var(--cy) 40%,var(--vi) 78%,var(--mg));
  box-shadow:0 0 12px rgba(10,166,212,.6)}
@media(max-width:820px){#scrubrail{display:none}}

/* ---------- scroll cue ---------- */
.scrollcue{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:5;
  display:flex;align-items:center;gap:12px;
  font-family:'JetBrains Mono';font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-faint);transition:opacity .4s}
.scrub-stage.lit .scrollcue{opacity:0}
.scrollcue span{display:block;width:34px;height:1px;background:currentColor;position:relative;overflow:hidden}
.scrollcue span::after{content:'';position:absolute;inset:0;background:var(--cy);
  transform:translateX(-100%);animation:cue 2.6s cubic-bezier(.6,0,.2,1) infinite}
@keyframes cue{0%{transform:translateX(-100%)}55%{transform:translateX(0)}100%{transform:translateX(100%)}}

/* ---------- reduced motion: no scrub, one still, copy stacked ---------- */
@media(prefers-reduced-motion:reduce){
  #scrub{height:auto}
  .scrub-stage{position:relative;height:auto;flex-direction:column;padding:120px 0 60px}
  #film{transform:none !important;-webkit-mask-image:none;mask-image:none;
    width:min(560px,86vw);height:min(560px,86vw);border-radius:24px}
  .beats{position:static;padding-top:34px}
  .beat{position:static;opacity:1 !important;transform:none !important;margin:0 auto 42px;text-align:center}
  .beat .in{margin:0 auto}
  .beat .cta{justify-content:center}
  .scrollcue,#scrubrail{display:none}
  .scrub-stage::after{display:none}
}