/* ==========================================================================
   VfB 03 Hilden – Animationen: Scroll-Reveal, Marquee, Micro-Interactions
   Grundsatz: nie mit opacity:0 starten (blankt Full-Page-Screenshots/Crawler),
   nur transform animieren; Inhalt bleibt ohne JS/reduced-motion sofort lesbar.
   ========================================================================== */

.reveal {
  transform: translateY(32px);
  transition: transform 800ms var(--ease-out);
}
.reveal.is-visible { transform: translateY(0); }

.reveal-scale {
  transform: scale(0.94);
  transition: transform 700ms var(--ease-out);
}
.reveal-scale.is-visible { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-scale { transform: none !important; transition: none !important; }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes float-slow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.hero__badge {
  animation: float-slow 6s var(--ease-out) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .hero__badge { animation: none; }
}

/* Hero-Einblendung beim Laden */
.hero__content > * {
  transform: translateY(20px);
  opacity: 1;
  animation: hero-in 900ms var(--ease-out) both;
}
.hero__content > *:nth-child(1) { animation-delay: 60ms; }
.hero__content > *:nth-child(2) { animation-delay: 140ms; }
.hero__content > *:nth-child(3) { animation-delay: 220ms; }
.hero__content > *:nth-child(4) { animation-delay: 300ms; }
@keyframes hero-in {
  from { transform: translateY(20px); }
  to { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__content > * { animation: none; transform: none; }
}