/* Capira Wow-Prototyp: nur Hero der Startseite.
   Alles Versteckte hängt an html.wow-an. Ohne Skript oder mit "weniger Bewegung" bleibt die Seite unverändert. */

/* Lenis Grundregeln */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }

/* Bühne */
.hero { position: relative; isolation: isolate; }
.hero .hero-raster { position: relative; z-index: 1; }
.wow-raster { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }

/* Ausgangslage vor dem Intro: nur mit Skript */
html.wow-an .hero .label,
html.wow-an .hero .display,
html.wow-an .hero .display .punkt,
html.wow-an .hero .lead,
html.wow-an .hero .knoepfe,
html.wow-an .hero .fakt-zeile,
html.wow-an .hero .ui-video,
html.wow-an .hero .ui-plan,
html.wow-an .hero .ui-note { opacity: 0; }
html.wow-an .hero .ui-balken i { transform: scaleX(0); transform-origin: 0 50%; }

/* Überschrift: Wort für Wort aus einer Maske */
.hero .display .w { display: inline-block; vertical-align: top; overflow: hidden; padding: 0 0.06em 0.18em; margin: 0 -0.06em -0.18em; }
.hero .display .wi { display: inline-block; will-change: transform; }
.hero .display .wow-ende { white-space: nowrap; }
.hero .display .punkt { position: relative; z-index: 2; }

/* Plan: Kästchen werden nacheinander abgehakt */
.hero .ui-plan li::before { transition: background-color 240ms var(--kurve-standard), border-color 240ms var(--kurve-standard); }
.hero .ui-plan li.wow-puls::before { animation: wow-puls 520ms var(--kurve-einrasten); }
@keyframes wow-puls { 0% { transform: scale(0.6); } 100% { transform: scale(1); } }

/* Magnet-Knöpfe: nur mit Maus */
@media (hover: hover) and (pointer: fine) {
  .hero .knopf { translate: calc(var(--mx, 0) * 1px) calc(var(--my, 0) * 1px); }
}

/* Nur Prototyp: Knopf zum Wiederholen */
.wow-replay { position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--surface-inverse); color: var(--ink-inverse); font: 700 13px/1 var(--font-sans); cursor: pointer; box-shadow: var(--shadow-card); }
.wow-replay:hover { background: var(--accent); color: var(--on-accent); }
html.wow-ruhig .wow-replay { display: none; }