/*
 * Network Graphics System - Growth Bars component styles.
 *
 * Like Cube/Voxel Cube, this component's SVG content is entirely generated
 * at runtime by components/growth-bars.js - there is no hand-authored
 * markup to colocate a template with. Per-dot position/opacity and every
 * bar/layer group's own build/fade opacity are written by growth-bars.js
 * (shape, not paint), so this file owns colour only.
 */

.network-growth-bars {
  display: block;
  width: 100%;
  height: 100%;
}

.growth-bars-dot {
  fill: rgba(var(--network-point-rgb), 1);
}

/* Ambient haze behind the row - same brand tone Sphere/Voxel Cube's own
   background glow uses (--network-ambient-rgb = --color-primary,
   variables.css), not the dot colour. Only stop-color lives here - the
   gradient's own opacity ramp (JS-set stop-opacity, one per stop) is
   shape, not paint, see growth-bars.js. */
.growth-bars-haze-stop {
  stop-color: rgb(var(--network-ambient-rgb));
}

/* Breathing range/period match Sphere/Voxel Cube's own haze exactly
   (0.08-0.20 over 7s) - `alternate` + a half-period duration is the CSS
   equivalent of Sphere's continuous `Math.sin()` oscillation, without a
   per-frame callback (this component has no rAF loop). Only applied when
   the component actually animates - `static` mode/`prefers-reduced-motion`
   never get this class, so the haze stays fixed at its resting alpha. */
@keyframes growth-bars-haze-breathe {
  from { opacity: 0.08; }
  to { opacity: 0.2; }
}
.growth-bars-haze--breathe {
  animation: growth-bars-haze-breathe 3.5s ease-in-out infinite alternate;
}