/* ==================================================
        Premium Loader
==================================================*/

#loader{

position:fixed;

inset:0;

background:#050505;

display:flex;

justify-content:center;

align-items:center;

z-index:10000;

overflow:hidden;

transition:

opacity .6s ease,

visibility .6s ease;


}

.loader-bg{

position:absolute;

inset:0;

background:

radial-gradient(circle,

rgba(245,130,32,.16),

transparent 70%);

filter:blur(45px);

opacity:.85;

animation:bgMove 8s linear infinite;

}

@keyframes bgMove{

0%{

transform:scale(1);

}

50%{

transform:scale(1.3);

}

100%{

transform:scale(1);

}

}

.loader-content{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    z-index:10;

}

.loader-ring{

position:relative;

width:min(340px,60vw);

height:min(340px,60vw);

margin:auto;

}

.loader-logo{

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

width:68%;

max-width:170px;

z-index:5;

filter:

drop-shadow(0 0 20px rgba(245,130,32,.45));

}

.ring{

position:absolute;

inset:0;

border-radius:50%;

border:2px solid transparent;

}

.ring1{

border-top-color:#F58220;

animation:spin 4s linear infinite;

}

.ring2{

inset:18px;

border-left-color:#fff;

animation:spinReverse 3.5s linear infinite;

opacity:.6;

}

.ring3{

inset:38px;

border-bottom-color:#F58220;

animation:spin 5.5s linear infinite;

opacity:.4;

}

@keyframes spin{

to{

transform:rotate(360deg);

}

}

@keyframes spinReverse{

to{

transform:rotate(-360deg);

}

}

.loader-progress{

    width:320px;

    max-width:85vw;

    height:6px;

    margin:40px auto 0;

    background:#222;

    border-radius:100px;

    overflow:hidden;

}

.loader-bar{

width:0;

height:100%;

background:

linear-gradient(

90deg,

#F58220,

#ffb36a);

border-radius:100px;

}

.loader-percent{

margin-top:16px;

font-size:14px;

letter-spacing:2px;

color:#ddd;

font-weight:700;

}

.loader-hide{

animation:

loaderOut .9s forwards;

}

@keyframes loaderOut{

100%{

opacity:0;

visibility:hidden;

transform:scale(1.03);

}

}
@media (prefers-reduced-motion: reduce){

    .ring{

        animation:none!important;

    }

    .loader-bg{

        animation:none!important;

    }

}