/* fx.css · story/video-scrub, a silent film scrubbed by the scroll · owner: Lizzy East · all rights reserved */

/* The stage holds still while the chapters scroll over it, and fx.js turns the film to
   the frame that matches how far you have read. The poster is the finished look:
   without script, with motion off, or before the film loads, it simply sits there.
   With motion off, or without sticky support, the stage and chapters are a plain stack. */
[data-fx~="story/video-scrub"] { position: relative; isolation: isolate; }
[data-fx~="story/video-scrub"] > [data-fx-stage] { position: relative; overflow: clip; background: var(--fx-scrub-bg, #111117); }
[data-fx~="story/video-scrub"] > [data-fx-stage] > video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
[data-fx~="story/video-scrub"] > [data-fx-over] {
  display: grid;
  gap: var(--fx-scrub-gap, 1.5rem);
  padding: var(--fx-scrub-pad, clamp(1.5rem, 4vw, 3rem));
}
[data-fx~="story/video-scrub"] > [data-fx-over] > * { max-width: var(--fx-scrub-card, 30rem); }
@media (prefers-reduced-motion: no-preference) {
  html:not(.fx-still) [data-fx~="story/video-scrub"] { min-height: var(--fx-scrub-length, 300vh); background: var(--fx-scrub-bg, #111117); }
  html:not(.fx-still) [data-fx~="story/video-scrub"] > [data-fx-stage] { position: sticky; top: 0; height: 100vh; height: 100svh; }
  html:not(.fx-still) [data-fx~="story/video-scrub"] > [data-fx-stage] > video { height: 100%; aspect-ratio: auto; }
  html:not(.fx-still) [data-fx~="story/video-scrub"] > [data-fx-over] { position: relative; z-index: 1; gap: 0; margin-top: -100vh; margin-top: -100svh; padding-block: 0; }
  html:not(.fx-still) [data-fx~="story/video-scrub"] > [data-fx-over] > * { display: grid; align-content: center; min-height: 100vh; min-height: 100svh; max-width: none; }
  html:not(.fx-still) [data-fx~="story/video-scrub"] > [data-fx-over] > * > * { max-width: var(--fx-scrub-card, 30rem); }
}