/* ── Default Animation Kit ──────────────────────────────────
   Intensität gesteuert über CSS Custom Properties.
   In DESIGN-SYSTEM.md Schritt 5c die Intensitätsstufe wählen:
   Subtil → --anim-offset: 20px; --anim-duration: 400ms;
   Mittel → --anim-offset: 30px; --anim-duration: 350ms;
   Stark  → --anim-offset: 40px; --anim-duration: 300ms;
─────────────────────────────────────────────────────────── */

:root {
  --anim-offset:   20px;    /* Expert-Default: Subtil — aus DESIGN-SYSTEM.md übernehmen */
  --anim-duration: 400ms;
  --anim-ease:     cubic-bezier(0.22, 1, 0.36, 1);  /* Smooth ease-out */
}

/* ── Scroll-Reveal (.reveal) ────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(var(--anim-offset));
  transition:
    opacity   var(--anim-duration) var(--anim-ease),
    transform var(--anim-duration) var(--anim-ease);
}

.reveal.is-visible {
  opacity:   1;
  transform: translateY(0);
}

/* Stagger: Kinder verzögert einblenden */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(var(--anim-offset));
  transition:
    opacity   var(--anim-duration) var(--anim-ease),
    transform var(--anim-duration) var(--anim-ease);
}
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms;    opacity: 1; transform: none; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 80ms;   opacity: 1; transform: none; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 160ms;  opacity: 1; transform: none; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 240ms;  opacity: 1; transform: none; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 320ms;  opacity: 1; transform: none; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 400ms;  opacity: 1; transform: none; }

/* ── Keyframes ──────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(var(--anim-offset)); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}

/* ── Hover-Lift (auf Cards, Buttons mit .lift) ──────────── */
.lift {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.lift:hover {
  transform:  translateY(-4px);   /* Mittel-Default — aus DESIGN-SYSTEM.md anpassen */
  box-shadow: var(--shadow-lg);
}

/* ── prefers-reduced-motion: alle Animationen deaktivieren ─
   Wird systemweit in tokens.css gehandhabt — dieser Block
   dient als explizite Sicherheits-Ebene für .reveal/.reveal-stagger.
─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-stagger > * {
    opacity:    1;
    transform:  none;
    transition: none;
  }
  .lift:hover {
    transform:  none;
    box-shadow: none;
  }
}