/*
 * l-video - autoplay-muted-loop preview layer for video tiles.
 *
 * Ported from the LL2 playground POC (c-video-card preview half). The
 * primitive owns ONLY the preview layer styles - the host card's
 * structure, poster, overlay, content, and play button all belong to
 * the consumer block (e.g. blocks/testimonials).
 *
 * Loading contract (per .cursor/rules/lledsue-block-tiers.mdc, "Library
 * blocks"): loaded by consumer blocks via
 * `loadCSS('/blocks/l-video/l-video.css')` and `import` of
 * `l-video.js` at the top of their `<id>.js`. Author mode never
 * evaluates the consumer module, so these loads are EDS-mode-only by
 * construction. The host card must be `position: relative` for the
 * preview to anchor.
 *
 * Host contract: consumer marks the card host with
 *   class="<consumer>__card l-video"
 *   data-video-src="<url> [<url> ...]"
 *   data-preview="true"  (opt in to autoplay preview)
 * The EDS-mode module builds <video> or <iframe>, inserts it as the first
 * child of the host so the consumer's overlay / content layers paint
 * above it, and gates playback through an IntersectionObserver + the
 * l-video-manager's managed-active broadcast (when present).
 */

.l-video__preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
}

.l-video__preview--video {
  object-fit: cover;

  /* Fade in once `canplay` fires; the static poster shows through during
     buffer. */
  opacity: 0;
  transition: opacity 300ms ease;
}

.l-video__preview--video.is-ready {
  opacity: 1;
}

/* YouTube iframes don't honour object-fit; approximate "cover" by sizing
   to the card's height and letting the 16/9 aspect drive the width. The
   card root's overflow:hidden crops the inline excess. Works for any
   card aspect narrower than 16/9 (square, 3/2, 8/5 all qualify).

   Opacity fade mirrors the <video> branch: the runtime adds .is-ready
   on the iframe's load event so consumers can key reveal animations
   (poster fade-out, etc.) off the same class regardless of media kind. */
.l-video__preview--iframe {
  inset: 0;
  top: 50%;
  left: 50%;
  width: auto;
  height: 100%;
  aspect-ratio: 16 / 9;
  min-width: 100%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 300ms ease;
}

.l-video__preview--iframe.is-ready {
  opacity: 1;
}