@layer motion {
  .js-reveal [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
    transition-delay: calc(var(--i, 0) * 70ms);
  }
  .js-reveal [data-reveal].in { opacity: 1; transform: none; }

  .js-reveal .section-head h2 .word {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.35em);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
    transition-delay: calc(120ms + var(--i, 0) * 35ms);
  }
  .js-reveal .section-head.in h2 .word { opacity: 1; transform: none; }
  .js-reveal .section-head h2 em { color: var(--muted); transition: color 0.8s var(--ease) 0.7s; }
  .js-reveal .section-head.in h2 em { color: var(--accent); }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
  }
}