/* Companion stylesheet for scroll-inline.js. Fills whatever container it's
   placed in (e.g. the existing .zz-img slot) — same object-fit:cover poster
   + video crossfade pattern as the hero engine, just not pinned. */

.scroll-inline {
  position: relative;
  overflow: hidden;
}

.scroll-inline__poster,
.scroll-inline__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scroll-inline__video {
  opacity: 0;
}
.scroll-inline[data-video-painted] .scroll-inline__video {
  opacity: 1;
}
.scroll-inline[data-video-painted] .scroll-inline__poster {
  opacity: 0;
}