/* ======================== */
/* PIXEL ART ALIEN SPACESHIP */
/* Tiny UFO Animation       */
/* ======================== */

/* Spaceship container - only visible in pixart mode */
[data-theme="pixart"] #pixel-spaceship {
    position: fixed;
    width: 24px;
    height: 24px;
    pointer-events: none;
    z-index: 9998;
    filter: drop-shadow(0 0 8px var(--retro-cyan));
    animation: flyAround 60s linear infinite;
    opacity: 0.8;
}

/* Pixel art UFO using box-shadows */
[data-theme="pixart"] #pixel-spaceship::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: transparent;
    top: 0;
    left: 0;
    box-shadow:
        /* Top dome - cyan glow */
        10px 2px 0 0 var(--retro-cyan),
        8px 4px 0 0 var(--retro-cyan),
        10px 4px 0 0 var(--retro-cyan),
        12px 4px 0 0 var(--retro-cyan),
        /* Main body - green */
        6px 6px 0 0 var(--retro-green),
        8px 6px 0 0 var(--retro-green),
        10px 6px 0 0 var(--retro-green),
        12px 6px 0 0 var(--retro-green),
        14px 6px 0 0 var(--retro-green),
        /* Wide saucer */
        4px 8px 0 0 var(--retro-green),
        6px 8px 0 0 var(--retro-green),
        8px 8px 0 0 var(--retro-green),
        10px 8px 0 0 var(--retro-green),
        12px 8px 0 0 var(--retro-green),
        14px 8px 0 0 var(--retro-green),
        16px 8px 0 0 var(--retro-green),
        /* Bottom lights - amber */
        6px 10px 0 0 var(--retro-amber),
        10px 10px 0 0 var(--retro-amber),
        14px 10px 0 0 var(--retro-amber);
    animation: ufoGlow 2s ease-in-out infinite alternate;
}

/* Beam effect (optional, subtle) */
[data-theme="pixart"] #pixel-spaceship::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: transparent;
    top: 12px;
    left: 8px;
    opacity: 0.3;
    box-shadow:
        0px 0px 0 0 var(--retro-amber),
        2px 2px 0 0 var(--retro-amber),
        4px 4px 0 0 var(--retro-amber);
    animation: beam 3s ease-in-out infinite;
}

/* Flying path - gentle arc across screen */
@keyframes flyAround {
    0% {
        top: -30px;
        left: -30px;
        transform: rotate(0deg);
    }

    15% {
        top: 20%;
        left: 30%;
        transform: rotate(10deg);
    }

    30% {
        top: 15%;
        left: 60%;
        transform: rotate(-5deg);
    }

    45% {
        top: 40%;
        left: 85%;
        transform: rotate(15deg);
    }

    60% {
        top: 70%;
        left: 70%;
        transform: rotate(-10deg);
    }

    75% {
        top: 60%;
        left: 30%;
        transform: rotate(5deg);
    }

    90% {
        top: 30%;
        left: 10%;
        transform: rotate(-15deg);
    }

    100% {
        top: -30px;
        left: -30px;
        transform: rotate(0deg);
    }
}

/* Gentle glow pulse */
@keyframes ufoGlow {
    0% {
        filter: brightness(1);
    }
    100% {
        filter: brightness(1.3);
    }
}

/* Beam animation */
@keyframes beam {
    0%, 100% {
        opacity: 0;
        transform: scaleY(0);
    }
    50% {
        opacity: 0.3;
        transform: scaleY(1);
    }
}

/* Small alien emoji pilot (tiny detail) */
[data-theme="pixart"] .alien-pilot {
    position: absolute;
    top: 3px;
    left: 9px;
    font-size: 6px;
    animation: wave 3s ease-in-out infinite;
}

@keyframes wave {
    0%, 100% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(20deg);
    }
}

/* Easter egg: Click to speed up (optional interaction) */
[data-theme="pixart"] #pixel-spaceship.turbo {
    animation: flyAround 15s linear infinite;
}

