/* ============================================================================
   DIGITALGROWMATIC — Gate 3.3: S02 → S03 Bewegungsebene (PROTOTYP, nur Desktop)
   Wird ausschließlich aktiv, wenn js/systems.js die Klasse .is-motion setzt
   (≥ 1280 px Breite, ≥ 600 px Höhe, keine reduzierte Bewegung). Ohne diese Klasse
   gilt unverändert der statische G3.1-Zustand aus sections.css.
   Entfernen: Link auf diese Datei + <script src="/js/systems.js"> aus dem Template.

   Globale Werte (von systems.js auf .story geschrieben, je 0…1):
     --e  Eintritt (S03 kommt ins Bild, Aufgaben blenden gestaffelt ein, Label ABOUT → SYSTEME)
     --sc Startgröße der Aufgaben (1 = Arbeitsfläche, 0 = Endgröße), für alle Wörter gleich
     --m  Ordnen   (Aufgaben wandern geradlinig von der Arbeitsfläche zu ihrem System)
     --g  Gruppen  (Gruppenschlüssel, 3-px-Linie, „Aus Arbeit werden Systeme.“)
     --k  Kompakt  (1 = sechs Gruppen eng im Bild, 0 = echtes 2×3-Layout)
     --f  Final    (Nummer, Name, Beschreibung, CTA)
   Pro Element (gemessen): --R (Zeilenversatz kompakt), --T (Aufgabenversatz kompakt),
     --wx/--wy (Arbeitsfläche relativ zur Endposition), --ws (Startgröße), --i (Staffel).
   ============================================================================ */

.story.is-motion .s03::after { content: ""; display: block; height: var(--d, 0px); }   /* Scrollstrecke */
.story.is-motion .s03__inner { position: sticky; top: 0; }
/* Niedrige Desktop-Fenster (600–759 px): Label nicht unter dem kompakten Kopf; ab 760 px unverändert */
@media (max-height: 759px) { .story.is-motion .s03__inner { padding-top: calc(var(--nav-h, 56px) + 14px); } }
.story.is-motion .s03__heads { position: relative; }

.story.is-motion .s03__pre {
  display: block; position: absolute; left: 0; right: 0; top: 0;
  margin: clamp(18px, 2.6vh, 28px) 0 0;
  font-stretch: 118%; font-weight: 800; text-transform: uppercase;
  font-size: clamp(24px, 2.7vw, 48px); line-height: 1.02; letter-spacing: -.01em;
  max-inline-size: none;
  opacity: calc(min(1, var(--e) * 1.6) * (1 - clamp(0, calc(var(--g) * 2), 1)));   /* erst ausblenden … */
  pointer-events: none;
}
.story.is-motion .s03__pre .s03__line { display: block; }
.story.is-motion .lbl-swap { display: inline-grid; }
.story.is-motion .lbl-swap > span { grid-area: 1 / 1; }
.story.is-motion .lbl-from { display: inline; opacity: calc(1 - clamp(0, calc((var(--e) - .52) / .16), 1)); }   /* ABOUT aus …            */
.story.is-motion .lbl-to { opacity: clamp(0, calc((var(--e) - .70) / .18), 1); }                                  /* … dann SYSTEME ein, wenn die Arbeitsfläche entsteht */
.story.is-motion .s03__headline { opacity: clamp(0, calc(var(--g) * 2 - 1), 1); }   /* … dann einblenden, nie übereinander */

.story.is-motion .sys {
  position: relative;
  border-top-color: transparent;
  transform: translateY(calc(var(--k) * var(--R, 0px)));
}
.story.is-motion .sys::before {
  content: ""; position: absolute; left: 0; right: 0; top: -3px; height: 3px;
  background: var(--c);
  transform: scaleX(var(--g)); transform-origin: 0 50%;
}
.story.is-motion .sys__group {   /* Stufe 3: Schlüssel steht links; Stufe 4: rückt neben die erscheinende Nummer */
  opacity: clamp(0, calc(var(--g) * 1.6), 1);
  transform: translateX(calc((1 - clamp(0, calc(var(--f) * 2), 1)) * var(--nx, 0px)));   /* erste Hälfte: Schlüssel rückt */
}
.story.is-motion .sys__num { opacity: clamp(0, calc(var(--f) * 2.2 - .9), 1); }      /* zweite Hälfte: Nummer erscheint */
.story.is-motion .sys__name,
.story.is-motion .sys__text,
.story.is-motion .sys__cta {
  opacity: calc(clamp(0, calc(var(--f) * 1.7), 1) * clamp(0, calc(1 - var(--k) * 1.4), 1));   /* Name, sobald das Raster sich öffnet (nicht über den kompakten Aufgaben) */
  transform: translateY(calc((1 - var(--f)) * 12px));
}
/* Beschreibung + CTA erst, wenn das Raster entfaltet ist (sonst liegen sie kurz über den kompakten Aufgaben) */
.story.is-motion .sys__text,
.story.is-motion .sys__cta {
  opacity: calc(clamp(0, calc(var(--f) * 1.7), 1) * clamp(0, calc(1 - var(--k) * 3), 1));
  transform: translateY(calc((1 - var(--f)) * 12px));
}

