---
title: "Bewegung"
description: "Wie Dinge auf den Nibiru-Sites bewegen sich – langsam, leise und nicht sehr oft."
---

## 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.
```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;
}
```
## 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.
```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);
}
```
## Der Hoverschlepper

Karten und die primäre Schaltfläche heben sich bei der Bewegung um 1–2px hoch, mit einem tiefen Schatten.
```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);
}
```
## Reduzierte Bewegung
```css
@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.
