/* ============================================================================
 * CoreFlow — Motion Enhancement Layer (ADDITIVE / progressive-enhancement)
 * Served build copy: kb/src/css/coreflow-motion.enhance.css
 * Source: proto/coreflow-motion.enhance.css  ·  Owner: Agent 04 (Technical)
 * Spec: agents/reports/SITE-MOTION-UX-SPEC.md  ·  ТЗ: agents/reports/MOTION-TZ-ALL-AGENTS.md
 *
 * SCOPE (binding): ADDITIVE-ONLY. Attaches to EXISTING anchors only; never
 *   duplicates existing structure. Wired into the homepages via two <link>/
 *   <script> includes only (no copy change, no markup rewrite).
 *
 * NAMESPACE: every selector/class is prefixed `cfm-` (CoreFlow Motion) so it
 *   can NEVER collide with the site's own `.reveal`/`.in` system.
 *
 * COLOR: reuses the site's CSS custom properties (--green, --amber, --line, …)
 *   with safe fallbacks → inherits brand theming with zero new tokens.
 *
 * A11Y / REDUCED-MOTION: all motion gated behind
 *   @media (prefers-reduced-motion: no-preference). Under `reduce` (or JS-off),
 *   everything shows at its final state with no transition. (MANDATORY.)
 *
 * COMPOSITOR-SAFE (research refinement): reveal + flow use transform/opacity
 *   ONLY (no width/height/stroke-dashoffset animation on the main paint path).
 *   The scroll-driven flow line is revealed by a transform: scaleY clip-reveal
 *   (compositor thread) rather than animating stroke-dashoffset (paint-bound).
 *   CSS `animation-timeline: view()/scroll()` is used where supported, with an
 *   IntersectionObserver / rAF fallback in JS.
 * ========================================================================== */

/* ---- 0. Final/static baseline (applies to EVERYONE, incl. JS-off & reduced) */
.cfm-reveal       { opacity: 1; transform: none; }
.cfm-count        { font-variant-numeric: tabular-nums; }
.cfm-leak-overlay { /* hidden until JS mounts it; see JS */ }

/* ---- 1. Motion ONLY when allowed (reduced-motion users never enter here) -- */
@media (prefers-reduced-motion: no-preference) {

  /* (A) SCROLL-REVEAL — subtle, 8–16px translate, 200–400ms.
   * Active only after JS adds .cfm-on to <html>. Until an element gets
   * .cfm-in it sits 12px down at 0 opacity; .cfm-in animates it home.        */
  .cfm-on .cfm-reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 320ms cubic-bezier(.16, 1, .3, 1),
                transform 320ms cubic-bezier(.16, 1, .3, 1);
    will-change: opacity, transform;
  }
  .cfm-on .cfm-reveal.cfm-in {
    opacity: 1;
    transform: none;
  }
  /* gentle stagger for sibling groups the JS tags (max 4 to stay restrained) */
  .cfm-on .cfm-reveal.cfm-stagger-1 { transition-delay: 60ms; }
  .cfm-on .cfm-reveal.cfm-stagger-2 { transition-delay: 120ms; }
  .cfm-on .cfm-reveal.cfm-stagger-3 { transition-delay: 180ms; }

  /* (C) LEAK CHAIN — pulse on the highlighted leak node (cold, single accent).
   * Opacity-only breathe (compositor-safe); restrained, never spectacle.     */
  .cfm-on .cfm-leak-overlay { opacity: 1; }
  .cfm-on .cfm-leak-ring {
    animation: cfm-leak-pulse 2.8s ease-in-out infinite;
    transform-origin: center;
  }
  .cfm-on .cfm-leak-drip {
    animation: cfm-leak-drip 2.8s ease-in-out infinite;
  }
}

@keyframes cfm-leak-pulse {
  0%, 100% { opacity: .85; transform: scale(1); }
  50%      { opacity: .35; transform: scale(1.12); }
}
@keyframes cfm-leak-drip {
  0%       { opacity: 0; transform: translateY(0); }
  20%      { opacity: .9; }
  80%      { opacity: .15; transform: translateY(6px); }
  100%     { opacity: 0;  transform: translateY(6px); }
}

