@layer utilities {

  /* Rises in as it scrolls into view (site.js adds .is-visible). Without JS, it's just there. */
  .js .reveal {
    opacity: 0;
    translate: 0 24px;
    transition: opacity 0.7s ease, translate 0.7s ease;
  }

  .js .reveal.is-visible {
    opacity: 1;
    translate: 0 0;
  }

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