/* Pixel trail effect */
[data-theme="pixart"] .spaceship-trail {
    position: fixed;
    width: 2px;
    height: 2px;
    background: var(--retro-cyan);
    pointer-events: none;
    opacity: 0.6;
    animation: trailFade 0.5s ease-out forwards;
    z-index: 9997;
}

@keyframes trailFade {
    from {
        opacity: 0.6;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.5);
    }
}

/* ======================== */
/*   RICH SPACE WORLD      */
/* ======================== */

/* === PLANETS === */

/* Earth-like Planet - Blue & Green */
[data-theme="pixart"] #pixel-planet-earth {
    position: fixed;
    width: 40px;
    height: 40px;
    pointer-events: none;
    z-index: 9990;
    animation: floatPlanet1 120s linear infinite;
    opacity: 0.9;
    top: 60%;
    left: 80%;
}

[data-theme="pixart"] #pixel-planet-earth::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow:
        /* Outer space glow */
        8px 2px 0 0 rgba(0, 255, 255, 0.3),
        10px 2px 0 0 rgba(0, 255, 255, 0.3),
        12px 2px 0 0 rgba(0, 255, 255, 0.3),
        /* Top curve - blue */
        8px 4px 0 0 #0088ff,
        10px 4px 0 0 #00aaff,
        12px 4px 0 0 #0088ff,
        14px 4px 0 0 #0066cc,
        /* Upper section - blue with green landmass */
        6px 6px 0 0 #0088ff,
        8px 6px 0 0 #00ff41,
        10px 6px 0 0 #0088ff,
        12px 6px 0 0 #00ff41,
        14px 6px 0 0 #0088ff,
        16px 6px 0 0 #0066cc,
        /* Middle - ocean blue with continents */
        6px 8px 0 0 #0088ff,
        8px 8px 0 0 #0088ff,
        10px 8px 0 0 #00ff41,
        12px 8px 0 0 #00ff41,
        14px 8px 0 0 #0088ff,
        16px 8px 0 0 #0088ff,
        /* Lower middle */
        6px 10px 0 0 #0066cc,
        8px 10px 0 0 #0088ff,
        10px 10px 0 0 #0088ff,
        12px 10px 0 0 #00ff41,
        14px 10px 0 0 #0088ff,
        16px 10px 0 0 #0066cc,
        /* Bottom section */
        8px 12px 0 0 #0066cc,
        10px 12px 0 0 #0088ff,
        12px 12px 0 0 #0088ff,
        14px 12px 0 0 #0066cc,
        /* Bottom curve */
        10px 14px 0 0 #0066cc,
        12px 14px 0 0 #0066cc;
    filter: drop-shadow(0 0 12px rgba(0, 136, 255, 0.6));
}

/* Mars-like Planet - Red & Orange */
[data-theme="pixart"] #pixel-planet-mars {
    position: fixed;
    width: 32px;
    height: 32px;
    pointer-events: none;
    z-index: 9991;
    animation: floatPlanet2 100s linear infinite;
    opacity: 0.85;
    top: 20%;
    left: 15%;
}

[data-theme="pixart"] #pixel-planet-mars::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow:
        /* Top curve */
        8px 2px 0 0 #cc3300,
        10px 2px 0 0 #ff4400,
        12px 2px 0 0 #cc3300,
        /* Upper section - red with dark patches */
        6px 4px 0 0 #ff4400,
        8px 4px 0 0 #ff6600,
        10px 4px 0 0 #cc3300,
        12px 4px 0 0 #ff4400,
        14px 4px 0 0 #ff4400,
        /* Middle - varied reds and oranges */
        6px 6px 0 0 #ff4400,
        8px 6px 0 0 #ff6600,
        10px 6px 0 0 #ff6600,
        12px 6px 0 0 #cc3300,
        14px 6px 0 0 #ff4400,
        /* Lower middle */
        6px 8px 0 0 #cc3300,
        8px 8px 0 0 #ff4400,
        10px 8px 0 0 #ff6600,
        12px 8px 0 0 #ff4400,
        14px 8px 0 0 #cc3300,
        /* Bottom section */
        8px 10px 0 0 #cc3300,
        10px 10px 0 0 #ff4400,
        12px 10px 0 0 #cc3300;
    filter: drop-shadow(0 0 10px rgba(255, 68, 0, 0.5));
}

