/* Network panel: orbital motion, connection indicator and signal activity. */
.network-panel {
  isolation: isolate;
}

.network-panel .visual-topline,
.network-panel .visual-bottomline {
  position: relative;
  z-index: 5;
}

.network-panel .visual-bottomline {
  position: absolute;
  gap: 1rem;
}

.network-status {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}

.network-status-dot {
  position: relative;
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 10px rgba(0, 232, 90, 0.7);
}

.network-status-dot::after {
  position: absolute;
  inset: -4px;
  border: 1px solid rgba(0, 232, 90, 0.55);
  border-radius: inherit;
  content: "";
  animation: network-online 3s ease-out infinite;
}

.network-panel .visual-stage {
  isolation: isolate;
}

.network-panel .visual-stage::before {
  position: absolute;
  z-index: -1;
  width: 88%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 232, 90, 0.13), transparent 66%);
  content: "";
  animation: network-aura 7s ease-in-out infinite;
}

.network-panel .orbit {
  z-index: 2;
  width: min(87%, 25rem);
  height: auto;
  aspect-ratio: 1;
  border: 1px solid rgba(0, 232, 90, 0.32);
  border-radius: 50%;
  pointer-events: none;
  transform: rotate(-28deg) scaleX(0.68);
}

.network-panel .orbit-one {
  animation: network-plane-one 26s ease-in-out infinite;
}

.network-panel .orbit-two {
  z-index: 3;
  width: min(72%, 20rem);
  border-color: rgba(209, 255, 232, 0.37);
  transform: rotate(42deg) scaleX(0.62);
  animation: network-plane-two 32s ease-in-out infinite;
}

.network-panel .orbit-three {
  z-index: 0;
  width: min(98%, 28rem);
  border-style: dashed;
  border-color: rgba(0, 232, 90, 0.15);
  transform: rotate(83deg) scaleX(0.6);
  animation: network-plane-three 40s ease-in-out infinite;
}

.orbit-track {
  position: absolute;
  inset: -1px;
  border: 2px solid transparent;
  border-top-color: rgba(0, 232, 90, 0.8);
  border-right-color: rgba(0, 232, 90, 0.12);
  border-radius: 50%;
  animation: network-revolution 15s linear infinite;
}

.orbit-track::before,
.orbit-track::after {
  position: absolute;
  top: -5px;
  left: 50%;
  width: 8px;
  height: 8px;
  border: 1px solid #d4ffe6;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 7px #00e85a, 0 0 19px rgba(0, 232, 90, 0.7);
  content: "";
}

.orbit-track::before {
  top: auto;
  bottom: -3px;
  width: 4px;
  height: 4px;
  border: 0;
  opacity: 0.55;
}

.orbit-two .orbit-track {
  border-top-color: rgba(209, 255, 232, 0.85);
  border-right-color: transparent;
  animation-duration: 11s;
  animation-direction: reverse;
  animation-delay: -4s;
}

.orbit-two .orbit-track::after {
  background: #e5fff0;
  box-shadow: 0 0 8px rgba(229, 255, 240, 0.8), 0 0 18px rgba(0, 232, 90, 0.5);
}

.orbit-three .orbit-track {
  border-width: 1px;
  border-top-color: rgba(0, 232, 90, 0.35);
  animation-duration: 23s;
  animation-delay: -8s;
}

.orbit-three .orbit-track::after {
  width: 5px;
  height: 5px;
  top: -3px;
  border: 0;
}

.network-panel .visual-key {
  z-index: 1;
  box-shadow: none;
}

.network-panel .visual-key::before {
  position: absolute;
  z-index: -1;
  inset: -1.4rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 232, 90, 0.18), transparent 68%);
  content: "";
  animation: network-aura 7s ease-in-out -3s infinite;
}

.network-panel .stage-label {
  z-index: 4;
}

.visual-activity {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}

.network-panel .signal-blocks {
  align-items: center;
  gap: 3px;
  height: 1.25rem;
}

.network-panel .signal-blocks i {
  width: 3px;
  height: 1.05rem;
  transform-origin: center;
  animation: network-signal 1.55s ease-in-out infinite;
}

.network-panel .signal-blocks i:nth-child(2) { animation-duration: 1.2s; animation-delay: -0.45s; }
.network-panel .signal-blocks i:nth-child(3) { animation-duration: 1.8s; animation-delay: -1.1s; }
.network-panel .signal-blocks i:nth-child(4) { animation-duration: 1.35s; animation-delay: -0.7s; }
.network-panel .signal-blocks i:nth-child(5) { animation-duration: 1.6s; animation-delay: -0.2s; }

.motion-toggle {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin: -12px -8px -12px 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease;
}

.motion-toggle:hover,
.motion-toggle:focus-visible {
  color: var(--color-primary);
  border-color: rgba(0, 232, 90, 0.35);
}

.motion-toggle svg { width: 13px; height: 13px; fill: currentColor; }
.motion-toggle .motion-play { display: none; }
.motion-toggle[aria-pressed="true"] .motion-play { display: block; }
.motion-toggle[aria-pressed="true"] .motion-pause { display: none; }
.motion-toggle:disabled { cursor: default; opacity: 0.4; }

.network-panel:is(.is-paused, .is-offscreen, .is-page-hidden) *,
.network-panel:is(.is-paused, .is-offscreen, .is-page-hidden) *::before,
.network-panel:is(.is-paused, .is-offscreen, .is-page-hidden) *::after {
  animation-play-state: paused !important;
}

@keyframes network-revolution {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes network-plane-one {
  0%, 100% { transform: rotate(-28deg) scaleX(0.68); }
  50% { transform: rotate(12deg) scaleX(0.78); }
}

@keyframes network-plane-two {
  0%, 100% { transform: rotate(42deg) scaleX(0.62); }
  50% { transform: rotate(72deg) scaleX(0.7); }
}

@keyframes network-plane-three {
  0%, 100% { transform: rotate(83deg) scaleX(0.6); }
  50% { transform: rotate(55deg) scaleX(0.72); }
}

@keyframes network-online {
  0% { transform: scale(0.65); opacity: 0.8; }
  80%, 100% { transform: scale(1.65); opacity: 0; }
}

@keyframes network-aura {
  0%, 100% { transform: scale(0.95); opacity: 0.5; }
  50% { transform: scale(1.08); opacity: 1; }
}

@keyframes network-signal {
  0%, 100% { transform: scaleY(0.3); opacity: 0.55; }
  35% { transform: scaleY(1); opacity: 1; }
  65% { transform: scaleY(0.55); opacity: 0.8; }
}

@media (max-width: 640px) {
  .network-status { gap: 0.5rem; }
  .network-panel .visual-bottomline { gap: 0.5rem; }
  .network-panel .visual-bottomline > span { max-width: 65%; line-height: 1.6; }
  .visual-activity { gap: 0.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  .network-panel *, .network-panel *::before, .network-panel *::after {
    animation: none !important;
  }
  .network-status-dot::after { opacity: 0.35; }
  .network-panel .signal-blocks i:nth-child(odd) { transform: scaleY(0.6); }
}