:where(.brand-orbit-system) {
  --brand-orbit-1: 18rem;
  --brand-orbit-2: 24rem;
  --brand-orbit-3: 31rem;
  --brand-orbit-4: 39rem;
  --brand-orbit-5: 47rem;
  --brand-orbit-line-half: clamp(0.0625rem, 0.055vw, 0.1rem);
  --brand-orbit-feather: clamp(0.1rem, 0.08vw, 0.15rem);

  isolation: isolate;
}

.brand-orbit-system__paths {
  position: absolute;
  z-index: -2;
  top: 50%;
  left: 50%;
  width: max(140rem, 220vw);
  aspect-ratio: 1;
  background:
    radial-gradient(
      circle at center,
      transparent calc(var(--brand-orbit-1) - var(--brand-orbit-feather)),
      rgb(74 134 162 / 30%) calc(var(--brand-orbit-1) - var(--brand-orbit-line-half)) calc(var(--brand-orbit-1) + var(--brand-orbit-line-half)),
      transparent calc(var(--brand-orbit-1) + var(--brand-orbit-feather))
    ),
    radial-gradient(
      circle at center,
      transparent calc(var(--brand-orbit-2) - var(--brand-orbit-feather)),
      rgb(132 200 165 / 28%) calc(var(--brand-orbit-2) - var(--brand-orbit-line-half)) calc(var(--brand-orbit-2) + var(--brand-orbit-line-half)),
      transparent calc(var(--brand-orbit-2) + var(--brand-orbit-feather))
    ),
    radial-gradient(
      circle at center,
      transparent calc(var(--brand-orbit-3) - var(--brand-orbit-feather)),
      rgb(74 134 162 / 24%) calc(var(--brand-orbit-3) - var(--brand-orbit-line-half)) calc(var(--brand-orbit-3) + var(--brand-orbit-line-half)),
      transparent calc(var(--brand-orbit-3) + var(--brand-orbit-feather))
    ),
    radial-gradient(
      circle at center,
      transparent calc(var(--brand-orbit-4) - var(--brand-orbit-feather)),
      rgb(0 170 83 / 21%) calc(var(--brand-orbit-4) - var(--brand-orbit-line-half)) calc(var(--brand-orbit-4) + var(--brand-orbit-line-half)),
      transparent calc(var(--brand-orbit-4) + var(--brand-orbit-feather))
    ),
    radial-gradient(
      circle at center,
      transparent calc(var(--brand-orbit-5) - var(--brand-orbit-feather)),
      rgb(255 179 18 / 19%) calc(var(--brand-orbit-5) - var(--brand-orbit-line-half)) calc(var(--brand-orbit-5) + var(--brand-orbit-line-half)),
      transparent calc(var(--brand-orbit-5) + var(--brand-orbit-feather))
    );
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.brand-orbit-system__planet {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: var(--planet-size, 1.5rem);
  aspect-ratio: 1;
  background: var(--planet-color, var(--lp-blue));
  border: clamp(0.15rem, 0.3vw, 0.25rem) solid rgb(255 255 255 / 88%);
  border-radius: 50%;
  box-shadow: 0 0 0 calc(var(--planet-size, 1.5rem) * 0.28) var(--planet-halo, rgb(74 134 162 / 12%));
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(var(--planet-start, 0deg)) translateX(var(--planet-orbit));
  animation: brand-planet-orbit var(--planet-duration, 56s) linear var(--planet-delay, 0s) infinite;
}

.brand-orbit-system__planet--1 {
  --planet-orbit: var(--brand-orbit-1);
  --planet-color: var(--lp-blue);
  --planet-halo: rgb(74 134 162 / 13%);
  --planet-start: 24deg;
  --planet-duration: 44s;
}

.brand-orbit-system__planet--2 {
  --planet-orbit: var(--brand-orbit-2);
  --planet-color: var(--lp-green);
  --planet-halo: rgb(0 170 83 / 12%);
  --planet-start: 142deg;
  --planet-duration: 58s;
  animation-direction: reverse;
}

.brand-orbit-system__planet--3 {
  --planet-orbit: var(--brand-orbit-3);
  --planet-color: var(--lp-yellow);
  --planet-halo: rgb(255 179 18 / 14%);
  --planet-start: 286deg;
  --planet-duration: 72s;
}

.brand-orbit-system__planet--4 {
  --planet-orbit: var(--brand-orbit-4);
  --planet-color: var(--lp-mint);
  --planet-halo: rgb(132 200 165 / 14%);
  --planet-start: 78deg;
  --planet-duration: 86s;
  animation-direction: reverse;
}

.brand-orbit-system__planet--5 {
  --planet-orbit: var(--brand-orbit-5);
  --planet-color: var(--lp-green-deep);
  --planet-halo: rgb(22 96 68 / 12%);
  --planet-start: 218deg;
  --planet-duration: 102s;
}

@keyframes brand-planet-orbit {
  from {
    transform: translate(-50%, -50%) rotate(var(--planet-start)) translateX(var(--planet-orbit));
  }

  to {
    transform: translate(-50%, -50%) rotate(calc(var(--planet-start) + 360deg)) translateX(var(--planet-orbit));
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-orbit-system__planet {
    animation: none;
  }
}