claude-code-workflow 7.2.27 → 7.2.28

package/.claude/skills/team-motion-design/roles/motion-tester/role.md

@@ -0,0 +1,175 @@
+---
+role: motion-tester
+prefix: MTEST
+inner_loop: false
+message_types: [state_update]
+---
+
+# Motion Performance Tester
+
+Test animation performance via Chrome DevTools performance traces and static code analysis. Verify compositor-only animations, measure FPS, detect layout thrashing, and validate prefers-reduced-motion accessibility compliance. Act as Critic in the animator<->motion-tester Generator-Critic loop.
+
+## Phase 2: Context & Artifact Loading
+
+| Input | Source | Required |
+|-------|--------|----------|
+| Animation files | <session>/animations/keyframes/*.css | Yes |
+| JS orchestrators | <session>/animations/orchestrators/*.js | Yes |
+| Motion tokens | <session>/choreography/motion-tokens.json | Yes |
+| Choreography sequences | <session>/choreography/sequences/*.md | Yes (component/page) |
+| GPU constraints | specs/gpu-constraints.md | Yes |
+| Reduced motion spec | specs/reduced-motion.md | Yes |
+| .msg/meta.json | <session>/wisdom/.msg/meta.json | Yes |
+
+1. Extract session path from task description
+2. Read all animation CSS files from animations/keyframes/
+3. Read all JS orchestrator files from animations/orchestrators/
+4. Read motion tokens for reference values
+5. Read choreography sequences for expected behavior
+6. Read GPU constraints and reduced motion specs for validation rules
+
+## Phase 3: Test Execution
+
+### Test 1: Compositor-Only Verification
+
+Scan all CSS @keyframes and transition properties for unsafe values:
+
+**SAFE** (compositor thread, no repaint):
+- `transform` (translate, scale, rotate, skew)
+- `opacity`
+- `filter` (blur, brightness, contrast)
+- `backdrop-filter`
+
+**UNSAFE** (trigger layout/paint):
+- `width`, `height`, `top`, `left`, `right`, `bottom`
+- `margin`, `padding`, `border`
+- `font-size`, `color`, `background-color`
+- `box-shadow` (partial -- expensive paint)
+
+For each animation file:
+1. Parse @keyframes blocks, extract animated properties
+2. Parse transition declarations, extract properties
+3. Flag any UNSAFE property with file:line reference
+4. Score: `safe_percentage = safe_count / total_count * 100`
+
+### Test 2: Frame Rate Analysis
+
+**If Chrome DevTools MCP available**:
+1. `mcp__chrome-devtools__performance_start_trace()` -- start recording
+2. `mcp__chrome-devtools__evaluate_script({ expression: "/* trigger animations */" })` -- trigger
+3. `mcp__chrome-devtools__performance_stop_trace()` -- stop recording
+4. `mcp__chrome-devtools__performance_analyze_insight()` -- analyze
+5. Extract: average FPS, minimum FPS, frame drops, long frames (>16.67ms)
+6. Target: average >= 60fps, minimum >= 45fps, no consecutive drops
+
+**If Chrome DevTools unavailable** (static analysis fallback):
+1. Count total animated properties per frame (concurrent animations)
+2. Estimate frame budget: < 5ms style+layout, < 5ms paint+composite
+3. Flag: >10 concurrent animations, nested animations, forced synchronous layouts
+4. Mark `_source: "static-analysis"` and note limitations
+
+### Test 3: Layout Thrashing Detection
+
+Scan JS orchestrators for read-write-read patterns:
+
+**Thrashing patterns** (DOM read -> write -> read in same frame):
+- `offsetHeight` / `offsetWidth` read followed by style write followed by read
+- `getBoundingClientRect()` interleaved with style mutations
+- `getComputedStyle()` followed by DOM writes
+
+For each JS file:
+1. Parse for DOM read APIs: `offsetHeight`, `offsetWidth`, `clientHeight`, `getBoundingClientRect`, `getComputedStyle`, `scrollTop`, `scrollHeight`
+2. Check if style writes (`.style.*`, `.classList.*`, `.setAttribute`) occur between reads
+3. Flag thrashing sequences with file:line references
+
+### Test 4: will-change Audit
+
+1. Count elements with `will-change` in CSS
+2. Flag if count > 4 (memory cost)
+3. Check for `will-change: auto` on collections (anti-pattern)
+4. Verify will-change is removed after animation completes (in JS orchestrators)
+5. Check for missing will-change on heavily animated elements
+
+### Test 5: Reduced Motion Compliance
+
+1. Verify `@media (prefers-reduced-motion: reduce)` block exists
+2. Check all animation-duration and transition-duration are overridden
+3. Verify scroll-behavior set to auto
+4. Check JS for `matchMedia('(prefers-reduced-motion: reduce)')` detection
+5. Verify parallax effects disabled in reduced motion
+6. Verify no auto-playing or infinite loop animations in reduced motion
+
+### Perceived Performance Checks
+| Check | Pass Criteria |
+|-------|---------------|
+| Preemptive animation start | Hover/click animations start on pointerdown, not click |
+| No height/width animation | Grid-template-rows trick used instead of height transitions |
+| Ease-in for progress | Progress indicators use ease-in (compresses perceived wait) |
+| Ease-out for entrances | Content entrances use ease-out (natural settle) |
+
+**Scoring**:
+
+| Check | Weight | Criteria |
+|-------|--------|----------|
+| Compositor-only | 30% | 100% safe = 10, each unsafe -2 |
+| Frame rate | 25% | >= 60fps = 10, 50-59 = 7, 40-49 = 4, < 40 = 1 |
+| Layout thrashing | 20% | 0 instances = 10, each instance -3 |
+| will-change budget | 10% | <= 4 = 10, 5-6 = 7, 7+ = 3 |
+| Reduced motion | 15% | All 5 checks pass = 10, each miss -2 |
+
+**Overall score**: `round(compositor*0.30 + fps*0.25 + thrashing*0.20 + willchange*0.10 + reducedmotion*0.15)`
+
+**Signal determination**:
+
+| Condition | Signal |
+|-----------|--------|
+| Score >= 8 AND no layout thrashing AND FPS >= 60 | `perf_passed` (GATE PASSED) |
+| Score >= 6 AND no critical issues | `perf_warning` (REVISION SUGGESTED) |
+| Score < 6 OR layout thrashing OR FPS < 60 | `fix_required` (CRITICAL FIX NEEDED) |
+
+## Phase 4: Report & Output
+
+1. Write performance report to `<session>/testing/reports/perf-report-{NNN}.md`:
+   ```markdown
+   # Performance Report {NNN}
+
+   ## Summary
+   - Overall Score: X/10
+   - Signal: perf_passed|perf_warning|fix_required
+   - Source: chrome-devtools|static-analysis
+
+   ## Compositor-Only Verification
+   - Safe: X/Y properties (Z%)
+   - Unsafe properties found:
+     - [file:line] property: suggestion
+
+   ## Frame Rate
+   - Average FPS: X
+   - Minimum FPS: X
+   - Frame drops: X
+   - Long frames (>16.67ms): X
+
+   ## Layout Thrashing
+   - Instances found: X
+   - Details:
+     - [file:line] pattern: description
+
+   ## will-change Audit
+   - Elements with will-change: X
+   - Budget status: OK|OVER
+   - Issues:
+     - [file:line] issue: description
+
+   ## Reduced Motion Compliance
+   - @media query present: yes|no
+   - Duration override: yes|no
+   - JS detection: yes|no
+   - Parallax disabled: yes|no|N/A
+   - No infinite loops: yes|no
+
+   ## Recommendations
+   1. [Priority] Description
+   ```
+
+2. Update `<session>/wisdom/.msg/meta.json` under `motion-tester` namespace:
+   - Read existing -> merge `{ "motion-tester": { report_id, score, signal, fps_average, safe_percentage, thrashing_count, will_change_count, reduced_motion_complete } }` -> write back

