Mouvement

Principes

• Moins est plus. Une seule respiration de 18 secondes est meilleure que trois pulsations, quatre rotations et une montée en intensité.
• Transforme uniquement. Animer transform et opacity. Évitez top, width, height — ils provoquent du travail de mise en page.
• Respectez prefers-reduced-motion. Chaque cléframe dans le système est soumis à une requête média.
• Le survol gagne en mouvement. Les états d’attente sont immobiles. Le mouvement se produit lorsque vous faites quelque chose — survolez une carte, cliquez sur l’Oracle.

Référence des jetons

Jeton	Valeur	Utilisation
--nibiru-duration-fast	150ms	Transitions en ligne (liens, décalages fins)
--nibiru-duration-normal	220ms	Levées de survol, transformations de boutons, éclat de carte
--nibiru-duration-slow	400ms	Panneaux modaux, révélation de l’oracle
--nibiru-duration-breathe	18s	Respiration du lotus héroïque
--nibiru-ease-out	cubic-bezier(0.2, 0.7, 0.2, 1)	Défaut de sortie douce
--nibiru-ease-spring	cubic-bezier(0.34, 1.56, 0.64, 1)	Réservé pour l’ascension du panneau de l’oracle

La respiration

Une élévation de six pixels, une rotation d’une fraction de degré, sur plus de 18 secondes. Le lotus est vivant mais ne demande pas d’attention.

@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;
}

L’essor de l’oracle

220 ms d’entrée. Une petite translationY et une échelle à 0,99 pour qu’il ait l’impression de s’être développé, pas de sauter brusquement.

@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);
}

Le levier de survol

Les cartes et le bouton principal se soulevant de 1 à 2 pixels au survol, avec une ombre plus profonde.

.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);
}

Réduction du mouvement

@media (prefers-reduced-motion: reduce) {
  .atelier-hero__mark,
  .card,
  #oracle-panel.is-open {
    animation: none;
  }
}

Le site semble toujours correct avec les mouvements désactivés — les animations sont uniquement décoratives et ne transmettent jamais d’informations.

Ne faites pas

• Ne pulsez pas. L’Oracle est un tampon d’encre silencieux, pas une sonnette d’incendie.
• Ne combinez pas plusieurs animations sur le même élément. Choisissez-en une.
• N’animez pas plus de 400 ms pour la rétroaction utilisateur. Les clics des utilisateurs devraient se sentir immédiats.
• N’utilisez pas l’effet de rebond/survol pour le héros — seulement pour les petits moments où quelque chose vient juste d’arriver.