# Task 18 — Motion pass

**Agent**: `motion-designer` · **Model**: Gemini (perceptual judgement)
**Depends on**: 15, 16 · **Parallel with**: 19 **Worktree**:
`.agents/scripts/worktree.sh start 18 motion`

## Goal

Audit the motion that exists, add only motion that earns its place, and make
`prefers-reduced-motion` correct everywhere.

## Order of work — audit first

The audit is worth more than the additions.

1. Inventory every `transition`, `animation`, `@keyframes`, `transform` in
   `src/`.
2. Flag anything animating a layout property (`width`, `height`, `top`, `left`,
   `margin`). Those force reflow every frame and fail the 200ms INP budget. The
   Stylelint config already blocks new ones; find the ported ones.
3. Confirm every animated element has a reduced-motion path, then **test it**
   under DevTools emulation. Reduced means reduced, not broken — end states must
   still be correct.

## Then, sparingly

Candidates, each needing a written purpose:

- tab panel change in the guide (state change — justified)
- review-desk detail swap on selection (state change — justified)
- vote widget tally update (feedback — justified)

`transform` and `opacity` only. 150–250ms. `cubic-bezier(.2,0,0,1)`. One thing
moves at a time — no staggered card cascades; this design has a point of view
and staggering reads as a template.

## View transitions — optional, decide explicitly

Astro's `<ClientRouter />` is the only sanctioned motion dependency. If adopted,
verify: JS-disabled navigation, browser back/forward, the review desk's six
query params, and reduced motion. If any fails, do not ship it.

## Done when

- [ ] Zero animations on layout properties
- [ ] Every animation has a one-line written purpose
- [ ] Reduced-motion tested under emulation; end states correct
- [ ] Before/after captures attached; `pnpm run gate` green