package/.claude/skills/team-motion-design/specs/gpu-constraints.md

@@ -0,0 +1,114 @@
+# GPU Constraints
+
+Compositor-only animation rules for 60fps performance.
+
+## Property Classification
+
+### SAFE Properties (Compositor Thread, No Repaint)
+
+These properties are handled by the GPU compositor thread and do not trigger layout or paint:
+
+| Property | Examples | Notes |
+|----------|---------|-------|
+| `transform` | `translate()`, `scale()`, `rotate()`, `skew()` | Primary animation property |
+| `opacity` | `0` to `1` | Cheap compositor operation |
+| `filter` | `blur()`, `brightness()`, `contrast()`, `saturate()` | GPU-accelerated in modern browsers |
+| `backdrop-filter` | `blur()`, `brightness()` | Composited separately |
+
+### UNSAFE Properties (Trigger Layout/Paint)
+
+**NEVER animate these properties** -- they force layout recalculation and/or paint:
+
+| Property | Impact | Alternative |
+|----------|--------|-------------|
+| `width` | Layout | `transform: scaleX()` |
+| `height` | Layout | `transform: scaleY()` |
+| `top` | Layout | `transform: translateY()` |
+| `left` | Layout | `transform: translateX()` |
+| `right` | Layout | `transform: translateX()` (negative) |
+| `bottom` | Layout | `transform: translateY()` (negative) |
+| `margin` | Layout | `transform: translate()` |
+| `padding` | Layout | Use inner element with transform |
+| `border` | Layout + Paint | `outline` (no layout) or `box-shadow` |
+| `font-size` | Layout | `transform: scale()` |
+| `color` | Paint | Overlay with `opacity` |
+| `background-color` | Paint | Overlay element with `opacity` |
+| `box-shadow` | Paint | Use `filter: drop-shadow()` or pre-rendered layers |
+
+## will-change Budget
+
+### Rules
+
+1. **Max 3-4 elements** with `will-change` simultaneously
+2. **Remove after animation completes** -- do not leave permanent will-change
+3. **Never use `will-change: auto`** on collections or many elements
+4. **Explicit properties only**: `will-change: transform` or `will-change: opacity`, not `will-change: all`
+
+### Implementation Pattern
+
+```css
+/* Static: no will-change */
+.element {
+  transition: transform var(--duration-base) var(--ease-out);
+}
+
+/* Add will-change just before animation via JS */
+.element.will-animate {
+  will-change: transform;
+}
+
+/* Or via CSS for hover-triggered animations */
+.element:hover {
+  will-change: transform;
+}
+```
+
+```javascript
+// JS: add before, remove after
+element.style.willChange = 'transform';
+element.addEventListener('transitionend', () => {
+  element.style.willChange = 'auto';
+}, { once: true });
+```
+
+### Layer Promotion
+
+- `transform: translateZ(0)` or `will-change: transform` promotes to own compositor layer
+- Each layer costs GPU memory (~width * height * 4 bytes)
+- Avoid promoting too many layers -- profile with Chrome DevTools Layers panel
+- Use sparingly: hero elements, frequently animated elements, scroll-linked elements
+
+## Performance Targets
+
+| Metric | Target | Budget |
+|--------|--------|--------|
+| Frame rate | 60fps | 16.67ms per frame |
+| Style + Layout | < 5ms | ~30% of frame budget |
+| Paint + Composite | < 5ms | ~30% of frame budget |
+| JavaScript | < 5ms | ~30% of frame budget |
+| Idle buffer | ~1.67ms | Headroom for GC, etc. |
+
+## Measurement
+
+### Chrome DevTools Performance Panel
+1. Record performance trace during animation
+2. Check "Frames" section for frame drops (red/yellow bars)
+3. Check "Main" thread for long tasks during animation
+4. Check "Compositor" thread for smooth operation
+5. Look for "Layout" and "Paint" events during animation (should be minimal)
+
+### Key Indicators of Problems
+- Purple "Layout" bars during animation = layout-triggering property
+- Green "Paint" bars during animation = paint-triggering property
+- Red frame markers = dropped frames (>16.67ms)
+- "Forced reflow" warnings = layout thrashing in JS
+
+## Quick Reference Card
+
+```
+ANIMATE:  transform, opacity, filter
+AVOID:    width, height, top, left, margin, padding, color, background-color
+BUDGET:   will-change on max 3-4 elements, remove after use
+TARGET:   60fps = 16.67ms per frame
+MEASURE:  Chrome DevTools Performance panel
+```

