.observatory-content-stage {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: #e7eae9;
}

.observatory-content-stage > main,
.observatory-content-stage > #observatorio-feed {
  position: relative;
  z-index: 1;
}

.observatory-jade-backdrop {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: transparent;
}

.observatory-jade-backdrop::before {
  position: absolute;
  inset: 0;
  content: "";
  background-image: radial-gradient(circle, rgba(6, 78, 59, .22) 0 1px, transparent 1.4px);
  background-size: 34px 34px;
  opacity: .16;
}

.observatory-jade-backdrop::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), transparent 18%, transparent 82%, rgba(255, 255, 255, .12));
}

.observatory-hud-orbit {
  --orbit-size: 190px;
  --orbit-color: 6, 120, 94;
  position: absolute;
  width: var(--orbit-size);
  aspect-ratio: 1;
  border: 1px solid rgba(var(--orbit-color), .34);
  border-radius: 50%;
  opacity: .62;
  mix-blend-mode: multiply;
  filter: drop-shadow(0 4px 9px rgba(6, 78, 59, .08));
  animation: observatory-hud-drift 13s ease-in-out infinite alternate;
}

.observatory-hud-orbit::before,
.observatory-hud-orbit::after {
  position: absolute;
  border-radius: 50%;
  content: "";
}

.observatory-hud-orbit::before {
  inset: 16%;
  border: 2px solid rgba(var(--orbit-color), .38);
  border-top-color: rgba(var(--orbit-color), .72);
  border-right-color: transparent;
  animation: observatory-hud-spin 10s linear infinite;
}

.observatory-hud-orbit::after {
  inset: -10px;
  background: repeating-conic-gradient(from 10deg, transparent 0 19deg, rgba(var(--orbit-color), .66) 19deg 24deg, transparent 24deg 51deg);
  -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 2px), #000 calc(50% - 1px) 50%, transparent calc(50% + 1px));
  mask: radial-gradient(circle, transparent 0 calc(50% - 2px), #000 calc(50% - 1px) 50%, transparent calc(50% + 1px));
  animation: observatory-hud-spin-reverse 17s linear infinite;
}

.observatory-hud-orbit > i {
  position: absolute;
  top: 3%;
  left: 48%;
  width: 8px;
  height: 8px;
  border: 2px solid rgba(255, 255, 255, .72);
  border-radius: 50%;
  background: rgb(var(--orbit-color));
  box-shadow: 0 0 0 4px rgba(var(--orbit-color), .12), 0 0 14px rgba(var(--orbit-color), .30);
  animation: observatory-hud-node 2.6s ease-in-out infinite;
}

.observatory-hud-orbit--1 { --orbit-size: 176px; top: 2.5%; left: 4%; animation-delay: -3s; }
.observatory-hud-orbit--2 { --orbit-size: 228px; top: 14%; right: 7%; animation-delay: -8s; }
.observatory-hud-orbit--3 { --orbit-size: 148px; top: 27%; left: 31%; animation-delay: -5s; }
.observatory-hud-orbit--4 { --orbit-size: 210px; top: 40%; right: 25%; animation-delay: -11s; }
.observatory-hud-orbit--5 { --orbit-size: 242px; top: 52%; left: 6%; animation-delay: -6s; }
.observatory-hud-orbit--6 { --orbit-size: 168px; top: 65%; right: 4%; animation-delay: -10s; }
.observatory-hud-orbit--7 { --orbit-size: 218px; top: 77%; left: 53%; animation-delay: -4s; }
.observatory-hud-orbit--8 { --orbit-size: 156px; top: 90%; left: 18%; animation-delay: -9s; }

@keyframes observatory-hud-drift {
  from { transform: translate3d(-7px, 7px, 0) rotate(-3deg); opacity: .44; }
  to { transform: translate3d(13px, -12px, 0) rotate(5deg); opacity: .72; }
}

@keyframes observatory-hud-spin { to { transform: rotate(360deg); } }
@keyframes observatory-hud-spin-reverse { to { transform: rotate(-360deg); } }

@keyframes observatory-hud-node {
  0%, 100% { transform: scale(.82); opacity: .58; }
  50% { transform: scale(1.18); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .observatory-hud-orbit,
  .observatory-hud-orbit::before,
  .observatory-hud-orbit::after,
  .observatory-hud-orbit > i { animation: none; }
}