/* Effekt-Baukasten von Websiteory – Regeln zu effekte.js.
   Startzustände (unsichtbar, versetzt) gelten nur mit html.fx-on: ohne JS oder bei
   „weniger Bewegung“ setzt effekte.js die Klasse nicht, dann ist alles sofort sichtbar. */
[hidden] { display: none !important; }

/* Einblenden, Überschrift, nacheinander: unsichtbar, bis GSAP sie hereinholt */
html.fx-on [data-fx~="reveal"],
html.fx-on [data-fx~="headline"],
html.fx-on [data-fx~="stagger"] > * { opacity: 0; }
.fx-word { display: inline-block; }

/* Karten kleben beim Scrollen: reines CSS (sticky), JS stapelt sie leicht versetzt.
   Achtung: kein overflow:hidden auf Eltern-Elementen, sonst klebt nichts. */
[data-fx~="pin"] > * {
  position: sticky;
  top: calc(var(--fx-pin-top, 5rem) + var(--fx-i, 0) * 1.25rem);
  transform-origin: 50% 0;
}

/* Geschichte in Schritten: mit JS liegen die Schritte übereinander, GSAP blendet um */
html.fx-on [data-fx~="story"] { min-height: 100svh; display: grid; align-content: center; }
html.fx-on [data-fx~="story"] :has(> [data-fx-step]) { display: grid; }
html.fx-on [data-fx~="story"] [data-fx-step] { grid-area: 1 / 1; }

/* Fortschrittsbalken oben: nur mit JS sinnvoll */
[data-fx~="progress"] {
  position: fixed; top: 0; left: 0; z-index: 100;
  width: 100%; height: 4px;
  background: var(--fx-accent, #2fbf8f);
  transform: scaleX(0); transform-origin: 0 50%;
  pointer-events: none;
}
html:not(.fx-on) [data-fx~="progress"] { display: none; }

/* Laufband: schneidet ab, damit die Seite am Handy nie breiter wird */
[data-fx~="marquee"] { overflow: hidden; display: flex; flex-wrap: wrap; }
html.fx-on [data-fx~="marquee"] { flex-wrap: nowrap; }
.fx-track { display: flex; flex: none; width: max-content; animation: fx-marquee var(--fx-speed, 30s) linear infinite; }
.fx-track > * { flex: none; margin-right: var(--fx-gap, 2rem); }
[data-fx~="marquee"][data-fx-reverse] .fx-track { animation-direction: reverse; }
[data-fx~="marquee"]:hover .fx-track { animation-play-state: paused; }
@keyframes fx-marquee { to { transform: translateX(-50%); } }

/* Weiches Scrollen (Lenis): Regeln aus lenis.css 1.3.17 */
html.lenis, html.lenis body { height: auto; scroll-behavior: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .fx-track { animation: none; }
}