/* motion-orgchart-v4.css — Article 4, RICHER core-driven motion (v9.2 vermilion).
   Builds on the v3 scrub mechanism (continuous, reversible, reduced-motion
   static) and enriches the choreography to product-essay calibre:
     .pool      — dictation pulses travel the fan lines as they draw
     .collapse  — typewriters stream into the machine along curved arcs;
                  the glow intensifies as they land
     .fork      — the tool floods the pool box from the bottom (vermilion level)
   Accent discipline: exactly ONE vermilion gesture per moment, resolving last —
   pool = the load-bearing baseline; collapse = the word processor; fork = the flood.
   Static styling + base (undrawn) values only; JS owns scrubbed properties. */

/* ============================================================
   Shared monoline base
   ============================================================ */
.pool, .collapse, .fork { margin: 60px 0 56px; padding: 0; }

.pool__svg, .collapse__svg, .fork__svg {
  width: 100%; height: auto; display: block; overflow: visible;
}
.pool__svg     { max-height: 440px; }
.collapse__svg { max-height: 410px; }
.fork__svg     { max-height: 440px; }

.pool__svg line, .pool__svg path, .pool__svg circle, .pool__svg rect,
.collapse__svg line, .collapse__svg path, .collapse__svg circle, .collapse__svg rect, .collapse__svg ellipse,
.fork__svg line, .fork__svg path, .fork__svg circle, .fork__svg rect {
  fill: none; stroke: var(--ink); stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.pool__cap, .collapse__cap, .fork__cap {
  margin-top: 16px; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; color: var(--mute-1); text-align: center;
}

/* ============================================================
   MOMENT 1 — .pool  (the typing pool, with dictation pulses)
   ============================================================ */
.pl-mgmt rect {
  fill: var(--ink); stroke: var(--ink); opacity: 0;
  transform-box: fill-box; transform-origin: center; transform: scale(0.7);
}
.pl-mgmt text {
  fill: var(--canvas); stroke: none;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  text-anchor: middle; opacity: 0;
}
.pl-top-label {
  fill: var(--ink); stroke: none;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; text-anchor: middle; opacity: 0;
}
.pl-top-sub {
  fill: var(--mute-1); stroke: none;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em;
  text-anchor: middle; opacity: 0;
}
.pl-dict { stroke: var(--mute-2); stroke-width: 1.1; }

/* the dictation pulse — an ink dot that rides each fan line as it draws.
   ink, not vermilion: the moment's single vermilion is the baseline. */
.pool__svg .pl-dot { fill: var(--ink); stroke: none; opacity: 0; }

.pl-pool-label {
  fill: var(--ink); stroke: none;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; opacity: 0;
}
.pl-pool-sub {
  fill: var(--mute-1); stroke: none;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; opacity: 0;
}
.pl-typist {
  opacity: 0; transform-box: fill-box; transform-origin: center;
  transform: scale(0.4) translateY(6px);
}
.pl-typist rect { stroke: var(--ink); stroke-width: 1.3; fill: var(--canvas); }
.pl-typist line { stroke: var(--ink); stroke-width: 1.3; }

.pl-baseline { stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; }

.pl-hand {
  fill: var(--accent-ink); stroke: none;
  font-family: var(--font-hand); font-size: 20px; font-weight: 500;
  text-anchor: middle; opacity: 0;
}
.pl-hand-conn { stroke: var(--accent-ink); stroke-width: 1.1; stroke-dasharray: 4 4; opacity: 0; }
.pl-caption {
  fill: var(--mute-1); stroke: none;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  text-anchor: middle; opacity: 0;
}

/* ============================================================
   MOMENT 2 — .collapse  (typewriters stream into the machine)
   ============================================================ */
.cl-mgmt rect { fill: var(--ink); stroke: var(--ink); }
.cl-mgmt text {
  fill: var(--canvas); stroke: none;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-anchor: middle;
}
.cl-label {
  fill: var(--ink); stroke: none;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; text-anchor: middle; opacity: 0;
}
.cl-typist { opacity: 0; transform-box: fill-box; transform-origin: center; }
.cl-typist rect { stroke: var(--ink); stroke-width: 1.3; fill: var(--canvas); }
.cl-typist line { stroke: var(--ink); stroke-width: 1.3; }

.cl-wp path, .cl-wp line { stroke: var(--accent); stroke-width: 2.2; fill: none; }
.cl-wp rect { stroke: var(--accent); stroke-width: 2.2; fill: var(--canvas); }
.cl-wp { opacity: 0; }
.cl-wp-glow { fill: var(--accent); stroke: none; opacity: 0; filter: blur(20px); }
.cl-caret { stroke: var(--accent); stroke-width: 3; stroke-linecap: round; opacity: 0; }
.cl-caption {
  fill: var(--ink); stroke: none;
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: 15px; text-anchor: middle; opacity: 0;
}
.collapse.is-typing .cl-caret { opacity: 1; animation: cl-blink 1.05s steps(1, end) infinite; }
@keyframes cl-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* ============================================================
   MOMENT 5 — .fork  (the tool floods the pool box)
   Card A holds in navy outline; Card B floods vermilion from the bottom.
   ============================================================ */
.fk-card-a, .fk-card-b { opacity: 0; }

.fk-card-a rect { fill: var(--canvas); stroke: var(--ink); stroke-width: 1.6; }
.fk-a-title {
  fill: var(--ink); stroke: none;
  font-family: var(--font-sans); font-size: 15px; font-weight: 600;
  letter-spacing: 0.01em; text-anchor: middle;
}
.fk-a-sub {
  fill: var(--ink-soft); stroke: none;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em;
  text-transform: uppercase; text-anchor: middle;
}

.fk-card-b rect { fill: var(--canvas); stroke: var(--ink); stroke-width: 1.6; }
/* the rising vermilion level — the moment's single accent */
.fork__svg rect.fk-flood { fill: var(--accent); stroke: none; opacity: 0.95; }
.fk-b-pool {
  fill: var(--mute-1); stroke: none;
  font-family: var(--font-sans); font-size: 15px; font-weight: 500;
  letter-spacing: 0.01em; text-anchor: middle;
}
.fk-ai-label {
  fill: var(--canvas); stroke: none;            /* cream on the vermilion flood */
  font-family: var(--font-sans); font-size: 30px; font-weight: 700;
  letter-spacing: 0.05em; text-anchor: middle; opacity: 0;
}
.fk-ai-sub {
  fill: rgba(251,250,247,0.88); stroke: none;   /* cream-on-vermilion sub-label */
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em;
  text-transform: uppercase; text-anchor: middle; opacity: 0;
}
.fk-caption {
  fill: var(--ink); stroke: none;
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: 15px; text-anchor: middle; opacity: 0;
}

/* ============================================================
   .orgbranch — reuses motion-orgchart.css; its tool-card fills hardcode the
   retired v8 rgba, so re-tint them vermilion here (loaded after).
   ============================================================ */
.orgchart .oc-tools rect { fill: rgba(199, 62, 42, 0.10); }
.orgchart.stage-2 .oc-tools rect { fill: rgba(199, 62, 42, 0.16); stroke: var(--accent); }
.orgchart.stage-3 .oc-tools rect { fill: rgba(199, 62, 42, 0.04); }
.orgchart:not(.stage-3):not(.stage-4):not(.stage-5) .oc-tools.is-hot rect {
  fill: rgba(199, 62, 42, 0.22); stroke: var(--accent);
}

/* ============================================================
   Accent restoration — the shared ".pool__svg line/path" base selector is
   (0,1,1) and would otherwise beat single-class colour rules on <line>/<ellipse>
   elements, reverting them to navy. These (0,2,0) rules restore the vermilion.
   ============================================================ */
.pool__svg .pl-dict { stroke: var(--mute-2); }
.pool__svg .pl-baseline { stroke: var(--accent); }
.pool__svg .pl-hand-conn { stroke: var(--accent-ink); }
.collapse__svg .cl-wp path,
.collapse__svg .cl-wp line { stroke: var(--accent); }
.collapse__svg .cl-wp rect { stroke: var(--accent); fill: var(--canvas); }
.collapse__svg .cl-wp-glow { fill: var(--accent); stroke: none; }
.collapse__svg .cl-caret { stroke: var(--accent); }

/* ============================================================
   Endcard — v9.2 retires Sacramento inside articles; the m,n sign-off is
   set in the display serif instead of the script.
   ============================================================ */
.endcard__sig { font-family: var(--font-display) !important; font-style: italic; }

/* ============================================================
   Reduced motion — JS renders the built figure (apply(1)); no blink.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .collapse.is-typing .cl-caret { animation: none !important; }
  .cl-caret { opacity: 1; }
}

/* ============================================================
   Mobile
   ============================================================ */
@media (max-width: 900px) {
  .pool__svg     { max-height: 360px; }
  .collapse__svg { max-height: 420px; }
  .fork__svg     { max-height: 300px; }
  .pl-top-label, .pl-pool-label, .cl-label { font-size: 9.5px; }
  .pl-hand { font-size: 16px; }
  .fk-a-title, .fk-b-pool { font-size: 13px; }
  .fk-ai-label { font-size: 26px; }
}