# Foundations · Motion

Motion is functional, not decorative — it provides feedback (state change), continuity (route / modal transitions), and confirmation (success / commit).

## Durations

| Token | ms | Use |
|-------|-----|-----|
| `instant` | 0   | Reset / disable |
| `fast`    | 120 | Hover, focus, control state |
| `base`    | 200 | Tooltips, dropdowns |
| `slow`    | 320 | Modals, sheets, route transitions |
| `slower`  | 480 | Hero animations, marketing |

## Easing

| Token | Curve | Use |
|-------|-------|-----|
| `standard`  | `cubic-bezier(0.2, 0, 0, 1)`    | Default — most state changes |
| `enter`     | `cubic-bezier(0, 0, 0.2, 1)`    | Enter-only (decelerate to rest) |
| `exit`      | `cubic-bezier(0.4, 0, 1, 1)`    | Exit-only (accelerate away) |
| `emphasis`  | `cubic-bezier(0.2, 0, 0, 1.2)`  | Overshoot — success, commit, attention |

## Signature animation

`kdc-fade-up` — used on the product family for content reveal:

```css
@keyframes kdc-fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.kdc-fade-up { animation: kdc-fade-up 360ms cubic-bezier(0.2, 0, 0, 1) both; }
```

Stagger children at 40–60ms intervals.

## Rules

- ✅ Respect `prefers-reduced-motion: reduce` — collapse all transitions to ≤ 10ms.
- ✅ Use `fast` for state, `base` for surfaces, `slow` for layout shifts.
- ❌ Don't animate `width` / `height` — animate `transform` and `opacity`.
- ❌ Don't bounce or spin without reason. Loading spinners are the only exception.