/*
 * scroll-film.css — the styles scroll-film.js expects.
 * Re-theme with the client's tokens; nothing here sets a brand colour or face.
 *
 * Base state (no JS / reduced motion): poster fills one screen, captions stack
 * underneath as an ordinary readable section. .film--live (added by the script)
 * turns it into the pinned, scrubbed film.
 */
.film {
  --film-ink: #fff;
  --film-scrim: rgba(0, 0, 0, .38);
  position: relative;
  background: #000;
  color: var(--film-ink);
}
.film__stage {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
}
.film__poster,
.film__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.film__canvas { opacity: 0; }

/* Legibility scrim: darker at the edges where captions sit, clear in the middle. */
.film__stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, var(--film-scrim) 0%, transparent 28%, transparent 62%, var(--film-scrim) 100%);
}

/* Static captions: a readable stack over the poster. */
.film__captions {
  position: relative; z-index: 2;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 1.5rem;
  padding: clamp(1.25rem, 5vw, 4rem);
}
.film__cap { margin: 0; max-width: 18ch; text-wrap: balance; }

/* ---------- live: pinned + scrubbed ---------- */
.film--live { height: var(--film-length, 500vh); }
.film--live .film__stage { position: sticky; top: 0; height: 100svh; }
.film--live .film__canvas { opacity: 1; }
.film--live.film--playing .film__poster { visibility: hidden; }
.film--live .film__captions { position: absolute; inset: 0; display: block; padding: 0; }
.film--live .film__cap {
  position: absolute;
  left: clamp(1.25rem, 6vw, 6rem);
  bottom: clamp(5rem, 14vh, 10rem);
  opacity: 0;
  transform: translateY(calc(var(--cap-shift, 1) * 1.5rem));
  will-change: opacity, transform;
}
/* Placement hooks — pick per caption so the type sits where the shot is quiet. */
.film--live .film__cap--right  { left: auto; right: clamp(1.25rem, 6vw, 6rem); text-align: right; }
.film--live .film__cap--top    { bottom: auto; top: clamp(5rem, 16vh, 10rem); }
.film--live .film__cap--center { left: 50%; bottom: 50%; text-align: center;
  transform: translate(-50%, calc(50% + var(--cap-shift, 1) * 1.5rem)); }

/* Progress hairline — tells the visitor the page is moving, not stuck. */
.film__progress {
  position: absolute; z-index: 3; left: 0; bottom: 0; height: 2px; width: 100%;
  transform-origin: 0 50%; transform: scaleX(var(--film-p, 0));
  background: currentColor; opacity: .7;
}
.film:not(.film--live) .film__progress { display: none; }

/* Scroll hint on the first screen only. */
.film__hint {
  position: absolute; z-index: 3; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
  font: 500 .75rem/1 var(--font-mono, ui-monospace, monospace); letter-spacing: .14em; text-transform: uppercase;
  opacity: calc(1 - var(--film-p, 0) * 20);
}
.film:not(.film--live) .film__hint { display: none; }

/* Static page (no JS / reduced motion): every caption sits on the poster at once, so darken it
   evenly; the edge-only scrim above is not enough for a stack of five lines. */
.film:not(.film--live) .film__stage::after { background: linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.2) 100%); }