.solar-orbit {
  inset: var(--inset);
  animation: solar-spin var(--duration) linear infinite;
  transform-origin: center;
}

.solar-orbit i {
  position: absolute;
  top: 50%;
  left: -4px;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: #c8945c;
  box-shadow: 0 0 17px rgba(200, 148, 92, .76);
}

.orbit-1 { --inset: 1%; --duration: 31s; }
.orbit-2 { --inset: 4.5%; --duration: 27s; animation-direction: reverse; }
.orbit-3 { --inset: 8%; --duration: 24s; }
.orbit-4 { --inset: 11.5%; --duration: 20s; animation-direction: reverse; }
.orbit-5 { --inset: 15%; --duration: 17s; }
.orbit-6 { --inset: 18.5%; --duration: 14s; animation-direction: reverse; }
.orbit-7 { --inset: 22%; --duration: 11s; }
.orbit-8 { --inset: 25.5%; --duration: 8s; animation-direction: reverse; }

.orbit-1 { animation-delay: -18s; }
.orbit-2 { animation-delay: -6s; }
.orbit-3 { animation-delay: -14s; }
.orbit-4 { animation-delay: -3s; }
.orbit-5 { animation-delay: -9s; }
.orbit-6 { animation-delay: -12s; }
.orbit-7 { animation-delay: -4s; }
.orbit-8 { animation-delay: -7s; }

.product-stage .brand-orb {
  width: 34%;
  border: 0;
  background: transparent;
  box-shadow: none;
  animation: none;
  pointer-events: none;
}

.product-stage .brand-orb::before,
.product-stage .brand-orb::after {
  display: none;
}

.product-stage .brand-orb img {
  width: 72%;
  height: 72%;
  filter: none;
  animation: sun-spin 20s linear infinite;
}

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

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

@media (prefers-reduced-motion: reduce) {
  .solar-orbit { animation: none; }
  .product-stage .brand-orb img { animation: none; }
}