/* ════════════════════════════════════════════════════════════════════════
   VIDEO-POSTER.CSS — Low-Bandwidth "Poster-First" Video Loading
   ------------------------------------------------------------------------
   ONLY ever renders when video-poster.js decides the visitor is on a
   slow/limited connection. On fast networks this file sits inert (the JS
   injects nothing, so no .lp-* element ever exists in the DOM).

   Stacking contract across the whole site:
     video (z-index 0)  <  .lp-poster (z-index 0, later in DOM)  <  labels
   pointer-events: none keeps every button / link fully clickable through
   the poster layer.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Base poster overlay ───────────────────────────────────────────────
   Absolutely positioned to exactly cover its video (which itself is
   position:absolute inset:0 in every player on the site). object-fit:
   cover mirrors the video rendering — perfectly responsive, zero
   distortion on any breakpoint, mobile or desktop. */
.lp-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;          /* clicks pass straight through to UI */
  z-index: 0;                    /* below labels (z:2) & overlays (z:1) */
  display: block;
  opacity: 0;                    /* hidden until the image has decoded  */
  transition: opacity 0.6s ease; /* the crossfade, video ⇄ poster       */
  will-change: opacity;
  background: transparent;
}

/* ── Visible state ─────────────────────────────────────────────────────
   Added from JS only *after* the poster image has fully loaded/decoded,
   so the reveal is instant (zero-intro) and can never flash a gap. The
   base rule above keeps opacity:0 as the resting state so a poster that
   has not yet loaded never paints a white/grey box. */
.lp-poster.lp-is-visible {
  opacity: 1;
}

/* ── Ready state (video can play) ──────────────────────────────────────
   JS adds .lp-is-ready when the video fires `canplay`. The poster fades
   out over 0.6s and is then removed from the DOM on `transitionend`, so
   no dead layer is ever left behind. */
.lp-poster.lp-is-ready {
  opacity: 0;
}

/* ── Rounded-card players ──────────────────────────────────────────────
   The showcase cards (.video-card) and portrait cards (.portrait-card)
   already clip with overflow:hidden + border-radius; the poster sits
   INSIDE those same clipping contexts so it inherits their rounded
   corners automatically. Declared explicitly to make the guarantee
   visible and future-proof. */
.video-card video + .lp-poster,
.portrait-card__video + .lp-poster {
  border-radius: inherit;
}

/* ── Hero exception: pixel-perfect match with .hero-bg-video ──────────
   The hero videos render with a slow Ken-Burns style scale + a right
   origin and a 30% left focal point, and they sit at 60% opacity beneath
   a dark gradient overlay. Mirroring ALL of that on the poster makes the
   crossfade mathematically invisible. The overlay (z-index:1) still sits
   on top of the poster (z-index:0), dimming it exactly like the video. */
.hero .lp-poster {
  transform: scale(1.12);
  transform-origin: right center;
  object-position: 30% center;
}
.hero .lp-poster.lp-is-visible {
  opacity: 0.6;   /* matches .hero-bg-video.active { opacity: .6 } */
}

/* ── Reduced-motion: kill the fade, swap instantly ─────────────────────
   Accessibility first: no motion for visitors who ask for none. JS also
   honours this (it removes the poster node immediately on canplay), but
   the CSS rule guarantees it even if scripting timing differs. */
@media (prefers-reduced-motion: reduce) {
  .lp-poster {
    transition: none;
  }
}