design: reduced-motion fallback spec per component

[kelvin1738-sys]

Overview

This PR closes issue #302 by authoring a per-component reduced-motion fallback specification and making every animated component honor it. Behavior under prefers-reduced-motion: reduce is now predictable and classified as fade-only, no motion, or dampened per the documented design-system spec (WCAG 2.1 AA).

Related Issue

Closes #302

Changes

Motion Specification

• [ADD] docs/uiux/reduced-motion-fallback-spec.md
  • Per-component fallback table covering Toast, Modal, Drawer (audit log + API key), Skeleton (shimmer + crossfade), Progress (wizard steps, attestation timeline, usage meter fill), Charts, FAB spinner, and address-autocomplete spinner
  • Each entry classified as fade-only, no motion, or dampened, with implementation file/CSS selectors pinned for reviewability
  • Rules for new animated components (motion tokens only, co-located @media (prefers-reduced-motion: reduce) override, useReducedMotion() for JS timing) and a validation checklist

Components updated to honor the spec

• [ADD] src/hooks/useReducedMotion.ts — reactive prefers-reduced-motion hook (with change listener)
• [MODIFY] src/components/ToastItem.tsx — enter/exit JS timers now collapse to 80 ms under reduced motion (previously hardcoded 300/200 ms); timers also corrected to the actual motion tokens (280/140 ms)
• [MODIFY] src/index.css — modal entrance (modal-in: fade + scale, --motion-duration-md) with fade-only fallback at --motion-duration-xs; wizard-progress and attestation-timeline transitions moved out of inline styles into classes with ransition: none reduced-motion overrides
• [MODIFY] src/components/WizardProgress.tsx / src/components/AttestationProgress.tsx — inline ransition/ ransform removed in favor of CSS classes (.wizard-progress-item, .wizard-progress-marker, .ap-step, .ap-step-panel, .ap-chevron)

Lint enforcement

• [ADD] eslint-rules/no-inline-motion.js — new �eritasor/no-inline-motion rule (warn) flagging direct ransition / �nimation usage in JSX style props, since inline motion cannot carry a reduced-motion override

Tests

• [ADD] CSS contract tests (src/test/motion-tokens.test.ts) — modal fade-only keyframe, wizard/attestation reduced-motion overrides
• [ADD] ToastItem reduced-motion timing tests (src/test/toast.test.tsx) — 80 ms vs 280 ms entrance, 80 ms exit
• [ADD] useReducedMotion hook tests (runtime preference changes, matchMedia fallback)
• [ADD] RuleTester tests for
  o-inline-motion
• [FIX] Pre-existing greedy-regex bug in the reduced-motion toast keyframe CSS test

Verification Results

pm run lint — exit 0 on all touched files (repo has pre-existing errors on main, untouched)

• sc -b — no new errors (3 ToastItem errors confirmed pre-existing on main)
• �itest run full suite — 75 failed / 1117 passed vs main baseline 81 failed / 1101 passed (net -6 failures, +12 new passing tests); remaining toast failures are pre-existing on main
• Focused suites: oast.test.tsx + motion-tokens.test.ts +
  o-inline-motion.test.js + useReducedMotion.test.tsx → 65 passed (7 failures are the pre-existing toast ones)

Acceptance Criteria

Acceptance Criteria	Status
Specification lists every animated component with its reduced-motion fallback	✅ Per-component table in docs/uiux/reduced-motion-fallback-spec.md
Fallback is one of fade-only / no motion / dampened	✅ Classified per row
Components honor the spec	✅ Modal, Toast, WizardProgress, AttestationProgress, (Drawer/Skeleton/UsageMeter already compliant)
Lint rule for direct transition usage	✅ �eritasor/no-inline-motion
WCAG 2.1 AA, responsive, documented in design system	✅ CSS-only fallbacks via prefers-reduced-motion, documented

[drips-wave]

@kelvin1738-sys Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

[kelvin1738-sys]

@thlpkee20-wq done closes #302