/* ==========================
   PRELOADER
========================== */

#preloader{
    position:fixed;
    inset:0;
    background:var(--bg);
    z-index:99999;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
}
/* #preloader::before{
    content:'';
    position:absolute;
    inset:0;
    background:url('../img/hero/loaderbg.png') center/cover;
    opacity:.25;
}

#preloader::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(
        to bottom,
        rgba(0,0,0,.8),
        rgba(0,0,0,.9)
    );
} */
.loader-wrapper{
    width:80%;
    max-width:700px;
}

.loader-track{
    position:relative;
    width:100%;
    height:8px;
    background:var(--bg-secondary);
    border-radius:50px;
    overflow:visible;
}

.loader-progress{
    width:0%;
    height:100%;
    background:var(--primary);
    border-radius:50px;
    transition:.2s;
}

.car{
    position:absolute;
    top:-25px;
    left:-96px;
    font-size:40px;
    transition:.2s linear;
}

.loader-text{
    color:var(--text);
    text-align:center;
    margin-top:25px;
    font-size:22px;
    font-weight:600;
    letter-spacing:2px;
}
.animate-up{
    opacity:0;
    transform:translateY(60px);
}

.loaded .animate-up{
    animation:fadeUp .9s forwards;
}

.delay-1{
    animation-delay:.2s !important;
}

.delay-2{
    animation-delay:.4s !important;
}

.delay-3{
    animation-delay:.6s !important;
}
.delay-4{
    animation-delay:.8s !important;
}

@keyframes fadeUp{

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

    to{
        opacity:1;
        transform:translateY(0);
    }
}

.reveal{
    opacity:0;
    transform:translateY(80px);
    transition:all .8s ease;
}

.reveal.active{
    opacity:1;
    transform:translateY(0);
}