/* ==========================================================================
   animations.css — Zentrale Animations-Bibliothek
   Alle Keyframes und Animations-Klassen leben hier.
   Module importieren via JS aus js/animations/ — kein Duplizieren.
   ========================================================================== */

/* --- Keyframes --- */

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleX {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes barEntrance {
  from { opacity: 0; transform: translateY(60px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Utility-Klassen für JS-gesteuerte Animationen --- */

.js-fade-hidden {
  opacity: 0;
  transform: translateY(32px);
}

.js-fade-visible {
  opacity: 1;
  transform: translateY(0);
  transition: var(--transition-entrance);
}

/* Stagger: nth-child Delays werden via JS als CSS Custom Property gesetzt */
.js-stagger-item {
  opacity: 0;
  transform: translateY(24px);
  transition: var(--transition-entrance);
  transition-delay: var(--stagger-i, 0ms);
}

.js-stagger-item.js-fade-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Nav Underline Hover */
.nav-underline {
  position: relative;
}
.nav-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-smooth);
}
.nav-underline:hover::after,
.nav-underline[aria-current="page"]::after {
  transform: scaleX(1);
}