As a user with motion sensitivity I want animations to respect my OS reduced-motion preference so I am not affected by movement on screen

[ChristopherRotnes]

Summary

app/src/styles/app.css defines a fadeIn keyframe animation applied via the .fade-in class. Users who have enabled "Reduce motion" in their OS accessibility settings (Windows, macOS, iOS, Android) get no relief — the animation plays regardless. This can cause discomfort or nausea for users with vestibular disorders, and violates WCAG 2.3.3 (Animation from Interactions, AAA).

Priority

Low

Acceptance criteria

• A @media (prefers-reduced-motion: reduce) block is added to app.css that disables the .fade-in animation (sets animation: none; opacity: 1; transform: none)
• Any other CSS animations or transitions in the project are audited and similarly gated
• Tested by enabling "Reduce motion" in OS settings and confirming no animation plays on page load or view transitions

[ChristopherRotnes]

Verified on prod by developer.