/*
 * Orbit graphic styles.
 *
 * Scoped to the component and shipped alongside its markup, so the animation
 * and its reduced-motion handling travel with the graphic wherever it is
 * placed rather than living in the global stylesheet.
 */

.orbit{position:relative;width:100%;aspect-ratio:1/1}
.orbit svg{display:block;width:100%;height:100%}
.orbit g{transform-origin:200px 200px}

.orbit-1{animation:dl-orbit 6s linear infinite}
.orbit-2{animation:dl-orbit 11s linear infinite}
.orbit-3{animation:dl-orbit 18s linear infinite}
.orbit-4{animation:dl-orbit 27s linear infinite}

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

@media (prefers-reduced-motion:reduce){
	.orbit g{animation:none !important}
}