/* ═══════════════════════════════════════════════════════════════════════════
   🌌 SPACE UNIVERSE — REAL NASA/JWST PHOTOGRAPHIC BACKGROUND
   Living, breathing universe behind the entire application
   Uses REAL NASA JWST photos with animated crossfade slideshow
   + CSS animated stars, shooting stars, nebula overlays on top
   © 2026 AutomateWin — Powered by real NASA imagery
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Main Container ── */
.space-universe {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background-color: #020310;
}

/* ═══════════════════════════════════════════════════════════════
   PHOTO SLIDESHOW — Real NASA JWST images crossfade
   Each .stars-layer is repurposed as a slideshow frame
   ═══════════════════════════════════════════════════════════════ */
.stars-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* ── Photo 1: Star-forming nebula — Long colorful line (USER FAVORITE) ── */
.stars-small {
    background-image:
        /* Dark cinematic overlay for text readability */
        linear-gradient(180deg,
            rgba(2, 3, 12, 0.50) 0%,
            rgba(3, 5, 18, 0.35) 30%,
            rgba(2, 3, 12, 0.30) 50%,
            rgba(3, 5, 18, 0.35) 70%,
            rgba(2, 3, 12, 0.50) 100%),
        url('img/potm2401b.jpg');
    animation: slideshow1 48s ease-in-out infinite;
}

/* ── Photo 2: Carina Nebula "Cosmic Cliffs" — Gold mountains + blue stars ── */
.stars-medium {
    background-image:
        linear-gradient(180deg,
            rgba(2, 3, 12, 0.50) 0%,
            rgba(3, 5, 18, 0.35) 30%,
            rgba(2, 3, 12, 0.30) 50%,
            rgba(3, 5, 18, 0.35) 70%,
            rgba(2, 3, 12, 0.50) 100%),
        url('img/weic2205a.jpg');
    animation: slideshow2 48s ease-in-out infinite;
}

/* ── Photo 3: Rho Ophiuchi — Golden/red tendrils + bright stars ── */
.stars-large {
    background-image:
        linear-gradient(180deg,
            rgba(2, 3, 12, 0.45) 0%,
            rgba(3, 5, 18, 0.30) 30%,
            rgba(2, 3, 12, 0.25) 50%,
            rgba(3, 5, 18, 0.30) 70%,
            rgba(2, 3, 12, 0.45) 100%),
        url('img/weic2316a.jpg');
    animation: slideshow3 48s ease-in-out infinite;
}

/* ── Photo 4: NGC 602 — Pink/blue cosmic cathedral (my pick) ── */
.stars-extra {
    background-image:
        linear-gradient(180deg,
            rgba(2, 3, 12, 0.45) 0%,
            rgba(3, 5, 18, 0.30) 30%,
            rgba(2, 3, 12, 0.25) 50%,
            rgba(3, 5, 18, 0.30) 70%,
            rgba(2, 3, 12, 0.45) 100%),
        url('img/weic2425c.jpg');
    animation: slideshow4 48s ease-in-out infinite;
}

