prefers-reduced-motion enforcement

The full reduced-motion override

@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;
  }
}

This block goes at the END of your stylesheet (so it overrides everything). Wipes:

• All animations to ~0ms (essentially instant) — preserves animationend events.
• All transitions to ~0ms.
• Smooth scroll behavior.

Why not just animation: none?

Some libraries rely on animationend event firing. Setting duration to 0.01ms guarantees the event still fires (it just fires almost-instantly). animation: none would skip the event entirely and break the library.

Per-element exceptions

If you have ONE animation that's content (not decoration) — a chart that animates in real time, a video — you can opt back in:

.chart-animation { animation: chart 2s ease-in-out !important; }

But check whether it's truly content. Most "marketing-feel" animations should follow reduced-motion.

Test it

Mac: System Settings → Accessibility → Display → Reduce motion.

Chrome DevTools: Rendering panel → "Emulate CSS media feature prefers-reduced-motion."

Run both your animations + a real reduced-motion test before shipping.