/* Gas Giant - Purple & Pink */
[data-theme="pixart"] #pixel-planet-giant {
    position: fixed;
    width: 60px;
    height: 60px;
    pointer-events: none;
    z-index: 9989;
    animation: floatPlanet3 180s linear infinite;
    opacity: 0.8;
    top: 10%;
    right: 5%;
}

[data-theme="pixart"] #pixel-planet-giant::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow:
        /* Large gas giant with bands */
        /* Top curve */
        12px 2px 0 0 #aa00ff,
        14px 2px 0 0 #cc44ff,
        16px 2px 0 0 #cc44ff,
        18px 2px 0 0 #aa00ff,
        /* Band 1 - purple */
        10px 4px 0 0 #aa00ff,
        12px 4px 0 0 #cc44ff,
        14px 4px 0 0 #cc44ff,
        16px 4px 0 0 #cc44ff,
        18px 4px 0 0 #cc44ff,
        20px 4px 0 0 #aa00ff,
        /* Band 2 - pink */
        8px 6px 0 0 #aa00ff,
        10px 6px 0 0 #ff00ff,
        12px 6px 0 0 #ff44ff,
        14px 6px 0 0 #ff44ff,
        16px 6px 0 0 #ff44ff,
        18px 6px 0 0 #ff00ff,
        20px 6px 0 0 #cc44ff,
        22px 6px 0 0 #aa00ff,
        /* Band 3 - purple */
        8px 8px 0 0 #aa00ff,
        10px 8px 0 0 #cc44ff,
        12px 8px 0 0 #cc44ff,
        14px 8px 0 0 #aa00ff,
        16px 8px 0 0 #cc44ff,
        18px 8px 0 0 #cc44ff,
        20px 8px 0 0 #cc44ff,
        22px 8px 0 0 #aa00ff,
        /* Band 4 - mixed */
        8px 10px 0 0 #aa00ff,
        10px 10px 0 0 #ff00ff,
        12px 10px 0 0 #cc44ff,
        14px 10px 0 0 #ff44ff,
        16px 10px 0 0 #cc44ff,
        18px 10px 0 0 #ff00ff,
        20px 10px 0 0 #cc44ff,
        22px 10px 0 0 #aa00ff,
        /* Band 5 */
        8px 12px 0 0 #8800cc,
        10px 12px 0 0 #aa00ff,
        12px 12px 0 0 #cc44ff,
        14px 12px 0 0 #cc44ff,
        16px 12px 0 0 #cc44ff,
        18px 12px 0 0 #aa00ff,
        20px 12px 0 0 #cc44ff,
        22px 12px 0 0 #8800cc,
        /* Lower bands */
        10px 14px 0 0 #8800cc,
        12px 14px 0 0 #aa00ff,
        14px 14px 0 0 #aa00ff,
        16px 14px 0 0 #aa00ff,
        18px 14px 0 0 #aa00ff,
        20px 14px 0 0 #8800cc,
        /* Bottom curve */
        12px 16px 0 0 #8800cc,
        14px 16px 0 0 #8800cc,
        16px 16px 0 0 #8800cc,
        18px 16px 0 0 #8800cc;
    filter: drop-shadow(0 0 15px rgba(170, 0, 255, 0.7));
}

/* Small Moon */
[data-theme="pixart"] #pixel-moon {
    position: fixed;
    width: 20px;
    height: 20px;
    pointer-events: none;
    z-index: 9992;
    animation: floatMoon 80s linear infinite;
    opacity: 0.75;
    top: 80%;
    left: 10%;
}