/* ---- 2. (C) Leak-chain SVG presentation (static styling, motion above) ---- */
.cfm-leak-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;       /* never intercept clicks — pure decoration */
  z-index: 1;
}
.cfm-leak-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.cfm-leak-ring {
  fill: none;
  stroke: var(--amber, #E0B15C);
  stroke-width: 1.5;
  opacity: .85;
}
.cfm-leak-drip { fill: var(--amber, #E0B15C); opacity: .8; }
.cfm-leak-label {
  font-family: var(--mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 11px;
  fill: var(--amber, #E0B15C);
  letter-spacing: .02em;
}

/* Make sure the host node can anchor the absolute overlay. JS adds this class
 * to the existing leak node so we don't rely on editing markup inline.       */
.cfm-leak-host { position: relative; }

/* ---- 3. Count-up target: prevent layout shift while digits change -------- */
.cfm-count[data-cfm-final] { white-space: nowrap; }

/* ---- 4. Responsive / safety (≤400 mobile · ≥1024 desktop) ---------------- */
.cfm-leak-host { overflow: visible; }
@media (max-width: 400px) {
  .cfm-leak-label { font-size: 10px; }      /* keep label inside narrow node */
}
/* Tap targets: this layer adds NO new interactive controls (decoration only),
 * so it introduces no <44px hit areas. Documented intentionally.            */

/* cfm-count-fix (Agent 07 QA: reserve width so count-up can't shift inline neighbours — CLS-safe, Layout-Audit-ready) */
.cfm-count{display:inline-block;min-width:4ch;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ============================================================================
 * (+SIGNATURE) STICKY PINNED DIAGNOSTIC-CHAIN  +  SCROLL-DRIVEN SVG LEAK
 * ADDITIVE extension — appended below the v0.1 layer; nothing above is altered.
 *
 * Compositor-safe flow reveal (research refinement): the green flow line is
 * revealed by a transform: scaleY clip (compositor thread), driven by a CSS
 * scroll/view timeline where supported and by a rAF-set custom property
 * (--cfm-flow-p) as fallback. We do NOT animate stroke-dashoffset on the main
 * paint path. The static end-state remains a fully-shown line.
 * ========================================================================== */

/* ---- 5. Per-node scroll-fill accents (set by JS from scroll progress) ----- */
.cfm-flow-node    { position: relative; }
.cfm-flow-node .idx { transition: color 260ms ease; }
.cfm-flow-node .lbl { transition: color 260ms ease; }

@media (prefers-reduced-motion: no-preference) {
  .cfm-on .cfm-flow-node.cfm-flowed .idx { color: var(--green, #16C172); }
  .cfm-on .cfm-flow-node.cfm-flowed .lbl { color: var(--fg, #F4F6F8); }
  .cfm-on .cfm-flow-node.cfm-flowed::after {
    content: "";
    position: absolute;
    left: -2px; top: 6px; bottom: 6px;
    width: 2px; border-radius: 2px;
    background: var(--green, #16C172);
    opacity: .55;
    box-shadow: 0 0 6px var(--green-line, rgba(76,175,125,.4));
  }
  .cfm-on .cfm-flow-node.cfm-leak-active .chip { color: var(--amber, #E0B15C); }
}
@media (prefers-reduced-motion: reduce) {
  .cfm-flow-node.cfm-flowed .idx { color: var(--green, #16C172); }
}

/* ---- 6. Sticky pin wrapper (added by JS around the existing console) ------ */
.cfm-pin-wrap { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .cfm-on .cfm-pin-host {
    position: -webkit-sticky;
    position: sticky;
    top: 84px;                /* clears the fixed nav; restrained, no jacking  */
  }
}
@media (max-width: 700px) {
  .cfm-on .cfm-pin-host { position: static; top: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .cfm-pin-host { position: static !important; top: auto !important; }
}

/* ---- 7. Scroll-driven SVG leak/flow line (overlay inside the chain) ------- */
/* Compositor-safe reveal: the progress line is a full-length path clipped by a
 * transform: scaleY on its own group (origin top), driven by --cfm-flow-p
 * (0→1). No stroke-dashoffset animation. Decorative overlay: pointer-events:
 * none, aria-hidden, no reflow.                                              */
.cfm-flow-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;                 /* behind node text, above panel bg             */
  overflow: visible;
}
.cfm-flow-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.cfm-flow-track {
  fill: none;
  stroke: var(--line, rgba(255,255,255,.07));
  stroke-width: 2;
  opacity: .5;
}
.cfm-flow-progress {
  fill: none;
  stroke: var(--green, #16C172);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: .85;
}
/* Clip-reveal group: scaled vertically by scroll progress (compositor-safe).
 * --cfm-flow-p is set by JS (fallback) or by the scroll timeline below.      */
.cfm-flow-clip {
  transform: scaleY(var(--cfm-flow-p, 0));
  transform-origin: top center;
  transform-box: fill-box;
  will-change: transform;
}
.cfm-flow-leak {
  fill: none;
  stroke: var(--amber, #E0B15C);
  stroke-width: 1.5;
}
@media (prefers-reduced-motion: no-preference) {
  /* the leak pulse only "breathes" once the scroll front has reached it */
  .cfm-on .cfm-flow-leak.cfm-leak-active {
    animation: cfm-flow-leak-pulse 2.8s ease-in-out infinite;
    transform-origin: center;
  }
}
@keyframes cfm-flow-leak-pulse {
  0%, 100% { opacity: .9; }
  50%      { opacity: .3; }
}

/* CSS scroll-driven path (off main-thread) where supported: drive --cfm-flow-p
 * via a view-progress timeline so the clip-reveal runs on the compositor with
 * no JS. JS rAF fallback covers browsers without animation-timeline support.  */
@supports (animation-timeline: view()) {
  @property --cfm-flow-p {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }
  @media (prefers-reduced-motion: no-preference) {
    .cfm-on .cfm-flow-overlay {
      animation: cfm-flow-fill linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 60%;
    }
  }
  @keyframes cfm-flow-fill {
    from { --cfm-flow-p: 0; }
    to   { --cfm-flow-p: 1; }
  }
}

/* ---- 8. Reduced-motion / static end-state for the SVG flow ---------------- */
/* Under reduce or JS-off: flow line shown fully drawn (progress == 100%), leak
 * marker static (no pulse).                                                  */
@media (prefers-reduced-motion: reduce) {
  .cfm-flow-clip { transform: scaleY(1) !important; }
  .cfm-flow-leak { animation: none !important; opacity: .9; }
}

/* ---- 9. Responsive safety for the pin/flow layer (≤400 · ≥1024) ---------- */
@media (max-width: 400px) {
  .cfm-flow-track, .cfm-flow-progress { stroke-width: 1.5; }
}
