# Rule: animation

This is an editorial-print design. Motion is punctuation, not decoration.

## Budget

- **Purpose or nothing.** Motion may signal a state change, direct attention to
  what just changed, or smooth a layout shift. Nothing else.
- Duration: **150–250ms** for UI feedback, up to 400ms for a page transition.
  Longer reads as sluggish; shorter reads as a glitch.
- Easing: `cubic-bezier(.2,0,0,1)` for entrances, `ease-out` for exits. Never
  `linear` for anything a person watches. Never bounce/elastic — wrong register
  for this design.
- One thing moves at a time. Staggered cascades of cards are a template default;
  this site has a point of view and does not do them.

## `prefers-reduced-motion` is mandatory

Several current stylesheets already honour it. Every new animation must:

```css
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
```

Reduced motion means _reduced_, not _broken_: the end state must still be
correct and the interface still usable. Test it — in DevTools, Rendering →
Emulate `prefers-reduced-motion`.

## Performance

- Animate **`transform` and `opacity` only.** They composite on the GPU.
  Animating `width`, `height`, `top`, `left`, or `margin` forces layout on every
  frame and will show up as a failed INP.
- `will-change` only on an element about to animate, removed after. Leaving it
  on permanently costs memory and can _hurt_ performance.
- Prefer CSS transitions. Reach for the Web Animations API only for sequencing
  that CSS cannot express. Do not add an animation library — it is a runtime
  dependency on a site whose thesis is having none.
- INP budget is **200ms**. An animation that delays interaction response fails.

## Astro view transitions

If page transitions are wanted, use Astro's `<ClientRouter />`. It is the only
sanctioned motion dependency, and it must:

- degrade cleanly with JS disabled (it does — full navigation)
- respect `prefers-reduced-motion`
- not break the review desk's query-param deep links or browser back/forward

## Accessibility

- Never animate anything that conveys information on its own. Motion is
  redundant reinforcement.
- Nothing flashes more than three times per second.
- Focus must stay visible throughout a transition, and focus order must not
  change because of one.