/* ===========================
   PREMIUM COMPANY PRELOADER
=========================== */

#preloader{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#000;
    z-index:99999;

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

    overflow:hidden;
}

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

/* Logo */
.logo-wrapper{
    position:relative;
    width:260px;
    margin:auto;
}

.logo-wrapper img{
    width:100%;
    display:block;

    animation:
        logoZoom 2.5s ease-in-out infinite,
        goldGlow 3s ease-in-out infinite;
}

/* Rotating Ring */
.ring{
    position:absolute;
    inset:-25px;

    border:2px solid rgba(212,175,55,.4);
    border-top:2px solid #FFD700;
    border-radius:50%;

    animation:rotateRing 3s linear infinite;
}

/* Text */
.loading-text{
    margin-top:30px;
    color:#D4AF37;
    font-size:15px;
    letter-spacing:3px;
    text-transform:uppercase;
    font-weight:600;

    animation:pulseText 2s infinite;
}

/* Progress Bar */
.progress-bar{
    width:280px;
    height:4px;
    margin:25px auto 0;

    background:rgba(255,255,255,.1);
    border-radius:20px;
    overflow:hidden;
}

.progress{
    width:0;
    height:100%;
    background:linear-gradient(
        90deg,
        #8b6914,
        #ffd700,
        #fff2a8,
        #ffd700
    );

    animation:loadingBar 3s linear infinite;
}

/* Background Particles */
#preloader::before,
#preloader::after{
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    background:
        radial-gradient(circle,#FFD700 1px,transparent 1px);
    background-size:60px 60px;
    opacity:.15;
    animation:floatStars 12s linear infinite;
}

#preloader::after{
    animation-direction:reverse;
}

/* Animations */

@keyframes logoZoom{
    0%,100%{
        transform:scale(1);
    }
    50%{
        transform:scale(1.05);
    }
}

@keyframes goldGlow{
    0%,100%{
        filter:
            drop-shadow(0 0 10px rgba(255,215,0,.4))
            drop-shadow(0 0 20px rgba(255,215,0,.3));
    }

    50%{
        filter:
            drop-shadow(0 0 25px rgba(255,215,0,.8))
            drop-shadow(0 0 45px rgba(255,215,0,.6));
    }
}

@keyframes shineMove{
    from{
        left:-150%;
    }
    to{
        left:200%;
    }
}

@keyframes rotateRing{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}

@keyframes pulseText{
    0%,100%{
        opacity:.5;
    }
    50%{
        opacity:1;
    }
}

@keyframes loadingBar{
    0%{
        width:0;
    }
    100%{
        width:100%;
    }
}

@keyframes floatStars{
    from{
        transform:translateY(0);
    }
    to{
        transform:translateY(-100px);
    }
}