/* ==========================================================================
   BKL-Tonstudio – animations.css
   Ruhig und präzise (Emil Kowalski): kurze Fade-ins mit wenigen Pixeln Weg,
   natürliche Hover-Zustände, kein Zoom, kein Parallax, keine animierten Flächen.
   Nur transform und opacity. Versteckte Zustände gelten nur mit JavaScript
   (html.js) und ohne „Bewegung reduzieren“.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  /* Hero: Foto blendet weich ein, Headline-Zeilen folgen mit kleinem Versatz */
  .js .hero-photo { animation: fade 900ms ease both; }
  .js .hero-line,
  .js .hero-lead,
  .js .hero-actions {
    opacity: 0;
    animation: rise 700ms var(--ease-out) forwards;
  }
  .js .hero-line { animation-delay: calc(150ms + var(--i, 0) * 80ms); }
  .js .hero-lead { animation-delay: 380ms; }
  .js .hero-actions { animation-delay: 460ms; }

  /* Unterseiten-Überschriften */
  .js .lines [data-line] {
    display: inline-block;
    opacity: 0;
    animation: rise 700ms var(--ease-out) forwards;
    animation-delay: 100ms;
  }

  /* Abschnitte: einmal leise einblenden, kaum Weg, kurzer Versatz */
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(12px);
    transition:
      opacity var(--t-reveal) var(--ease-out),
      transform var(--t-reveal) var(--ease-out);
    transition-delay: calc(min(var(--i, 0), 3) * 60ms);
  }
  .js [data-reveal].is-in { opacity: 1; transform: none; }

  /* Fader in der Fußzeile gleiten kurz auf ihre Logo-Position */
  .js .footer-mark .cap {
    transform: translateY(24px);
    opacity: 0;
    transition: transform 900ms var(--ease-out), opacity 900ms ease;
  }
  .js .footer-mark.is-in .cap { transform: none; opacity: 1; }

  /* Menü: fährt kurz von oben ein, schließt schneller */
  .menu.is-open { animation: menu-in 280ms var(--ease-drawer) both; }
  .menu.is-closing { animation: menu-out 180ms var(--ease-out) both; }

  .faq-item[open] .faq-answer { animation: fade-up 240ms var(--ease-out); }
}

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@keyframes menu-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
@keyframes menu-out { to { opacity: 0; transform: translateY(-6px); } }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}