#preloader{
    position:fixed;
    inset:0;
    background:#090105;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:999999;
    transition:opacity .6s ease, visibility .6s ease;
}

#preloader.hide{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

.loader-box{
    text-align:center;
}

.loader-circle{
    width:170px;
    height:170px;
    margin:auto;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    background:#1a0a08;
    box-shadow:0 0 40px rgba(255,136,0,.45);
}

.loader-circle::before{
    content:"";
    position:absolute;
    inset:-5px;
    border-radius:50%;
    background:conic-gradient(#ff8800,#6d28d9,#ff8800);
    animation:spin 1.8s linear infinite;
    z-index:-1;
}

.loader-circle img{
    width:120px;
}

.loader-logo{
    margin:35px 0 20px;
    font-size:52px;
    color:#fff;
    letter-spacing:6px;
}

.loader-logo span{
    color:#ff8800;
}

.loader-bar{
    width:320px;
    height:8px;
    background:#221515;
    border-radius:20px;
    overflow:hidden;
    margin:auto;
}

.loader-progress{
    width:0%;
    height:100%;
    border-radius:20px;
    background:linear-gradient(90deg,#ff8800,#6d28d9);
}

#loaderPercent{
    margin-top:14px;
    color:#fff;
    font-size:20px;
}

@keyframes spin{
    to{transform:rotate(360deg);}
}