.js-ready .reveal:not(.is-visible) {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
}

.js-ready .reveal {
  transition: opacity var(--motion-reveal) var(--ease-reveal),
    transform var(--motion-reveal) var(--ease-reveal);
}

.js-ready .reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.reveal-stagger > .reveal:nth-child(1) {
  transition-delay: 0ms;
}

.reveal-stagger > .reveal:nth-child(2) {
  transition-delay: var(--motion-stagger);
}

.reveal-stagger > .reveal:nth-child(3) {
  transition-delay: calc(2 * var(--motion-stagger));
}

.reveal-stagger > .reveal:nth-child(4) {
  transition-delay: calc(3 * var(--motion-stagger));
}

.reveal-stagger > .reveal:nth-child(n + 5) {
  transition-delay: var(--motion-stagger);
}

@media (prefers-reduced-motion: reduce) {
  .js-ready .reveal,
  .js-ready .reveal:not(.is-visible),
  .js-ready .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}