.orbital-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.orbit {
    position: absolute;
    border: 1px solid var(--accent-primary);
    border-radius: 50%;
    transform-style: preserve-3d;
    animation: rotate 20s linear infinite;
}

.orbit-1 {
    width: 500px;
    height: 500px;
    top: 50%;
    left: 50%;
    margin: -250px 0 0 -250px;
    animation-duration: 30s;
}

.orbit-2 {
    width: 800px;
    height: 800px;
    top: 50%;
    left: 50%;
    margin: -400px 0 0 -400px;
    animation-duration: 40s;
    animation-direction: reverse;
}

.orbit-3 {
    width: 1200px;
    height: 1200px;
    top: 50%;
    left: 50%;
    margin: -600px 0 0 -600px;
    animation-duration: 50s;
}

.satellite {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--secondary-color);
    border-radius: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: glow 2s ease-in-out infinite alternate;
}

.orbit-1 .satellite { left: 0; }
.orbit-2 .satellite { left: 100%; }
.orbit-3 .satellite { left: 50%; top: 0; }

@keyframes rotate {
    from {
        transform: rotateZ(0deg) rotateY(20deg);
    }
    to {
        transform: rotateZ(360deg) rotateY(20deg);
    }
}

@keyframes glow {
    from {
        box-shadow: 0 0 5px var(--secondary-color);
    }
    to {
        box-shadow: 0 0 15px var(--secondary-color),
                    0 0 30px var(--secondary-color);
    }
}