/* ============================================================
   category-film.css — hover-activated motion for the homepage
   category cards.
   ------------------------------------------------------------
   The card is a still photograph by default. On hover, and ONLY on the
   hovered card, a silent loop crossfades in underneath the existing
   gradient and type. Nothing autoplays; three simultaneous loops would
   read as a website, not a campaign.

   The video sits directly above the poster <img> and below the card's
   gradient scrim, so the existing type keeps its exact contrast.
   ============================================================ */

.ds-film {
  --film-fade: 300ms;
  --film-ease: cubic-bezier(.22, .61, .36, 1);
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* match the stills: the campaign is monochrome end to end */
  filter: grayscale(1);
  opacity: 0;
  /* Never intercept the pointer: the whole card is the link target. */
  pointer-events: none;
  transition: opacity var(--film-fade) var(--film-ease);
  /* Promote once, so the crossfade cannot repaint the card's text. */
  will-change: opacity;
  backface-visibility: hidden;
}

/* JS adds this only after the loop is genuinely playing, so the fade can
   never reveal a black or half-decoded first frame. */
.ds-film.is-live { opacity: 1; }

/* Touch devices never hover, so they must never download a loop. The
   markup is inert there by design: js bails before assigning src. */
@media (hover: none), (pointer: coarse) {
  .ds-film { display: none; }
}

/* "If reduced motion is enabled: keep the still image only." Belt and
   braces: JS refuses to load, and CSS refuses to show. */
@media (prefers-reduced-motion: reduce) {
  .ds-film { display: none; }
}