/* ==========================================================================
   Animationen — ruhig, dezent, mit reduced-motion-Fallback
   ========================================================================== */

/* Scroll-Reveal: Elemente mit [data-reveal] blendet main.js sanft ein.
   Ohne JavaScript bleibt alles sichtbar (Klasse js-enabled fehlt dann). */

.js-enabled [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.js-enabled [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Gestaffelte Kinder (z. B. Karten, Galerie-Kacheln) */
.js-enabled [data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.js-enabled [data-reveal-stagger].is-visible > * {
  opacity: 1;
  transform: none;
}

.js-enabled [data-reveal-stagger].is-visible > *:nth-child(2) { transition-delay: 0.08s; }
.js-enabled [data-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: 0.16s; }
.js-enabled [data-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: 0.24s; }
.js-enabled [data-reveal-stagger].is-visible > *:nth-child(5) { transition-delay: 0.32s; }
.js-enabled [data-reveal-stagger].is-visible > *:nth-child(6) { transition-delay: 0.4s; }

/* Hero-Einstieg: ein orchestrierter Page-Load — Schriftzug zuerst,
   dann Headline und Rest, der Freisteller schiebt sich von unten ein */
@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes hero-mann-in {
  from {
    opacity: 0;
    transform: translateY(6%);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.js-enabled .hero-content > * {
  animation: hero-rise 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.js-enabled .hero-content > *:nth-child(1) { animation-delay: 0.1s; }
.js-enabled .hero-content > *:nth-child(2) { animation-delay: 0.22s; }
.js-enabled .hero-content > *:nth-child(3) { animation-delay: 0.38s; }
.js-enabled .hero-content > *:nth-child(4) { animation-delay: 0.52s; }
.js-enabled .hero-content > *:nth-child(5) { animation-delay: 0.66s; }

.js-enabled .hero-mann img {
  animation: hero-mann-in 1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s both;
}

/* Wasserzeichen-Schriftzug: nur einblenden — hero-rise würde per fill-mode
   den transform (Zentrierung) dauerhaft mit "none" überschreiben */
@keyframes hero-fade {
  from {
    opacity: 0;
  }
}

.js-enabled .hero-content > .hero-schriftzug {
  animation-name: hero-fade;
}

/* Mobil ist der Mann gedimmte Hintergrundfigur: hero-mann-in würde per
   fill-mode opacity 1 festhalten — deshalb auch hier nur einblenden */
@media (max-width: 960px) {
  .js-enabled .hero-mann img {
    animation-name: hero-fade;
  }
}

/* Marquee-Streifen */
@keyframes marquee-loop {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Lightbox-Fade */
@keyframes lightbox-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.lightbox:not([hidden]) {
  animation: lightbox-in 0.25s ease both;
}

/* Reduced Motion: alles sofort sichtbar, keine Bewegung */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .js-enabled [data-reveal],
  .js-enabled [data-reveal-stagger] > * {
    opacity: 1;
    transform: none;
  }
}