/* ==========================================
   AI Future Hub
   Deep Space Galaxy Background
   ========================================== */

html,
body {
    min-height: 100%;
}

body {

    position: relative;

    overflow-x: hidden;


    background:

        /* Blue nebula */
        radial-gradient(ellipse at 15% 35%,
            rgba(0, 170, 255, 0.18),
            transparent 38%),

        /* Purple nebula */
        radial-gradient(ellipse at 82% 65%,
            rgba(150, 0, 255, 0.20),
            transparent 42%),

        /* Deep blue space */
        radial-gradient(ellipse at 50% 100%,
            rgba(40, 50, 150, 0.18),
            transparent 50%),

        /* Base space */
        linear-gradient(135deg,
            #020611 0%,
            #05091c 35%,
            #09051c 70%,
            #02030b 100%);

    color: white;

}


/* ==========================================
   Galaxy Nebula
   ========================================== */

body::before {

    content: "";

    position: fixed;

    inset: -20%;

    pointer-events: none;

    z-index: -2;

    background:

        radial-gradient(ellipse at 20% 25%,
            rgba(0, 210, 255, 0.10),
            transparent 25%),

        radial-gradient(ellipse at 75% 70%,
            rgba(190, 0, 255, 0.12),
            transparent 30%),

        radial-gradient(ellipse at 50% 50%,
            rgba(40, 80, 255, 0.06),
            transparent 40%);

    filter: blur(35px);

    animation: galaxyDrift 18s ease-in-out infinite alternate;

}


/* ==========================================
   Stars
   ========================================== */




/* ==========================================
   AI Future Hub
   Fixed Deep Space Stars
   ========================================== */

.space-stars {

    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;

    z-index: -3;

    background-image:

        /* Far stars */

        radial-gradient(1px 1px at 8% 15%,
            rgba(255, 255, 255, .55),
            transparent),

        radial-gradient(1px 1px at 18% 42%,
            rgba(255, 255, 255, .45),
            transparent),

        radial-gradient(1px 1px at 32% 18%,
            rgba(180, 220, 255, .55),
            transparent),

        radial-gradient(1px 1px at 48% 35%,
            rgba(255, 255, 255, .5),
            transparent),

        radial-gradient(1px 1px at 65% 12%,
            rgba(255, 255, 255, .6),
            transparent),

        radial-gradient(1px 1px at 78% 38%,
            rgba(180, 200, 255, .55),
            transparent),

        radial-gradient(1px 1px at 92% 18%,
            rgba(255, 255, 255, .5),
            transparent),

        /* Medium stars */

        radial-gradient(1.5px 1.5px at 12% 68%,
            rgba(255, 255, 255, .8),
            transparent),

        radial-gradient(1.5px 1.5px at 28% 82%,
            rgba(180, 220, 255, .8),
            transparent),

        radial-gradient(1.5px 1.5px at 44% 62%,
            rgba(255, 255, 255, .7),
            transparent),

        radial-gradient(1.5px 1.5px at 61% 78%,
            rgba(210, 200, 255, .75),
            transparent),

        radial-gradient(1.5px 1.5px at 82% 65%,
            rgba(255, 255, 255, .8),
            transparent),

        /* Bright stars */

        radial-gradient(2px 2px at 22% 25%,
            white,
            transparent),

        radial-gradient(2px 2px at 57% 20%,
            white,
            transparent),

        radial-gradient(2px 2px at 88% 48%,
            white,
            transparent);

    background-size: 100% 100%;

    background-repeat: no-repeat;

    animation: starTwinkle 8s ease-in-out infinite alternate;

}


/* ==========================================
   Very Subtle Star Twinkle
   ========================================== */

@keyframes starTwinkle {

    0% {

        opacity: .72;

    }

    50% {

        opacity: .88;

    }

    100% {

        opacity: .78;

    }

}






/* ==========================================
   Galaxy Animation
   ========================================== */

@keyframes galaxyDrift {

    0% {

        transform: scale(1) translate3d(0, 0, 0);

    }

    100% {

        transform: scale(1.08) translate3d(-20px, -10px, 0);

    }

}


/* ==========================================
   Star Movement
   ========================================== */

@keyframes starsMove {

    from {

        transform: translate3d(0, 0, 0);

    }

    to {

        transform: translate3d(-120px, 80px, 0);

    }

}






/* ==========================================
   Realistic Milky Way Background
   ========================================== */

body .galaxy-band {

    position: fixed;

    width: 180vw;
    height: 70vh;

    left: -40vw;
    top: 18vh;

    pointer-events: none;

    z-index: -2;

    transform: rotate(-18deg);

    background:

        /* Bright central dust */

        radial-gradient(ellipse at 50% 50%,
            rgba(210, 220, 255, 0.13) 0%,
            rgba(150, 170, 255, 0.09) 15%,
            rgba(100, 110, 220, 0.055) 32%,
            transparent 65%),

        /* Blue nebula */

        radial-gradient(ellipse at 35% 45%,
            rgba(0, 180, 255, 0.08),
            transparent 42%),

        /* Purple nebula */

        radial-gradient(ellipse at 70% 55%,
            rgba(180, 60, 255, 0.10),
            transparent 45%);

    filter: blur(24px);

    opacity: 0.85;

    animation:
        milkyWayDrift 45s ease-in-out infinite alternate;

}


/* ==========================================
   Milky Way Movement
   ========================================== */

@keyframes milkyWayDrift {

    0% {

        transform:
            rotate(-18deg) translate3d(-25px, 5px, 0) scale(1);

    }

    50% {

        transform:
            rotate(-18deg) translate3d(0, -8px, 0) scale(1.025);

    }

    100% {

        transform:
            rotate(-18deg) translate3d(25px, 5px, 0) scale(1.05);

    }

}












/* ==========================================
   AI Future Hub
   Shooting Stars
   ========================================== */

.shooting-stars {

    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;

    overflow: hidden;

    z-index: -1;

}


/* ==========================================
   Shooting Star
   ========================================== */

.shooting-star {

    position: absolute;

    width: 130px;

    height: 2px;

    border-radius: 50%;

    background: linear-gradient(90deg,
            transparent,
            rgba(180, 240, 255, 0.25),
            rgba(255, 255, 255, 1));

    box-shadow:

        0 0 5px rgba(150, 230, 255, 0.8),

        0 0 12px rgba(80, 190, 255, 0.45);

    opacity: 0;

    transform: rotate(32deg);

}


/* ==========================================
   Star 1
   ========================================== */

.star-1 {

    top: 18%;

    left: 12%;

    animation:

        shootingStarOne 9s linear infinite;

}

.star-2 {

    top: 80%;

    left: 80%;

    animation:

        shootingStarOne 10s linear infinite;

}



/* ==========================================
   Shooting Animation 1
   ========================================== */

@keyframes shootingStarOne {

    0% {

        opacity: 0;

        transform:
            translate3d(0, 0, 0) rotate(32deg);

    }

    5% {

        opacity: 1;

    }

    20% {

        opacity: 0.9;

    }

    35% {

        opacity: 0;

        transform:
            translate3d(650px, 420px, 0) rotate(32deg);

    }

    100% {

        opacity: 0;

        transform:
            translate3d(650px, 420px, 0) rotate(32deg);

    }

}








@media (max-width: 700px) {

    .shooting-star {

        width: 80px;

    }

    .star-1 {

        top: 22%;

    }

  

}