/* ============================================================
   DOUBLOON STUDIO · FILM PLAYER
   Owns .scene__stage and what is inside it, and the stage layout
   (.film-track, .film-stage, .film-beat) under html.film-on. Uses tokens only
   (css/tokens.css). Works with no script: each stage then shows its
   still as a plain image. js/film.js adds html.film-on when the film
   runs; every rule that changes layout is scoped under it.

   Layers inside .film, bottom to top:
     .film__clip   the video (hidden until JS marks it .is-on)
     .film__still  the plain still from the HTML (hidden while
                   .film.is-clip shows the video)
     .film__end    scene 7 only: the clip's last frame, after it plays
   Cuts are hard: no transition on any layer.
   ============================================================ */

.film {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--bg);
}

.film__still,
.film__still img,
.film__clip,
.film__end {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.film__clip {
  z-index: 1;
  opacity: 0;
}

.film__clip.is-on {
  opacity: 1;
}

.film__still {
  z-index: 2;
}

.film.is-clip .film__still {
  opacity: 0;
}

.film__end {
  z-index: 3;
  opacity: 0;
}

.film.is-end .film__end {
  opacity: 1;
}

/* Draft label. The data-standin attribute on the slot drives it, so
   removing that attribute when the real clip arrives removes it. */
.film[data-standin]::after {
  content: "Stand-in";
  position: absolute;
  z-index: 4;
  right: 0.75rem;
  bottom: 0.75rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--rule);
  background: var(--scrim);
  color: var(--text-muted);
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  pointer-events: none;
}

/* ---------- the stage (while the film runs) ---------- */

/* js/film.js adds html.film-on. Without it (scripts off, reduced
   motion, ?film=off) none of this applies and the scenes stack as plain
   sections, each with its still and its words.

   With it, the seven scenes sit on one stage, .film-stage, pinned with
   native sticky positioning inside one tall track, .film-track. The
   track is one beat per scene tall plus one screen; scrolling it moves
   nothing on the stage, it only passes the beat markers (.film-beat),
   and the script cuts to the next scene as each one goes by. After the
   last beat the track ends and the stage scrolls away with the page.
   Nothing here changes how the page scrolls: no snapping, no
   scroll-behavior, no scroll handling.

   --beat is the scroll distance from one scene to the next. Tall
   screens (phones): 80svh, about one easy thumb swipe. Wide screens:
   55svh, about five mouse wheel clicks at 100 px each on a 900 px
   tall window, or one gentle trackpad swipe. --last-hold is how far
   scene 7 stays before the stage lets go. */
.film-track {
  --scenes: 7;
  --screen: 1vh;
  --beat: calc(55 * var(--screen));
  --last-hold: var(--beat);
}

/* a custom property takes any value, so the svh line needs its own
   test; older browsers keep vh */
@supports (height: 1svh) {
  .film-track {
    --screen: 1svh;
  }
}

@media (max-aspect-ratio: 1/1) {
  .film-track {
    --beat: calc(80 * var(--screen));
  }
}

html.film-on .film-track {
  position: relative;
  height: calc(100vh + (var(--scenes) - 1) * var(--beat) + var(--last-hold));
  height: calc(100lvh + (var(--scenes) - 1) * var(--beat) + var(--last-hold));
}

.film-beat {
  position: absolute;
  left: 0;
  top: calc(var(--k, 0) * var(--beat));
  width: 1px;
  height: 1px;
  pointer-events: none;
  visibility: hidden;
}

/* The stage fills the largest screen the browser can show (lvh), so no
   edge of anything shows when a phone's toolbar slides away. The words
   on it keep to the smallest screen (svh), so a toolbar never covers
   them. Both units ignore the phone keyboard. */
html.film-on .film-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
  background: var(--bg);
}

/* Every scene sits on the same spot; only the current one is seen
   (that rule is in base.css). Cuts are hard: nothing fades. */
html.film-on .film-stage > .scene {
  position: absolute;
  inset: 0;
  min-height: 0;
  border-top: 0;
  align-items: start;
  transition: none;
}

html.film-on .film-stage > .scene[data-current] {
  z-index: 1;
}

html.film-on .film-stage .scene__words {
  height: 100vh;
  height: 100svh;
}

/* Only the current scene and its two neighbours keep their picture
   rendered (so a cut is instant); the rest load nothing until near. */
html.film-on .film-stage > .scene:not([data-current]):not([data-near]) .scene__stage {
  display: none;
}

/* A tap anywhere on the picture moves one beat forward (scene 7 has no
   tap, it has the name field). */
html.film-on .film-stage > .scene:not(#s7-yours) {
  cursor: pointer;
}