/* ===========================================================================
   Sputnik X — Memory Center :: Neural-Graph animation layer (NON-Tailwind)

   Pure-CSS "living graph" Stitch aesthetic over the SVG that connectome.js
   draws inside `#mc-neural-graph #canvas`. connectome.js is hosted VERBATIM —
   this file NEVER touches its data, layout, or JS; it only animates the
   elements it already renders (circles, lines) via filter / opacity / transform.

   Linked AFTER connectome.css + mc-connectome-host.css so these rules win.

   PERFORMANCE (graph can carry ~200 nodes):
     • Only `filter`, `opacity`, `transform` are animated — all compositor- or
       paint-cheap; NO layout-triggering props (width/r/cx/cy/x/y).
     • Amplitude is gentle (scale ≤ 1.04, soft cyan glow) so 200 simultaneous
       drop-shadows stay smooth; staggered start phases (nth-of-type) avoid a
       single synchronized repaint spike and read as organic "breathing".
     • `prefers-reduced-motion: reduce` hard-disables every animation here.

   Cyan tokens: #8aebff (--color-mc-primary), #22d3ee (--color-mc-primary-
   container) → glow rgba(34,211,238,…), matching the Stitch reference.
   =========================================================================== */

/* ── Node circles: cyan glow-pulse + gentle breathing ─────────────────────
   transform-box:fill-box + transform-origin:center make `scale()` pivot on the
   circle's own centre (SVG's default user-space origin would translate it). We
   target the node-group circles and explicitly EXCLUDE the orphan/stale halo
   rings (.halo-*) — those carry status meaning and have their own styling. */
#mc-neural-graph #canvas g.nodes circle:not([class*='halo']) {
  transform-box: fill-box;
  transform-origin: center;
  animation: mc-node-glow 3s ease-in-out infinite;
  will-change: filter, transform;
}

@keyframes mc-node-glow {
  0%,
  100% {
    filter: drop-shadow(0 0 2px rgba(34, 211, 238, 0.35));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 7px rgba(34, 211, 238, 0.75));
    transform: scale(1.04);
  }
}

/* Staggered phases so ~200 nodes don't pulse in lock-step (organic + cheaper
   repaint distribution). connectome.js nests each node as g.nodes > g > circle,
   so we stagger on the per-node group (nth-of-type on the inner <g>), NOT on the
   circle (which is always the 1st circle inside its own group). Five buckets. */
#mc-neural-graph #canvas g.nodes > g:nth-of-type(5n + 2) circle:not([class*='halo']) {
  animation-delay: 0.6s;
}
#mc-neural-graph #canvas g.nodes > g:nth-of-type(5n + 3) circle:not([class*='halo']) {
  animation-delay: 1.2s;
}
#mc-neural-graph #canvas g.nodes > g:nth-of-type(5n + 4) circle:not([class*='halo']) {
  animation-delay: 1.8s;
}
#mc-neural-graph #canvas g.nodes > g:nth-of-type(5n + 5) circle:not([class*='halo']) {
  animation-delay: 2.4s;
}

/* ── Edges: flowing cyan shimmer suggesting live signal flow ───────────────
   connectome.js draws edges as <line> inside g.edges and sets an inline
   stroke-opacity. We animate stroke-opacity (a soft shimmer) AND
   stroke-dashoffset (a directional "flow"). Because connectome.js sets a
   stroke-dasharray only on file_input edges, we add a default dasharray here
   so the dashoffset flow is visible on all edges; the gentle dash keeps lines
   reading as connections, not as hard dotted rules. */
#mc-neural-graph #canvas g.edges line {
  stroke-dasharray: 6 6;
  animation:
    mc-edge-shimmer 3.2s ease-in-out infinite,
    mc-edge-flow 4s linear infinite;
  will-change: stroke-opacity, stroke-dashoffset;
}

@keyframes mc-edge-shimmer {
  0%,
  100% {
    stroke-opacity: 0.28;
  }
  50% {
    stroke-opacity: 0.7;
  }
}

@keyframes mc-edge-flow {
  0% {
    stroke-dashoffset: 24;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

/* Stagger edge phases too (3 buckets) so the flow looks like independent
   signals rather than one marching grid. */
#mc-neural-graph #canvas g.edges line:nth-of-type(3n + 2) {
  animation-delay: 0.8s, 1.1s;
}
#mc-neural-graph #canvas g.edges line:nth-of-type(3n + 3) {
  animation-delay: 1.6s, 2.2s;
}

/* ── "LIVE" stat indicator: steady live-pulse ─────────────────────────────
   The Neural-Graph stats panel shows a "Live" chip with a status dot
   (.mc-stat-live .mc-os-dot). Give the whole chip a calm opacity pulse
   (live-pulse) on top of the dot's existing glow. */
#mc-neural-graph .mc-stat-live .mc-os-dot {
  animation: mc-graph-live-pulse 1.6s ease-in-out infinite;
}

@keyframes mc-graph-live-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

/* ── Accessibility: respect reduced-motion — kill ALL graph animation. ───── */
@media (prefers-reduced-motion: reduce) {
  #mc-neural-graph #canvas g.nodes circle,
  #mc-neural-graph #canvas g.edges line,
  #mc-neural-graph .mc-stat-live .mc-os-dot {
    animation: none !important;
  }
}