/* ────────────────────────────────────────────────────────────────────────
   Banne — the singularity. The box, and the no-WebGL fallback.

   The WebGL path paints into `.singularity__canvas`. When WebGL2 is missing the
   module sets `data-singularity="fallback"` and these gradients take over — the
   same seven states, still legible, still tokens only.

   Size is owned by `.presence` (see home.css); this file only consumes it.
   ──────────────────────────────────────────────────────────────────────── */

.singularity {
  position: relative;
  /* Sized from the ROW it is given, capped by --shape-size, keeping the 5:4 box.
     A viewport-based size does not shrink with the row, so on a short screen the
     shape stayed full size, overflowed, and the name/status collided with the
     transcript below. */
  height: min(100%, var(--shape-size, 416px));
  aspect-ratio: 5 / 4;
  width: auto;
  max-width: 100%;
  min-height: 0;
  margin: 0 auto;
  /* the fallback defaults — overridden per state below */
  --sing-ring: color-mix(in srgb, var(--gradient-to) 45%, transparent);
  --sing-glow: color-mix(in srgb, var(--gradient-from) 22%, transparent);
  --sing-void: var(--canvas-dark);
}

.singularity__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── the no-WebGL fallback ────────────────────────────────────────────────
   A dark event horizon, a thin photon ring, and a plasma halo — assembled from
   the same state table so every state stays distinguishable without a GPU. */
.singularity[data-singularity="fallback"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, var(--sing-void) 0 27%, transparent 28.5%),
    radial-gradient(circle at 50% 50%, transparent 0 29%, var(--sing-ring) 32%, transparent 37%),
    radial-gradient(circle at 50% 50%, var(--sing-glow), transparent 64%);
}

/* The seven states, as ring + glow intensity. Mirrors the shader's parameter
   sets: thinking is the most collapsed, speaking the most open and bright. */
.singularity[data-state="idle"] {
  --sing-ring: color-mix(in srgb, var(--gradient-to) 38%, transparent);
  --sing-glow: color-mix(in srgb, var(--gradient-from) 20%, transparent);
}
.singularity[data-state="connecting"] {
  --sing-ring: color-mix(in srgb, var(--gradient-to) 62%, transparent);
  --sing-glow: color-mix(in srgb, var(--gradient-from) 32%, transparent);
}
.singularity[data-state="listening"] {
  --sing-ring: color-mix(in srgb, var(--gradient-to) 52%, transparent);
  --sing-glow: color-mix(in srgb, var(--gradient-from) 30%, transparent);
}
.singularity[data-state="thinking"] {
  --sing-ring: color-mix(in srgb, var(--gradient-to) 58%, transparent);
  --sing-glow: color-mix(in srgb, var(--gradient-from) 40%, transparent);
}
.singularity[data-state="speaking"] {
  --sing-ring: color-mix(in srgb, var(--gradient-to) 88%, transparent);
  --sing-glow: color-mix(in srgb, var(--gradient-to) 46%, transparent);
}
.singularity[data-state="error"] {
  --sing-ring: color-mix(in srgb, var(--danger) 55%, transparent);
  --sing-glow: color-mix(in srgb, var(--danger) 18%, transparent);
}
.singularity[data-state="disabled"] {
  --sing-ring: color-mix(in srgb, var(--primary-soft) 22%, transparent);
  --sing-glow: color-mix(in srgb, var(--primary-soft) 12%, transparent);
}