/*
 * Network Graphics System - Voxel Cube component styles.
 *
 * Like Cube/DNA Helix, this component's SVG content is entirely generated
 * at runtime by components/voxel-cube.js - there is no hand-authored
 * markup to colocate a template with. Position, radius and resting opacity
 * are all written once per point at layout time (never every frame - the
 * cube never rotates, see the file docstring in voxel-cube.js), so this
 * file owns paint only: fill colour, from variables.css.
 */

.network-voxel-cube {
  display: block;
  width: 100%;
  height: 100%;
}

/* Same colour token as every other point in the system (Sphere, Cube's own
   face-point layer, Cube Points) - "same styles as Sphere" brief. Radius
   and resting opacity are JS-set per point (voxel-cube.js's layout()),
   since they depend on each point's own depth in the fixed camera. */
.voxel-cube-point {
  fill: rgba(var(--network-point-rgb), 1);
}

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

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