/*!
 * scroll-fx v1.1.0-dosigny — Basis-Styles
 * Dominik Baurhenn – DOSIGNY · https://www.dosigny.com
 *
 * Diese Datei liefert nur Struktur, keine Optik. Farben, Schriften und
 * Abstaende bleiben vollstaendig beim jeweiligen Projekt.
 */

/* ------------------------------------------------------------------ *
 * 1. Lenis (Smooth Scroll) — Pflichtregeln der Bibliothek
 * ------------------------------------------------------------------ */
html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ------------------------------------------------------------------ *
 * 2. Anti-Flackern
 * Elemente, die eingeblendet werden, bleiben bis zum Start der Engine
 * unsichtbar. Bleibt JavaScript aus oder scheitert das Laden, greift
 * .fx-fail bzw. der Notausstieg aus scroll-fx-init.js und alles wird
 * wieder sichtbar. Der Inhalt steht immer im HTML — Suchmaschinen und
 * Screenreader sehen ihn unabhaengig von den Effekten.
 * ------------------------------------------------------------------ */
html.fx-init [data-fx~="reveal"],
html.fx-init [data-fx~="text"],
html.fx-init [data-fx~="counter"],
html.fx-init [data-fx~="cascade"] { opacity: 0; }

html.fx-fail [data-fx],
html.fx-reduced [data-fx] {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  clip-path: none !important;
  filter: none !important;
}

/* ------------------------------------------------------------------ *
 * 3. Text-Aufteilung (Effekt "text")
 * ------------------------------------------------------------------ */
.fx-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* verhindert, dass Unterlaengen (g, y, p) abgeschnitten werden */
  padding-bottom: 0.18em;
  margin-bottom: -0.18em;
}
.fx-mask-line { display: block; }
.fx-unit {
  display: inline-block;
  will-change: transform;
}
.fx-word { display: inline-block; }

/* ------------------------------------------------------------------ *
 * 4. Story — gepinntes Scrollytelling
 * Schritte liegen uebereinander in derselben Rasterzelle.
 * ------------------------------------------------------------------ */
[data-fx~="story"] {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
}
[data-fx~="story"] > [data-fx-step] {
  grid-area: 1 / 1;
  max-width: 62ch;
  z-index: 2;
}
[data-fx~="story"] > [data-fx-bg] {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  will-change: transform;
}

/* ------------------------------------------------------------------ *
 * 5. Tunnel — Flug durch Ebenen
 * ------------------------------------------------------------------ */
[data-fx~="tunnel"] {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
}
[data-fx~="tunnel"] > [data-fx-layer] {
  grid-area: 1 / 1;
  will-change: transform, opacity;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* ------------------------------------------------------------------ *
 * 6. Horizontal — seitliches Scrollen
 * ------------------------------------------------------------------ */
[data-fx~="horizontal"] {
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
}
[data-fx~="horizontal"] [data-fx-track] {
  display: flex;
  flex-wrap: nowrap;
  will-change: transform;
}

/* ------------------------------------------------------------------ *
 * 7. Stack — Karten stapeln sich
 * ------------------------------------------------------------------ */
[data-fx~="stack"] > [data-fx-card] {
  position: sticky;
  top: var(--fx-stack-top, 12vh);
  will-change: transform;
}

/* ------------------------------------------------------------------ *
 * 8. Sequence — Canvas-Bildsequenz
 * ------------------------------------------------------------------ */
canvas[data-fx~="sequence"] {
  display: block;
  width: 100%;
  height: 100vh;
  height: 100svh;
  object-fit: cover;
}

/* ------------------------------------------------------------------ *
 * 9. Fortschrittsbalken
 * ------------------------------------------------------------------ */
[data-fx-progress] {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: var(--fx-progress-height, 3px);
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: 9999;
  pointer-events: none;
  background: var(--fx-progress-color, currentColor);
}

/* ------------------------------------------------------------------ *
 * 10. Performance-Hinweise fuer den Browser
 * ------------------------------------------------------------------ */
[data-fx~="parallax"],
[data-fx~="zoom"] { will-change: transform; }

[data-fx~="mask"] { overflow: hidden; will-change: clip-path; }

@supports not (overflow: clip) {
  [data-fx~="scene"] { overflow: hidden; }
}

/* Abschnittsweise Hintergrundtiefe. Der Layer ist rein dekorativ und
   bleibt hinter dem jeweiligen Container. */
[data-fx~="scene"] {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
[data-fx~="scene"] > .container {
  position: relative;
  z-index: 1;
}
.fx-scene-aura {
  position: absolute;
  z-index: 0;
  top: 8%;
  left: 50%;
  width: clamp(360px, 52vw, 920px);
  aspect-ratio: 1;
  margin-left: min(-26vw, -180px);
  border-radius: 50%;
  border: 1px solid rgba(var(--color-primary-rgb, 69, 191, 166), 0.12);
  background:
    radial-gradient(circle at 38% 38%, rgba(var(--color-primary-rgb, 69, 191, 166), 0.13), transparent 38%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 58px, rgba(255, 255, 255, 0.025) 59px 60px);
  opacity: 0.72;
  pointer-events: none;
  will-change: transform;
}

/* Safari haelt will-change-Ebenen besonders aggressiv im Speicher. Die
   Seite besitzt viele Wortmasken und Szenen; dort reichen die von GSAP
   gesetzten Transforms fuer die Komposition aus. Keine optische Aenderung. */
html.fx-browser-safari .fx-unit,
html.fx-browser-safari .fx-scene-aura {
  will-change: auto;
}

@media (max-width: 767px) {
  .fx-scene-aura { display: none; }
}

/* Bewegung komplett abschalten, wenn das System es verlangt */
@media (prefers-reduced-motion: reduce) {
  [data-fx],
  [data-fx] * {
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}