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

#loader{
    position:fixed;
    inset:0;
    background:#050505;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:99999;
    overflow:hidden;
    transition:opacity .8s ease, visibility .8s ease;
}

#loader.hide{
    opacity:0;
    visibility:hidden;
}

.loader-overlay{
    position:absolute;
    inset:0;
    background:
    radial-gradient(circle at center,
    rgba(216,166,58,.12),
    transparent 60%);
    animation:pulseGlow 3s ease-in-out infinite;
}

.loader-content{
    position:relative;
    text-align:center;
    z-index:2;
}

.loader-content h1{
    font-family:var(--heading);
    font-size:4.8rem;
    letter-spacing:8px;
    color:var(--gold);
    text-transform:uppercase;
    margin-top:35px;
    text-shadow:
    0 0 15px rgba(216,166,58,.5),
    0 0 35px rgba(216,166,58,.3);
    animation:fadeUp 1.5s ease;
}

.loader-content p{
    color:var(--muted);
    letter-spacing:4px;
    text-transform:uppercase;
    font-size:.95rem;
    margin-top:12px;
    animation:fadeUp 2s ease;
}

/* Bull Eyes */

.loader-eyes{
    display:flex;
    justify-content:center;
    gap:80px;
}

.loader-eyes span{
    width:20px;
    height:20px;
    border-radius:50%;
    background:var(--gold);
    box-shadow:
    0 0 12px var(--gold),
    0 0 25px var(--gold),
    0 0 50px rgba(216,166,58,.6);
    animation:blink 2.6s infinite;
}

/* Smoke */

#loader::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    radial-gradient(circle,
    rgba(255,255,255,.04),
    transparent 70%);

    filter:blur(70px);

    animation:smokeMove 10s linear infinite;

}

/* Loading Bar */

#loader::after{

    content:"";

    position:absolute;

    bottom:80px;

    left:50%;

    width:220px;

    height:4px;

    transform:translateX(-50%);

    background:#222;

    border-radius:999px;

    overflow:hidden;

}

#loader::after{

    box-shadow:0 0 12px rgba(0,0,0,.5);

}

.loader-bar{
    width:220px;
    height:4px;
    margin:35px auto 0;
    background:#222;
    border-radius:999px;
    overflow:hidden;
    position:relative;
    box-shadow:0 0 12px rgba(0,0,0,.4);
}

.loader-bar::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:0%;
    height:100%;
    border-radius:999px;
    background:var(--gold-gradient);
    animation:loadingBar 2.8s forwards;
}
#loader.hide{

opacity:0;

visibility:hidden;

transition:

opacity .8s ease,

visibility .8s;

}