/* ==========================================================================
   Animationen — Scroll-Reveal, Micro-Interactions
   Grundsatz: nie opacity:0 als Startzustand (rendert in Crawlern/Screenshots
   leer) — nur transform animieren, Inhalt ist immer im DOM sichtbar.
   ========================================================================== */

.reveal {
  transform: translateY(28px);
  transition: transform 700ms var(--ease-out);
  transition-delay: calc(var(--reveal-order, 0) * 55ms);
}

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

.reveal--fade {
  transform: none;
}

.reveal--scale {
  transform: scale(0.94) translateY(20px);
}
.reveal--scale.is-visible {
  transform: scale(1) translateY(0);
}

.reveal--from-left {
  transform: translateX(-32px);
}
.reveal--from-left.is-visible { transform: translateX(0); }

.reveal--from-right {
  transform: translateX(32px);
}
.reveal--from-right.is-visible { transform: translateX(0); }

.hero__content > * {
  animation: hero-in 900ms var(--ease-out) both;
}
.hero__content > *:nth-child(2) { animation-delay: 90ms; }
.hero__content > *:nth-child(3) { animation-delay: 160ms; }
.hero__content > *:nth-child(4) { animation-delay: 230ms; }

@keyframes hero-in {
  from { transform: translateY(18px); }
  to { transform: translateY(0); }
}

.js .reveal:not(.is-visible) { pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal--scale, .reveal--from-left, .reveal--from-right {
    transition: none !important;
    transform: none !important;
  }
  .hero__content > * {
    animation: none !important;
  }
  .sticky-cta {
    transition: opacity var(--dur-base) linear, visibility 0s linear var(--dur-base) !important;
    transform: none !important;
  }
  .sticky-cta.is-visible {
    transition: opacity var(--dur-base) linear !important;
  }
  html { scroll-behavior: auto !important; }
}