/* The logo stays still; only its surrounding rings gently tilt. */
.orbit-scene {
  position: relative;
  min-width: 0;
}

.ring-one {
  --orbit-angle: -32deg;
}

.ring-two {
  --orbit-angle: 32deg;
}

.ring-three {
  --orbit-angle: 86deg;
}

@media (prefers-reduced-motion: no-preference) {
  .motion-enabled .orbit-ring {
    animation: orbit-sway 18s ease-in-out infinite alternate;
    animation-play-state: paused;
  }

  .motion-enabled .ring-two {
    animation-duration: 23s;
    animation-delay: -6s;
    animation-direction: alternate-reverse;
  }

  .motion-enabled .ring-three {
    animation-duration: 28s;
    animation-delay: -12s;
  }

  .motion-running .orbit-ring {
    animation-play-state: running;
  }
}

@keyframes orbit-sway {
  from {
    transform: translate(-50%, -50%) rotate(calc(var(--orbit-angle) - 5deg));
  }
  to {
    transform: translate(-50%, -50%) rotate(calc(var(--orbit-angle) + 5deg));
  }
}