.scroll-reveal {
  opacity: 0;
  transition: opacity 620ms ease-out, transform 620ms ease-out;
  transition-delay: var(--scroll-reveal-delay, 0ms);
  will-change: opacity, transform;
}

.scroll-reveal--soft {
  transform: translate3d(0, 8px, 0);
}

.scroll-reveal.is-revealed {
  opacity: 1;
}

.scroll-reveal--soft.is-revealed {
  transform: translate3d(0, 0, 0);
}

@media (max-width: 1024px) {
  .scroll-reveal,
  .scroll-reveal--soft,
  .scroll-reveal.is-revealed,
  .scroll-reveal--soft.is-revealed {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0ms;
    will-change: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-reveal,
  .scroll-reveal--soft,
  .scroll-reveal.is-revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }
}