/* Scroll-reveal: only takes effect once JS confirms it's running (see the
   inline `document.documentElement.classList.add('js')` in header.php), so
   content is never permanently hidden if JS fails to load. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity var(--duration-slow) var(--ease-standard),
              transform var(--duration-slow) var(--ease-standard);
}
.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

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