/* ============================================================
   /brokers/ hero visual: the 3D broker constellation
   (templates/marketing/_broker_constellation.html,
   static/js/pages/broker-scene.js, static/js/pages/brokers-page.js).
   The SVG poster is the final picture; the scene draws over it on capable
   desktops and fades it out once it is ready (scene-boot.js sets
   data-scene-state). The directory below is styled in pages/coverage.css.
   ============================================================ */

@layer page {

.bc-figure { min-width: 0; margin: 0; }
/* §9.7 #4: the trademark line sits directly under the logos */
.bc-trademark { margin: var(--space-3) auto 0; }
.bc-stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(60% 60% at 50% 50%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 72%),
    color-mix(in srgb, var(--surface) 70%, transparent);
  box-shadow: var(--shadow-2), var(--shadow-inset);
}

/* ---------- poster ---------- */
.bc-poster { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.bc-stop { stop-color: var(--brand); }
.bc-p-stars circle { fill: var(--ink-3); }
.bc-p-links line { stroke: var(--ink-3); stroke-width: .75; stroke-opacity: .22; }
.bc-p-spokes line { stroke: var(--brand); stroke-width: 1; stroke-opacity: .35; stroke-dasharray: 2 4; }
.bc-p-core-ring { fill: none; stroke: var(--brand); stroke-width: 1.25; stroke-opacity: .8; }
.bc-p-core { fill: var(--action-ink); }
.bc-p-centre {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  fill: var(--ink);
}
.bc-p-nodes circle { fill: var(--action-ink); fill-opacity: .85; }
.bc-p-logo rect { fill: var(--raised); stroke: var(--border-strong); stroke-width: 1; }
.bc-p-hub circle { fill: var(--surface); stroke: var(--border-brand); stroke-width: 1.25; }
.bc-p-hub .bc-p-hub-dot { fill: var(--brand); stroke: none; }
.bc-p-hub text {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  fill: var(--ink-2);
}
.bc-stage[data-scene-state="ready"] .bc-poster { opacity: 0; pointer-events: none; }

/* ---------- labels the scene writes (.bc-labels > .bc-label) ---------- */
.bc-label { line-height: var(--leading-none); text-shadow: 0 1px 6px var(--bg); }
.bc-label[data-kind="class"] {
  font-family: var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.bc-label[data-kind="centre"] { font-weight: var(--weight-semi); }
.bc-label[data-kind="broker"] { display: inline-flex; align-items: center; gap: var(--space-1); }
.bc-label-logo {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--raised);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semi);
  letter-spacing: -0.02em;
  color: var(--ink-2);
  text-shadow: none;
}
.bc-label-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.bc-label[data-state="hot"] .bc-label-logo { border-color: var(--border-brand); color: var(--action-ink); }
.bc-label[data-kind="broker"][data-state="emph"] { color: var(--ink) !important; }
.bc-label[data-kind="broker"][data-state="hot"] { color: var(--action-ink) !important; font-weight: var(--weight-semi); }
.bc-label[data-kind="class"][data-state="emph"] { color: var(--action-ink) !important; }

/* ---------- tooltip (brokers-page.js, on bc:hover) ---------- */
.bc-tip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: grid;
  gap: var(--space-1);
  min-width: 10rem;
  max-width: 16rem;
  padding: var(--space-3);
  border: 1px solid var(--border-brand);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--raised) 92%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-pop);
  pointer-events: none;
}
.bc-tip[hidden] { display: none; }
.bc-tip-head { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.bc-tip-logo {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--space-7);
  height: var(--space-7);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--sunken);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semi);
  color: var(--ink-2);
}
.bc-tip-logo:empty { display: none; }
.bc-tip-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.bc-tip-name { font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--ink); }
.bc-tip-markets { font-size: var(--text-xs); color: var(--ink-2); }
.bc-tip-cta { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--action-ink); }

.bc-sample { position: absolute; top: var(--space-3); left: var(--space-3); z-index: 2; pointer-events: none; }
.bc-hint {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-3);
  z-index: 2;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-3);
  opacity: 0;
  pointer-events: none;
}
.bc-stage[data-scene-state="ready"] .bc-hint { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .bc-poster { transition: opacity var(--dur-reveal) var(--ease-out); }
  .bc-hint { transition: opacity var(--dur-reveal) var(--ease-out) var(--dur-hero); }
}

@media (max-width: 900px) {
  .bc-figure { width: 100%; max-width: 640px; margin-inline: auto; }
}

} /* @layer page */