/* ── Orbital layout ── */
.orbit-scene {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.orbit-wrapper {
  position: relative;
  width: min(52vmin, 340px);
  height: min(52vmin, 340px);
}

/* Central circle */
.center-circle {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 5px solid #0000FF;
  /* reduced glow: single subtle shadow only */
  box-shadow: 0 0 18px 3px var(--pulse-color);
  transition:
    background var(--transition-smooth),
    border-color var(--transition-smooth),
    box-shadow var(--transition-smooth);
  display: flex;
  align-items: center;
  justify-content: center;
  image-rendering: pixelated;
}

.center-text {
  font-family: 'VT323', monospace;
  font-size: clamp(0.9rem, 3vmin, 1.3rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.0);
  text-align: center;
  padding: 0 12%;
  transition: color 0.2s ease 0.05s;
  pointer-events: none;
  line-height: 1.3;
  text-shadow: none;
}
body.hovered .center-text {
  color: rgba(0,0,0,0.7);
}

/* Dashed orbit ring — classic old-web dashed circle */
.orbit-ring {
  position: absolute;
  inset: calc(-1 * (min(18vmin, 112px) * 0.5 + min(18vmin, 112px) * 0.18 + 2px));
  border-radius: 50%;
  border: 1px dashed rgba(100, 160, 255, 0.2);
  pointer-events: none;
  animation: spin-ring 40s linear infinite;
}
@keyframes spin-ring { to { transform: rotate(360deg); } }

/* Subtle ping on center (much lighter) */
.center-circle::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid var(--center-color);
  opacity: 0;
  animation: pulse-ring 4s ease-out infinite;
}
@keyframes pulse-ring {
  0%   { opacity: 0.25; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.12); }
}

/* Satellite circles */
.satellite {
  position: absolute;
  --sat-size: min(18vmin, 112px);
  width: var(--sat-size);
  height: var(--sat-size);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  margin-top: calc(var(--sat-size) / -2);
  margin-left: calc(var(--sat-size) / -2);
  transform: translate(var(--tx), var(--ty));
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.2s ease,
    filter 0.2s ease;
  animation: float-in 0.5s ease both;
}

@keyframes float-in {
  from { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0.5); }
  to   { opacity: 1; transform: translate(var(--tx), var(--ty)) scale(1); }
}

.satellite:nth-child(2) { animation-delay: 0.04s; }
.satellite:nth-child(3) { animation-delay: 0.08s; }
.satellite:nth-child(4) { animation-delay: 0.12s; }
.satellite:nth-child(5) { animation-delay: 0.16s; }
.satellite:nth-child(6) { animation-delay: 0.20s; }
.satellite:nth-child(7) { animation-delay: 0.24s; }
.satellite:nth-child(8) { animation-delay: 0.28s; }
.satellite:nth-child(9) { animation-delay: 0.32s; }

.satellite-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--sat-color, #3ab5ff);
  border: 5px solid #0000FF;
  box-shadow: none;
  transition:
    background var(--transition-smooth),
    border-color var(--transition-smooth);
  display: flex;
  align-items: center;
  justify-content: none;
}

.satellite-label {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: handwritin;
  font-size: 2.5rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(255,255,255,0);
  pointer-events: none;
  transition: color 0.15s ease;
}

.satellite:hover .satellite-label {
  color: rgba(200, 230, 255, 0.9);
  text-shadow: 0 0 4px rgba(100,180,255,0.4);
}

/* Hover states */
.satellite:hover {
  transform: translate(var(--tx), var(--ty)) scale(1.12);
  z-index: 2;
}
.satellite:hover .satellite-inner {
  border-color: #fff;
}

/* Dim non-hovered satellites */
.orbit-wrapper.has-hover .satellite:not(:hover) {
  filter: brightness(0.35) saturate(0.4);
}

/* Center circle load animation */
.center-circle {
  animation: center-pop 0.4s ease both;
}
@keyframes center-pop {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}