/* ==========================================================================
   Featured case cards — scroll/hover hero video  (added 2026-08-15, fixed 2026-08-16)
   Each card's still cross-fades into its real site-hero loop when the card
   scrolls into view or is hovered, then fades back to the still when it leaves.

   The video carries poster="<the card screenshot>", so it shows the identical
   still while it loads — the fade reads as the photo "coming alive," with no
   black flash. is-playing is toggled the instant playback starts (see the JS):
   we must NOT keep a video-only element at opacity:0 while playing, or Chrome
   pauses it "to save power" and it never appears.

   Progressive enhancement: cards without a <video> keep the still. Loaded on
   the home page only, after main.css.
   ========================================================================== */

.featured-case-card__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  z-index: 1;                 /* above the still <img>, below the badge (z-index:2) */
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 2.2s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;       /* clicks pass straight through to the card link */
  will-change: opacity, transform;
  background: transparent;
}

.featured-case-card__media.is-playing .featured-case-card__video {
  opacity: 1;
  transform: scale(1);        /* slow, barely-perceptible settle */
}

/* Reduced motion: still reveal the site loop (it's the showcase), but drop the
   zoom and shorten the fade so there's no scaling/parallax motion. */
@media (prefers-reduced-motion: reduce) {
  .featured-case-card__video {
    transform: none !important;
    transition: opacity 0.4s ease;
  }
}