.story.is-motion .sys__tasks li {
  /* Ordnen System für System (--s = Startanteil, --mw = Fensterbreite), ruhig an- und auslaufend */
  --t: clamp(0, calc((var(--m) - var(--s, 0)) / var(--mw, 1)), 1);
  --mt: calc(var(--t) * var(--t) * var(--t) * (var(--t) * (var(--t) * 6 - 15) + 10));   /* steile Mitte: wenig Zeit im offenen Raum */
  transform-origin: 0 0;
  transform:
    translate(
      calc((1 - var(--mt)) * var(--wx, 0px)),
      calc((1 - var(--mt)) * (var(--wy, 0px) - var(--k) * (var(--R, 0px) + var(--T, 0px))) + var(--k) * var(--T, 0px))
    )
    scale(calc(1 + var(--sc) * (var(--ws, 1) - 1)));   /* alle Wörter gleichzeitig gleich groß – keine Hierarchie im Flug */
  /* gestaffeltes Einblenden beim Eintritt; im Flug leicht zurückgenommen, damit Kreuzungen
     als Überlagerung lesbar bleiben statt als Kollision */
  opacity: calc(clamp(0, calc((var(--e) - var(--i, 0) * .028) * 4), 1) * (1 - .8 * var(--t) * (1 - var(--t))));   /* Flug weniger blass (vorher 1,6) */
  color: color-mix(in srgb, var(--s-ink) calc((1 - var(--mt)) * 100%), var(--s-faint));
  will-change: transform;
}
.story.is-motion .sys__tasks li:not(:last-child)::after { opacity: var(--g); }

/* Messzustand: keine Transformation, damit Endpositionen exakt gelesen werden */
.story.is-measuring .sys,
.story.is-measuring .sys__tasks li,
.story.is-measuring .sys__num, .story.is-measuring .sys__name,
.story.is-measuring .sys__text, .story.is-measuring .sys__cta,
.story.is-measuring .sys__group { transform: none !important; }

/* Endzustand erreicht: exakt der statische G3.1-Stil (keine Transforms/Layer mehr) */
.story.is-motion[data-phase="done"] .s03__inner { position: relative; top: var(--d, 0px); }   /* = Sticky-Endlage, ohne eigene Ebene → exakt statische Textdarstellung */
.story.is-motion[data-phase="done"] .sys { transform: none; border-top-color: var(--c, var(--s-ink)); }
.story.is-motion[data-phase="done"] .sys::before { content: none; }
.story.is-motion[data-phase="done"] .sys__tasks li,
.story.is-motion[data-phase="done"] .sys__num,
.story.is-motion[data-phase="done"] .sys__name,
.story.is-motion[data-phase="done"] .sys__text,
.story.is-motion[data-phase="done"] .sys__cta { transform: none; opacity: 1; will-change: auto; }
.story.is-motion[data-phase="done"] .sys__tasks li { color: var(--s-faint); }
.story.is-motion[data-phase="done"] .sys__group { transform: none; }
.story.is-motion[data-phase="done"] .sys__group,
.story.is-motion[data-phase="done"] .s03__headline,
.story.is-motion[data-phase="done"] .sys__tasks li:not(:last-child)::after { opacity: 1; }
.story.is-motion[data-phase="done"] .s03__pre { opacity: 0; }
.story.is-motion[data-phase="done"] .lbl-swap { display: inline; }
.story.is-motion[data-phase="done"] .lbl-from { display: none; }
.story.is-motion[data-phase="done"] .lbl-to { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .story.is-motion .s03__inner { position: static; }   /* Absicherung; JS aktiviert hier gar nicht erst */
}

/* ============================================================================
   TABLET + MOBIL (< 1280 px) — Gate 3.4. Aktiv nur mit .is-flow (systems.js).
   Pro System, zeitbasiert, einmalig: AUFGABEN → GRUPPE → SYSTEM.
   Ausgangszustand: drei Aufgaben untereinander gestapelt in Graphit,
   Linie eingezogen, Schlüssel/Nummer/Name/Text/CTA verborgen.
   .is-resolved startet die Übergänge, .is-settled = exakt statischer G3.1-Stil.
   ============================================================================ */
