Movimiento

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.

@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.

@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.

.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

@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”.