/**
 * WT-2 — Scrollgetriggerte Prozess-Illustrationen (Technik-Welle).
 *
 * Reduzierte Inline-SVG-Linienanimationen im MB-Duktus: weisse/graue Linien
 * auf dunklem Grund (die Sektion traegt .bg-dark), EIN sparsamer Blau-Akzent
 * (var(--feb-accent)) je Bild fuer die bewegte Groesse — den Takt-Puls auf der
 * Roboterzelle bzw. den Kunststofffluss beim Umspritzen. Kein Verlauf, Radius 0.
 *
 * Zeichnen-Effekt: jeder Strichpfad traegt pathLength="1"; im Ruhezustand ist
 * er FERTIG gezeichnet (stroke-dashoffset:0). Erst wenn das Skript die Figur
 * "scharf stellt" (.is-armed, nur bei erlaubter Bewegung und wenn die Figur
 * beim Laden unterhalb der Falz stand), wird der Strich versteckt und beim
 * Eintritt in den Viewport (.is-inview) einmal gezeichnet. Ohne JavaScript und
 * bei prefers-reduced-motion greift .is-armed nie -> der Endzustand steht
 * sofort, ohne Bewegung. Muster wie js/global.js (initReveal).
 *
 * Alleiniges Revier von WT-2 (siehe feb2026_bootstrap.libraries.yml).
 */

/* ------------------------------------------------------------------ *
 * 1. Figur / Buehne
 * ------------------------------------------------------------------ */
.feb-illu {
  margin: var(--feb-space-6, 2rem) 0 0;   /* setzt den .brm-prose-figure-Rand */
  width: 100%;
}

.feb-illu__stage {
  display: block;
  width: 100%;
  height: auto;
  max-width: 900px;
  margin-inline: auto;
  overflow: visible;                       /* Randglyphen duerfen ueberstehen */
}

