/* One moving image plane, with a permanently opaque base under the crossfade.
   Text and controls remain outside this plane and never move with the artwork. */
.hero-slideshow {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  pointer-events: none; background: #0a0f14;
}
.hero-slideshow.is-animated {
  transform-origin: center;
  animation: pev-hero-drift 16s ease-in-out infinite alternate;
  will-change: transform;
}
/* Overscan always exceeds the translation, so movement cannot expose an edge.
   Alternating endpoints reverse continuously without resetting the picture. */
@keyframes pev-hero-drift {
  from { transform: translate3d(-.4%, .2%, 0) scale(1.035); }
  to { transform: translate3d(.4%, -.3%, 0) scale(1.075); }
}
.hero-slideshow > img {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center; opacity: 1;
  transform: none !important; transition: none !important; animation: none;
}
.hero-slideshow > .hero-slide-secondary { opacity: 0; }
.hero-slideshow.is-ready > .hero-slide-secondary {
  animation: pev-hero-crossfade 12s cubic-bezier(.4, 0, .2, 1) infinite;
}
.hero-slideshow.is-secondary-only > .hero-slide-secondary { opacity: 1; }
@keyframes pev-hero-crossfade {
  0%, 30%, 100% { opacity: 0; }
  50%, 80% { opacity: 1; }
}
.hero-slideshow.is-paused,
.pev-motion-paused .hero-slideshow,
.hero:focus-within .hero-slideshow,
.hei:focus-within .hero-slideshow,
.hero-slideshow.is-paused > .hero-slide-secondary,
.pev-motion-paused .hero-slideshow > .hero-slide-secondary,
.hero:focus-within .hero-slide-secondary,
.hei:focus-within .hero-slide-secondary { animation-play-state: paused; }
.hero-slideshow.is-paused { will-change: auto; }
/* The legacy banner title already occupies the same foreground as its video. */
.hei:has(> .hero-slideshow):not(.solution-hero) { isolation: isolate; overflow: hidden; }
.hei:has(> .hero-slideshow):not(.solution-hero)::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg, rgba(5,13,20,.85), rgba(5,13,20,.28));
  pointer-events: none;
}
.hei:has(> .hero-slideshow):not(.solution-hero) > :not(.hero-slideshow) { position: relative; z-index: 2; }

/* Editorial photographs keep their complete frame below the floating dock.
   A fixed-height cover crop can remove faces on wide or short displays. */
@media (min-width: 1025px) {
  body.pev-refined .hei:has(> .hero-slideshow):not(.solution-hero) {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin-top: 112px;
    min-height: 0;
    height: auto;
    aspect-ratio: 16 / 9;
    padding: clamp(28px, 3vw, 56px) var(--page-gutter, 24px);
  }
  body.pev-refined .hei:not(.solution-hero) > .hero-slideshow {
    animation: none;
    transform: none;
    will-change: auto;
  }
  body.pev-refined .hei:not(.solution-hero) > .hero-slideshow > img {
    object-fit: contain;
    object-position: center;
  }
  body.pev-refined .hei:has(> .hero-slideshow):not(.solution-hero)::after {
    background: linear-gradient(0deg, rgba(5,13,20,.90), rgba(5,13,20,.28) 26%, transparent 55%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slideshow.is-animated { animation: none; transform: none; will-change: auto; }
  .hero-slideshow.is-ready > .hero-slide-secondary { animation: none; opacity: 0; }
}

/* The story sequence overrides only its opt-in secondary plane. Its base stays opaque. */
.hero-slideshow.is-sequence { animation: none; transform: none; will-change: auto; }
.hero-slideshow.is-sequence > .hero-slide-base { opacity: 1; }
.hero-slideshow.is-sequence > .hero-slide-secondary {
  opacity: 0; animation: none;
  transition: opacity 420ms cubic-bezier(.4, 0, .2, 1) !important;
}
.hero-slideshow.is-sequence.is-sequence-secondary > .hero-slide-secondary { opacity: 1; }
.hero-slideshow.is-sequence.is-sequence-instant > .hero-slide-secondary { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .hero-slideshow.is-sequence > .hero-slide-secondary { transition: none !important; }
}