/* ============================================================================
 * Signal Storm — live constellation of the 39 public routes
 * system-ai-x.com  ·  feature slug: signal-storm-live-constellation-of-the-3
 *
 * A force-directed, physics-simulated map of the fleet's PUBLIC surface: a
 * glowing gateway star, 11 labeled region anchors, and the public-route
 * satellites orbiting on elastic links with comet particles streaming inward.
 *
 * Pure CSS tokens from style.css (--accent, --accent-2, --mono, --ease-out,
 * --radius, --hairline*, --surface-*, --fg*). Light + dark aware.
 * reduced-motion safe.
 * ==========================================================================*/

.ss {
  position: relative;
  padding: clamp(64px, 9vw, 120px) var(--gutter);
  scroll-margin-top: 80px;
}

.ss__head {
  max-width: var(--essay);
  margin: 0 auto clamp(26px, 4vw, 42px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.ss__head h2 { margin: 10px 0 0; }
.ss__lede {
  margin: 14px 0 0;
  max-width: 58ch;
  color: var(--fg-dim);
  font-size: 16px;
  line-height: 1.55;
}

/* live status pill ---------------------------------------------------------*/
.ss__status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  background: var(--surface-2);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-dim);
  white-space: nowrap;
  transition: border-color .4s var(--ease-out), color .4s var(--ease-out);
}
.ss__status .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #38e08a;
  box-shadow: 0 0 10px #38e08a, 0 0 22px rgba(56,224,138,.6);
  animation: ss-blip 1.6s var(--ease-in-out) infinite;
}
@keyframes ss-blip {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: .55; }
}

/* shell --------------------------------------------------------------------*/
.ss__shell { max-width: var(--max); margin: 0 auto; }

.ss-stage {
  position: relative;
  border: 1px solid var(--hairline);
  border-radius: calc(var(--radius) + 6px);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(124,92,255,.10), transparent 60%),
    color-mix(in oklab, var(--bg-elev) 84%, transparent);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow:
    0 40px 120px -50px rgba(0,0,0,.7),
    inset 0 1px 0 var(--hairline-strong);
  overflow: hidden;
}
html[data-theme="light"] .ss-stage {
  box-shadow: 0 40px 120px -60px rgba(20,20,40,.35), inset 0 1px 0 rgba(255,255,255,.7);
}

/* the constellation canvas wraps in a dark phosphor well even in light mode */
.ss-well {
  position: relative;
  height: clamp(420px, 56vw, 640px);
  background:
    radial-gradient(80% 80% at 50% 50%, rgba(10,10,14,.0), rgba(6,6,10,.55) 100%),
    #07070b;
  overflow: hidden;
}
html[data-theme="light"] .ss-well {
  background:
    radial-gradient(80% 80% at 50% 50%, rgba(8,8,16,.0), rgba(6,6,14,.65) 100%),
    #0b0b12;
}
.ss-well::before { /* faint scanline / vignette to read as an instrument */
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px),
    radial-gradient(120% 120% at 50% 50%, transparent 55%, rgba(0,0,0,.5) 100%);
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .5;
}
.ss-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

/* glass tooltip ------------------------------------------------------------*/
.ss-tip {
  position: absolute;
  z-index: 6;
  min-width: 188px;
  max-width: 260px;
  padding: 12px 13px;
  border: 1px solid var(--hairline-strong);
  border-radius: 14px;
  background: color-mix(in oklab, var(--bg-elev) 62%, transparent);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  box-shadow: 0 24px 60px -28px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.16);
  color: var(--fg);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px) scale(.98);
  transition: opacity .18s var(--ease-out), transform .18s var(--ease-out);
}
.ss-tip.show { opacity: 1; transform: translateY(0) scale(1); }
.storm-tip__head {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 650; letter-spacing: -.01em;
  margin-bottom: 8px;
}
.storm-tip__dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.storm-tip__dot.is-live { background: #38e08a; box-shadow: 0 0 8px #38e08a; }
.storm-tip__dot.is-missing { background: #ff5a6a; box-shadow: 0 0 8px #ff5a6a; }
.storm-tip__meta { display: grid; gap: 5px; }
.storm-tip__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 11.5px;
}
.storm-tip__row span { color: var(--fg-faint); font-family: var(--mono); letter-spacing: .04em; flex: 0 0 auto; }
.storm-tip__row b { color: var(--fg-dim); font-weight: 550; text-align: right; }

/* readout strip below the well --------------------------------------------*/
.ss-readout {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--hairline);
  border-top: 1px solid var(--hairline);
}
.ss-readout__cell {
  padding: 16px 18px;
  background: color-mix(in oklab, var(--bg-elev) 88%, transparent);
  display: flex; flex-direction: column; gap: 4px;
}
.ss-readout__cell span {
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-faint);
}
.ss-readout__cell strong {
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 600; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.ss-readout__cell.is-accent strong {
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.ss-readout__cell[data-storm-warn="1"] strong { color: #ff7a86; -webkit-text-fill-color: #ff7a86; }

/* legend chips -------------------------------------------------------------*/
.ss-legend {
  display: flex; flex-wrap: wrap; gap: 14px 22px;
  margin: 18px auto 0;
  max-width: var(--max);
  font-size: 12px; color: var(--fg-dim);
}
.ss-legend__item { display: inline-flex; align-items: center; gap: 8px; }
.ss-legend__swatch { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.ss-legend__swatch.is-gateway { background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 0 10px var(--accent-glow); }
.ss-legend__swatch.is-region { background: var(--accent-2); box-shadow: 0 0 8px var(--accent-glow-2); }
.ss-legend__swatch.is-route { background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }
.ss-legend__swatch.is-missing { background: #ff5a6a; box-shadow: 0 0 8px rgba(255,90,106,.6); }
.ss-legend__note {
  margin-left: auto;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-faint);
  display: inline-flex; align-items: center; gap: 7px;
}
.ss-legend__note b { color: var(--fg-dim); font-weight: 600; letter-spacing: .02em; text-transform: none; }

/* responsive ---------------------------------------------------------------*/
@media (max-width: 720px) {
  .ss-readout { grid-template-columns: repeat(2, 1fr); }
  .ss-readout__cell:last-child { grid-column: 1 / -1; }
  .ss-legend__note { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ss__status .dot { animation: none; }
  .ss-tip { transition: none; }
}