/* ==================================================================
   network.css — #network (partner-orbit visualization) section.
   Owned by the network section agent (U4). Consumes tokens/shared
   classes from base.css (--line, --green, --gold, --panel, --panel-2,
   --font-mono, --ease, .pill, .eyebrow, .h2, .lead, .mono, .muted) —
   nothing here redefines them.
   ================================================================== */

.network {
  position: relative;
}

/* ------------------------------------------------------------------
   1. Layout — copy left, orbit stage right
   ------------------------------------------------------------------ */
.network-grid {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  align-items: center;
  gap: 56px;
}

/* ------------------------------------------------------------------
   2. Left column — copy
   ------------------------------------------------------------------ */
.network-left .lead {
  margin-top: 16px;
}

.network-desc {
  font-size: 15px;
  line-height: 1.7;
  max-width: 48ch;
  margin-top: 18px;
}

.network-note {
  margin-top: 28px;
  padding-left: 16px;
  border-left: 2px solid rgba(245, 194, 75, .4);
  font-size: 13px;
  line-height: 1.6;
  max-width: 42ch;
}

/* ------------------------------------------------------------------
   3. Right column — orbit stage
   ------------------------------------------------------------------ */
.network-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 500px;
}

.network-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(220px at 50% 50%, rgba(52, 245, 162, .12), transparent 70%),
    radial-gradient(260px at 64% 40%, rgba(245, 194, 75, .10), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.orbit {
  position: relative;
  width: 420px;
  height: 420px;
  z-index: 1;
}

/* ------------------------------------------------------------------
   4. Orbit rings — dashed, counter-rotating
   ------------------------------------------------------------------ */
.orbit-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, .16);
}

.orbit-ring--1 {
  width: 280px;
  height: 280px;
  margin: -140px 0 0 -140px;
  animation: net-spin-cw 40s linear infinite;
}

.orbit-ring--2 {
  width: 420px;
  height: 420px;
  margin: -210px 0 0 -210px;
  border-color: rgba(245, 194, 75, .16);
  animation: net-spin-ccw 60s linear infinite;
}

/* Pause the whole assembly on hover so a glowing pill can actually be
   read instead of drifting past mid-glow. */
.orbit:hover .orbit-ring,
.orbit:hover .orbit-pill {
  animation-play-state: paused;
}

/* ------------------------------------------------------------------
   5. Orbit nodes — "keep upright" placement trick
   .orbit-node is placed on the circle with a static
   rotate(a) translateX(r) rotate(-a) transform — a is set inline per
   node (network.ejs), r comes from the ring modifier below. That
   compound transform nets to zero rotation at rest, so .orbit-node-in
   can center the pill with a plain translate(-50%,-50%) without
   fighting the placement transform. The visible .orbit-pill then runs
   its own counter-rotation, timed to match its parent ring exactly,
   canceling the ring's spin so the pill text stays level while the
   ring keeps turning underneath it.
   ------------------------------------------------------------------ */
.orbit-ring--1 .orbit-node {
  --r: 140px;
}

.orbit-ring--2 .orbit-node {
  --r: 210px;
}

.orbit-node {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(var(--a) * -1));
}

.orbit-node-in {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
}

.orbit-ring--1 .orbit-pill {
  animation: net-spin-ccw 40s linear infinite;
}

.orbit-ring--2 .orbit-pill {
  animation: net-spin-cw 60s linear infinite;
}

.orbit-pill {
  display: inline-flex;
  max-width: 132px;
  white-space: normal;
  text-align: center;
  line-height: 1.3;
  font-size: 11px;
  padding: 9px 14px;
  cursor: default;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease),
    color .3s var(--ease), background-color .3s var(--ease);
}

.orbit-pill:hover {
  border-color: rgba(52, 245, 162, .55);
  background: rgba(52, 245, 162, .1);
  color: var(--text);
  box-shadow: 0 0 24px rgba(52, 245, 162, .35);
}

/* ------------------------------------------------------------------
   6. Center node
   ------------------------------------------------------------------ */
.orbit-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.orbit-center-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid rgba(52, 245, 162, .4);
  animation: net-center-pulse 3.2s ease-in-out infinite;
}

.orbit-center-spark {
  display: flex;
  flex: none;
  width: 16px;
  height: 16px;
}

.orbit-center-spark svg {
  width: 100%;
  height: 100%;
  animation: net-spark-pulse 3.2s ease-in-out infinite;
}

.orbit-center-label {
  font: 700 11px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text);
  white-space: nowrap;
}

/* ------------------------------------------------------------------
   7. Mobile fallback — static wrap, no rotation (shown <900px)
   ------------------------------------------------------------------ */
.orbit-mobile {
  display: none;
}

.orbit-mobile-center {
  display: flex;
  justify-content: center;
}

.orbit-mobile-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 440px;
}

.orbit-mobile-list .orbit-pill:nth-child(3n+2) {
  animation-delay: -2s;
}

.orbit-mobile-list .orbit-pill:nth-child(3n) {
  animation-delay: -4s;
}

/* ------------------------------------------------------------------
   8. Keyframes
   ------------------------------------------------------------------ */
@keyframes net-spin-cw {
  to {
    transform: rotate(360deg);
  }
}

@keyframes net-spin-ccw {
  to {
    transform: rotate(-360deg);
  }
}

@keyframes net-center-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(52, 245, 162, .28), 0 0 22px 2px rgba(52, 245, 162, .22);
  }
  50% {
    box-shadow: 0 0 0 9px rgba(52, 245, 162, 0), 0 0 34px 6px rgba(52, 245, 162, .4);
  }
}

@keyframes net-spark-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.16);
  }
}

/* ------------------------------------------------------------------
   9. Responsive
   ------------------------------------------------------------------ */
@media (max-width: 900px) {
  .network-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .network-desc,
  .network-note {
    max-width: none;
  }

  .network-visual {
    min-height: 0;
  }

  .network-visual::before {
    display: none;
  }

  .orbit {
    display: none;
  }

  .orbit-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    width: 100%;
  }
}

@media (max-width: 600px) {
  .network-note {
    padding-left: 14px;
  }

  .orbit-mobile-list {
    max-width: 300px;
  }
}