.orbit-field {
  --layer-x: 0px;
  --layer-y: 0px;
  z-index: 12;
  inset: 0;
  transform: translate3d(var(--layer-x), var(--layer-y), 0);
  transform-origin: var(--orbit-center-x) var(--orbit-center-y);
  pointer-events: none;
  will-change: transform;
}

.dust {
  z-index: 14;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.52;
  mix-blend-mode: screen;
  pointer-events: none;
}

.orbit {
  position: absolute;
  left: var(--orbit-center-x);
  top: var(--orbit-center-y);
  width: calc(var(--radius) * 2vmin);
  height: calc(var(--radius) * 2vmin);
  margin-left: calc(var(--radius) * -1vmin);
  margin-top: calc(var(--radius) * -1vmin);
  border: 1px solid var(--color-orbit-stroke);
  border-radius: 50%;
  animation: orbit-spin var(--period) linear infinite;
  animation-delay: var(--delay);
  will-change: transform;
}

.orbit-1 {
  opacity: 0.38;
}

.orbit-2 {
  opacity: 0.42;
}

.orbit-3 {
  opacity: 0.52;
}

.orbit-4 {
  opacity: 0.46;
}

.orbit-5 {
  opacity: 0.36;
}

.orbit-6 {
  opacity: 0.28;
}

.planet {
  position: absolute;
  left: calc(50% + 50% * sin(var(--angle, 0deg)));
  top: calc(50% - 50% * cos(var(--angle, 0deg)));
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, #fff8db 0 18%, var(--color-cream) 44%, #c69d64 100%);
  box-shadow:
    0 0 10px rgba(240, 229, 193, 0.32),
    0 0 24px rgba(240, 229, 193, 0.14);
  transform: translate(-50%, -50%);
}

.planet-small {
  width: 6px;
  height: 6px;
}

.planet-medium {
  width: 8px;
  height: 8px;
}

.planet-large {
  width: 10px;
  height: 10px;
}

.planet-dim {
  opacity: 0.72;
}

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

@media (prefers-reduced-motion: reduce) {
  .orbit {
    animation-play-state: paused;
  }
}