---
title: "Movimiento"
description: "Cómo se mueven las cosas en los sitios de Nibiru — lentamente, silenciosamente y no muy a menudo."
---

## Principios

- **Menos es más.** Un solo respiro de 18 segundos es mejor que tres pulsaciones, cuatro giros y una subida gradual.
- **Solo transforma.** Anima `transform` y `opacity`. Evita `top`, `width`, `height` — causan trabajo de diseño.
- **Respete `prefers-reduced-motion`.** Cada fotograma clave del sistema está controlado por un media query.
- **El desplazamiento gana movimiento.** Los estados inactivos son estáticos. El movimiento ocurre cuando *haces* algo — desplazas una tarjeta, haces clic en el Oracle.

## Referencia de tokens

| Token | Valor | Uso |
|---|---|---|
| `--nibiru-duration-fast`    | 150ms | Transiciones en línea (enlaces, cambios sutiles) |
| `--nibiru-duration-normal`  | 220ms | Levantamientos de hover, transformaciones de botones, brillo de tarjetas |
| `--nibiru-duration-slow`    | 400ms | Paneles modales, revelación del oráculo |
| `--nibiru-duration-breathe` | 18s   | Respiración del loto héroe |
| `--nibiru-ease-out`         | `cubic-bezier(0.2, 0.7, 0.2, 1)` | Easing out por defecto |
| `--nibiru-ease-spring`      | `cubic-bezier(0.34, 1.56, 0.64, 1)` | Reservado para el levantamiento del panel del oráculo |

## El aliento

Un aumento de seis píxeles, una rotación en fracción de grado, durante más de 18 segundos. La loto está viva pero no solicita atención.
```css
@keyframes atelier-breathe {
  0%, 100% { transform: translateY(0)    rotate(0deg); }
  50%      { transform: translateY(-6px) rotate(0.6deg); }
}
.atelier-hero__mark {
  animation: atelier-breathe 18s ease-in-out infinite;
}
```
## El ascenso del oráculo

220ms de entrada. Una pequeña `translateY` y `scale(0.99)` para que se sienta como si creciera, no saliera repentinamente.
```css
@keyframes oracle-rise {
  from { opacity: 0; transform: translateY(10px) scale(0.99); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}
#oracle-panel.is-open {
  animation: oracle-rise 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
```
## El levantamiento por giro

Las tarjetas y el botón principal se elevan 1–2px al pasar el ratón encima, con una sombra más profunda.
```css
.card {
  transition: transform 240ms var(--nibiru-ease-out),
              box-shadow  240ms var(--nibiru-ease-out),
              border-color 240ms;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--nibiru-shadow-lg);
}
```
## Reducido movimiento
```css
@media (prefers-reduced-motion: reduce) {
  .atelier-hero__mark,
  .card,
  #oracle-panel.is-open {
    animation: none;
  }
}
```
El sitio todavía **se ve** bien con movimiento desactivado — las animaciones son decorativas, nunca informativas.

## No lo hagas

- No pulses. El Oracle es un tinta silenciosa, no una alarma de incendio.
- No combines múltiples animaciones en el mismo elemento. Elige uno.
- No animes más allá de 400ms para retroalimentación de la interfaz de usuario. Los clics del usuario deben sentirse inmediatos.
- No uses la facilidad de resorte/sobresalto para el héroe — solo para momentos pequeños de "algo-acaba-de-llegar".
