:root {
  --motion-fade: 450ms;
  --motion-mobile-width: 175%;
}
.hero-motion-layer {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--motion-fade) ease;
}
.motion-ready .hero-motion-layer {
  opacity: 1;
}
.hero-motion-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}
@media (max-width: 600px) {
  .hero-motion-layer {
    top: auto;
    height: var(--hero-mobile-art);
    overflow: hidden;
  }
  .hero-motion-video {
    position: absolute;
    width: var(--motion-mobile-width);
    max-width: none;
    height: auto;
    bottom: 0;
    right: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-motion-layer {
    transition: none;
  }
}