/* ==========================
   GLOBAL
========================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html,body{
width:100%;
height:100%;
font-family:'Montserrat',sans-serif;
background:#08131d;
overflow:hidden;
}

#loader{

position:fixed;
left:0;
top:0;
width:100%;
height:100vh;

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

background:linear-gradient(180deg,#061019,#08131d,#0b1b2a);

overflow:hidden;

z-index:999999;

}

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

.bg-glow{

position:absolute;

width:700px;
height:700px;

border-radius:50%;

background:radial-gradient(circle,
rgba(210,165,70,.35),
transparent 70%);

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

}

/* ==========================
CITY
========================== */

.city{

position:relative;

display:flex;

align-items:flex-end;

height:180px;

margin-bottom:60px;

z-index:5;

}

.building{

width:46px;

margin:0 8px;

background:linear-gradient(to top,#243849,#395972);

border-top:4px solid #d7ab55;

position:relative;

transform-origin:bottom;

transform:scaleY(0);

opacity:0;

animation:growBuilding .8s forwards;

}

/* Heights */

.b1{

height:70px;
animation-delay:.2s;

}

.b2{

height:120px;
animation-delay:.45s;

}

.b3{

height:160px;
animation-delay:.7s;

}

.b4{

height:140px;
animation-delay:.95s;

}

.b5{

height:180px;
animation-delay:1.2s;

}

.b6{

height:115px;
animation-delay:1.45s;

}

.b7{

height:85px;
animation-delay:1.7s;

}

/* Windows */

.building::before{

content:"";

position:absolute;

left:8px;
top:10px;

width:6px;
height:6px;

background:#ffd87b;

box-shadow:

0 16px #ffd87b,
0 32px #ffd87b,
0 48px #ffd87b,

16px 0 #ffd87b,
16px 16px #ffd87b,
16px 32px #ffd87b,
16px 48px #ffd87b;

animation:windowBlink 2s infinite;

}

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

.logo-area{
    position:relative;
    margin-top:20px;
    margin-bottom:45px;
    overflow:hidden;
    z-index:10;
}

.logo-area h1{
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:60px;
    font-weight:800;
    letter-spacing:8px;
    color:#ffffff;
    text-transform:uppercase;
}

.logo-area h1 span{
    display:inline-block;
    opacity:0;
    transform:translateY(60px);
    animation:letterReveal .5s forwards;
}

.logo-area h1 span:nth-child(1){animation-delay:1.8s;}
.logo-area h1 span:nth-child(2){animation-delay:1.9s;}
.logo-area h1 span:nth-child(3){animation-delay:2.0s;}
.logo-area h1 span:nth-child(4){animation-delay:2.1s;}
.logo-area h1 span:nth-child(5){animation-delay:2.2s;}

.logo-area h1 span:nth-child(7){animation-delay:2.4s;}
.logo-area h1 span:nth-child(8){animation-delay:2.5s;}
.logo-area h1 span:nth-child(9){animation-delay:2.6s;}
.logo-area h1 span:nth-child(10){animation-delay:2.7s;}

.space{
    width:35px;
}

/* ==========================
   GOLD SHINE
========================== */

.shine{
    position:absolute;
    top:0;
    left:-200px;
    width:140px;
    height:100%;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.9),
        transparent
    );
    transform:skewX(-25deg);
    animation:shineMove 3.5s infinite;
    animation-delay:3s;
}

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

.loading{
    width:280px;
    height:6px;
    background:#213849;
    border-radius:50px;
    overflow:hidden;
    position:relative;
}

.progress{
    width:0%;
    height:100%;
    background:linear-gradient(
        90deg,
        #b9872c,
        #f7d689,
        #b9872c
    );
    border-radius:50px;
    animation:loadingBar 4s linear forwards;
}

/* ==========================
   LOADING TEXT
========================== */

.loading-text{
    margin-top:18px;
    color:#d4d4d4;
    font-size:15px;
    letter-spacing:3px;
    text-transform:uppercase;
    animation:textBlink 1.2s infinite;
}

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

@media(max-width:768px){

.logo-area h1{
    font-size:34px;
    letter-spacing:4px;
}

.city{
    transform:scale(.8);
    margin-bottom:30px;
}

.loading{
    width:220px;
}

.loading-text{
    font-size:12px;
}

}

/* ==========================================
   ANIMATIONS
========================================== */

@keyframes growBuilding{

0%{
transform:scaleY(0);
opacity:0;
}

100%{
transform:scaleY(1);
opacity:1;
}

}

@keyframes letterReveal{

0%{
opacity:0;
transform:translateY(60px);
}

100%{
opacity:1;
transform:translateY(0);
}

}

@keyframes shineMove{

0%{
left:-220px;
}

100%{
left:120%;
}

}

@keyframes loadingBar{

0%{
width:0%;
}

100%{
width:100%;
}

}

@keyframes pulseGlow{

0%,100%{
transform:scale(1);
opacity:.5;
}

50%{
transform:scale(1.25);
opacity:1;
}

}

@keyframes windowBlink{

0%,100%{
opacity:.4;
}

50%{
opacity:1;
}

}

@keyframes textBlink{

0%,100%{
opacity:1;
}

50%{
opacity:.4;
}

}

/* LOGIN PAGE */

#login-page{

position:fixed;

left:0;
top:0;

width:100%;
height:100vh;

display:flex;

justify-content:center;

align-items:center;

overflow:hidden;

z-index:1;

}

#bg-video{

position:absolute;

width:100%;

height:100%;

object-fit:cover;

}

.overlay{

position:absolute;

left:0;

top:0;

width:100%;

height:100%;

background:rgba(0,0,0,.65);

}

.login-box{

position:relative;

width:420px;

padding:45px;

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

backdrop-filter:blur(18px);

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

border-radius:20px;

z-index:5;

color:#fff;

text-align:center;

}

.login-box h1{

margin-bottom:10px;

font-size:34px;

}

.login-box p{

margin-bottom:30px;

color:#ccc;

}

.login-box input{

width:100%;

padding:15px;

margin-bottom:18px;

border:none;

border-radius:10px;

background:rgba(255,255,255,.12);

color:#fff;

font-size:15px;

outline:none;

}

.login-box button{

width:100%;

padding:15px;

border:none;

border-radius:10px;

background:#d4a64d;

color:#fff;

font-size:16px;

font-weight:700;

cursor:pointer;

transition:.3s;

}

.login-box button:hover{

background:#be913a;

}

.register-link{

margin-top:18px;

color:#ddd;

}

.register-link a{

color:#d4a64d;

text-decoration:none;

font-weight:700;

}