.feb-illu__figcap {
  max-width: 640px;
  margin: var(--feb-space-4, 1rem) auto 0;
  text-align: center;
  color: var(--feb-grey-400, #b3b8bd);
  font: 400 var(--feb-fs-sm, .875rem)/1.5 var(--feb-font-sans, "Inter", system-ui, sans-serif);
}

/* Die Konturen skalieren mit, die Strichstaerke bleibt ruhig konstant. */
.feb-illu__stage * {
  vector-effect: non-scaling-stroke;
}

/* ------------------------------------------------------------------ *
 * 2. Farb- und Strichrollen  (Design v3: Weiss/Grau + EIN Akzent)
 * ------------------------------------------------------------------ */
.feb-illu__draw,
.feb-illu__flow {
  fill: none;
  stroke: var(--feb-white, #ffffff);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feb-illu__rail {                          /* Taktlinie / Grundlinie */
  fill: none;
  stroke: var(--feb-grey-500, #8b9096);
  stroke-width: 1.2;
  stroke-linecap: round;
}

.feb-illu__hair {                          /* Leaderlinien, Verbinder */
  fill: none;
  stroke: var(--feb-grey-700, #3b4046);
  stroke-width: 1;
}

.feb-illu__node {                          /* Punkt auf der Taktlinie */
  fill: var(--feb-white, #ffffff);
  stroke: none;
  transform-box: fill-box;
  transform-origin: center;
}

.feb-illu__num {
  fill: var(--feb-grey-500, #8b9096);
  font: 600 13px/1 var(--feb-font-sans, "Inter", system-ui, sans-serif);
  letter-spacing: .14em;
}

.feb-illu__label {
  fill: var(--feb-white, #ffffff);
  font: 500 15px/1 var(--feb-font-sans, "Inter", system-ui, sans-serif);
  letter-spacing: .005em;
}

.feb-illu__cap {                           /* Callout-Beschriftung */
  fill: var(--feb-grey-400, #b3b8bd);
  font: 400 13px/1 var(--feb-font-sans, "Inter", system-ui, sans-serif);
  letter-spacing: .02em;
}

/* Der einzige Akzent je Bild: die bewegte Groesse. */
.feb-illu__pulse,
.feb-illu__flow {
  stroke: var(--feb-accent, #006abc);
}
.feb-illu__pulse {
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  opacity: 0;                              /* rein dekorativ: ruht unsichtbar */
}
.feb-illu__flow {
  stroke-width: 2.4;
}

/* ------------------------------------------------------------------ *
 * 3. Ruhezustand = Endzustand
 *    Kein JavaScript, prefers-reduced-motion, oder Figur schon im Bild:
 *    alles ist gezeichnet und sichtbar. Der Puls bleibt (dekorativ) aus.
 * ------------------------------------------------------------------ */
.feb-illu__draw,
.feb-illu__flow {
  stroke-dashoffset: 0;
}

/* ------------------------------------------------------------------ *
 * 4. Scharfgestellt (.is-armed) — nur was gleich animiert wird, wird
 *    versteckt. Setzt das Skript ausschliesslich bei erlaubter Bewegung.
 * ------------------------------------------------------------------ */
.feb-illu.is-armed .feb-illu__draw,
.feb-illu.is-armed .feb-illu__flow {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.feb-illu.is-armed .feb-illu__node {
  opacity: 0;
  transform: scale(0);
}
.feb-illu.is-armed .feb-illu__num,
.feb-illu.is-armed .feb-illu__label,
.feb-illu.is-armed .feb-illu__cap,
.feb-illu.is-armed .feb-illu__hair {
  opacity: 0;
}

/* ------------------------------------------------------------------ *
 * 5. Im Blickfeld (.is-inview) — einmal abspielen, Endzustand halten.
 *    Staffelung ueber --d (Grunddelay je Element, vererbt aus der Gruppe).
 * ------------------------------------------------------------------ */
.feb-illu.is-armed.is-inview .feb-illu__draw {
  animation: feb-illu-draw .85s var(--feb-ease, cubic-bezier(.2,0,0,1)) var(--d, 0s) both;
}
.feb-illu.is-armed.is-inview .feb-illu__flow {
  animation: feb-illu-draw 1.5s var(--feb-ease, cubic-bezier(.2,0,0,1)) var(--d, 0s) both;
}
.feb-illu.is-armed.is-inview .feb-illu__node {
  animation: feb-illu-pop .5s var(--feb-ease, cubic-bezier(.2,0,0,1)) var(--d, 0s) both;
}
.feb-illu.is-armed.is-inview .feb-illu__num,
.feb-illu.is-armed.is-inview .feb-illu__label,
.feb-illu.is-armed.is-inview .feb-illu__cap,
.feb-illu.is-armed.is-inview .feb-illu__hair {
  animation: feb-illu-fade .6s ease var(--dl, 0s) both;
}
.feb-illu.is-armed.is-inview .feb-illu__pulse {
  animation: feb-illu-pulse 2.4s var(--feb-ease, cubic-bezier(.2,0,0,1)) var(--d, 0s) 1 both;
}

/* ------------------------------------------------------------------ *
 * 6. Staffelung (Grunddelay --d, Beschriftungsdelay --dl)
 * ------------------------------------------------------------------ */
.feb-illu__rail       { --d: 0s;   }
.feb-illu__pulse      { --d: 1.05s; }

.feb-illu__step--1    { --d: .55s; --dl: .80s; }
.feb-illu__step--2    { --d: .90s; --dl: 1.15s; }
.feb-illu__step--3    { --d: 1.25s; --dl: 1.40s; }
.feb-illu__step--4    { --d: 1.60s; --dl: 1.75s; }

.feb-illu__node--1    { --d: .50s; }
.feb-illu__node--2    { --d: .85s; }
.feb-illu__node--3    { --d: 1.20s; }
.feb-illu__node--4    { --d: 1.55s; }

/* Overmolding-Takt: Werkzeug -> Einleger -> Lagepruefung -> Kunststofffluss */
.feb-illu__om-tool    { --d: 0s;   --dl: .55s; }
.feb-illu__om-insert  { --d: .70s; --dl: 1.05s; }
.feb-illu__om-marks   { --dl: 1.35s; }
.feb-illu__om-flow    { --d: 1.55s; --dl: 2.60s; }

/* ------------------------------------------------------------------ *
 * 7. Keyframes
 * ------------------------------------------------------------------ */
@keyframes feb-illu-draw {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}
@keyframes feb-illu-pop {
  from { opacity: 0; transform: scale(0); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: none; }
}
@keyframes feb-illu-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Kurzer Akzentstrich wandert einmal ueber die Taktlinie und verlischt. */
@keyframes feb-illu-pulse {
  0%   { opacity: 0; stroke-dashoffset: 1; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; stroke-dashoffset: 0; }
}

/* ------------------------------------------------------------------ *
 * 8. Bewegung aus: Endzustand sofort, nichts animiert sich.
 *    Doppelte Absicherung — das Skript stellt hier ohnehin nicht scharf.
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .feb-illu .feb-illu__draw,
  .feb-illu .feb-illu__flow {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
    animation: none !important;
  }
  .feb-illu .feb-illu__node,
  .feb-illu .feb-illu__num,
  .feb-illu .feb-illu__label,
  .feb-illu .feb-illu__cap,
  .feb-illu .feb-illu__hair {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .feb-illu .feb-illu__pulse {
    animation: none !important;
    opacity: 0 !important;                 /* rein dekorativ -> bleibt aus */
  }
}