/* =========================================================================
   MS WRAPTECH — Animations (Scroll-Reveals + Reduced-Motion-Fallbacks)
   JS-gesteuerte Sequenzen (GSAP) liegen in scroll.js; hier nur Zustaende.
   ========================================================================= */

/* Reveal: erst versteckt, .is-in zeigt an. Wird per IntersectionObserver gesetzt. */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* Gestaffelte Kinder */
[data-reveal-stagger] > * {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
[data-reveal-stagger].is-in > * { opacity: 1; transform: none; }
[data-reveal-stagger].is-in > *:nth-child(2) { transition-delay: 0.07s; }
[data-reveal-stagger].is-in > *:nth-child(3) { transition-delay: 0.14s; }
[data-reveal-stagger].is-in > *:nth-child(4) { transition-delay: 0.21s; }
[data-reveal-stagger].is-in > *:nth-child(5) { transition-delay: 0.28s; }
[data-reveal-stagger].is-in > *:nth-child(6) { transition-delay: 0.35s; }

/* Hero Headline-Zeilen: von unten einfahren (per JS getriggert nach Load) */
.hero h1 .ln > span { transform: translateY(110%); transition: transform 1s var(--ease); }
.hero.is-ready h1 .ln > span { transform: translateY(0); }
.hero.is-ready h1 .ln:nth-child(2) > span { transition-delay: 0.08s; }
.hero.is-ready h1 .ln:nth-child(3) > span { transition-delay: 0.16s; }
.hero__sub, .hero__actions { opacity: 0; transform: translateY(20px); transition: opacity 0.9s var(--ease) 0.4s, transform 0.9s var(--ease) 0.4s; }
.hero.is-ready .hero__sub, .hero.is-ready .hero__actions { opacity: 1; transform: none; }

/* ---------- Bewegungsmaske: Bilder werden per Wisch-Maske enthuellt ----------
   Wichtig: clip-path liegt auf dem INNEREN <img>, nicht auf dem beobachteten
   Container — sonst meldet IntersectionObserver ratio 0 und loest nie aus. */
.feature__media > img, .gallery figure > img, .page-hero__bg > img {
  clip-path: inset(0 0 100% 0);
  -webkit-clip-path: inset(0 0 100% 0);
  transition: clip-path 1.1s var(--ease), -webkit-clip-path 1.1s var(--ease);
  will-change: clip-path;
}
.feature__media.is-in > img, .gallery figure.is-in > img, .page-hero__bg.is-in > img {
  clip-path: inset(0); -webkit-clip-path: inset(0);
}
/* leichte Staffelung in der Galerie */
.gallery figure:nth-child(2n) > img { transition-delay: 0.08s; }
.gallery figure:nth-child(3n) > img { transition-delay: 0.14s; }

/* Wenn JS aus ist: alles sichtbar (Progressive Enhancement) */
.no-js [data-reveal],
.no-js [data-reveal-stagger] > * { opacity: 1; transform: none; }
.no-js .feature__media > img, .no-js .gallery figure > img, .no-js .page-hero__bg > img {
  clip-path: none !important; -webkit-clip-path: none !important;
}

/* Reduced Motion: keine Bewegung, nur sanftes Erscheinen */
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal-stagger] > *,
  .hero h1 .ln > span, .hero__sub, .hero__actions {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .hero__layer { transform: none !important; }
  .hero__scroll .mouse::after { animation: none; }
  .marquee__track { animation: none !important; }
  .feature__media > img, .gallery figure > img, .page-hero__bg > img {
    clip-path: none !important; -webkit-clip-path: none !important; transition: none !important;
  }
}

/* ---------- Mobil: kein "Aufbauen" beim Scrollen ----------
   Reveal-/Masken-Animationen abschalten, damit Inhalt sofort da ist (kein Lag-Gefuehl).
   Die grossen Scroll-Animationen (Hero-Zoom, Portfolio-Rad) laufen weiter (GSAP). */
@media (max-width: 767px) {
  [data-reveal], [data-reveal-stagger] > *,
  .hero h1 .ln > span, .hero__sub, .hero__actions {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .feature__media > img, .gallery figure > img, .page-hero__bg > img {
    clip-path: none !important; -webkit-clip-path: none !important; transition: none !important;
  }
  .pcard.is-enter { animation: none !important; }
}