/* ============================================================================
   HeyaBud.ai — SCROLL SCRUB
   A tall block whose inner panel is sticky. As you scroll the block, the canvas
   scrubs through the frame sequence. Copy floats over the shot — no boxes.
   ========================================================================== */

.scrub{
  position:relative;
  height:340vh;                 /* the taller this is, the slower/smoother the scrub */
  margin:0;
}
.scrub-sticky{
  position:sticky; top:0;
  height:100vh; width:100%;
  overflow:hidden;
  background:var(--ink);
}
.scrub-canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
}

/* vignette so overlay copy always reads, whatever the frame is doing */
.scrub-sticky::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:
    linear-gradient(to right, rgba(6,9,10,.90) 0%, rgba(6,9,10,.55) 34%, transparent 62%),
    linear-gradient(to top, rgba(6,9,10,.85) 0%, transparent 40%);
}

/* copy layer */
.scrub-overlay{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center;
  pointer-events:none;
}
.scrub-overlay .wrap{width:100%}
.scrub-overlay a{pointer-events:auto}
.scrub-overlay h1{margin-bottom:22px}
.scrub-overlay .lede{margin-bottom:34px;max-width:44ch}

/* scroll hint */
.scrub-hint{
  position:absolute; left:50%; bottom:34px; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:9px;
  font-family:var(--mono); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); pointer-events:none;
}
.scrub-hint svg{width:15px;height:15px;stroke:var(--cyan);fill:none;stroke-width:1.8;animation:nudge 1.9s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(5px);opacity:1}}

/* If the sequence is missing we fall back to a single still — collapse the tall
   scroll block so the page doesn't have a huge dead region. */
.scrub.scrub-static{height:100vh}
.scrub.scrub-static .scrub-hint{display:none}
.scrub.scrub-dead{display:none}

@media(max-width:960px){
  .scrub{height:260vh}
  .scrub-sticky::after{
    background:
      linear-gradient(to top, rgba(6,9,10,.94) 0%, rgba(6,9,10,.55) 42%, transparent 70%);
  }
  .scrub-overlay{align-items:flex-end;padding-bottom:90px}
  .scrub-overlay .lede{max-width:100%}
}
@media(prefers-reduced-motion:reduce){
  .scrub{height:100vh}
  .scrub-hint{display:none}
}