/* Responsive homepage hero video.
   The picture remains the resilient fallback until playback is confirmed. */
.hero__poster,
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__poster {
  z-index: 0;
  display: block;
  overflow: hidden;
  opacity: 1;
  transition: opacity 700ms var(--ease-out);
}

.hero__poster .hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 44%;
}

.hero__video {
  z-index: 1;
  display: block;
  object-fit: cover;
  object-position: center 44%;
  pointer-events: none;
  background: var(--dark-blue);
  opacity: 0;
  animation: hero-settle 1.5s var(--ease-out) both;
  transition: opacity 700ms var(--ease-out);
}

.hero.has-playing-video .hero__video {
  opacity: 1;
}

.hero.has-playing-video .hero__poster {
  opacity: 0;
}

/* The video remains visible enough to understand the treatment while the
   existing navy wash keeps every line of hero copy readable. */
.hero__wash {
  z-index: 2;
}

@media (width <= 820px) {
  .hero__poster .hero__image,
  .hero__video {
    object-position: center 46%;
  }

  .hero__wash {
    background:
      linear-gradient(
        180deg,
        rgb(2 23 34 / 38%) 0%,
        rgb(3 42 64 / 67%) 36%,
        rgb(2 23 34 / 91%) 70%,
        rgb(2 23 34 / 98%) 100%
      );
  }
}

@media (width <= 560px) {
  .hero__poster .hero__image,
  .hero__video {
    object-position: center center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__video {
    display: none;
    animation: none;
  }

  .hero__poster {
    opacity: 1;
    transition: none;
  }
}