.orbit-stars {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(2px 2px at 20px 30px, white, transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 90px 40px, white, transparent),
        radial-gradient(2px 2px at 160px 120px, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 230px 80px, white, transparent),
        radial-gradient(2px 2px at 300px 150px, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 100px 200px, white, transparent),
        radial-gradient(2px 2px at 250px 250px, rgba(255, 255, 255, 0.5), transparent);
    background-size: 350px 350px;
    animation: twinkle 4s ease-in-out infinite;
}

@keyframes twinkle {

    0%,
    100% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }
}

.orbit-enemy {
    position: absolute;
    width: 12px;
    height: 12px;
    background: linear-gradient(135deg, #dc2626, #9333ea);
    clip-path: polygon(50% 0%, 100% 100%, 50% 75%, 0% 100%);
    box-shadow: 0 0 15px #dc2626, 0 0 30px rgba(147, 51, 234, 0.5);
    animation: enemyApproach 6s linear infinite;
}

.orbit-enemy.swarm {
    width: 6px;
    height: 6px;
    clip-path: circle(50%);
}

.orbit-enemy.elite {
    width: 18px;
    height: 18px;
    background: linear-gradient(135deg, #7c3aed, #dc2626);
    clip-path: polygon(50% 0%, 90% 30%, 100% 70%, 50% 100%, 0% 70%, 10% 30%);
    box-shadow: 0 0 20px #7c3aed, 0 0 40px rgba(220, 38, 38, 0.5);
}

@keyframes enemyApproach {
    0% {
        transform: translate(calc(100vw + 50px), 0) rotate(225deg) scale(0.5);
        opacity: 0;
    }

    5% {
        opacity: 1;
        transform: translate(calc(90vw), 0) rotate(225deg) scale(0.7);
    }

    70% {
        opacity: 1;
        transform: translate(calc(55vw), calc(50vh - 200px)) rotate(225deg) scale(1);
    }

    75% {
        opacity: 0;
        transform: translate(calc(52vw), calc(50vh - 180px)) scale(0);
    }

    100% {
        opacity: 0;
    }
}

.orbit-enemy:nth-child(1) {
    top: 5%;
    animation-delay: 0s;
    animation-duration: 5s;
}

.orbit-enemy:nth-child(2) {
    top: 15%;
    animation-delay: 0.6s;
    animation-duration: 6s;
}

.orbit-enemy:nth-child(3) {
    top: 25%;
    animation-delay: 1.2s;
    animation-duration: 5.5s;
}

.orbit-enemy:nth-child(4) {
    top: 35%;
    animation-delay: 1.8s;
    animation-duration: 7s;
}

.orbit-enemy:nth-child(5) {
    top: 8%;
    animation-delay: 2.4s;
    animation-duration: 5.2s;
}

.orbit-enemy:nth-child(6) {
    top: 20%;
    animation-delay: 3s;
    animation-duration: 6.5s;
}

.orbit-enemy:nth-child(7) {
    top: 30%;
    animation-delay: 3.6s;
    animation-duration: 5.8s;
}

.orbit-enemy:nth-child(8) {
    top: 12%;
    animation-delay: 4.2s;
    animation-duration: 6.2s;
}

.orbit-laser {
    position: absolute;
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #00d4ff, #a855f7, transparent);
    border-radius: 2px;
    box-shadow: 0 0 10px #00d4ff, 0 0 20px #a855f7;
    animation: laserShoot 2s ease-out infinite;
    left: 50%;
    top: 50%;
}

@keyframes laserShoot {
    0% {
        transform: translate(0, 0) rotate(var(--angle)) scaleX(0);
        opacity: 0;
    }

    10% {
        opacity: 1;
        transform: translate(0, 0) rotate(var(--angle)) scaleX(1);
    }

    50% {
        opacity: 1;
        transform: translate(var(--tx), var(--ty)) rotate(var(--angle)) scaleX(1.5);
    }

    60% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

.orbit-laser:nth-child(9) {
    --angle: -45deg;
    --tx: 150px;
    --ty: -100px;
    animation-delay: 0.3s;
}

.orbit-laser:nth-child(10) {
    --angle: 30deg;
    --tx: 120px;
    --ty: 80px;
    animation-delay: 1.2s;
}

.orbit-laser:nth-child(11) {
    --angle: -60deg;
    --tx: 100px;
    --ty: -150px;
    animation-delay: 2.1s;
}

.orbit-laser:nth-child(12) {
    --angle: 45deg;
    --tx: 180px;
    --ty: 120px;
    animation-delay: 3s;
}

.orbit-laser:nth-child(13) {
    --angle: -20deg;
    --tx: 200px;
    --ty: -50px;
    animation-delay: 3.8s;
}

.orbit-explosion {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff, #fbbf24, #f97316, transparent);
    animation: explode 1.5s ease-out infinite;
}

@keyframes explode {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    20% {
        transform: scale(1);
        opacity: 1;
    }

    40% {
        transform: scale(1.5);
        opacity: 0.8;
    }

    100% {
        transform: scale(2);
        opacity: 0;
    }
}

.orbit-explosion:nth-child(14) {
    top: 35%;
    left: 60%;
    animation-delay: 0.5s;
}

.orbit-explosion:nth-child(15) {
    top: 55%;
    left: 65%;
    animation-delay: 1.8s;
}

.orbit-explosion:nth-child(16) {
    top: 25%;
    left: 55%;
    animation-delay: 3.2s;
}

.orbit-explosion:nth-child(17) {
    top: 70%;
    left: 62%;
    animation-delay: 4.5s;
}

.orbit-satellite {
    position: absolute;
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, #00d4ff, #a855f7);
    border-radius: 2px;
    box-shadow: 0 0 10px #00d4ff, 0 0 20px rgba(168, 85, 247, 0.5);
    animation: orbitRotate 20s linear infinite;
}

.orbit-satellite::before {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: #fff;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 5px #fff;
}

@keyframes orbitRotate {
    0% {
        transform: rotate(var(--start-angle)) translateX(var(--orbit-radius)) rotate(calc(-1 * var(--start-angle)));
    }

    100% {
        transform: rotate(calc(var(--start-angle) + 360deg)) translateX(var(--orbit-radius)) rotate(calc(-1 * var(--start-angle) - 360deg));
    }
}

.orbit-satellite:nth-child(18) {
    --start-angle: 0deg;
    --orbit-radius: 280px;
    top: 85%;
    left: 50%;
    animation-duration: 25s;
}

.orbit-satellite:nth-child(19) {
    --start-angle: 72deg;
    --orbit-radius: 280px;
    top: 85%;
    left: 50%;
    animation-duration: 25s;
}

.orbit-satellite:nth-child(20) {
    --start-angle: 144deg;
    --orbit-radius: 280px;
    top: 85%;
    left: 50%;
    animation-duration: 25s;
}

.orbit-satellite:nth-child(21) {
    --start-angle: 216deg;
    --orbit-radius: 280px;
    top: 85%;
    left: 50%;
    animation-duration: 25s;
}

.orbit-satellite:nth-child(22) {
    --start-angle: 288deg;
    --orbit-radius: 280px;
    top: 85%;
    left: 50%;
    animation-duration: 25s;
}

.orbit-satellite-laser {
    position: absolute;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, #00d4ff, #a855f7, transparent);
    border-radius: 2px;
    box-shadow: 0 0 8px #00d4ff, 0 0 15px #a855f7;
    animation: satelliteFire 3s ease-out infinite;
    transform-origin: left center;
}

@keyframes satelliteFire {
    0% {
        opacity: 0;
        transform: rotate(var(--fire-angle)) scaleX(0);
    }

    5% {
        opacity: 1;
        transform: rotate(var(--fire-angle)) scaleX(0.3);
    }

    15% {
        opacity: 1;
        transform: rotate(var(--fire-angle)) scaleX(1);
    }

    30% {
        opacity: 0;
        transform: rotate(var(--fire-angle)) scaleX(1.2);
    }

    100% {
        opacity: 0;
    }
}

.orbit-satellite-laser:nth-child(23) {
    --fire-angle: -45deg;
    top: 75%;
    left: 55%;
    animation-delay: 0.5s;
}

.orbit-satellite-laser:nth-child(24) {
    --fire-angle: -30deg;
    top: 80%;
    left: 60%;
    animation-delay: 1.5s;
}

.orbit-satellite-laser:nth-child(25) {
    --fire-angle: -60deg;
    top: 70%;
    left: 45%;
    animation-delay: 2.5s;
}

.orbit-satellite-laser:nth-child(26) {
    --fire-angle: -15deg;
    top: 82%;
    left: 65%;
    animation-delay: 3.5s;
}

.orbit-satellite-laser:nth-child(27) {
    --fire-angle: -50deg;
    top: 72%;
    left: 52%;
    animation-delay: 4.5s;
}

.dynamic-enemy {
    position: absolute;
    pointer-events: none;
}

.dynamic-laser {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, #00d4ff, #a855f7, transparent);
    border-radius: 2px;
    box-shadow: 0 0 10px #00d4ff, 0 0 20px #a855f7;
    transform-origin: left center;
    pointer-events: none;
}

.dynamic-explosion {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}