/* ==========================================================
                    FUTURISTIC BACKGROUND
========================================================== */



.background-blobs{


    position:fixed;


    inset:0;


    overflow:hidden;


    pointer-events:none;


    z-index:-1;


}






/* ==========================================================
                    BLOB BASE
========================================================== */


.blob{


    position:absolute;


    border-radius:50%;


    filter:


    blur(90px);


    opacity:.45;


    animation:


    blobMove 15s infinite alternate;


}





/* ==========================================================
                    PINK LIGHT BLOBS
========================================================== */


.blob1{


    width:500px;


    height:500px;


    background:


    rgba(105,144,255,.45);


    top:-200px;


    left:-150px;


}



.blob2{


    width:400px;


    height:400px;


    background:


    rgba(190,205,255,.55);


    bottom:-150px;


    right:-100px;


    animation-delay:3s;


}





.blob3{


    width:300px;


    height:300px;


    background:


    rgba(255,255,255,.8);


    top:45%;


    left:50%;


    animation-delay:6s;


}








/* ==========================================================
                    MOVEMENT
========================================================== */



@keyframes blobMove{


    0%{


        transform:


        translate(0,0)

        scale(1);


    }



    50%{


        transform:


        translate(80px,-50px)

        scale(1.1);


    }




    100%{


        transform:


        translate(-50px,80px)

        scale(.9);


    }


}
/* ==========================================================
                    LIGHT GRID EFFECT
========================================================== */


body::after{


    content:"";


    position:fixed;


    inset:0;


    pointer-events:none;


    z-index:-2;


    background:


    linear-gradient(

        rgba(255,255,255,.35) 1px,

        transparent 1px

    ),


    linear-gradient(

        90deg,

        rgba(255,255,255,.35) 1px,

        transparent 1px

    );


    background-size:


    80px 80px;


    mask-image:


    radial-gradient(

        circle,

        black,

        transparent 70%

    );


    opacity:.25;


}







/* ==========================================================
                    FLOATING PARTICLES
========================================================== */



.background-blobs::before{


    content:"";


    position:absolute;


    width:8px;


    height:8px;


    background:


    white;


    border-radius:50%;


    top:20%;


    left:70%;


    box-shadow:


    80px 120px white,

    -150px 250px rgba(105,144,255,.8),

    200px -100px white,

    -250px -150px rgba(105,144,255,.5);


    animation:


    particleFloat 12s infinite linear;


}






@keyframes particleFloat{


    from{


        transform:


        translateY(0);


    }



    to{


        transform:


        translateY(-100px);


    }


}







/* ==========================================================
                    GLASS LIGHT REFLECTION
========================================================== */


.glass-shine{


    position:relative;


    overflow:hidden;


}





.glass-shine::before{


    content:"";


    position:absolute;


    top:0;


    left:-120%;


    width:80%;


    height:100%;


    background:


    linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.7),

        transparent

    );


    transform:


    skewX(-25deg);


    animation:


    shineMove 5s infinite;


}





@keyframes shineMove{


    0%{


        left:-120%;


    }



    50%{


        left:120%;


    }



    100%{


        left:120%;


    }


}





/* ==========================================================
                    MOBILE OPTIMIZATION
========================================================== */


@media(max-width:600px){


    .blob1{


        width:300px;


        height:300px;


    }



    .blob2{


        width:250px;


        height:250px;


    }



}