.reveal {
  opacity: 0 !important;
  transform: translate3d(0, 24px, 0) !important;
  transition:
    opacity 700ms ease,
    transform 700ms ease !important;
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.reveal-left {
  transform: translate3d(-24px, 0, 0) !important;
}

.reveal-right {
  transform: translate3d(24px, 0, 0) !important;
}

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

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