[UI/UX Design] Respect prefers-reduced-motion across animations

[thlpkee20-wq]

Description

This is a UI/UX design task to make all motion respect prefers-reduced-motion. The fadeIn, shake, and hover-translate effects in src/index.css currently animate unconditionally. Design reduced-motion fallbacks and document the motion guidelines.

Requirements and context

• Must be accessible (WCAG 2.1 AA), responsive, and documented in the design system
• Should be consistent with existing patterns and easy to review
• Relevant code: src/index.css (.animate-fade-in, .animate-shake, .glass-card-interactive:hover)
• Provide non-animated alternatives that still convey state changes

Suggested execution

• Fork the repo and create a branch
• git checkout -b uiux/reduced-motion
• Implement changes
  • Add a prefers-reduced-motion: reduce media query disabling/softening animations
  • Ensure error feedback still reads clearly without the shake animation
  • Document the motion policy in the design system
• Validate accessibility and responsive assumptions

Test and commit

• Run checks
  • npm run lint and component/visual tests
• Cover edge cases
  • reduced-motion on/off, error feedback clarity, hover-lift removal, focus visibility
• Include screenshots/before-after and accessibility (axe) notes

Example commit message

design: respect prefers-reduced-motion

Guidelines

• Minimum 95 percent test coverage
• Clear documentation
• Timeframe: 96 hours