package/.claude/skills/team-motion-design/specs/motion-tokens.md

@@ -0,0 +1,128 @@
+# Motion Token Schema
+
+Animation token system for consistent motion design. Derived from Impeccable design principles.
+
+## Easing Functions
+
+| Token | Value | Use Case |
+|-------|-------|----------|
+| ease-out | `cubic-bezier(0.16, 1, 0.3, 1)` | Emphasis exit, deceleration. Elements entering view. |
+| ease-in-out | `cubic-bezier(0.65, 0, 0.35, 1)` | Smooth symmetrical. State changes, toggles. |
+| ease-spring | `cubic-bezier(0.34, 1.56, 0.64, 1)` | Overshoot bounce. Playful interactions, notifications. |
+
+**Usage guidelines**:
+- `ease-out` is the default for most animations (content reveals, transitions)
+- `ease-in-out` for reversible state changes (expand/collapse, toggle)
+- `ease-spring` sparingly for emphasis (new item added, attention-grabbing)
+- Never use `ease-in` alone (feels sluggish for UI)
+
+## Duration Scale
+
+| Token | Value | Use Case |
+|-------|-------|----------|
+| fast | `0.15s` | Micro-interactions: button press, toggle, checkbox |
+| base | `0.3s` | Standard transitions: hover, focus, dropdown |
+| slow | `0.6s` | Content reveals: card entry, panel slide, accordion |
+| slower | `0.8s` | Page transitions: route change, large element moves |
+| slowest | `1.2s` | Hero animations: splash screen, onboarding, first load |
+
+**Guidelines**:
+- Faster for small elements, slower for large elements
+- Faster for frequent interactions, slower for infrequent
+- Never exceed 1.2s for any single animation
+- Total page animation sequence should complete within 2s
+
+## Stagger Formula
+
+```
+delay = base_delay + (index * stagger_increment)
+```
+
+| Parameter | Typical Value | Range |
+|-----------|---------------|-------|
+| base_delay | `0s` | 0-0.1s |
+| stagger_increment | `0.05s` | 0.03-0.1s |
+| max visible stagger | 8 items | -- |
+
+**Guidelines**:
+- Max 8 items in a stagger sequence (avoid >0.8s total delay)
+- For >8 items: batch into groups of 4-6 with group-level stagger
+- Stagger increment scales with duration: fast animations use smaller increments
+- First item always has 0 delay (no waiting)
+
+## CSS Custom Property Format
+
+```css
+:root {
+  /* Easing functions */
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+
+  /* Duration scale */
+  --duration-fast: 0.15s;
+  --duration-base: 0.3s;
+  --duration-slow: 0.6s;
+  --duration-slower: 0.8s;
+  --duration-slowest: 1.2s;
+
+  /* Stagger */
+  --stagger-increment: 0.05s;
+}
+```
+
+## Token Consumption Pattern
+
+```css
+/* Correct: consume tokens via custom properties */
+.card-enter {
+  animation: fade-up var(--duration-slow) var(--ease-out) both;
+}
+
+/* Correct: stagger via inline style or calc */
+.card-enter:nth-child(n) {
+  animation-delay: calc(var(--stagger-increment) * var(--stagger-index, 0));
+}
+
+/* WRONG: hardcoded values */
+.card-enter {
+  animation: fade-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; /* BAD */
+}
+```
+
+## JSON Token Format
+
+```json
+{
+  "easing": {
+    "ease-out": {
+      "value": "cubic-bezier(0.16, 1, 0.3, 1)",
+      "use": "exit emphasis, deceleration",
+      "css_property": "--ease-out"
+    },
+    "ease-in-out": {
+      "value": "cubic-bezier(0.65, 0, 0.35, 1)",
+      "use": "smooth symmetrical",
+      "css_property": "--ease-in-out"
+    },
+    "ease-spring": {
+      "value": "cubic-bezier(0.34, 1.56, 0.64, 1)",
+      "use": "overshoot bounce",
+      "css_property": "--ease-spring"
+    }
+  },
+  "duration": {
+    "fast": { "value": "0.15s", "use": "micro-interactions", "css_property": "--duration-fast" },
+    "base": { "value": "0.3s", "use": "standard transitions", "css_property": "--duration-base" },
+    "slow": { "value": "0.6s", "use": "content reveals", "css_property": "--duration-slow" },
+    "slower": { "value": "0.8s", "use": "page transitions", "css_property": "--duration-slower" },
+    "slowest": { "value": "1.2s", "use": "hero animations", "css_property": "--duration-slowest" }
+  },
+  "stagger": {
+    "base_delay": "0s",
+    "increment": "0.05s",
+    "max_items": 8,
+    "css_property": "--stagger-increment"
+  }
+}
+```

