/* Content stays readable before JavaScript runs and if observation fails. */
.reveal.is-visible {
  animation: reveal-enter 400ms ease both;
}

@keyframes reveal-enter {
  from { transform: translateY(12px); }
  to { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal.is-visible {
    animation: none;
  }
}

/*
 * Respect the operating-system motion preference for every transition and
 * animation on the site, not only the entrance reveals handled above. Colour
 * transitions are kept effectively instant rather than removed, so state
 * changes remain perceivable.
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}