/* ================================================================
   SPACE BACKGROUND - Flight Deck Mk III
   Enhanced cosmic atmosphere with grid, particles, and Easter eggs
   ================================================================ */

/* === CSS VARIABLES FOR SPACE THEME === */
:root {
    --space-bg-deep: #020408;
    --space-grid-color: rgba(0, 229, 255, 0.06);
    --space-grid-bright: rgba(0, 229, 255, 0.12);
    --nebula-cyan: rgba(0, 229, 255, 0.04);
    --nebula-magenta: rgba(217, 70, 239, 0.03);
    --nebula-green: rgba(0, 255, 65, 0.02);
}

/* === SPACE BACKGROUND CONTAINER === */
.space-background {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    overflow: hidden;
    background-color: var(--space-bg-deep);
    background-image:
        /* Nebula effects - subtle color clouds */
        radial-gradient(ellipse at 20% 20%, var(--nebula-cyan) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 30%, var(--nebula-magenta) 0%, transparent 40%),
        radial-gradient(ellipse at 40% 80%, var(--nebula-green) 0%, transparent 45%),
        radial-gradient(ellipse at 70% 70%, var(--nebula-cyan) 0%, transparent 35%),
        /* Base gradient */
        radial-gradient(ellipse at 50% 0%, #111827 0%, var(--space-bg-deep) 70%);
}

/* === PERSPECTIVE GRID === */
.space-grid {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        /* Vertical lines */
        repeating-linear-gradient(
            90deg,
            var(--space-grid-color) 0px,
            var(--space-grid-color) 1px,
            transparent 1px,
            transparent 80px
        ),
        /* Horizontal lines */
        repeating-linear-gradient(
            0deg,
            var(--space-grid-color) 0px,
            var(--space-grid-color) 1px,
            transparent 1px,
            transparent 80px
        );
    mask-image:
        linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.3) 30%, rgba(0,0,0,0.5) 70%, transparent 100%),
        radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.8) 0%, transparent 70%);
    mask-composite: intersect;
    -webkit-mask-image:
        linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.3) 30%, rgba(0,0,0,0.5) 70%, transparent 100%);
    opacity: 0.6;
    animation: gridPulse 8s ease-in-out infinite;
}

@keyframes gridPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.7; }
}

/* === HORIZON GLOW === */
.space-horizon {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: linear-gradient(
        to top,
        rgba(0, 229, 255, 0.08) 0%,
        rgba(0, 229, 255, 0.03) 30%,
        transparent 100%
    );
    pointer-events: none;
}

/* === STAR FIELD LAYER === */
.star-field {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

/* === PARTICLES CONTAINER === */
.particles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
}

/* === BASE PARTICLE STYLES === */
.particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

/* Small dust particles */
.particle.dust {
    width: 2px;
    height: 2px;
    background: rgba(255, 255, 255, 0.6);
    animation: dustFloat 25s linear infinite;
}

/* Medium glowing particles */
.particle.glow {
    width: 4px;
    height: 4px;
    background: var(--ss-cyan, #00E5FF);
    box-shadow: 0 0 6px currentColor, 0 0 12px currentColor;
    animation: glowFloat 20s linear infinite;
}

/* Large bright particles */
.particle.star {
    width: 3px;
    height: 3px;
    background: #fff;
    box-shadow: 0 0 4px #fff, 0 0 8px rgba(255,255,255,0.5);
    animation: starTwinkle 3s ease-in-out infinite, starFloat 30s linear infinite;
}

/* === PARTICLE ANIMATIONS === */
@keyframes dustFloat {
    0% {
        transform: translateY(100vh) translateX(0) rotate(0deg);
        opacity: 0;
    }
    5% { opacity: 0.4; }
    95% { opacity: 0.4; }
    100% {
        transform: translateY(-100vh) translateX(50px) rotate(180deg);
        opacity: 0;
    }
}

@keyframes glowFloat {
    0% {
        transform: translateY(100vh) scale(1);
        opacity: 0;
    }
    10% { opacity: 0.8; }
    50% { transform: translateY(0) scale(1.2); }
    90% { opacity: 0.8; }
    100% {
        transform: translateY(-100vh) scale(1);
        opacity: 0;
    }
}

@keyframes starFloat {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-20px);
    }
}

@keyframes starTwinkle {
    0%, 100% {
        opacity: 0.3;
        transform: scale(0.8);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

/* === SHOOTING STAR === */
.shooting-star {
    position: absolute;
    width: 100px;
    height: 2px;
    background: linear-gradient(90deg, rgba(255,255,255,0.9), transparent);
    opacity: 0;
    pointer-events: none;
    transform: rotate(-45deg);
    animation: shootingStar 1s ease-out forwards;
}

@keyframes shootingStar {
    0% {
        opacity: 1;
        transform: translateX(0) translateY(0) rotate(-45deg);
    }
    100% {
        opacity: 0;
        transform: translateX(300px) translateY(300px) rotate(-45deg);
    }
}

/* === FLOATING ACE EASTER EGG === */
.floating-ace {
    position: absolute;
    width: 48px;
    height: 48px;
    pointer-events: none;
    opacity: 0;
    filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.5));
    animation: aceFloat 20s linear forwards;
    z-index: 1;
}

.floating-ace img {
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    animation: aceSpin 4s linear infinite;
}

@keyframes aceFloat {
    0% {
        opacity: 0;
        transform: translateX(-100px) translateY(50vh) rotate(0deg);
    }
    5% {
        opacity: 0.9;
    }
    95% {
        opacity: 0.9;
    }
    100% {
        opacity: 0;
        transform: translateX(calc(100vw + 100px)) translateY(30vh) rotate(10deg);
    }
}

@keyframes aceSpin {
    0% { transform: rotate(-5deg); }
    25% { transform: rotate(5deg); }
    50% { transform: rotate(-5deg); }
    75% { transform: rotate(5deg); }
    100% { transform: rotate(-5deg); }
}

/* Ace's jetpack trail */
.ace-trail {
    position: absolute;
    left: -30px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 8px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(0, 229, 255, 0.3) 30%,
        rgba(217, 70, 239, 0.5) 60%,
        rgba(255, 214, 0, 0.8) 100%
    );
    border-radius: 4px;
    filter: blur(2px);
    animation: trailFlicker 0.2s ease-in-out infinite alternate;
}

@keyframes trailFlicker {
    0% {
        opacity: 0.6;
        width: 35px;
    }
    100% {
        opacity: 1;
        width: 45px;
    }
}

/* === SCAN LINE OVERLAY (subtle CRT effect) === */
.space-scanlines {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 2px,
        rgba(0, 0, 0, 0.03) 2px,
        rgba(0, 0, 0, 0.03) 4px
    );
    pointer-events: none;
    opacity: 0.5;
}

/* === RESPONSIVE ADJUSTMENTS === */
@media (max-width: 768px) {
    .space-grid {
        background-image:
            repeating-linear-gradient(
                90deg,
                var(--space-grid-color) 0px,
                var(--space-grid-color) 1px,
                transparent 1px,
                transparent 40px
            ),
            repeating-linear-gradient(
                0deg,
                var(--space-grid-color) 0px,
                var(--space-grid-color) 1px,
                transparent 1px,
                transparent 40px
            );
    }

    .floating-ace {
        width: 32px;
        height: 32px;
    }
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
    .particle,
    .shooting-star,
    .floating-ace,
    .space-grid {
        animation: none;
    }

    .particle.star {
        opacity: 0.5;
    }
}