/* A silent video sits exactly over the existing image. The image remains
   underneath for loading, errors, reduced motion and the exit fade. */
.hero-frag-video {
  position: absolute;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--lab-out) var(--lab-ease);
}

.lab--home .hero-frag-video { object-position: 50% 35%; }
.lab--home [data-frag^="systems-"] .hero-frag-video { object-position: center; }
.lab--home [data-frag^="systems-"] .hero-frag-media { container-type: size; }

/* The phone strip keeps the tile at 3:1 or squarer even when open. At the
   centre crop the film would show its old glass corner, so there the
   corrected poster and the film both crop lower, below that corner: the
   story plays on touch too (Alexa, 23.10.2026), and poster and film stay
   one picture. Below 3:2 the crop is by height and the position is moot. */
@container (max-aspect-ratio: 3 / 1) {
  .lab--home .hero-frag[data-frag^="systems-"] .hero-frag-media img,
  .lab--home .hero-frag[data-frag^="systems-"] .hero-frag-video { object-position: 50% 80%; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-frag-video { display: block; }
  .hero-frag.is-motion-visible .hero-frag-video {
    opacity: 1;
    transition-duration: var(--lab-in);
  }
  /* The corrected poster extends the glass beyond the frame. Reveal the
     existing film only after expansion crops its old corner out of view.
     On exit, fade the film before that corner can re-enter the closing tile. */
  .lab--home [data-frag^="systems-"] .hero-frag-video {
    transition-duration: calc(var(--lab-out) / 3);
  }
  .lab--home [data-frag^="systems-"].is-motion-visible .hero-frag-video {
    transition-duration: var(--lab-in);
    transition-delay: var(--lab-in);
  }
}

.hero-frag.is-motion-suppressed .hero-frag-video {
  opacity: 0;
  transition: none;
}