/* ============================================================
   hero-film.css — the homepage hero as a six-second campaign shot
   ------------------------------------------------------------
   The still IS the hero and always paints first (it is the LCP element).
   The film is an enhancement layered directly on top of it: it fades in only
   once it is genuinely playing, runs once, and holds its final frame. It never
   loops — a hero that restarts every six seconds turns the homepage into a
   fairground, which is the opposite of a campaign opening.

   Stacking, deliberately: poster <picture> → film → scrim → headline/CTAs.
   The film sits UNDER the scrim so the existing text contrast behind
   STAY DANGEROUS is preserved exactly as it is on the still.
   ============================================================ */

.ds-hero-film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Identical fit to the poster <img> so frame 1 lands pixel-aligned on it
     and the crossfade is invisible. Change one, change both. */
  object-fit: cover;
  object-position: center;
  opacity: 0;
  pointer-events: none;
  /* Slow, so that even if frame 1 were a hair off the poster, nothing snaps. */
  transition: opacity 700ms cubic-bezier(.22, .61, .36, 1);
  will-change: opacity;
  backface-visibility: hidden;
}

/* Set by JS only after the 'playing' event, never on canplay alone: a fade
   started before frames are actually running is how you get a black flash. */
.ds-hero-film.is-live { opacity: 1; }

/* "Reduced-motion users see the static hero image only." JS also refuses to
   fetch it, so this is the second of two independent gates. */
@media (prefers-reduced-motion: reduce) {
  .ds-hero-film { display: none !important; }
}