/* media-slot — a poster image with an optional lazy, in-view looping video.
 *
 * WHY: the <img> poster is what Google indexes (image search) and what paints
 * for LCP, so it's always present and always fast. The <video> loop is an
 * OPTIONAL upgrade layered on top, hydrated + played only when scrolled into
 * view (see media-slot.js). Poster-only pages (e.g. the library) just omit the
 * <video> and pay zero video cost.
 *
 * CLS: the figure reserves its box via aspect-ratio, so nothing shifts while
 * the poster (or loop) loads. Default ratio is the phone screen (1320x2868);
 * override per instance with inline `style="aspect-ratio: 16 / 9"` for diagrams.
 */
.media-slot {
  position: relative;
  width: 100%;
  aspect-ratio: 1320 / 2868;   /* reserves height -> no layout shift */
  overflow: hidden;
  border-radius: 28px;
  background: #0f1a2b;          /* poster-load placeholder tint */
}

.media-slot > .media-poster,
.media-slot > .media-loop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* the loop sits on top of the poster and fades in once it's actually playing,
 * so there's no black flash before the first frame decodes. */
.media-slot > .media-loop {
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}
.media-slot > .media-loop.is-playing {
  opacity: 1;
}

/* honour reduced-motion at the CSS layer too: never reveal the loop, keep the
 * poster. (media-slot.js also skips hydration for these users / Save-Data.) */
@media (prefers-reduced-motion: reduce) {
  .media-slot > .media-loop { display: none; }
}