@layer utilities {
  [data-reveal] {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--duration-medium) var(--ease-emphasis),
                transform var(--duration-medium) var(--ease-emphasis);
  }

  [data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
  }

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