.story.is-flow .sys { position: relative; --ease-o: cubic-bezier(.65, 0, .35, 1); }
.story.is-flow .sys:not(.is-settled) { border-top-color: transparent; }
.story.is-flow .sys:not(.is-settled)::before {
  content: ""; position: absolute; left: 0; right: 0; top: -3px; height: 3px;
  background: var(--c); transform: scaleX(0); transform-origin: 0 50%;
}
.story.is-flow .sys:not(.is-settled) .sys__tasks li {
  transform-origin: 0 0;
  transform: translate(var(--fx, 0px), var(--fy, 0px));
  color: var(--s-ink);
}
.story.is-flow .sys:not(.is-settled) .sys__tasks li:not(:last-child)::after { opacity: 0; }
.story.is-flow .sys:not(.is-settled) .sys__group { opacity: 0; transform: translateX(var(--nx, 0px)); }
.story.is-flow .sys:not(.is-settled) .sys__num,
.story.is-flow .sys:not(.is-settled) .sys__name,
.story.is-flow .sys:not(.is-settled) .sys__text,
.story.is-flow .sys:not(.is-settled) .sys__cta { opacity: 0; transform: translateY(10px); }

/* Auflösen (gestrafft, vorher bis ~1,9 s): 0 ms Aufgaben ordnen sich ein · ~320 ms Linie + Schlüssel · ~620 ms System */
.story.is-flow .sys.is-resolved::before { transform: scaleX(1); transition: transform 480ms var(--ease-o) calc(var(--cd, 0ms) + 300ms); }
.story.is-flow .sys.is-resolved .sys__tasks li {
  transform: translate(0, 0); color: var(--s-faint);
  transition: transform 560ms var(--ease-o) var(--cd, 0ms),
              color 560ms var(--ease-o) var(--cd, 0ms);
}
.story.is-flow .sys.is-resolved .sys__tasks li:not(:last-child)::after { opacity: 1; transition: opacity 260ms ease calc(var(--cd, 0ms) + 520ms); }
.story.is-flow .sys.is-resolved .sys__group {
  opacity: 1; transform: translateX(0);
  transition: opacity 320ms ease calc(var(--cd, 0ms) + 340ms), transform 400ms var(--ease-o) calc(var(--cd, 0ms) + 700ms);
}
.story.is-flow .sys.is-resolved .sys__num { opacity: 1; transform: none; transition: opacity 340ms ease calc(var(--cd, 0ms) + 860ms), transform 340ms var(--ease-o) calc(var(--cd, 0ms) + 860ms); }
.story.is-flow .sys.is-resolved .sys__name { opacity: 1; transform: none; transition: opacity 420ms ease calc(var(--cd, 0ms) + 620ms), transform 420ms var(--ease-o) calc(var(--cd, 0ms) + 620ms); }
.story.is-flow .sys.is-resolved .sys__text { opacity: 1; transform: none; transition: opacity 420ms ease calc(var(--cd, 0ms) + 700ms), transform 420ms var(--ease-o) calc(var(--cd, 0ms) + 700ms); }
.story.is-flow .sys.is-resolved .sys__cta  { opacity: 1; transform: none; transition: opacity 420ms ease calc(var(--cd, 0ms) + 780ms), transform 420ms var(--ease-o) calc(var(--cd, 0ms) + 780ms); }
.story.is-flow .sys.is-instant,
.story.is-flow .sys.is-instant *, .story.is-flow .sys.is-instant::before, .story.is-flow .sys.is-instant *::after { transition: none !important; }
.story.is-measuring.is-flow .sys * { transform: none !important; }
/* Endzustand: exakt der statische G3.1-Stil (keine Transforms, keine Übergänge) */
.story.is-flow .sys.is-settled .sys__tasks li,
.story.is-flow .sys.is-settled .sys__group,
.story.is-flow .sys.is-settled .sys__num,
.story.is-flow .sys.is-settled .sys__name,
.story.is-flow .sys.is-settled .sys__text,
.story.is-flow .sys.is-settled .sys__cta { transform: none; transition: none; }

@media (prefers-reduced-motion: reduce) {
  .story.is-flow .sys:not(.is-settled) * { opacity: 1 !important; transform: none !important; }   /* Absicherung; JS aktiviert hier gar nicht erst */
}