#container {
		  position: absolute;
		  top: 50%;
		  left: 50%;
		  transform: translate(-50%, -50%);
		  width: 0;
		  height: 0;
		  z-index: 2;
		}

		.orbit-wrapper {
		  position: absolute;
		  left: 0;
		  transform-origin: 0 0;
		  animation: orbit var(--orbit-duration, 20s) linear infinite;
		  z-index: 3;
		}

		.orbit-image {
		  position: absolute;
		  width: 64px;
		  height: 64px;
		  transform-origin: center center;
		  animation: spinAndPulse var(--spin-duration, 30s) linear infinite;
		  animation-timing-function: ease-in-out;
		}

		/* wrapper rotation (around the center) */
		@keyframes orbit {
		  from {
		    transform: rotate(0deg);
		  }

		  to {
		    transform: rotate(360deg);
		  }
		}

		/* combined spin + pulsing orbit radius */
		@keyframes spinAndPulse {
		  0% {
		    transform: rotate(0deg) translate(calc(var(--radius) * 1), 0) translate(-50%, -50%) rotate(0deg);
		  }

		  25% {
		    transform: rotate(90deg) translate(calc(var(--radius) * 1.2), 0) translate(-50%, -50%) rotate(90deg);
		  }

		  50% {
		    transform: rotate(180deg) translate(calc(var(--radius) * 1.5), 0) translate(-50%, -50%) rotate(180deg);
		  }

		  75% {
		    transform: rotate(270deg) translate(calc(var(--radius) * 1.2), 0) translate(-50%, -50%) rotate(270deg);
		  }

		  100% {
		    transform: rotate(360deg) translate(calc(var(--radius) * 1), 0) translate(-50%, -50%) rotate(360deg);
		  }
		}