[data-theme="pixart"] #pixel-moon::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow:
        /* Small gray moon with craters */
        6px 2px 0 0 #888888,
        8px 2px 0 0 #aaaaaa,
        /* Upper section */
        4px 4px 0 0 #aaaaaa,
        6px 4px 0 0 #cccccc,
        8px 4px 0 0 #888888,
        10px 4px 0 0 #aaaaaa,
        /* Middle - with crater */
        4px 6px 0 0 #aaaaaa,
        6px 6px 0 0 #666666,
        8px 6px 0 0 #cccccc,
        10px 6px 0 0 #aaaaaa,
        /* Lower section */
        6px 8px 0 0 #aaaaaa,
        8px 8px 0 0 #aaaaaa;
    filter: drop-shadow(0 0 6px rgba(200, 200, 200, 0.4));
}

/* === MORE SPACESHIPS === */

/* Cargo Ship - Large and slow */
[data-theme="pixart"] #pixel-cargo-ship {
    position: fixed;
    width: 32px;
    height: 28px;
    pointer-events: none;
    z-index: 9993;
    animation: cargoFly 90s linear infinite;
    opacity: 0.85;
}

[data-theme="pixart"] #pixel-cargo-ship::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow:
        /* Cargo ship - bulky rectangular design */
        /* Cockpit */
        12px 2px 0 0 var(--retro-cyan),
        14px 2px 0 0 var(--retro-cyan),
        /* Upper hull */
        10px 4px 0 0 #888888,
        12px 4px 0 0 var(--retro-cyan),
        14px 4px 0 0 var(--retro-cyan),
        16px 4px 0 0 #888888,
        /* Large cargo containers */
        8px 6px 0 0 #ffb000,
        10px 6px 0 0 #ffb000,
        12px 6px 0 0 #ffb000,
        14px 6px 0 0 #ffb000,
        16px 6px 0 0 #ffb000,
        18px 6px 0 0 #ffb000,
        /* Middle cargo */
        8px 8px 0 0 #ffb000,
        10px 8px 0 0 #888888,
        12px 8px 0 0 #ffb000,
        14px 8px 0 0 #ffb000,
        16px 8px 0 0 #888888,
        18px 8px 0 0 #ffb000,
        /* Lower cargo */
        8px 10px 0 0 #ffb000,
        10px 10px 0 0 #ffb000,
        12px 10px 0 0 #ffb000,
        14px 10px 0 0 #ffb000,
        16px 10px 0 0 #ffb000,
        18px 10px 0 0 #ffb000,
        /* Engines */
        8px 12px 0 0 #888888,
        10px 12px 0 0 var(--retro-amber),
        12px 12px 0 0 #888888,
        14px 12px 0 0 #888888,
        16px 12px 0 0 var(--retro-amber),
        18px 12px 0 0 #888888,
        /* Engine glow */
        10px 14px 0 0 var(--retro-amber),
        16px 14px 0 0 var(--retro-amber);
    filter: drop-shadow(0 0 6px rgba(255, 176, 0, 0.5));
}

/* Fighter Ship - Small and fast */
[data-theme="pixart"] #pixel-fighter {
    position: fixed;
    width: 20px;
    height: 18px;
    pointer-events: none;
    z-index: 9994;
    animation: fighterZoom 40s linear infinite;
    opacity: 0.9;
}

