/* Biological neural tissue presentation for the Rust/WebGPU graph.
 *
 * WebGPU owns soma, dendrites, axons, synapses and impulses. SVG remains the
 * semantic interaction plane for labels, hit testing, keyboard control and
 * reduced-motion fallback.
 */

.graph-stage {
  border-color: rgba(105, 126, 255, 0.2);
  background: #03040d;
  box-shadow:
    0 2.2rem 7rem rgba(0, 0, 0, 0.52),
    inset 0 0 0 1px rgba(129, 149, 255, 0.025);
}

.renderer-surface--wasm {
  background:
    radial-gradient(circle at 50% 47%, rgba(82, 80, 255, 0.13), transparent 24%),
    radial-gradient(circle at 22% 68%, rgba(41, 112, 255, 0.075), transparent 28%),
    radial-gradient(circle at 78% 28%, rgba(133, 42, 255, 0.07), transparent 26%),
    linear-gradient(180deg, rgba(7, 8, 28, 0.92), rgba(2, 3, 13, 0.99));
}

.renderer-surface--wasm::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    radial-gradient(circle at center, transparent 30%, rgba(0, 0, 8, 0.3) 72%, rgba(0, 0, 5, 0.72) 100%),
    linear-gradient(115deg, rgba(102, 116, 255, 0.018), transparent 36%, rgba(94, 40, 255, 0.018) 68%, transparent);
  pointer-events: none;
}

.renderer-surface--wasm[data-impulse]:not([data-impulse="0"])::after {
  display: none;
  animation: none;
}

.renderer-gpu-canvas {
  filter: saturate(1.14) contrast(1.06);
}

.renderer-svg-layer {
  z-index: 3;
}

.renderer-surface--wasm[data-renderer="webgpu"] .wasm-node__label {
  fill: rgba(210, 219, 255, 0.84);
  stroke: rgba(2, 4, 16, 0.94);
  stroke-width: 4px;
  stroke-linejoin: round;
  paint-order: stroke fill;
  letter-spacing: 0.055em;
}

.renderer-surface--wasm[data-renderer="webgpu"] .wasm-node__label--revealed {
  fill: rgba(255, 225, 178, 0.98);
  stroke: rgba(24, 8, 2, 0.96);
}

.renderer-surface--wasm[data-renderer="webgpu"] .wasm-node:focus-visible {
  filter: drop-shadow(0 0 10px rgba(255, 177, 80, 0.74));
}

@media (max-width: 719px) {
  .renderer-surface--wasm {
    min-height: 31rem;
    background:
      radial-gradient(circle at 50% 45%, rgba(82, 80, 255, 0.15), transparent 27%),
      radial-gradient(circle at 18% 74%, rgba(41, 112, 255, 0.08), transparent 30%),
      linear-gradient(180deg, rgba(7, 8, 28, 0.94), rgba(2, 3, 13, 1));
  }

  .renderer-surface--wasm[data-renderer="webgpu"] .wasm-node__label {
    stroke-width: 4.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .renderer-surface--wasm::before {
    background: radial-gradient(circle at center, transparent 28%, rgba(0, 0, 8, 0.42) 100%);
  }
}