reduced-motion-enforcerlisted

# Reduced Motion Enforcer Around a third of adults have experienced some vestibular disturbance; for a meaningful number, a parallax hero or a zooming page transition isn't "a bit much" — it's nausea, vertigo, or a migraine. They've told the OS about it (`Reduce motion` on macOS/iOS, `Show animations` off on Windows, `prefers-reduced-motion` in every browser), and that setting is a request the page is expected to honour. WCAG 2.3.3 makes it a criterion. Treat it as part of the component, not a post-launch fix: every rule that moves something ships with the rule that stops it. The goal isn't a dead interface. It's the same interface with *displacement* removed and *state change* kept. Users with reduced motion on still need to see a card is hoverable, that content has arrived, that a toast appeared — they just need it to happen in place. ## Two layers of protection **1. A global filter at the end of the stylesheet, outside any `@layer`.** It's the safety net for anything a component forgot. Unlayered rules beat every cascade layer and `!important` beats everything else, so this is the one block that must not be layered — `cascading-specificity-guard`'s lint exempts it. It kills motion properties, not feedback: ```css @media (prefers-reduced-motion: reduce) { *, *::before, *::after { /* Only non-spatial properties may animate */ transition-property: opacity, color, background-color, border-color, box-shadow, fill, stroke !important; transition-duration: 150ms