/* ── Crossfade Slideshow Keyframes ──
   4 photos, 48s total cycle (12s each):
   Each photo visible for ~9s, 3s fade transitions
   Staggered so there's always one photo fully visible
*/
@keyframes slideshow1 {
    0% {
        opacity: 1;
    }

    21% {
        opacity: 1;
    }

    25% {
        opacity: 0;
    }

    96% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes slideshow2 {
    0% {
        opacity: 0;
    }

    21% {
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    46% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes slideshow3 {
    0% {
        opacity: 0;
    }

    46% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    71% {
        opacity: 1;
    }

    75% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes slideshow4 {
    0% {
        opacity: 0;
    }

    71% {
        opacity: 0;
    }

    75% {
        opacity: 1;
    }

    96% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════
   SHOOTING STARS — Bright streaks crossing over the real photo
   ═══════════════════════════════════════════════════════════════ */
.shooting-star {
    position: absolute;
    width: 150px;
    height: 2px;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(200, 220, 255, 0.2) 30%,
            rgba(200, 220, 255, 0.7) 60%,
            rgba(255, 255, 255, 1) 100%);
    border-radius: 50%;
    transform: rotate(-35deg);
    animation: shootingStar 14s ease-in-out infinite;
    opacity: 0;
    filter: drop-shadow(0 0 6px rgba(200, 220, 255, 0.8)) drop-shadow(0 0 12px rgba(100, 150, 255, 0.4));
}

.shooting-star::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: white;
    box-shadow:
        0 0 8px rgba(255, 255, 255, 0.9),
        0 0 16px rgba(200, 220, 255, 0.7),
        0 0 28px rgba(100, 150, 255, 0.5);
}

@keyframes shootingStar {
    0% {
        opacity: 0;
        transform: rotate(-35deg) translateX(0);
    }

    1.5% {
        opacity: 1;
    }

    7% {
        opacity: 0.8;
        transform: rotate(-35deg) translateX(600px);
    }

    9% {
        opacity: 0;
        transform: rotate(-35deg) translateX(700px);
    }

    100% {
        opacity: 0;
        transform: rotate(-35deg) translateX(700px);
    }
}

/* ═══════════════════════════════════════════════════════════════
   NEBULA CLOUDS — Subtle colored vapor overlays
   (Light enough to not cover the real photos)
   ═══════════════════════════════════════════════════════════════ */
.nebula-cloud {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    mix-blend-mode: screen;
}

.nebula-1 {
    width: 500px;
    height: 350px;
    top: -5%;
    left: 10%;
    background: radial-gradient(ellipse,
            rgba(0, 100, 255, 0.04) 0%,
            transparent 70%);
    animation: nebulaDrift1 25s ease-in-out infinite alternate;
}

.nebula-2 {
    width: 450px;
    height: 400px;
    top: 40%;
    right: -5%;
    background: radial-gradient(ellipse,
            rgba(120, 50, 200, 0.04) 0%,
            transparent 70%);
    animation: nebulaDrift2 30s ease-in-out infinite alternate;
}

.nebula-3 {
    width: 600px;
    height: 300px;
    bottom: 5%;
    left: 30%;
    background: radial-gradient(ellipse,
            rgba(0, 180, 120, 0.03) 0%,
            transparent 70%);
    animation: nebulaDrift3 35s ease-in-out infinite alternate;
}

.nebula-4 {
    width: 400px;
    height: 350px;
    top: 20%;
    left: 50%;
    background: radial-gradient(ellipse,
            rgba(255, 50, 100, 0.03) 0%,
            transparent 70%);
    animation: nebulaDrift4 28s ease-in-out infinite alternate;
}

@keyframes nebulaDrift1 {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0.7;
    }

    50% {
        transform: translate(40px, 20px) scale(1.15);
        opacity: 1;
    }

    100% {
        transform: translate(-20px, 30px) scale(0.95);
        opacity: 0.6;
    }
}

@keyframes nebulaDrift2 {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
        opacity: 0.6;
    }

    50% {
        transform: translate(-30px, 25px) scale(1.1) rotate(5deg);
        opacity: 0.9;
    }

    100% {
        transform: translate(20px, -15px) scale(1.05) rotate(-3deg);
        opacity: 0.7;
    }
}

@keyframes nebulaDrift3 {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0.5;
    }

    50% {
        transform: translate(25px, -20px) scale(1.2);
        opacity: 0.8;
    }

    100% {
        transform: translate(-15px, 10px) scale(0.9);
        opacity: 0.6;
    }
}

@keyframes nebulaDrift4 {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0.4;
    }

    50% {
        transform: translate(-35px, 15px) scale(1.1);
        opacity: 0.7;
    }

    100% {
        transform: translate(15px, -25px) scale(1.05);
        opacity: 0.5;
    }
}

/* ═══════════════════════════════════════════════════════════════
   AMBIENT GLOW — Subtle light bloom over photos
   ═══════════════════════════════════════════════════════════════ */
.space-universe::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(ellipse 60% 50% at 50% 50%,
            rgba(0, 120, 200, 0.03) 0%,
            transparent 70%);
    animation: ambientPulse 12s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 5;
}

@keyframes ambientPulse {
    0% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.8;
    }

    100% {
        opacity: 0.4;
    }
}

/* ── Subtle vignette for cinematic edges ── */
.space-universe::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse 85% 85% at 50% 50%,
            transparent 50%,
            rgba(0, 0, 5, 0.4) 100%);
    pointer-events: none;
    z-index: 5;
}