/*
 * The emissive layer.
 *
 * Two classes, deliberately separate:
 *   .glow  attaches the three-stack bloom filter. Container level ONLY.
 *   .lit   makes an element's own surface emissive.
 *
 * Keeping them apart is what makes a dense meter affordable: the filter lands
 * on eight columns, the colour lands on the hundred-odd segments inside them.
 * Putting `filter` on every segment would rasterise each one separately.
 */

.glow {
  --lvl: 1;
  --glow: var(--accent-rgb);
  /*
   * Radius keeps a floor; ALPHA carries the drive.
   *
   * Scaling the radius by level collapses every halo to under a pixel at
   * ordinary signal levels. A real emitter at half power throws a halo the
   * same size — it is dimmer, not smaller. Only the energy falls off.
   */
  --r: calc(var(--bloom) * (0.38 + 0.62 * var(--lvl)));
  filter:
    drop-shadow(0 0 calc(4px * var(--r)) rgb(var(--glow) / calc(0.95 * var(--lvl))))
    drop-shadow(0 0 calc(16px * var(--r)) rgb(var(--glow) / calc(0.62 * var(--lvl))))
    drop-shadow(0 0 calc(46px * var(--r)) rgb(var(--glow) / calc(0.4 * var(--lvl))));
}

/* Dense grids drop the widest stack. The 46px halo is invisible behind
   neighbouring cells and costs the most to rasterise. */
.glow-lite {
  --lvl: 1;
  --glow: var(--accent-rgb);
  --r: calc(var(--bloom) * (0.38 + 0.62 * var(--lvl)));
  filter:
    drop-shadow(0 0 calc(3px * var(--r)) rgb(var(--glow) / calc(0.95 * var(--lvl))))
    drop-shadow(0 0 calc(12px * var(--r)) rgb(var(--glow) / calc(0.55 * var(--lvl))));
}

/* An emissive surface desaturates toward white as it saturates, the way a
   real emitter blows out its own core. This mirrors the beam shader's
   `uColor * (0.55 + rim * 0.8)` in scripts/scene/beam.ts. */
.lit {
  --lvl: 1;
  --glow: var(--accent-rgb);
  background: color-mix(in oklab, rgb(var(--glow)), white calc(var(--lvl) * 34%));
}

/*
 * Scanlines sit ABOVE the glowing content as a sibling overlay, so the bloom
 * filter never blurs the grid that is meant to stay sharp. This is the single
 * detail that reads as "LED panel" rather than "neon".
 */
.scan {
  position: relative;
}

.scan::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  border-radius: inherit;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 calc(var(--scan-pitch) - 1px),
    rgb(0 0 0 / var(--scan-depth)) calc(var(--scan-pitch) - 1px) var(--scan-pitch)
  );
  mix-blend-mode: multiply;
}

:root {
  --bloom: 1;
  --scan-pitch: 3px;
  --scan-depth: 0.22;
}

/*
 * Reduced motion holds a static lit state rather than going dark: the point
 * of these panels is that they emit. Nothing here ever strobes.
 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --bloom: 0.8;
  }
}

/* A control that is dragged should say so before it is touched. */
.control-hint {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #6d707a;
}