package/.claude/skills/team-motion-design/specs/pipelines.md

@@ -0,0 +1,74 @@
+# Pipeline Definitions
+
+Motion design pipeline modes and task registry.
+
+## Pipeline Modes
+
+| Mode | Description | Task Count |
+|------|-------------|------------|
+| tokens | Animation token system: research -> choreography -> animation -> test | 4 tasks |
+| component | Component animation with GC loop for performance | 4 tasks (+fix) |
+| page | Full page scroll choreography with parallel animations | 4+N tasks |
+
+## Tokens Pipeline Task Registry
+
+| Task ID | Role | blockedBy | Description |
+|---------|------|-----------|-------------|
+| MRESEARCH-001 | motion-researcher | [] | Audit existing animations, measure perf baseline, catalog easing patterns |
+| CHOREO-001 | choreographer | [MRESEARCH-001] | Design motion token system (easing, duration, stagger, reduced-motion) |
+| ANIM-001 | animator | [CHOREO-001] | Implement CSS custom properties, utility animations, reduced-motion overrides |
+| MTEST-001 | motion-tester | [ANIM-001] | Verify compositor-only, FPS, will-change budget, reduced-motion compliance |
+
+## Component Pipeline Task Registry
+
+| Task ID | Role | blockedBy | Description |
+|---------|------|-----------|-------------|
+| MRESEARCH-001 | motion-researcher | [] | Audit target component animations, measure perf baseline |
+| CHOREO-001 | choreographer | [MRESEARCH-001] | Design tokens + transition state diagrams + scroll sequences |
+| ANIM-001 | animator | [CHOREO-001] | Implement component animations: @keyframes, IntersectionObserver, rAF |
+| MTEST-001 | motion-tester | [ANIM-001] | Performance gate: FPS, compositor-only, layout thrashing, reduced-motion |
+
+GC loop: MTEST-001 -> ANIM-fix-1 -> MTEST-002 (max 2 rounds)
+
+## Page Pipeline Task Registry
+
+| Task ID | Role | blockedBy | Description |
+|---------|------|-----------|-------------|
+| MRESEARCH-001 | motion-researcher | [] | Full page animation audit, scroll section inventory |
+| CHOREO-001 | choreographer | [MRESEARCH-001] | Page-level motion tokens + scroll choreography per section |
+| ANIM-001..N | animator | [CHOREO-001] | Parallel: one ANIM task per scroll section (CP-3 Fan-out) |
+| MTEST-001 | motion-tester | [ANIM-001..N] | Full page performance validation after all sections complete |
+
+## Performance Gate (Sync Point)
+
+| Checkpoint | Task | Condition | Action |
+|------------|------|-----------|--------|
+| PERF-001: Performance Gate | MTEST-* completes | FPS >= 60, no thrashing, reduced-motion OK | Pipeline complete |
+| PERF-001: GC Loop | MTEST-* completes | FPS < 60 or thrashing | Create ANIM-fix task, new MTEST task (max 2 rounds) |
+
+## GC Loop Behavior
+
+| Signal | Condition | Action |
+|--------|-----------|--------|
+| perf_passed | Score >= 8, FPS >= 60, no thrashing | Performance gate passed -> pipeline complete |
+| perf_warning | Score 6-7, minor issues | gc_rounds < max -> create ANIM-fix task |
+| fix_required | Score < 6 or FPS < 60 or thrashing | gc_rounds < max -> create ANIM-fix task (CRITICAL) |
+| Any | gc_rounds >= max | Escalate to user: accept / try one more / terminate |
+
+## Parallel Spawn Rules
+
+| Mode | After | Spawn Behavior |
+|------|-------|----------------|
+| tokens | Sequential | One task at a time |
+| component | Sequential | One task at a time, GC loop on MTEST |
+| page | CHOREO-001 | Spawn ANIM-001..N in parallel (CP-3 Fan-out) |
+| page | All ANIM complete | Spawn MTEST-001 |
+
+## Output Artifacts
+
+| Task | Output Path |
+|------|-------------|
+| MRESEARCH-001 | <session>/research/*.json |
+| CHOREO-001 | <session>/choreography/motion-tokens.json + sequences/*.md |
+| ANIM-* | <session>/animations/keyframes/*.css + orchestrators/*.js |
+| MTEST-* | <session>/testing/reports/perf-report-{NNN}.md |

package/.claude/skills/team-motion-design/specs/reduced-motion.md

@@ -0,0 +1,129 @@
+# Reduced Motion Accessibility
+
+Implementation guidelines for `prefers-reduced-motion` compliance.
+
+## Strategy
+
+Wrap all motion in `@media` query, provide instant fallback. Users who prefer reduced motion should still perceive state changes but without disorienting movement.
+
+## CSS Implementation
+
+### Global Override
+
+```css
+@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;
+  }
+}
+```
+
+### Per-Component Override (Preferred)
+
+```css
+.card-enter {
+  animation: fade-up var(--duration-slow) var(--ease-out) both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .card-enter {
+    animation: fade-in 0.01ms linear both; /* opacity only, instant */
+  }
+}
+```
+
+### Parallax Disable
+
+```css
+.parallax-element {
+  transform: translateY(calc(var(--scroll-y) * 0.5));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .parallax-element {
+    transform: none !important;
+  }
+}
+```
+
+## JavaScript Detection
+
+```javascript
+// Check preference
+const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
+
+// Use in animation logic
+if (prefersReducedMotion.matches) {
+  // Skip parallax
+  // Disable spring/bounce animations
+  // Use instant transitions
+  // Skip scroll-linked transforms
+}
+
+// Listen for changes (user toggles setting)
+prefersReducedMotion.addEventListener('change', (event) => {
+  if (event.matches) {
+    disableMotion();
+  } else {
+    enableMotion();
+  }
+});
+```
+
+## Allowed in Reduced Motion
+
+These subtle effects are acceptable and help maintain usability:
+
+| Effect | Duration | Notes |
+|--------|----------|-------|
+| Opacity fades | < 0.15s | Short, non-directional |
+| Color transitions | < 0.15s | Subtle state indicator |
+| Essential state indicators | Instant | Focus rings, selection highlights |
+| Progress indicators | N/A | Spinner -> static progress bar |
+
+## Disallowed in Reduced Motion
+
+These effects must be completely disabled:
+
+| Effect | Reason | Fallback |
+|--------|--------|----------|
+| Parallax scrolling | Vestibular triggers | Static positioning |
+| Scroll-linked transforms | Continuous motion | No transform |
+| Bouncing/spring animations | Overshoot causes discomfort | Instant state change |
+| Auto-playing content | Unexpected motion | Pause by default |
+| Infinite loop animations | Continuous distraction | Single iteration or static |
+| Large-scale movements | Disorienting | Opacity fade only |
+| Zoom/scale animations | Vestibular triggers | Opacity fade |
+| Rotating animations | Vestibular triggers | Static or opacity |
+
+## Testing Checklist
+
+| Check | Method | Expected |
+|-------|--------|----------|
+| `@media` query present | Grep CSS for `prefers-reduced-motion` | At least one global override |
+| Duration override | Check `animation-duration` and `transition-duration` | Set to `0.01ms` |
+| Scroll behavior | Check `scroll-behavior` | Set to `auto` |
+| JS detection | Grep JS for `matchMedia.*reduced-motion` | Present with listener |
+| Parallax disabled | Check parallax elements in reduced motion | `transform: none` |
+| No infinite loops | Check `animation-iteration-count` | Set to `1` |
+| No auto-play | Check auto-playing animations | Paused or removed |
+
+## Implementation Order
+
+1. Add global CSS override first (catches everything)
+2. Add per-component overrides for nuanced fallbacks
+3. Add JS detection for runtime animation control
+4. Test with browser setting toggled ON
+5. Verify no motion remains except allowed effects
+
+## Browser Support
+
+- `prefers-reduced-motion: reduce` -- supported in all modern browsers
+- Safari 10.1+, Chrome 74+, Firefox 63+, Edge 79+
+- iOS Safari 10.3+ (respects system Accessibility settings)
+- Android Chrome 74+ (respects system Accessibility settings)