/* =========================================================
   Animationen — Initialzustaende fuer GSAP-Reveals
   GSAP setzt die Endzustaende. Faellt JS aus, sind die
   Inhalte trotzdem sichtbar (.no-js Fallback unten).
   ========================================================= */

/* Reveal-Bausteine: Anfangszustand nur wenn JS aktiv ist */
.js .reveal-up {
  opacity: 0;
  transform: translateY(40px);
}

.js .reveal-fade {
  opacity: 0;
}

/* Masken-Reveal fuer Bilder: Overlay wird per JS (.reveal-mask) eingefuegt */

/* Zeilenweises Text-Reveal */
.js .line-mask {
  overflow: hidden;
}

.js .line-mask > * {
  display: block;
  transform: translateY(110%);
}

/* Startseite: Hero-Inhalte immer sofort rendern.
   Diese Regeln stehen absichtlich mit hoher Spezifitaet und !important,
   damit Reveal-/Animationsregeln den LCP-Text nicht verstecken koennen. */
html.js body.home .hero .line-mask > *,
html.js body.home .hero .reveal-up,
html.js body.home .hero .reveal-fade,
html.js body.home .hero .hero__content,
html.js body.home .hero .hero__place,
html.js body.home .hero .hero__title,
html.js body.home .hero .hero__title .line,
html.js body.home .hero .hero__title .line > span,
html.js body.home .hero .hero__sub,
html.js body.home .hero .scrollcue {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* Auf Mobile werden Reveal-Animationen ohnehin nicht verwendet.
   Inhalte deshalb bereits durch CSS sichtbar machen, ohne auf JS zu warten. */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .js .reveal-up,
  .js .reveal-fade,
  .js .line-mask > * {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }
}

/* Scroll-Cue Bewegung */
@keyframes cueBob {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.7;
  }

  50% {
    transform: translateY(8px);
    opacity: 1;
  }
}

/* Wasser-Schimmer in der Karte */
@keyframes waterDrift {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-12px);
  }
}

/* Dezente Schwebebewegung (Boot/Kanu) */
@keyframes floatY {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

/* prefers-reduced-motion: alles sichtbar, keine Bewegung */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .js .reveal-up,
  .js .reveal-fade {
    opacity: 1 !important;
    transform: none !important;
  }

  .js .line-mask > * {
    transform: none !important;
  }
}

/* no-js: Initialzustaende neutralisieren (Klassen .js fehlen ohnehin) */
.no-js .reveal-up,
.no-js .reveal-fade {
  opacity: 1;
  transform: none;
}