.orbitScene {
  position: relative;
  width: min(520px, 100%);
  aspect-ratio: 1;
  margin: 0 auto;
  display: grid;
  place-items: center;
}

.centerGlow {
  position: absolute;
  width: 43%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.16);
  filter: blur(20px);
  animation: centerBreathe 3.2s ease-in-out infinite;
}

.ring {
  position: absolute;
  border-radius: 50%;
  border: 2px dashed rgba(255, 141, 106, 0.45);
}

.ringOuter {
  inset: 8%;
  animation: orbitSpin 24s linear infinite;
}

.ringInner {
  inset: 20%;
  border-color: rgba(142, 99, 255, 0.5);
  animation: orbitSpinReverse 16s linear infinite;
}

.centerCard {
  position: absolute;
  width: 100px;
  aspect-ratio: 1;
  border-radius: 26px;
  padding: 14px;
  background: rgba(255, 95, 6, 0.16);
  border: 1px solid rgba(255, 141, 106, 0.45);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.35);
  z-index: 3;
  animation: centerBreathe 3.2s ease-in-out infinite;
}

.centerCard .imgBox {
  height: 100%;
  display: grid;
  place-items: center;
}

.centerCard img {
  width: 76%;
}

.orbitNode {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(10, 10, 18, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.45);
  z-index: 4;
  transform: translate(-50%, -50%);
}

.orbitNode::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
}

.orbitNode1 { top: 27%; left: 29%; color: #18d1f2; border-color: rgba(24, 209, 242, 0.35); box-shadow: 0 0 20px rgba(24, 209, 242, 0.2); }
.orbitNode2 { top: 26%; left: 73%; color: #39d977; border-color: rgba(57, 217, 119, 0.35); box-shadow: 0 0 20px rgba(57, 217, 119, 0.2); }
.orbitNode3 { top: 50%; left: 12%; color: #f14ba9; border-color: rgba(241, 75, 169, 0.35); box-shadow: 0 0 20px rgba(241, 75, 169, 0.2); }
.orbitNode4 { top: 50%; left: 93%; color: #ff6c14; border-color: rgba(255, 108, 20, 0.35); box-shadow: 0 0 20px rgba(255, 108, 20, 0.2); }
.orbitNode5 { top: 82%; left: 30%; color: #7a58ff; border-color: rgba(122, 88, 255, 0.35); box-shadow: 0 0 20px rgba(122, 88, 255, 0.2); }
.orbitNode6 { top: 82%; left: 72%; color: #5b67ff; border-color: rgba(91, 103, 255, 0.35); box-shadow: 0 0 20px rgba(91, 103, 255, 0.2); }

@keyframes orbitSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes orbitSpinReverse {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

@keyframes centerBreathe {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.06); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ringOuter,
  .ringInner,
  .centerGlow,
  .centerCard {
    animation: none !important;
  }
}