/* Animationen — Galabau Daniel Wolff
   GSAP/ScrollTrigger übernimmt die Szenen; hier liegen Zustände + Fallbacks.
   prefers-reduced-motion: alles sofort sichtbar, keine Bewegung. */

/* Reveal-Grundzustand (wird nur mit JS + Motion-Erlaubnis aktiviert) */
.js-motion [data-reveal] {
  opacity: 0;
  transform: translateY(34px);
}
.js-motion [data-reveal="links"] { transform: translateX(-40px); }
.js-motion [data-reveal="rechts"] { transform: translateX(40px); }
.js-motion [data-reveal="zoom"] { transform: scale(0.92); }

/* Hero-Einzug */
.js-motion .hero__inhalt > * { opacity: 0; transform: translateY(30px); }
.js-motion .hero__bild { opacity: 0; }

/* Scroll-Story „Verwandlung"
   Desktop: hohe Spur + sticky Bühne (kein GSAP-Pinning — sticky kann
   weder unter den festen Header rutschen noch beim Zurückscrollen
   andere Sektionen überdecken). Mobil: normale Höhe, weiche Blenden. */
.story { position: relative; }
@media (min-width: 768px) {
  .js-motion .story { height: 420vh; }
  .js-motion .story .story__buehne {
    position: sticky;
    top: calc(84px + 1.2rem); /* fester Header + Luft */
    height: min(78vh, calc(100vh - 84px - 2.4rem));
  }
}
.story__buehne {
  position: relative;
  height: 78vh;
  min-height: 480px;
  border-radius: var(--radius-gross);
  overflow: hidden;
  box-shadow: var(--schatten-tief);
}
.story__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}
.story__bild:first-child { opacity: 1; }
/* Video-Frame-Modus: Canvas übernimmt, Standbilder weichen */
.story__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.story__buehne.hat-frames .story__bild { display: none; }
.story__text {
  position: absolute;
  left: clamp(1.2rem, 4vw, 3rem);
  bottom: clamp(1.2rem, 4vw, 3rem);
  right: clamp(1.2rem, 4vw, 3rem);
  color: #fff;
  z-index: 5;
  pointer-events: none;
}
.story__schritt {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transform: translateY(20px);
}
.story__schritt .nummer {
  font-family: var(--f-display);
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  color: var(--c-sonne);
  display: block;
  margin-bottom: 0.4rem;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}
.story__schritt h3 {
  color: #fff;
  font-size: clamp(1.4rem, 3.4vw, 2.3rem);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
  max-width: 26ch;
}
.story__schleier {
  position: absolute;
  inset: 55% 0 0 0;
  background: linear-gradient(to top, rgba(10, 22, 14, 0.62), transparent);
  z-index: 3;
}
.story__balken {
  position: absolute;
  top: 0;
  left: 0;
  height: 4px;
  width: 0%;
  background: var(--c-moos);
  z-index: 6;
}

/* Fallback ohne Motion: Story als gestapelte Galerie */
.no-motion .story__buehne { height: auto; min-height: 0; box-shadow: none; border-radius: 0; display: grid; gap: 1rem; }
.no-motion .story__bild { position: static; opacity: 1; border-radius: var(--radius); aspect-ratio: 16/9; }
.no-motion .story__text, .no-motion .story__schleier, .no-motion .story__balken { display: none; }
.no-motion .story__fallbacktexte { display: grid; gap: 0.4rem; margin-top: 1rem; }
.story__fallbacktexte { display: none; }
.no-motion .story__fallbacktexte { display: grid; }

/* Zahlen-Zähler */
.zahl { font-family: var(--f-display); font-weight: 700; font-size: clamp(2.2rem, 5vw, 3.6rem); color: var(--c-moos); line-height: 1; }

/* Marquee Ortsnamen */
.orte-band { overflow: hidden; white-space: nowrap; user-select: none; }
.orte-band__spur { display: inline-flex; gap: 3.2rem; padding-right: 3.2rem; will-change: transform; }
.orte-band span {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(248, 246, 239, 0.55);
  letter-spacing: 0.02em;
}
.orte-band span.voll { color: var(--c-moos); -webkit-text-stroke: 0; }
.no-motion .orte-band { white-space: normal; }
.no-motion .orte-band__spur { flex-wrap: wrap; gap: 1rem 2rem; transform: none !important; }

/* Parallax-Bilder */
.parallax-rahmen { overflow: hidden; border-radius: var(--radius-gross); }
.js-motion .parallax-rahmen img { transform: scale(1.15); will-change: transform; }

/* Blatt-Deko (SVG, schwebt sanft) */
.blatt {
  position: absolute;
  color: var(--c-moos);
  opacity: 0.35;
  pointer-events: none;
  z-index: 1;
}
.no-motion .blatt { display: none; }

/* Reduced Motion: Browserebene */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}