/* =========================================
   SEELE & STILLE — Animations
   Fade-ins · Transitions · Hover Effects
   ========================================= */

/* --- Reduced Motion (immer zuerst) --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .card:hover,
  .teacher:hover,
  .btn:hover,
  .btn:focus-visible {
    transform: none;
  }
}

/* --- Hero Fade-in (load-triggered via JS) --- */
.fade-in {
  opacity: 0;
  transition: opacity 0.9s ease;
}

.fade-in.visible { opacity: 1; }

/* Gestaffelte Verzögerungen für Hero-Elemente */
.hero__content .fade-in:nth-child(1) { transition-delay: 0.1s; }
.hero__content .fade-in:nth-child(2) { transition-delay: 0.25s; }
.hero__content .fade-in:nth-child(3) { transition-delay: 0.4s; }
.hero__content .fade-in:nth-child(4) { transition-delay: 0.55s; }
.hero__content .fade-in:nth-child(5) { transition-delay: 0.7s; }

/* --- Scroll Reveal (IntersectionObserver) --- */
/* Nur Opacity — bewusst keine translateY, passt zum ruhigen Konzept */
.reveal {
  opacity: 0;
  transition: opacity 0.9s ease;
}

.reveal.visible { opacity: 1; }

/* Gestaffelte Geschwister */
.cards-grid .reveal:nth-child(2) { transition-delay: 0.1s; }
.cards-grid .reveal:nth-child(3) { transition-delay: 0.2s; }
.cards-grid .reveal:nth-child(4) { transition-delay: 0.05s; }
.cards-grid .reveal:nth-child(5) { transition-delay: 0.15s; }
.cards-grid .reveal:nth-child(6) { transition-delay: 0.25s; }

.stats-grid .reveal:nth-child(2) { transition-delay: 0.1s; }
.stats-grid .reveal:nth-child(3) { transition-delay: 0.2s; }
.stats-grid .reveal:nth-child(4) { transition-delay: 0.3s; }

.teachers-grid .reveal:nth-child(2) { transition-delay: 0.1s; }
.teachers-grid .reveal:nth-child(3) { transition-delay: 0.2s; }
.teachers-grid .reveal:nth-child(4) { transition-delay: 0.3s; }

.testimonials-grid .reveal:nth-child(2) { transition-delay: 0.1s; }
.testimonials-grid .reveal:nth-child(3) { transition-delay: 0.2s; }

.pricing-grid .reveal:nth-child(2) { transition-delay: 0.1s; }
.pricing-grid .reveal:nth-child(3) { transition-delay: 0.2s; }

/* --- Card / Teacher Hover --- */
.card {
  transition: transform var(--transition), box-shadow var(--transition);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.teacher {
  transition: transform var(--transition), box-shadow var(--transition);
}
.teacher:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

/* --- Scroll-Offset für sticky Nav --- */
:target { scroll-margin-top: 80px; }

/* --- Hero SVG — subtiles Floaten --- */
@keyframes lotus-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

.hero__svg {
  animation: lotus-float 6s ease-in-out infinite;
}

/* Wird durch prefers-reduced-motion oben bereits gestoppt */