[data-theme="pixart"] #pixel-fighter::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow:
        /* Fast fighter - arrow shape */
        /* Nose */
        8px 0px 0 0 var(--retro-cyan),
        /* Cockpit */
        8px 2px 0 0 var(--retro-cyan),
        /* Wings spreading */
        6px 4px 0 0 var(--retro-green),
        8px 4px 0 0 var(--retro-cyan),
        10px 4px 0 0 var(--retro-green),
        /* Wide wings */
        4px 6px 0 0 var(--retro-green),
        6px 6px 0 0 var(--retro-green),
        8px 6px 0 0 var(--retro-green),
        10px 6px 0 0 var(--retro-green),
        12px 6px 0 0 var(--retro-green),
        /* Body */
        6px 8px 0 0 var(--retro-green),
        8px 8px 0 0 var(--retro-green),
        10px 8px 0 0 var(--retro-green),
        /* Engines */
        6px 10px 0 0 var(--retro-amber),
        8px 10px 0 0 var(--retro-green),
        10px 10px 0 0 var(--retro-amber),
        /* Engine trail */
        6px 12px 0 0 var(--retro-amber),
        10px 12px 0 0 var(--retro-amber);
    filter: drop-shadow(0 0 8px rgba(0, 255, 65, 0.6));
}

/* Shuttle - Medium transport */
[data-theme="pixart"] #pixel-shuttle {
    position: fixed;
    width: 24px;
    height: 22px;
    pointer-events: none;
    z-index: 9995;
    animation: shuttleOrbit 110s linear infinite;
    opacity: 0.85;
}

[data-theme="pixart"] #pixel-shuttle::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow:
        /* Shuttle - rounded transport vessel */
        /* Nose */
        10px 2px 0 0 #cccccc,
        /* Cockpit windows */
        8px 4px 0 0 #cccccc,
        10px 4px 0 0 var(--retro-cyan),
        12px 4px 0 0 #cccccc,
        /* Upper hull */
        8px 6px 0 0 #cccccc,
        10px 6px 0 0 #cccccc,
        12px 6px 0 0 #cccccc,
        14px 6px 0 0 #cccccc,
        /* Mid section */
        6px 8px 0 0 #cccccc,
        8px 8px 0 0 #ffffff,
        10px 8px 0 0 #cccccc,
        12px 8px 0 0 #ffffff,
        14px 8px 0 0 #cccccc,
        16px 8px 0 0 #cccccc,
        /* Lower hull */
        8px 10px 0 0 #cccccc,
        10px 10px 0 0 #cccccc,
        12px 10px 0 0 #cccccc,
        14px 10px 0 0 #cccccc,
        /* Engine section */
        8px 12px 0 0 #888888,
        10px 12px 0 0 var(--retro-amber),
        12px 12px 0 0 var(--retro-amber),
        14px 12px 0 0 #888888;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.4));
}

/* === SPACE STATION === */

[data-theme="pixart"] #pixel-station {
    position: fixed;
    width: 48px;
    height: 48px;
    pointer-events: none;
    z-index: 9988;
    animation: stationRotate 200s linear infinite;
    opacity: 0.9;
    top: 50%;
    left: 5%;
}

[data-theme="pixart"] #pixel-station::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow:
        /* Space station with solar panels */
        /* Left solar panel */
        2px 8px 0 0 #0088ff,
        2px 10px 0 0 #0088ff,
        2px 12px 0 0 #0088ff,
        4px 8px 0 0 #00aaff,
        4px 10px 0 0 #0088ff,
        4px 12px 0 0 #00aaff,
        /* Left connector */
        6px 10px 0 0 #888888,
        8px 10px 0 0 #888888,
        /* Central hub - large cylinder */
        10px 6px 0 0 #cccccc,
        12px 6px 0 0 #cccccc,
        14px 6px 0 0 #cccccc,
        16px 6px 0 0 #cccccc,
        10px 8px 0 0 #cccccc,
        12px 8px 0 0 var(--retro-cyan),
        14px 8px 0 0 var(--retro-cyan),
        16px 8px 0 0 #cccccc,
        10px 10px 0 0 #ffffff,
        12px 10px 0 0 #cccccc,
        14px 10px 0 0 #cccccc,
        16px 10px 0 0 #ffffff,
        10px 12px 0 0 #cccccc,
        12px 12px 0 0 var(--retro-cyan),
        14px 12px 0 0 var(--retro-cyan),
        16px 12px 0 0 #cccccc,
        10px 14px 0 0 #cccccc,
        12px 14px 0 0 #cccccc,
        14px 14px 0 0 #cccccc,
        16px 14px 0 0 #cccccc,
        /* Right connector */
        18px 10px 0 0 #888888,
        20px 10px 0 0 #888888,
        /* Right solar panel */
        22px 8px 0 0 #00aaff,
        22px 10px 0 0 #0088ff,
        22px 12px 0 0 #00aaff,
        24px 8px 0 0 #0088ff,
        24px 10px 0 0 #0088ff,
        24px 12px 0 0 #0088ff,
        /* Communication dish on top */
        12px 4px 0 0 #888888,
        14px 4px 0 0 #888888,
        13px 2px 0 0 var(--retro-cyan),
        /* Docking port below */
        13px 16px 0 0 var(--retro-amber);
    filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.5));
    animation: stationBlink 3s ease-in-out infinite;
}

