/**
 * Sanjal Enterprises — Capability Graph
 * Teal node-edge motif with gold nodes at intersections, soft glow, faint
 * orbit rings and drifting ambient particles for atmosphere. JS
 * (capability-graph.js) builds the SVG; this file styles it and defines
 * the load-in animation, disabled entirely under prefers-reduced-motion.
 *
 * Self-contained: every custom property is read with a literal fallback
 * (var(--x, fallback)) so this file renders correctly whether or not the
 * page also loads a richer token set (e.g. assets/css/home.css), and
 * matches the brand tokens even when loaded standalone alongside
 * assets/css/style.css.
 */

.capability-graph {
  width: 100%;
  height: 100%;
}

.capability-graph__canvas {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 320px;
}

.capability-graph__canvas svg {
  width: 100%;
  height: 100%;
  display: block;
}

.capability-graph__fallback-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3, 12px);
  color: var(--color-text-muted, #5B6478);
}

.capability-graph__caption {
  margin-top: var(--space-4, 16px);
  font-size: var(--fs-caption, 0.8rem);
  color: var(--color-text-muted, #5B6478);
  text-align: center;
}

/* Orbit rings — faint atmospheric structure behind the graph */
.cg-orbit {
  fill: none;
  stroke: var(--accent-line, rgba(15, 181, 174, 0.14));
  stroke-width: 1;
  stroke-dasharray: 2 8;
  opacity: 0;
  animation: cg-orbit-in 1.2s ease forwards;
}

/* Ambient particles */
.cg-particle {
  fill: var(--accent, var(--color-signal-teal, #0FB5AE));
  opacity: 0;
  animation-name: cg-drift;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.cg-particle--gold { fill: var(--gold, var(--color-brass-gold, #B8964B)); }

/* Edges */
.cg-edge {
  fill: none;
  stroke: url(#cgEdgeGradient);
  stroke-width: 1.4;
  stroke-linecap: round;
  opacity: 0.6;
}

.cg-edge--animated {
  stroke-dasharray: var(--cg-edge-length, 400);
  stroke-dashoffset: var(--cg-edge-length, 400);
  animation: cg-draw-edge 1.1s var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1)) forwards;
  animation-delay: var(--cg-edge-delay, 0ms);
}

/* Nodes */
.cg-node-group {
  transform-origin: center;
}

.cg-node-halo {
  fill: var(--accent, var(--color-signal-teal, #0FB5AE));
  opacity: 0.16;
  filter: url(#cgSoftGlow);
}

.cg-node-group--intersection .cg-node-halo {
  fill: var(--gold, var(--color-brass-gold, #B8964B));
  opacity: 0.22;
}

.cg-node {
  stroke-width: 1.5;
  filter: url(#cgGlow);
  transition: r 150ms var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
}

.cg-node--standard {
  fill: var(--panel, #0d1c33);
  stroke: var(--accent, var(--color-signal-teal, #0FB5AE));
}

.cg-node--intersection {
  fill: var(--gold, var(--color-brass-gold, #B8964B));
  stroke: var(--panel, rgba(247, 248, 250, 0.9));
}

.cg-node-label {
  font-family: var(--font-mono, 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace);
  font-size: 12px;
  letter-spacing: 0.02em;
  fill: var(--text-body, var(--text-mute, rgba(10, 20, 40, 0.78)));
}

.cg-node-group--animated {
  opacity: 0;
  animation: cg-pop-node 550ms var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1)) forwards;
  animation-delay: var(--cg-node-delay, 0ms);
}

.cg-node-group--intersection .cg-node {
  animation: cg-pulse-node 3.2s var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1)) infinite;
  animation-delay: var(--cg-node-delay, 0ms);
}

@keyframes cg-draw-edge {
  to { stroke-dashoffset: 0; }
}

@keyframes cg-pop-node {
  from { opacity: 0; transform: scale(0.4); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes cg-pulse-node {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(184, 150, 75, 0)); }
  50% { filter: drop-shadow(0 0 8px rgba(184, 150, 75, 0.7)); }
}

@keyframes cg-orbit-in {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes cg-drift {
  0%   { opacity: 0; transform: translate(0, 0); }
  10%  { opacity: 0.55; }
  50%  { opacity: 0.85; transform: translate(6px, -16px); }
  90%  { opacity: 0.4; }
  100% { opacity: 0; transform: translate(-4px, -30px); }
}

/* Reduced motion: render fully static, no dash-draw, no pulse, no pop-in,
   no drifting particles (JS also skips generating the particle layer). */
@media (prefers-reduced-motion: reduce) {
  .cg-edge--animated {
    stroke-dashoffset: 0;
    animation: none;
  }

  .cg-node-group--animated {
    opacity: 1;
    animation: none;
    transform: none;
  }

  .cg-node-group--intersection .cg-node {
    animation: none;
  }

  .cg-orbit {
    opacity: 1;
    animation: none;
  }

  .cg-particle {
    display: none;
  }
}