/* Alternating Media component — see site/assets/js/alternating-media.js and
   docs/ALTERNATING-MEDIA.md for the playlist format and how to wire this into a page. */
.alt-media {
  position: relative;
  overflow: hidden;
  background: var(--surface, #0d0d22);
}
.alt-media__layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 700ms ease;
  will-change: opacity;
}
.alt-media__layer.is-active {
  opacity: 1;
  z-index: 1;
}
.alt-media__layer img,
.alt-media__layer video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* No-JS / pre-hydration fallback: a plain <img> that ships in the markup so the
   hero is never blank while alternating-media.js loads, or if it fails/is disabled. */
.alt-media__fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.alt-media.is-active-js .alt-media__fallback {
  display: none;
}

/* prefers-reduced-motion: the JS also skips transitions/autoplay entirely, but this
   covers the brief window before JS finishes reading the media query. */
@media (prefers-reduced-motion: reduce) {
  .alt-media__layer {
    transition: none;
  }
}