/* BitVibe Labs — shared "graph render" wait animation styles. Pairs with
   graph-loader.js. The stage element must be position:relative so the overlay
   fills it. Per-product tint: set --cg-glow (title halo) + --cg-accent (counter)
   on the stage, and pass opts.color=[r,g,b] to startGraphLoader for the canvas. */

.cg-loading {
  position: absolute; inset: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--bg, #0A0A0A);
  transition: opacity 0.5s ease;
}
.cg-loading.cg-fade { opacity: 0; pointer-events: none; }

.cg-load-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.cg-load-inner {
  position: relative; z-index: 1; text-align: center;
  display: flex; flex-direction: column; gap: 10px; align-items: center;
  pointer-events: none;
}
.cg-load-title {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--fg, #F5F5F4);
  text-shadow: 0 0 18px var(--cg-glow, rgba(31, 184, 255, 0.6));
}
.cg-load-count {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 12px; letter-spacing: 0.04em;
  color: var(--cg-accent, #1FB8FF);
  font-variant-numeric: tabular-nums;
}
.cg-load-count .cg-dim2 { color: var(--fg-dim, #7A6B62); margin: 0 5px; }

@media (prefers-reduced-motion: reduce) {
  .cg-loading { transition: none; }
}