/* === ASTEROIDS === */

[data-theme="pixart"] .pixel-asteroid {
    position: fixed;
    width: 12px;
    height: 12px;
    pointer-events: none;
    z-index: 9987;
    opacity: 0.7;
}

[data-theme="pixart"] #pixel-asteroid-1 {
    animation: asteroidDrift1 70s linear infinite;
    top: 35%;
    left: 50%;
}

[data-theme="pixart"] #pixel-asteroid-2 {
    animation: asteroidDrift2 55s linear infinite;
    top: 65%;
    left: 70%;
}

[data-theme="pixart"] #pixel-asteroid-3 {
    animation: asteroidDrift3 85s linear infinite;
    top: 15%;
    left: 40%;
}

[data-theme="pixart"] .pixel-asteroid::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow:
        /* Irregular rocky asteroid */
        2px 0px 0 0 #664400,
        4px 0px 0 0 #664400,
        0px 2px 0 0 #664400,
        2px 2px 0 0 #886622,
        4px 2px 0 0 #664400,
        6px 2px 0 0 #664400,
        0px 4px 0 0 #664400,
        2px 4px 0 0 #664400,
        4px 4px 0 0 #886622,
        6px 4px 0 0 #664400,
        2px 6px 0 0 #664400,
        4px 6px 0 0 #664400;
    filter: drop-shadow(0 0 4px rgba(102, 68, 0, 0.4));
}

/* === TWINKLING STARS === */

[data-theme="pixart"] .pixel-star {
    position: fixed;
    width: 2px;
    height: 2px;
    background: var(--retro-cyan);
    pointer-events: none;
    z-index: 9985;
    opacity: 0.6;
}

[data-theme="pixart"] #pixel-star-1 {
    top: 10%;
    left: 20%;
    animation: twinkle 2s ease-in-out infinite;
}

[data-theme="pixart"] #pixel-star-2 {
    top: 25%;
    left: 60%;
    animation: twinkle 3s ease-in-out infinite 0.5s;
}

[data-theme="pixart"] #pixel-star-3 {
    top: 40%;
    left: 85%;
    animation: twinkle 2.5s ease-in-out infinite 1s;
}

[data-theme="pixart"] #pixel-star-4 {
    top: 55%;
    left: 25%;
    animation: twinkle 3.5s ease-in-out infinite 1.5s;
}

[data-theme="pixart"] #pixel-star-5 {
    top: 70%;
    left: 45%;
    animation: twinkle 2.8s ease-in-out infinite 0.8s;
}

[data-theme="pixart"] #pixel-star-6 {
    top: 15%;
    left: 75%;
    animation: twinkle 3.2s ease-in-out infinite 2s;
}

[data-theme="pixart"] #pixel-star-7 {
    top: 85%;
    left: 15%;
    animation: twinkle 2.3s ease-in-out infinite 1.2s;
}

[data-theme="pixart"] #pixel-star-8 {
    top: 30%;
    left: 10%;
    animation: twinkle 3.8s ease-in-out infinite 0.3s;
}

[data-theme="pixart"] #pixel-star-9 {
    top: 60%;
    left: 90%;
    animation: twinkle 2.6s ease-in-out infinite 1.8s;
}

