@media (prefers-reduced-motion: no-preference) {
  [data-hero-motion="crossfade"] {
    --hp-hero-fade-duration: 350ms;
  }

  [data-hero-motion="crossfade"] .hp-hero-slide {
    overflow: clip;
    /* Keep the outgoing photo opaque beneath the incoming slide. */
    transition: opacity 0s var(--hp-hero-fade-duration),
                visibility 0s var(--hp-hero-fade-duration);
  }

  [data-hero-motion="crossfade"] .hp-hero-slide.is-active {
    transition: opacity var(--hp-hero-fade-duration) ease;
  }

  [data-hero-motion="crossfade"] .hp-hero-image {
    transform: scale(1);
    /* Reset the outgoing zoom after the incoming slide covers it. */
    transition: transform 0s var(--hp-hero-fade-duration);
  }

  [data-hero-motion="crossfade"] .hp-hero-slide.is-active .hp-hero-image {
    transform: scale(1.1);
    transition: transform 7s linear;
  }

  @starting-style {
    [data-hero-motion="crossfade"] .hp-hero-slide.is-active .hp-hero-image {
      transform: scale(1);
    }
  }
}