.reveal {
  --reveal-distance: 24px;
  --reveal-duration: 700ms;
  --reveal-delay: 0ms;
  --reveal-ease: ease;
  --reveal-scale: 0.98;

  opacity: 0;
  transform: translate3d(0, var(--reveal-distance), 0);
  transition:
    opacity var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease);
  transition-delay: var(--reveal-delay);
  will-change: opacity, transform;
}

.reveal-up {
  transform: translate3d(0, var(--reveal-distance), 0);
}

.reveal-down {
  transform: translate3d(0, calc(var(--reveal-distance) * -1), 0);
}

.reveal-left {
  transform: translate3d(calc(var(--reveal-distance) * -1), 0, 0);
}

.reveal-right {
  transform: translate3d(var(--reveal-distance), 0, 0);
}

.reveal-fade {
  transform: none;
}

.reveal-zoom {
  transform: scale(var(--reveal-scale));
}

.reveal-delay-1 {
  --reveal-delay: 90ms;
}

.reveal-delay-2 {
  --reveal-delay: 180ms;
}

.reveal-delay-3 {
  --reveal-delay: 270ms;
}

.reveal-delay-4 {
  --reveal-delay: 360ms;
}

.reveal-delay-5 {
  --reveal-delay: 450ms;
}

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

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