# Motion

IO uses Apple's easing curves for all transitions.

## Easing

```css
--ease-io:          cubic-bezier(0.25, 0.46, 0.45, 0.94)  /* Standard */
--ease-io-spring:   cubic-bezier(0.34, 1.56, 0.64, 1)     /* Springy */
--ease-io-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1.0)   /* Decelerate */
```

## Duration

```css
--duration-fast:   150ms  /* Micro-interactions, button hover */
--duration-base:   300ms  /* Most transitions */
--duration-slow:   500ms  /* Scroll animations */
--duration-slower: 700ms  /* Complex reveals */
```

## Scroll Animations

Add `.io-animate` to any element. It fades up when entering viewport.

```html
<div class="io-animate">Fades in on scroll</div>
<div class="io-animate io-animate-delay-2">Delayed 200ms</div>
```

Delay modifiers: `io-animate-delay-1` through `io-animate-delay-5` (100ms–500ms)

All animations respect `prefers-reduced-motion`.