/* ceeme-bronbol.css — DE BRONNEN-BOL.
   ================================================================================================
   Hoorde tot 9 augustus bij de homepagina, als `.sb-stage` / `#sb-sphere` / `.sb-node` in
   ceeme-2026.css. Njusja keurde de verhuizing goed: de 183 kanaallogo's gaan naar /platformen bij
   de laag Source Signals, en op de homepagina blijven de acht categorieën staan als tekst.

   Daarom een eigen bestand met een eigen voorvoegsel — `.cmp-bronbol` — zoals .cmp-menu, .cmp-hero
   en .cmp-scherm. De oude `.sb-*`-regels blijven in ceeme-2026.css staan voor de sectie eromheen
   (de donkere band, de categoriepillen); alleen de bol zelf zit hier.

   ── Zonder JavaScript ────────────────────────────────────────────────────────────────────────
   Dan staat er een leeg vlak — de knopen worden door ceeme-bronbol.js gemaakt. Dat mag, en het is
   de enige plek op de site waar dat mag: de bol is decoratie. Wat de sectie beweert staat als tekst
   in de HTML. Vandaar `min-height` en geen vaste hoogte: een leeg vlak van 540px hoog is een gat,
   en een gat ziet eruit als een fout. */

.cmp-bronbol {
  position: relative;
  height: 540px;
  margin: 16px auto 0;
  max-width: 960px;
  z-index: 2;
}

/* Het middelpunt. Nul bij nul: elke knoop wordt hier vandaan verschoven met een transform, en dat is
   goedkoper dan left/top, want het raakt de layout niet aan. */
.cmp-bronbol .bb-sfeer {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  z-index: 2;
}

.cmp-bronbol .bb-knoop {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .14);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
  overflow: hidden;
  will-change: transform, opacity;
}

.cmp-bronbol .bb-knoop img {
  width: 23px;
  height: 23px;
  object-fit: contain;
  border-radius: 5px;
}

/* Het onderschrift. Een bol met 183 logo's zonder bijschrift laat een lezer raden of dit alles is
   of een greep — en dat is precies het verschil tussen een bewijsstuk en een sieraad. */
.cmp-bronbol-cap {
  margin: 14px auto 0;
  max-width: 60ch;
  text-align: center;
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .06em;
  color: rgba(246, 242, 233, .5);
}

@media (max-width: 640px) {
  .cmp-bronbol { height: 400px }
  .cmp-bronbol .bb-knoop { width: 32px; height: 32px }
  .cmp-bronbol .bb-knoop img { width: 18px; height: 18px }
}

/* Wie geen beweging wil krijgt dezelfde bol, stilstaand. ceeme-bronbol.js tekent dan één stand.
   Er gaat niets verloren: de beweging droeg geen informatie. */
@media (prefers-reduced-motion: reduce) {
  .cmp-bronbol .bb-knoop { will-change: auto }
}