/* The moving image carries the atmosphere. Keep typography steady and readable. */
.hero-world {
  inset: 0;
  animation: none;
  will-change: auto;
  background-position: center;
}
.hero-film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.hero-world.has-video .hero-film {
  opacity: 1;
}
@media (max-width: 760px) {
  .hero-world {
    background-position: 50% center;
  }
  .hero-film {
    object-position: 50% center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-film {
    transition: none;
  }
}