[data-section-reveal] {
  position: relative;
}

.has-section-reveal [data-section-reveal] > :not(svg) {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 720ms var(--ease), transform 720ms var(--ease);
  will-change: opacity, transform;
}

.has-section-reveal [data-section-reveal].is-section-visible > :not(svg) {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  .has-section-reveal [data-section-reveal] > :not(svg),
  .has-section-reveal [data-section-reveal].is-section-visible > :not(svg) {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
}