/*==================================================
            PREMIUM SPACE BACKGROUND
==================================================*/

:root{

    --bg-1:#02050d;
    --bg-2:#071321;
    --bg-3:#0b1d31;

    --orange:#ff8a2b;
    --orange-soft:rgba(255,138,43,.12);

}


/* Canvas */

#spaceCanvas{

    position:fixed;

    inset:0;

    width:100%;
    height:100%;

    pointer-events:none;

    z-index:-100;

}


/* Main Background */

body{

    background:

    radial-gradient(circle at 50% -10%,

        #143253 0%,

        #09111d 30%,

        #04070d 60%,

        #010203 100%);

}


/* Top Glow */

body::before{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:-90;

    background:

    radial-gradient(circle at 50% -20%,

    rgba(65,130,255,.08),

    transparent 55%);

}


/* Bottom Orange Glow */

body::after{

    content:"";

    position:fixed;

    left:50%;

    bottom:-280px;

    width:900px;

    height:900px;

    transform:translateX(-50%);

    border-radius:50%;

    pointer-events:none;

    z-index:-90;

    background:

    radial-gradient(circle,

        rgba(255,140,40,.18),

        rgba(255,140,40,.08),

        transparent 70%);

    filter:blur(80px);

    animation:orangeGlow 14s ease-in-out infinite;

}


/* Ambient Overlay */

.galaxy-bg{

    position:fixed;

    inset:0;

    z-index:-95;

    pointer-events:none;

    background:

    linear-gradient(

        rgba(255,255,255,.015),

        transparent 30%,

        transparent 70%,

        rgba(255,255,255,.01)

    );

}


/* Animation */

@keyframes orangeGlow{

    0%{

        transform:translateX(-50%) scale(1);

        opacity:.7;

    }

    50%{

        transform:translateX(-50%) scale(1.15);

        opacity:1;

    }

    100%{

        transform:translateX(-50%) scale(1);

        opacity:.7;

    }

}