/* ==========================================
   VS TECH CCTV
   Premium Loader
========================================== */

:root{
    --primary:#1D4ED8;
    --secondary:#00C2FF;
    --dark:#0B132B;
    --white:#ffffff;
}

#preloader{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    background:var(--dark);
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    z-index:999999;
    overflow:hidden;
    transition:opacity .8s ease, visibility .8s ease;
}

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

.loader-wrapper{
    position:relative;
    width:220px;
    height:220px;
    display:flex;
    justify-content:center;
    align-items:center;
}

/* Rotating Ring */

.loader-ring{
    position:absolute;
    width:210px;
    height:210px;
    border-radius:50%;
    border:4px solid rgba(255,255,255,.08);
    border-top:4px solid var(--secondary);
    border-right:4px solid var(--primary);
    animation:ringRotate 2s linear infinite;
    box-shadow:
    0 0 20px rgba(0,194,255,.4),
    inset 0 0 20px rgba(0,194,255,.2);
}

/* Second Ring */

.loader-ring::after{
    content:"";
    position:absolute;
    inset:12px;
    border-radius:50%;
    border:3px dashed rgba(0,194,255,.4);
    animation:ringReverse 8s linear infinite;
}

/* Logo */

.loader-logo{
    width:130px;
    animation:logoScale 1.5s ease infinite alternate;
    filter:
    drop-shadow(0 0 10px #00C2FF)
    drop-shadow(0 0 25px #1D4ED8);
    z-index:2;
}

/* Loading Text */

.loading-text{
    margin-top:35px;
    font-size:18px;
    color:white;
    font-weight:600;
    letter-spacing:4px;
}

.loading-text span{
    animation:blink 1.2s infinite;
}

.loading-text span:nth-child(2){
    animation-delay:.2s;
}

.loading-text span:nth-child(3){
    animation-delay:.4s;
}

/* Pulse Glow */

.glow{
    position:absolute;
    width:260px;
    height:260px;
    border-radius:50%;
    background:radial-gradient(circle,
    rgba(0,194,255,.35),
    transparent 70%);
    animation:glowPulse 2s infinite;
}

/* Background Particles */

.loader-bg{
    position:absolute;
    inset:0;
    background:
    radial-gradient(circle at top,#1D4ED820,transparent 45%),
    radial-gradient(circle at bottom,#00C2FF18,transparent 45%);
}

/* ===========================
Animations
=========================== */

@keyframes ringRotate{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

@keyframes ringReverse{

    from{
        transform:rotate(360deg);
    }

    to{
        transform:rotate(0deg);
    }

}

@keyframes logoScale{

    from{
        transform:scale(.92);
    }

    to{
        transform:scale(1);
    }

}

@keyframes glowPulse{

    0%{
        transform:scale(.9);
        opacity:.4;
    }

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

    100%{
        transform:scale(.9);
        opacity:.4;
    }

}

@keyframes blink{

    0%{
        opacity:.3;
    }

    50%{
        opacity:1;
    }

    100%{
        opacity:.3;
    }

}