/**
 * TRUE CARE – Animationen & Übergänge
 * Fade-in, Slide-in, Stagger-Animationen für Scroll-Events (via JS)
 */

/* ── Basis: Elemente vor Animation verstecken ────────────────────────────────── */

.fade-in,
.slide-up,
.slide-in-left,
.slide-in-right {
  opacity: 0;
  transition:
    opacity var(--transition-slow),
    transform var(--transition-slow);
}

.slide-up        { transform: translateY(40px); }
.slide-in-left   { transform: translateX(-40px); }
.slide-in-right  { transform: translateX(40px); }

/* ── Sichtbar-Klasse (wird per JS hinzugefügt) ───────────────────────────────── */

.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* ── Staggered Delays für Listen ─────────────────────────────────────────────── */

.stagger-item:nth-child(1) { transition-delay: 0ms; }
.stagger-item:nth-child(2) { transition-delay: 100ms; }
.stagger-item:nth-child(3) { transition-delay: 200ms; }
.stagger-item:nth-child(4) { transition-delay: 300ms; }
.stagger-item:nth-child(5) { transition-delay: 400ms; }
.stagger-item:nth-child(6) { transition-delay: 500ms; }

/* ── Reduzierte Bewegung respektieren ────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .fade-in,
  .slide-up,
  .slide-in-left,
  .slide-in-right {
    opacity: 1;
    transform: none;
    transition: none;
  }
}