/* ==============================================================
   LANGGRÜN — reveal.css
   Gemeinsames CSS für die Scroll-Reveal-Animationen (siehe reveal.js).
   Auf JEDER Seite einbinden, die reveal.js verwendet – ohne diese
   Datei hängt das Script zwar Klassen an, aber es passiert nichts,
   weil kein CSS darauf reagiert.
   ============================================================== */

@keyframes revealUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes revealLeft {
  from { opacity: 0; transform: translateX(-42px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes revealRight {
  from { opacity: 0; transform: translateX(42px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Sonderfall Hero-Overlay auf der Startseite: berücksichtigt das
   bereits vorhandene translateY(-50%) der vertikalen Zentrierung */
@keyframes revealHero {
  from { opacity: 0; transform: translateY(calc(-50% + 40px)); }
  to   { opacity: 1; transform: translateY(-50%); }
}

.reveal {
  opacity: 0;
  transform: translateY(40px);
}

.reveal.is-visible {
  animation: revealUp 1.3s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

/* Nach Ende der Animation übernimmt ein einfacher, statischer Zustand –
   dadurch greifen Hover-Effekte (Anheben, Neigen) danach wieder normal. */
.reveal.revealed {
  opacity: 1;
  transform: none;
}

/* Alternierende Slide-Richtung für die Info-Sektionen (Startseite) */
.info-text.reveal {
  transform: translateX(-42px);
}

.info-image.reveal {
  transform: translateX(42px);
}

.info-section.reverse .info-text.reveal {
  transform: translateX(42px);
}

.info-section.reverse .info-image.reveal {
  transform: translateX(-42px);
}

.info-text.reveal.is-visible {
  animation: revealLeft 1.3s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.info-image.reveal.is-visible {
  animation: revealRight 1.3s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.info-section.reverse .info-text.reveal.is-visible {
  animation-name: revealRight;
}

.info-section.reverse .info-image.reveal.is-visible {
  animation-name: revealLeft;
}

.info-text.reveal.revealed,
.info-image.reveal.revealed {
  transform: none;
}

/* Muss die .reverse-Anfangswerte in der Spezifität überstimmen
   (4 Klassen dort vs. 3 Klassen oben) – sonst bleibt das Bild/der Text
   dauerhaft leicht verschoben statt an der richtigen Stelle zu landen. */
.info-section.reverse .info-text.reveal.revealed,
.info-section.reverse .info-image.reveal.revealed {
  transform: none;
}

/* Sonderfall Hero-Overlay (Startseite) */
.hero-overlay.reveal {
  transform: translateY(calc(-50% + 40px));
  opacity: 0;
}

.hero-overlay.reveal.is-visible {
  animation: revealHero 1.3s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.hero-overlay.reveal.revealed {
  opacity: 1;
  transform: translateY(-50%);
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.is-visible {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Unter 900px stapeln sich die Info-Sektionen (siehe jeweilige Seiten-CSS) –
   dann lieber von unten statt seitlich einblenden. */
@media (max-width: 900px) {
  .info-text.reveal,
  .info-image.reveal,
  .info-section.reverse .info-text.reveal,
  .info-section.reverse .info-image.reveal {
    transform: translateY(40px);
  }

  .info-text.reveal.is-visible,
  .info-image.reveal.is-visible,
  .info-section.reverse .info-text.reveal.is-visible,
  .info-section.reverse .info-image.reveal.is-visible {
    animation-name: revealUp;
  }
}