# Motion

> Definí cómo y cuándo se mueve tu marca. Las animaciones sin criterio ensucian la experiencia; las que tienen propósito la elevan.

---

## Principles

Lista de 3 a 5 principios que gobiernan todas las decisiones de animación.

1. `[ Principio 1 — ej: "Propósito sobre decoración. Si quitarlo no rompe nada, no existe." ]`
2. `[ Principio 2 — ej: "Las transiciones comunican estado, no personalidad en exceso." ]`
3. `[ Principio 3 ]`
4. `[ Principio 4 — opcional ]`

---

## Duration Scale

| Token | Valor | Uso |
|---|---|---|
| `instant` | `[ N ]ms` | `[ Micro-interacciones, toggles ]` |
| `fast` | `[ N ]ms` | `[ Hover states, cambios de color ]` |
| `base` | `[ N ]ms` | `[ Transiciones estándar ]` |
| `slow` | `[ N ]ms` | `[ Reveals, entradas de sección ]` |
| `slower` | `[ N ]ms` | `[ Transiciones de página, layouts ]` |

---

## Easing Curves

| Token | Valor | Uso |
|---|---|---|
| `ease-default` | `cubic-bezier([ N, N, N, N ])` | `[ UI estándar ]` |
| `ease-in` | `cubic-bezier([ N, N, N, N ])` | `[ Salidas / exits ]` |
| `ease-out` | `cubic-bezier([ N, N, N, N ])` | `[ Entradas / entrances ]` |
| `ease-spring` | `cubic-bezier([ N, N, N, N ])` | `[ Hover, interacciones juguetonas ]` |
| `ease-linear` | `linear` | `[ Progreso, loaders ]` |

---

## What Animates

Lista de los elementos que sí tienen animación en el sistema.

- `[ ej: Hover states en botones, cards, links ]`
- `[ ej: Scroll-triggered reveals de secciones ]`
- `[ ej: Entradas de modal / drawer ]`
- `[ ej: Transiciones entre páginas ]`
- `[ ej: Estados de carga (loading states) ]`
- `[ Agregar los propios ]`

---

## What Does Not Animate

Lista de lo que explícitamente no se anima.

- `[ ej: La carga inicial de página — sin splash, sin fade-in de todo ]`
- `[ ej: Colores de fondo — cambio instantáneo ]`
- `[ ej: Tipografía — sin letter-spacing animado ni text shimmer ]`
- `[ Agregar los propios ]`

---

## Entrance Patterns

`[ Describí el patrón de entrada por defecto para elementos en scroll. ]`

```css
/* Ejemplo: opacity + translateY */
.reveal {
  opacity: 0;
  transform: translateY([ N ]px);
  transition:
    opacity [ N ]ms cubic-bezier(0, 0, 0.2, 1),
    transform [ N ]ms cubic-bezier(0, 0, 0.2, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
```

**Stagger entre hijos de un grupo**: `[ N ]ms por ítem`. Máximo `[ N ]` ítems con stagger — a partir de ahí se elimina el delay.

---

## Exit Patterns

`[ Describí el patrón de salida por defecto. Generalmente más rápido que la entrada. ]`

```css
/* Ejemplo */
.exit {
  opacity: 0;
  transform: translateY([ N ]px);
  transition: opacity [ N ]ms ease-in;
}
```

---

## Transition Patterns

### Entre secciones
`[ Describí cómo se comporta el scroll entre secciones. Smooth, overlap, fade, etc. ]`

### Horizontal scroll (si aplica)
`[ Si el sistema usa una sección con scroll horizontal forzado, describila acá. ]`

### Transición de página (si aplica)
`[ Si es multi-página, describí cómo entran y salen las páginas. ]`

---

## Interaction States

### Botones
- Hover: `[ Descripción del cambio ]`
- Active / press: `[ Descripción ]`
- Focus: `[ Estilo de outline — nunca eliminar el focus ring ]`
- Disabled: `[ Opacidad, cursor ]`

### Links inline
`[ Describí el hover de links de texto. Subrayado animado, cambio de color, etc. ]`

```css
/* Ejemplo: underline slide */
a {
  background-image: linear-gradient([ color ], [ color ]);
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  transition: background-size [ N ]ms ease-out;
}
a:hover { background-size: 100% 1px; }
```

### Cards
- Hover: `[ border, shadow, scale, o combinación ]`
- Transition: `[ N ]ms`

---

## Reduced Motion

Siempre respetar `prefers-reduced-motion`.

```css
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
```

`[ Listá qué elementos específicos del sistema tienen comportamiento alternativo cuando reduced motion está activo. ]`