/* ==========================================================
   LEGACY FITNESS ZONE
   LOADER STYLE
========================================================== */



/* =========================
   LOADER CONTAINER
========================= */


#loader{

    position:fixed;

    inset:0;

    width:100%;

    height:100vh;

    background:#050505;

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:99999;

    transition:
    opacity 0.8s ease,
    visibility 0.8s ease;

}





/* =========================
   LOADER HIDE STATE
========================= */


#loader.hide{

    opacity:0;

    visibility:hidden;

}






/* =========================
   LOADER CONTENT
========================= */


.loader-content{

    text-align:center;

    width:90%;

    max-width:400px;

}







/* =========================
   LOGO
========================= */


.loader-logo{


    width:120px;

    height:120px;

    object-fit:contain;


    margin:0 auto 25px;


    animation:
    loaderPulse 2s infinite ease-in-out;


}







/* =========================
   LOADER TITLE
========================= */


.loader-content h2{


    font-size:28px;

    font-weight:800;


    letter-spacing:2px;


    color:white;


    margin-bottom:10px;


}







/* =========================
   LOADER DESCRIPTION
========================= */


.loader-content p{


    font-size:14px;


    color:#aaa;


    letter-spacing:1px;


    margin-bottom:35px;


}







/* =========================
   LOADING BAR
========================= */


.loading-bar{


    width:260px;

    height:5px;


    background:#222;


    border-radius:20px;


    overflow:hidden;


    margin:auto;


}





.loading-bar span{


    display:block;


    height:100%;


    width:0;


    background:#ff3c00;


    border-radius:20px;


    animation:
    loadingProgress 2.5s ease forwards;


}







/* =========================
   LOGO ANIMATION
========================= */


@keyframes loaderPulse{


    0%{

        transform:scale(1);

        filter:
        drop-shadow(0 0 0 rgba(255,60,0,0));

    }



    50%{


        transform:scale(1.08);


        filter:
        drop-shadow(0 0 25px rgba(255,60,0,0.6));


    }



    100%{


        transform:scale(1);


        filter:
        drop-shadow(0 0 0 rgba(255,60,0,0));


    }


}








/* =========================
   LOADING ANIMATION
========================= */


@keyframes loadingProgress{


    from{

        width:0;

    }



    to{

        width:100%;

    }


}







/* =========================
   SMALL DEVICES
========================= */


@media(max-width:480px){


    .loader-logo{

        width:90px;

        height:90px;

    }



    .loader-content h2{


        font-size:22px;


    }



    .loading-bar{


        width:200px;


    }


}