Bewegung

Prinzipien

• Weniger ist mehr. Ein einziger 18-Sekunden-Atemzug ist besser als drei Pulse, vier Drehungen und einen Fade-up.
• Verändert nur. Animieren Sie transform und opacity. Vermeiden Sie top, width, height – sie verursachen Layoutarbeit.
• Respektiert prefers-reduced-motion. Jeder Schlüsselrahmen im System ist durch eine Medienabfrage geschützt.
• Hovern gibt Bewegung. Ruhezustände sind still. Bewegung geschieht, wenn Sie etwas tun – hovern Sie auf eine Karte, klicken Sie auf den Oracle.

Tokenreferenz

Token	Wert	Verwendung
--nibiru-duration-fast	150ms	Inline-Übergänge (Links, Haarstrichverschiebungen)
--nibiru-duration-normal	220ms	Hover-Lifts, Button-Transformationen, Karten-Glänzen
--nibiru-duration-slow	400ms	Modale Panels, Oracle-Aufdeckung
--nibiru-duration-breathe	18s	Hero Lotus Atemzug
--nibiru-ease-out	cubic-bezier(0.2, 0.7, 0.2, 1)	Standard-Ease-Out
--nibiru-ease-spring	cubic-bezier(0.34, 1.56, 0.64, 1)	Für die Aufsteigerung des Oracle-Panels reserviert

Der Atem

Ein Sechspixeraufstieg, eine Bruchteildes Grades Rotation, in über 18 Sekunden. Der Lotus lebt, aber fragt nicht nach Aufmerksamkeit.

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

Der Aufstieg des Orakels

220ms Eingang. Eine kleine translateY und scale(0.99), sodass es sich anfühlt, als ob es wächst, nicht aufspringt.

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

Der Hoverschlepper

Karten und die primäre Schaltfläche heben sich bei der Bewegung um 1–2px hoch, mit einem tiefen Schatten.

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

Reduzierte Bewegung

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

Die Seite sieht weiterhin richtig aus, wenn die Bewegung deaktiviert ist – Animationen sind nur Dekoration und niemals Informationen.

Verboten

• Pulsieren Sie nicht. Der Oracle ist ein stummer Tintenstempel, kein Feuerwehralarm.
• Verwenden Sie keine mehreren Animationen auf dem gleichen Element. Wählen Sie eine aus.
• Animieren Sie nicht länger als 400 ms für Benutzerinteraktionen. Klicks sollten sofortig wirken.
• Verwenden Sie keine Spring-/Überschwingungsease für den Helden – nur für kleine „Dinge-gerade-angekommen“-Momente.