/* Copy beside the site's CSS; keep these three values in its token file. */
.reveal-pending[data-reveal] {
  opacity: 0;
}

.reveal-pending[data-reveal="from-left"] {
  transform: translateX(calc(-1 * var(--reveal-distance)));
}

.reveal-pending[data-reveal="from-right"] {
  transform: translateX(var(--reveal-distance));
}

.reveal-pending[data-reveal="from-top"] {
  transform: translateY(calc(-1 * var(--reveal-distance)));
}

.reveal-pending[data-reveal="from-bottom"] {
  transform: translateY(var(--reveal-distance));
}

.reveal-visible[data-reveal] {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease);
}

/* Match this query to the site's breakpoint where the section becomes vertical. */
@media (max-width: 899px) {
  .reveal-pending[data-reveal] {
    transform: translateY(var(--reveal-distance));
  }
}

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