[data-theme="pixart"] #pixel-star-10 {
    top: 45%;
    left: 35%;
    animation: twinkle 3.3s ease-in-out infinite 0.6s;
}

/* === ANIMATIONS === */

/* Planet floating animations */
@keyframes floatPlanet1 {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    25% {
        transform: translateY(-20px) rotate(90deg);
    }
    50% {
        transform: translateY(0px) rotate(180deg);
    }
    75% {
        transform: translateY(20px) rotate(270deg);
    }
    100% {
        transform: translateY(0px) rotate(360deg);
    }
}

@keyframes floatPlanet2 {
    0% {
        transform: translateX(0px) rotate(0deg);
    }
    50% {
        transform: translateX(30px) rotate(180deg);
    }
    100% {
        transform: translateX(0px) rotate(360deg);
    }
}

@keyframes floatPlanet3 {
    0% {
        transform: translate(0px, 0px) rotate(0deg);
    }
    25% {
        transform: translate(-15px, 15px) rotate(90deg);
    }
    50% {
        transform: translate(0px, 30px) rotate(180deg);
    }
    75% {
        transform: translate(15px, 15px) rotate(270deg);
    }
    100% {
        transform: translate(0px, 0px) rotate(360deg);
    }
}

@keyframes floatMoon {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-15px);
    }
    100% {
        transform: translateY(0px);
    }
}

/* Spaceship flight paths */
@keyframes cargoFly {
    0% {
        top: 50%;
        left: -50px;
        transform: rotate(-5deg);
    }
    50% {
        top: 45%;
        left: 50%;
        transform: rotate(5deg);
    }
    100% {
        top: 40%;
        left: 110%;
        transform: rotate(0deg);
    }
}

@keyframes fighterZoom {
    0% {
        top: 80%;
        left: 100%;
        transform: rotate(45deg) scale(0.5);
    }
    10% {
        top: 70%;
        left: 80%;
        transform: rotate(35deg) scale(0.8);
    }
    25% {
        top: 50%;
        left: 50%;
        transform: rotate(20deg) scale(1);
    }
    40% {
        top: 30%;
        left: 20%;
        transform: rotate(-10deg) scale(1);
    }
    60% {
        top: 15%;
        left: -20%;
        transform: rotate(-25deg) scale(0.8);
    }
    100% {
        top: 5%;
        left: -50%;
        transform: rotate(-45deg) scale(0.5);
    }
}

@keyframes shuttleOrbit {
    0% {
        top: 30%;
        left: 50%;
        transform: rotate(0deg);
    }
    25% {
        top: 20%;
        left: 70%;
        transform: rotate(90deg);
    }
    50% {
        top: 30%;
        left: 90%;
        transform: rotate(180deg);
    }
    75% {
        top: 40%;
        left: 70%;
        transform: rotate(270deg);
    }
    100% {
        top: 30%;
        left: 50%;
        transform: rotate(360deg);
    }
}

/* Station rotation and blinking lights */
@keyframes stationRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes stationBlink {
    0%, 100% {
        filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.5));
    }
    50% {
        filter: drop-shadow(0 0 15px rgba(0, 255, 255, 0.8));
    }
}

/* Asteroid drifting */
@keyframes asteroidDrift1 {
    0% {
        transform: translate(0px, 0px) rotate(0deg);
    }
    100% {
        transform: translate(-200px, 100px) rotate(360deg);
    }
}

@keyframes asteroidDrift2 {
    0% {
        transform: translate(0px, 0px) rotate(0deg);
    }
    100% {
        transform: translate(150px, -80px) rotate(-360deg);
    }
}

@keyframes asteroidDrift3 {
    0% {
        transform: translate(0px, 0px) rotate(0deg);
    }
    100% {
        transform: translate(-100px, -50px) rotate(360deg);
    }
}

/* Star twinkling */
@keyframes twinkle {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.5);
    }
}