/* Scroll-driven motion: layout + chrome for the scrub stages and the
 * progress-based reveals. All choreography lives in scrolly.js; this
 * file only positions things and neutralizes transitions that would
 * fight per-frame inline styles. */

/* ── Pinned demo stages ──
 * A tall track gives the scroll distance; the pin stays stuck for the
 * duration and the video's currentTime follows track progress. */
.scrub-track {
  height: 240svh;
  position: relative;
}

.scrub-pin {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scrub-frame {
  width: min(860px, 100%, calc((100svh - 11rem) * 1.6));
  position: relative;
}

/* the float animation fights the pinned scrub; keep these stages still */
.scrub-track .vg-fit { animation: none; }

/* replace the timer-driven underline with a scrub-driven progress bar */
.scrub-track .vg-fit::after { content: none; }
.scrub-track .vg-fit::before {
  inset: -14% -20%;
  height: auto;
  background: radial-gradient(55% 55% at 50% 42%, rgba(90, 167, 248, .12), transparent 72%);
}

.scrub-progress {
  margin-top: 15px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .07);
  overflow: hidden;
}

.scrub-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-lo), var(--accent-hi));
  transform: scaleX(0);
  transform-origin: left center;
}

.scrub-hint {
  margin-top: .8rem;
  text-align: center;
  font-family: 'DM Mono', monospace;
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--faint);
}

/* Reduced motion, or no JS: no pinning, no tall track; the demo sits
 * inline like a normal figure and the hint makes no sense. */
html:not(.scrolly-on) .scrub-track { height: auto; }
html:not(.scrolly-on) .scrub-pin {
  position: static;
  height: auto;
  padding: 2.5rem 0;
}
html:not(.scrolly-on) .scrub-hint,
html:not(.scrolly-on) .scrub-progress { display: none; }

@media (max-width: 900px) {
  .scrub-track { height: 210svh; }
  .scrub-frame { width: min(760px, 100%, calc((100svh - 9rem) * 1.55)); }
}