Animationen

helpers/animations.css - kleine, wiederverwendbare Übergänge statt einer Animations-Bibliothek.

Ein-/Ausblenden & Bewegung

Klasse	Zweck
`.ncss-animate-fade-in` / `-fade-out`	Ein-/Ausblenden
`.ncss-animate-slide-in-up/-down/-left/-right`	Einschieben aus einer Richtung
`.ncss-animate-scale-in`	Einwachsen
`.ncss-animate-spin`	Endlose Rotation (z.B. Lade-Icon)
`.ncss-animate-pulse`	Pulsierende Deckkraft
`.ncss-animate-shake`	Fehler-Wackeln
`.ncss-skeleton`	Shimmer-Ladezustand

<div class="ncss-card ncss-animate-fade-in">
  <div class="ncss-card-body">Blendet beim Einfügen ein</div>
</div>

<span class="ncss-icon ncss-icon-close ncss-animate-spin"></span>

Mikro-Interaktionen & Übergänge

`.ncss-hover-lift`	Anheben bei Hover
`.ncss-hover-grow`	Leichtes Wachsen bei Hover
`.ncss-press`	Taktile Tap-Rückmeldung (`:active`-basiert, siehe Touch & mobile Viewports)
`.ncss-transition` / `-slow` / `-colors` / `-transform`	Generische Übergangs-Utilities

<button type="button" class="ncss-btn ncss-btn--primary ncss-hover-lift">Anheben bei Hover</button>

Alle respektieren prefers-reduced-motion automatisch.

GPU-Compositing-Hinweis

Opt-in, translateZ(0): .ncss-gpu-boost hebt ein Element auf eine eigene Compositor-Ebene an - gegen Ruckeln bei häufig animierten/gescrollten Elementen mit teurem Repaint. Nutzt die eigenständige transform-Eigenschaft, kombinierbar mit .ncss-hover-lift/-grow/-press (die translate/scale nutzen, nicht transform) ohne Konflikt. Bewusst NICHT automatisch angewendet - jede zusätzliche Compositor-Ebene kostet Grafikspeicher, nur bei sichtbarem Ruckeln gezielt einsetzen. Für ein Element, das selbst schon transform nutzt (z.B. .ncss-hero--parallax), stattdessen den --ncss-gpu-hint-Token direkt in der eigenen transform-Deklaration setzen - zwei transform-Deklarationen auf demselben Element würden sich sonst gegenseitig überschreiben statt zu kombinieren.