@supports (animation-timeline: scroll()) {
  .hero-asset:not(.hero-asset--showcase) {
    animation: mediaFade linear both;
    animation-timeline: scroll(root);
    animation-range: 0 30vh;
  }
}

@supports not (animation-timeline: scroll()) {
  .hero-asset:not(.hero-asset--showcase) {
    opacity: 1;
    transform: scale(1);
  }
}

.hero-asset--showcase {
  animation: productReveal 700ms var(--ease-enter) both;
}

@keyframes mediaFade {
  from {
    opacity: 0.78;
    transform: scale(0.98);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes productReveal {
  from {
    opacity: 0;
    translate: 0 var(--spacing-40);
  }

  to {
    opacity: 0.86;
    translate: 0 0;
  }
}


@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms;
    animation-iteration-count: 1;
    scroll-behavior: auto;
    transition-duration: 1ms;
    transition-delay: 0ms;
  }

  .animations-ready .animate-target {
    opacity: 1;
    transform: none;
  }
}