/* film.css, the scroll-hero stage (templates/film.css), paired with templates/film.js.
   The stage fills the whole screen above the fold (100lvh, never a max-height cap), the site header floats over it
   (position: absolute, transparent, never a solid bar that pushes the film down), and the section is SCREENS tall
   so the scroll drives the film. Set the colors and fonts from the brand; keep the structure.
   In <head>, before this file loads, set the mode so the tall driver exists from the first paint:
   <script>document.documentElement.dataset.film = matchMedia('(prefers-reduced-motion: reduce)').matches ? 'still' : 'scrub';</script> */
.film { position: relative; height: 100vh; height: 100lvh; background: #111; color: #fff; }
html[data-film="scrub"] .film { height: 600vh; height: 600lvh; } /* about 6 screens for a 30 s film; more on phones if one flick ends it */
/* 100lvh, not 100svh: on a phone the stage must still reach the bottom once the browser toolbar hides */
.film__stage { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; }
.film__poster img, .film__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.film__video { opacity: 0; } /* film.js fades each clip in over the poster */
.film__scrim {
  /* a scrim so the words stay readable over the film: from the side the copy sits on */
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,.42) 45%, rgba(0,0,0,0) 70%);
}
.film__copy { position: relative; z-index: 1; height: 100%; }
/* every beat sits in the same spot; lift it by the toolbar difference so it clears a phone's browser bar */
.film__intro, .film__beat { position: absolute; left: 24px; right: 24px; bottom: calc(clamp(56px, 9vh, 104px) + 100lvh - 100svh); }
.film__beat { opacity: 0; visibility: hidden; max-width: 16ch; margin: 0; font-size: clamp(2.4rem, 5.4vw, 4.6rem); line-height: 1.02; text-wrap: balance; }
html[data-film="still"] .film__beat { display: none; }

/* Portrait phone: its own 9:16 film; the words over the empty top of the frame, the subject below them */
@media (orientation: portrait) and (max-width: 820px) {
  .film__poster img, .film__video { object-position: 50% 100%; }
  .film__scrim { background: linear-gradient(180deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.55) 34%, rgba(0,0,0,0) 58%); }
  .film__intro, .film__beat { top: 96px; bottom: auto; }
  .film__beat { font-size: clamp(2.1rem, 9vw, 2.9rem); max-width: 12ch; }
}