/*==========================================================
GENESIS V2
LOADER CSS
==========================================================*/

#loader{

position:fixed;

inset:0;

display:flex;

align-items:center;

justify-content:center;

background:#050505;

z-index:99999;

overflow:hidden;

transition:

opacity .8s ease,

visibility .8s ease;

}

#loader.hide{

opacity:0;

visibility:hidden;

pointer-events:none;

}

/*==========================================================
WRAPPER
==========================================================*/

.loader-wrapper{

position:relative;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

text-align:center;

z-index:5;

}

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

.loader-logo{

width:140px;

height:140px;

object-fit:contain;

animation:

loaderLogo 2.5s ease-in-out infinite;

filter:

drop-shadow(0 0 25px rgba(255,0,85,.35));

}

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

.loader-title{

margin-top:1.5rem;

font-size:3rem;

font-weight:800;

letter-spacing:4px;

color:#fff;

}

.loader-subtitle{

margin-top:.8rem;

letter-spacing:6px;

font-size:.85rem;

text-transform:uppercase;

color:#9d9d9d;

}

/*==========================================================
PROGRESS
==========================================================*/

.loader-progress{

width:300px;

height:6px;

margin-top:2rem;

border-radius:999px;

overflow:hidden;

background:

rgba(255,255,255,.08);

}

.loader-progress-fill{

width:0;

height:100%;

background:

linear-gradient(

90deg,

#ff0055,

#8b00ff);

animation:

loaderProgress 2.8s linear forwards;

}

/*==========================================================
RINGS
==========================================================*/

.loader-rings{

position:absolute;

display:flex;

align-items:center;

justify-content:center;

}

.loader-ring{

position:absolute;

border-radius:50%;

border:1px solid rgba(255,255,255,.12);

}

.ring-1{

width:170px;

height:170px;

animation:

rotate 8s linear infinite;

}

.ring-2{

width:230px;

height:230px;

border-style:dashed;

animation:

rotateReverse 10s linear infinite;

}

.ring-3{

width:290px;

height:290px;

opacity:.45;

animation:

pulseRing 4s ease-in-out infinite;

}

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

#loader::before{

content:"";

position:absolute;

left:-250px;

top:-250px;

width:500px;

height:500px;

border-radius:50%;

background:

radial-gradient(

circle,

rgba(255,0,85,.16),

transparent);

filter:blur(80px);

}

#loader::after{

content:"";

position:absolute;

right:-250px;

bottom:-250px;

width:550px;

height:550px;

border-radius:50%;

background:

radial-gradient(

circle,

rgba(139,0,255,.16),

transparent);

filter:blur(80px);

}

/*==========================================================
KEYFRAMES
==========================================================*/

@keyframes loaderLogo{

0%,100%{

transform:scale(1);

}

50%{

transform:scale(1.08);

}

}

@keyframes loaderProgress{

0%{

width:0;

}

100%{

width:100%;

}

}

@keyframes rotateReverse{

from{

transform:rotate(360deg);

}

to{

transform:rotate(0deg);

}

}

@keyframes pulseRing{

0%,100%{

transform:scale(1);

opacity:.45;

}

50%{

transform:scale(1.08);

opacity:.9;

}

}

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

@media(max-width:768px){

.loader-logo{

width:100px;

height:100px;

}

.loader-title{

font-size:2.2rem;

}

.loader-progress{

width:220px;

}

}
/*==========================================================
LOADER V2
CIRCLE PROGRESS
==========================================================*/

.loader-circle{

position:relative;

width:170px;

height:170px;

display:flex;

align-items:center;

justify-content:center;

margin:1.8rem 0;

}

.loader-circle svg{

position:absolute;

width:170px;

height:170px;

transform:rotate(-90deg);

overflow:visible;

}

.loader-track{

fill:none;

stroke:rgba(255,255,255,.08);

stroke-width:6;

}

.loader-progress-ring{

fill:none;

stroke:#ff0055;

stroke-width:6;

stroke-linecap:round;

stroke-dasharray:427;

stroke-dashoffset:427;

transition:stroke-dashoffset .25s linear;

filter:drop-shadow(0 0 10px rgba(255,0,85,.55));

}

stroke-width:6;

stroke-linecap:round;

stroke-dasharray:427;

stroke-dashoffset:427;

transition:stroke-dashoffset .25s linear;

filter:drop-shadow(0 0 10px rgba(255,0,85,.55));

}

.loader-percent{

position:absolute;

font-size:2rem;

font-weight:700;

color:#ffffff;

letter-spacing:1px;

font-family:inherit;

user-select:none;

}

.loader-percent span{

display:inline-block;

min-width:36px;

text-align:right;

}

.loader-status{

margin-top:.75rem;

font-size:.9rem;

letter-spacing:2px;

text-transform:uppercase;

color:#cfcfcf;

opacity:.9;

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

}

/*==========================================================
PREMIUM GLOW
==========================================================*/

.loader-wrapper{

position:relative;

}

.loader-wrapper::before{

content:"";

position:absolute;

width:420px;

height:420px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(255,0,85,.08),

rgba(139,0,255,.05),

transparent 70%);

filter:blur(70px);

animation:loaderGlow 5s ease-in-out infinite;

z-index:-1;

}

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

.loader-logo{

animation:

loaderLogoFloat 2.5s ease-in-out infinite,

loaderLogoRotate 12s linear infinite;

}

/*==========================================================
KEYFRAMES
==========================================================*/

@keyframes loaderGlow{

0%,100%{

transform:scale(1);

opacity:.6;

}

50%{

transform:scale(1.15);

opacity:1;

}

}

@keyframes loaderLogoFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

}

@keyframes loaderLogoRotate{

from{

rotate:0deg;

}

to{

rotate:360deg;

}

}

@keyframes loaderStatusPulse{

0%,100%{

opacity:.55;

letter-spacing:2px;

}

50%{

opacity:1;

letter-spacing:3px;

}

}

/*==========================================================
RESPONSIVE
==========================================================*/

@media(max-width:768px){

.loader-circle{

width:140px;

height:140px;

}

.loader-circle svg{

width:140px;

height:140px;

}

.loader-percent{

font-size:1.6rem;

}

.loader-status{

font-size:.75rem;

}

}