/* ============================================================
   RANDORI-PRO · Krav Maga (High End) · Motion-Layer (CSS)
   SCROLL-POLITUR 07/2026 · adaptiert aus dem Scroll-Lab, aber
   ruhiger getaktet (Stimmung 3 „Dunkel & Intensiv" — Haltung
   statt Härte, kein Snappen, kein Spektakel):
   · Headlines steigen Wort für Wort (masked rise, langsam)
   · SIGNATUR: die Reaktionskette folgt dem Scroll — der rote
     Faden zeichnet sich bidirektional, Glieder zünden, sobald
     der Faden sie erreicht; das Fazit erscheint erst am Ende
   · Rote Glows der dunklen Sektionen driften mit (Tiefe)
   · Hero weicht beim Scrollen ruhig zurück, Bild-Card driftet
   · Kennzahlen zählen hoch und setzen mit kontrolliertem
     Nachdruck (kein Ring, kein Effekt-Feuerwerk)
   Grundzustand IMMER vollständig sichtbar (kein JS / reduced
   motion): Kette gezeichnet, Knoten gefüllt, Fazit lesbar.
   Aktiv ausschließlich unter body.bv3.km.
   ============================================================ */

:root { --km-ease-calm: cubic-bezier(0.22, 0.61, 0.36, 1); --km-spring: cubic-bezier(0.34, 1.4, 0.64, 1); }

/* Anker-Ziele nicht unter dem Glas-Header verstecken */
.bv3.km [id] { scroll-margin-top: 92px; }

@media (prefers-reduced-motion: no-preference) {

  /* Ruhiges Gleiten bei Anker-Sprüngen (nur diese Seite) */
  html { scroll-behavior: smooth; }

  /* ── Reveals (Muster wie bold-v3, ruhiger) ───────────────── */
  .bv3.km [data-rv] { opacity: 0; transform: translateY(18px); transition: opacity 500ms var(--km-ease-calm), transform 500ms var(--km-ease-calm); }
  .bv3.km [data-rv].is-in { opacity: 1; transform: translateY(0); }

  /* Kicker-Linie zeichnet sich beim Reveal */
  .bv3.km [data-rv] .b-kicker::before, .bv3.km [data-rv].b-kicker::before { width: 0; transition: width 800ms var(--km-ease-calm) 250ms; }
  .bv3.km [data-rv].is-in .b-kicker::before, .bv3.km [data-rv].is-in.b-kicker::before { width: 40px; }

  /* ── Hero-Entrance ───────────────────────────────────────── */
  .bv3.km .km-hero .b-kicker { animation: km-rise 600ms var(--km-ease-calm) 100ms backwards; }
  .bv3.km .km-hero__h1 { animation: km-rise 650ms var(--km-ease-calm) 200ms backwards; }
  .bv3.km .km-hero__sub, .bv3.km .km-hero__cta, .bv3.km .km-hero__micro { animation: km-rise 650ms var(--km-ease-calm) 320ms backwards; }
  .bv3.km .km-hero__trust { animation: km-fade 700ms var(--ease-standard) 500ms backwards; }
  .bv3.km .km-hero__bg, .bv3.km .km-hero__scrim { animation: km-fade 750ms var(--ease-standard) 260ms backwards; }
  @keyframes km-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes km-fade { from { opacity: 0; } to { opacity: 1; } }

  /* Hero weicht zurück (JS setzt Inline-Styles) */
  .bv3.km.js-motion .km-hero__inner { will-change: transform, opacity; }

  /* ── Headlines · Wort-für-Wort (masked rise, ruhig) ──────── */
  .bv3.km .km-wm { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.14em; margin-bottom: -0.14em; }
  .bv3.km.js-motion .km-split .km-w { display: inline-block; transform: translateY(115%); transition: transform 780ms var(--km-ease-calm); transition-delay: calc(var(--wd, 0) * 70ms); }
  .bv3.km.js-motion .km-split.is-in .km-w { transform: none; }

  /* ── Glow-Drift · rote Lichtinseln der dunklen Sektionen ───
     JS setzt --gy (px) pro Sektion; leichte Vergrößerung, damit
     beim Driften keine Kanten sichtbar werden. */
  .bv3.km.js-motion .km-hero__scrim,
  .bv3.km.js-motion .km-def::before,
  .bv3.km.js-motion .km-diff::before,
  .bv3.km.js-motion .km-final::before { transform: translate3d(0, calc(var(--gy, 0) * 1px), 0) scale(1.15); will-change: transform; }

  /* ── SIGNATUR · Reaktionskette folgt dem Scroll ────────────
     JS treibt die Linien-Füllung pro Frame (scaleX, inline) und
     schaltet .is-on pro Glied, sobald der Faden es erreicht —
     bidirektional. Ohne JS bleibt alles gezeichnet. */
  .bv3.km.js-motion .km-link__line { transform: scaleX(0); will-change: transform; }
  .bv3.km.js-motion .km-link__node { transform: scale(0); transition: transform 520ms var(--km-spring) 40ms; }
  .bv3.km.js-motion .km-link.is-on .km-link__node { transform: scale(1); }
  .bv3.km.js-motion .km-link__num,
  .bv3.km.js-motion .km-link__tag,
  .bv3.km.js-motion .km-link__h,
  .bv3.km.js-motion .km-link__p { opacity: 0; transform: translateY(12px); transition: opacity 520ms var(--km-ease-calm), transform 520ms var(--km-ease-calm); }
  .bv3.km.js-motion .km-link.is-on .km-link__num { transition-delay: 60ms; }
  .bv3.km.js-motion .km-link.is-on .km-link__tag { transition-delay: 110ms; }
  .bv3.km.js-motion .km-link.is-on .km-link__h { transition-delay: 160ms; }
  .bv3.km.js-motion .km-link.is-on .km-link__p { transition-delay: 230ms; }
  .bv3.km.js-motion .km-link.is-on :is(.km-link__num, .km-link__tag, .km-link__h, .km-link__p) { opacity: 1; transform: translateY(0); }

  /* Fazit erscheint erst, wenn die Kette vollständig ist */
  .bv3.km.js-motion .km-chain__foot { opacity: 0; transform: translateY(12px); transition: opacity 680ms var(--km-ease-calm) 150ms, transform 680ms var(--km-ease-calm) 150ms; }
  .bv3.km.js-motion .km-chain.is-done .km-chain__foot { opacity: 1; transform: translateY(0); }

  /* ── Kennzahlen · kontrollierter Nachdruck beim Count-up ─── */
  .bv3.km.js-motion .km-stat.is-hit .km-stat__n { animation: km-hit 620ms var(--km-ease-calm); }
  @keyframes km-hit {
    0%   { transform: scale(1.09); text-shadow: 0 0 34px rgba(220, 13, 29, 0.75); }
    60%  { transform: scale(0.992); }
    100% { transform: none; text-shadow: none; }
  }

  /* Count-up · „über/rund"-Präfix folgt der Zahl */
  .bv3.km [data-rv] .km-stat__n .pre { opacity: 0; transition: opacity 700ms var(--ease-standard) 900ms; }
  .bv3.km [data-rv].is-in .km-stat__n .pre { opacity: 1; }
}