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

#loader{

position:fixed;
inset:0;

display:flex;
justify-content:center;
align-items:center;
flex-direction:column;

overflow:hidden;

background:#050505;

z-index:999999;

transition:1s;
}


/*=============================
      Animated Background
=============================*/

.loader-bg{

position:absolute;
inset:0;

background:

radial-gradient(circle at 20% 20%,
rgba(212,175,55,.18),
transparent 35%),

radial-gradient(circle at 80% 60%,
rgba(244,197,66,.15),
transparent 40%),

radial-gradient(circle at 50% 100%,
rgba(229,229,229,.08),
transparent 40%);

animation:bgMove 8s ease-in-out infinite;
}


/*=============================
      Grid
=============================*/

.grid{

position:absolute;

width:200%;
height:200%;

background-image:

linear-gradient(rgba(212,175,55,.05) 1px,transparent 1px),

linear-gradient(90deg,rgba(212,175,55,.05)1px,transparent 1px);

background-size:60px 60px;

transform:rotate(25deg);

animation:gridMove 20s linear infinite;
}


/*=============================
          Rings
=============================*/

.ring{

position:absolute;

border-radius:50%;

border:1px solid rgba(212,175,55,.12);

backdrop-filter:blur(20px);
}

.ring1{

width:320px;
height:320px;

animation:rotateRing 20s linear infinite;
}

.ring2{

width:520px;
height:520px;

animation:rotateRingReverse 28s linear infinite;
}


/*=============================
      Floating Blobs
=============================*/

.blob{

position:absolute;

border-radius:50%;

filter:blur(80px);
}

.blob1{

width:220px;
height:220px;

background:#D4AF37;

left:15%;
top:25%;

opacity:.25;

animation:blobMove1 12s infinite alternate;
}

.blob2{

width:240px;
height:240px;

background:#F4C542;

right:15%;
bottom:20%;

opacity:.20;

animation:blobMove2 14s infinite alternate;
}


/*=============================
         Logo
=============================*/

.loader-content{

position:relative;

z-index:20;

text-align:center;
}

.loader-logo{

font-size:72px;

font-weight:800;

letter-spacing:8px;

margin-bottom:15px;

display:flex;

justify-content:center;

align-items:center;
}

.loader-logo span{

background:linear-gradient(
135deg,
#F7D774,
#D4AF37,
#B8860B,
#FFFFFF
);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

opacity:0;

transform:translateY(40px);

animation:logoReveal .6s forwards;
}

.loader-logo span:nth-child(1){animation-delay:.1s;}
.loader-logo span:nth-child(2){animation-delay:.2s;}
.loader-logo span:nth-child(3){animation-delay:.3s;}
.loader-logo span:nth-child(5){animation-delay:.5s;}
.loader-logo span:nth-child(6){animation-delay:.6s;}
.loader-logo span:nth-child(7){animation-delay:.7s;}

.space{

width:28px;
}


/*=============================
      Tagline
=============================*/

.loader-tagline{

margin-top:10px;

font-size:16px;

letter-spacing:3px;

color:#D8D8D8;
height:22px;
}

.cursor{

color:#D4AF37;

animation:blink .8s infinite;
}


/*=============================
      Route
=============================*/

.route-container{

margin-top:70px;

width:500px;

position:relative;

height:70px;
}

.route-line{

position:absolute;

top:50%;

left:25px;

right:25px;

height:4px;

transform:translateY(-50%);

background:rgba(212,175,55,.15);

border-radius:50px;

overflow:hidden;
}

.route-progress{

width:0;

height:100%;

background:linear-gradient(
90deg,
#B8860B,
#D4AF37,
#F7D774
);

border-radius:50px;
}

.point{

width:18px;
height:18px;

border-radius:50%;

position:absolute;

top:50%;

transform:translateY(-50%);

background:rgba(212,175,55,.12);
border:2px solid #D4AF37;
}

.start{

left:0;
}

.end{

right:0;
}

.route-text{

position:absolute;

top:35px;

font-size:12px;

letter-spacing:2px;

color:#BDBDBD;
}

.start-text{

left:-10px;
}

.end-text{

right:-15px;
}


/*=============================
        Orb
=============================*/

.orb{

position:absolute;

top:50%;

left:0;

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

width:24px;
height:24px;

border-radius:50%;

background:linear-gradient(
135deg,
#F7D774,
#D4AF37,
#B8860B
);

box-shadow:

0 0 15px rgba(212,175,55,.8),

0 0 35px rgba(244,197,66,.7),

0 0 65px rgba(184,134,11,.6);

z-index:5;
}


/*=============================
      Animations
=============================*/

@keyframes logoReveal{

to{

opacity:1;

transform:translateY(0);

}
}

@keyframes blink{

50%{

opacity:0;
}
}

@keyframes bgMove{

50%{

transform:scale(1.1);
}
}

@keyframes rotateRing{

from{

transform:rotate(0);
}

to{

transform:rotate(360deg);
}
}

@keyframes rotateRingReverse{

from{

transform:rotate(360deg);
}

to{

transform:rotate(0);
}
}

@keyframes gridMove{

from{

transform:translateY(0) rotate(25deg);
}

to{

transform:translateY(-120px) rotate(25deg);
}
}

@keyframes blobMove1{

to{

transform:translate(120px,-70px);
}
}

@keyframes blobMove2{

to{

transform:translate(-100px,60px);
}
}


/*=============================
      Responsive
=============================*/

@media(max-width:768px){

.loader-logo{

font-size:42px;

letter-spacing:5px;
}

.route-container{

width:300px;
}

.loader-tagline{

font-size:13px;
}

.ring1{

width:240px;
height:240px;
}

.ring2{

width:360px;
height:360px;
}

}
/*=============================
      Route Progress Animation
=============================*/

.route-progress{

    animation:drawRoute 1.2s ease forwards;
}

@keyframes drawRoute{

    from{

        width:0%;
    }

    to{

        width:100%;
    }
}

/*=============================
        Destination Pulse
=============================*/

.end{

    animation:destinationPulse 1.5s ease infinite;
}

@keyframes destinationPulse{

    0%{

        box-shadow:0 0 0 rgba(96,165,250,0);
        transform:translateY(-50%) scale(1);

    }

    50%{

        box-shadow:
        0 0 25px #D4AF37,
        0 0 45px #F4C542;

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

    }

    100%{

        box-shadow:0 0 0 rgba(96,165,250,0);

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

    }

}

/*=============================
        Orb Floating Glow
=============================*/

.orb{

    animation:

    orbGlow 2s infinite alternate,

    orbFloat 1.8s ease-in-out infinite;
}

@keyframes orbGlow{

    from{

        filter:hue-rotate(0deg);

    }

    to{

        filter:hue-rotate(40deg);

    }

}

@keyframes orbFloat{

    0%{

        margin-top:-2px;
    }

    50%{

        margin-top:3px;
    }

    100%{

        margin-top:-2px;
    }

}

/*=============================
        Particles
=============================*/

#particles{

    position:absolute;

    inset:0;

    pointer-events:none;
}

.particle{

    position:absolute;

    width:6px;

    height:6px;

    border-radius:50%;

    background:#D4AF37;

    opacity:.8;

    animation:fadeParticle .8s linear forwards;
}

@keyframes fadeParticle{

    from{

        opacity:1;

        transform:scale(1);

    }

    to{

        opacity:0;

        transform:scale(0);

    }

}
#loader.hide{

    opacity:0;

    visibility:hidden;

    filter:brightness(1.3);

}