/* ============================================================
   RANDORI-PRO · MMA (High End) · Motion-Layer (CSS)
   Additive Politur. Teilt [data-rv]/js-motion mit bold-v3.css.
   Grundzustand IMMER vollständig sichtbar (kein JS / reduced):
   die Die drei Distanzen ist gezeichnet, Knoten gefüllt.
   Aktiv ausschließlich unter body.bv3.mma. Respektiert
   prefers-reduced-motion.
   ============================================================ */

:root { --mma-ease-calm: cubic-bezier(0.22, 0.61, 0.36, 1); }

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

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

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

  /* Hero-Entrance */
  .bv3.mma .mma-hero .b-kicker { animation: mma-rise 900ms var(--mma-ease-calm) 150ms backwards; }
  .bv3.mma .mma-hero__h1 { animation: mma-rise 1000ms var(--mma-ease-calm) 280ms backwards; }
  .bv3.mma .mma-hero__sub, .bv3.mma .mma-hero__cta { animation: mma-rise 1000ms var(--mma-ease-calm) 440ms backwards; }
  .bv3.mma .mma-hero__trust { animation: mma-fade 1000ms var(--ease-standard) 700ms backwards; }
  .bv3.mma .mma-hero__bg { animation: mma-fade 1400ms var(--ease-standard) backwards; }
  /* (Die Einblendung des Hero-Tags ist mit dem Tag selbst entfallen.) */
  @keyframes mma-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes mma-fade { from { opacity: 0; } to { opacity: 1; } }

  /* ── SIGNATUR · Die drei Distanzen zeichnen sich entlang des Flusses ──
     JS setzt body.js-motion + .is-lit auf .mma-learn, sobald die
     Grafik sichtbar ist. Stand → Clinch → Boden, ruhig getaktet. */
  .bv3.mma.js-motion .mma-phase__line { transform: scaleX(0); transition: transform 500ms var(--mma-ease-calm); }
  .bv3.mma.js-motion .mma-learn.is-lit .mma-phase__line { transform: scaleX(1); }
  .bv3.mma.js-motion .mma-learn.is-lit .mma-phase:nth-child(1) .mma-phase__line { transition-delay: 150ms; }
  .bv3.mma.js-motion .mma-learn.is-lit .mma-phase:nth-child(2) .mma-phase__line { transition-delay: 450ms; }
  .bv3.mma.js-motion .mma-learn.is-lit .mma-phase:nth-child(3) .mma-phase__line { transition-delay: 750ms; }

  /* Knoten setzen sich nacheinander (klein → voll) */
  .bv3.mma.js-motion .mma-phase__node { transform: scale(0); transition: transform 460ms var(--mma-spring, cubic-bezier(0.34,1.56,0.64,1)); }
  .bv3.mma.js-motion .mma-learn.is-lit .mma-phase__node { transform: scale(1); }
  .bv3.mma.js-motion .mma-learn.is-lit .mma-phase:nth-child(1) .mma-phase__node { transition-delay: 100ms; }
  .bv3.mma.js-motion .mma-learn.is-lit .mma-phase:nth-child(2) .mma-phase__node { transition-delay: 400ms; }
  .bv3.mma.js-motion .mma-learn.is-lit .mma-phase:nth-child(3) .mma-phase__node { transition-delay: 700ms; }

  /* Phasen-Text steigt mit auf */
  .bv3.mma.js-motion .mma-phase__num,
  .bv3.mma.js-motion .mma-phase__h,
  .bv3.mma.js-motion .mma-phase__range,
  .bv3.mma.js-motion .mma-phase__p { opacity: 0; transform: translateY(12px); transition: opacity 480ms var(--mma-ease-calm), transform 480ms var(--mma-ease-calm); }
  .bv3.mma.js-motion .mma-learn.is-lit .mma-phase :is(.mma-phase__num,.mma-phase__h,.mma-phase__range,.mma-phase__p) { opacity: 1; transform: translateY(0); }
  .bv3.mma.js-motion .mma-learn.is-lit .mma-phase:nth-child(1) :is(.mma-phase__num,.mma-phase__h,.mma-phase__range,.mma-phase__p) { transition-delay: 200ms; }
  .bv3.mma.js-motion .mma-learn.is-lit .mma-phase:nth-child(2) :is(.mma-phase__num,.mma-phase__h,.mma-phase__range,.mma-phase__p) { transition-delay: 500ms; }
  .bv3.mma.js-motion .mma-learn.is-lit .mma-phase:nth-child(3) :is(.mma-phase__num,.mma-phase__h,.mma-phase__range,.mma-phase__p) { transition-delay: 800ms; }

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

  /* §5 · Schul-Bild · langsamer Zoom-Settle beim Reveal */
  .bv3.mma.js-motion .mma-diff__media img { transition: transform 1600ms var(--mma-ease-calm); }
  .bv3.mma.js-motion [data-rv]:not(.is-in).mma-diff__media img { transform: scale(1.07); }

  /* §5 · Kennzahlen · „Schlagkraft" light — die Zahl setzt mit Feder-Impact (Lab-Exp. 06) */
  .bv3.mma .mma-stats > [data-rv] { transform: translateY(30px) scale(0.88); transition: opacity 700ms var(--mma-ease-calm), transform 700ms cubic-bezier(0.34,1.56,0.64,1); }

  /* §8 · Standortkarten · „Angetreten" light — leicht verstreut, treten beim Reveal in die Reihe (Lab-Exp. 08) */
  .bv3.mma .mma-loc__grid > [data-rv]:nth-child(3n+1) { transform: translate(-26px, 42px) rotate(-2.2deg); }
  .bv3.mma .mma-loc__grid > [data-rv]:nth-child(3n+2) { transform: translate(0, 52px) rotate(1.5deg); }
  .bv3.mma .mma-loc__grid > [data-rv]:nth-child(3n) { transform: translate(26px, 42px) rotate(2.2deg); }
  .bv3.mma .mma-loc__grid > [data-rv].is-in { transform: none; }

  /* §8 · Standort-Foto · Zoom-Settle beim Reveal der Karte */
  .bv3.mma.js-motion .mma-loc-card__photo img { transition: transform 1400ms var(--mma-ease-calm); }
  .bv3.mma.js-motion [data-rv]:not(.is-in).mma-loc-card .mma-loc-card__photo img { transform: scale(1.08); }
}