/* ============================================================
   HERO NETWORK GRAPH — Animated SVG integration diagram
   ============================================================ */

.hero-graph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-graph svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* On single-column layouts, show graph as background behind hero text */
@media (max-width: 960px) {
  .hero-figure {
    position: absolute !important;
    top: 50%;
    right: -10%;
    transform: translateY(-50%);
    width: 400px;
    max-width: none;
    height: 400px;
    opacity: 0.25;
    pointer-events: none;
    aspect-ratio: auto;
    margin: 0;
  }
}

/* Connection lines */
.hero-graph .connection-line {
  stroke: var(--q-luminous-emerald);
  stroke-width: 1.5;
  opacity: 0.5;
  fill: none;
}

/* Data pulses — single keyframe, varied via delay and duration */
.hero-graph .data-pulse {
  fill: var(--q-aurora-mint);
  opacity: 0;
  animation: pulse-travel var(--pulse-dur, 3.4s) ease-in-out var(--pulse-delay, 0s) infinite;
}

@keyframes pulse-travel {
  0%, 100% { offset-distance: 0%; opacity: 0; }
  10% { opacity: 0.9; }
  50% { offset-distance: 100%; opacity: 0.9; }
  90% { opacity: 0.9; }
  95% { offset-distance: 100%; opacity: 0; }
}

/* Reverse pulses — center outward */
.hero-graph .reverse-pulse {
  fill: var(--q-luminous-emerald);
  opacity: 0;
  animation: pulse-travel-rev var(--pulse-dur, 3.8s) ease-in-out var(--pulse-delay, 0s) infinite;
}

@keyframes pulse-travel-rev {
  0%, 100% { offset-distance: 100%; opacity: 0; }
  10% { opacity: 0.7; }
  50% { offset-distance: 0%; opacity: 0.7; }
  90% { opacity: 0.7; }
  95% { offset-distance: 0%; opacity: 0; }
}

/* Outer nodes */
.hero-graph .node-outer {
  fill: #1a2a26;
  stroke: var(--q-aurora-mint);
  stroke-width: 1.5;
  opacity: 1;
}

.hero-graph .node-outer-pulse {
  fill: none;
  stroke: var(--q-circuit-blue);
  stroke-width: 1;
  opacity: 0;
  animation: node-pulse 4s ease-in-out var(--node-delay, 0s) infinite;
  transform-origin: center;
}

@keyframes node-pulse {
  0%, 100% { opacity: 0; r: 22; }
  50% { opacity: 0.4; r: 30; }
}

/* Node labels */
.hero-graph .node-label {
  font: 500 10px/1 var(--q-font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: var(--q-celdon);
  text-anchor: middle;
  dominant-baseline: middle;
}

/* Center X node */
.hero-graph .center-x {
  font: 700 72px/1 var(--q-font-display);
  font-style: italic;
  fill: var(--q-luminous-emerald);
  text-anchor: middle;
  dominant-baseline: central;
}

.hero-graph .center-glow {
  fill: none;
  stroke: var(--q-luminous-emerald);
  stroke-width: 2;
  animation: center-breathe 3s ease-in-out infinite;
}

.hero-graph .center-glow--fill {
  fill: var(--q-luminous-emerald);
  opacity: 0.12;
  animation: center-breathe 3s ease-in-out infinite;
}

@keyframes center-breathe {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.4; }
}