/* ==========================================================
   Premium Intro Preloader - CSS
   SV-DESIGN
========================================================== */

:root{
    --preload-bg:#060b17;
}

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

#preloader{
    position:fixed;
    inset:0;
    z-index:999999;
    overflow:hidden;
    background:var(--preload-bg);
    display:flex;
    justify-content:center;
    align-items:center;
    transition: opacity .5s ease,
                visibility .5s ease,
                background .4s ease;
}

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

#preloader.fading{
    background:transparent;
}

/* ==========================================================
   BACKGROUND
========================================================== */

.preloader-bg{
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at center,
            rgba(75,125,255,.16),
            transparent 55%
        ),
        radial-gradient(circle at center,
            rgba(90,190,255,.18),
            transparent 35%
        ),
        linear-gradient(180deg, #0b1325, #070d18);
    transition: opacity .5s ease;
}

#preloader.fading .preloader-bg{
    opacity:0;
}

/* ==========================================================
   LIGHT
========================================================== */

.preloader-light{
    position:absolute;
    width:14px; height:14px;
    border-radius:50%;
    background:#7bc7ff;
    animation:centerLight .9s ease forwards;
    transition: opacity .4s ease;
}

#preloader.fading .preloader-light{
    opacity:0;
}

@keyframes centerLight{
    0%   { opacity:0; transform:scale(0); }
    40%  { opacity:1; transform:scale(1); }
    80%  { opacity:.6; transform:scale(1.15); }
    100% { opacity:.25; transform:scale(1.05); }
}

/* ==========================================================
   LOGO
========================================================== */

.preloader-logo{
    position:relative;
    z-index:20;
    width:220px;
    opacity:0;
    transform:scale(.45);
    animation:logoShow .9s cubic-bezier(.18,.9,.25,1) forwards;
}

.preloader-logo img{
    width:100%;
    display:block;
    user-select:none;
    pointer-events:none;
    animation:logoGlow 2.2s ease-in-out infinite;
    filter:
        drop-shadow(0 0 8px rgba(89,181,255,.18))
        drop-shadow(0 0 18px rgba(89,181,255,.15))
        drop-shadow(0 0 45px rgba(89,181,255,.10));
}

@keyframes logoShow{
    0%   { opacity:0; transform:scale(.45); }
    70%  { opacity:1; transform:scale(1.06); }
    100% { opacity:1; transform:scale(1); }
}

@keyframes logoGlow{
    0%,100%{
        transform:scale(1);
        filter:
            drop-shadow(0 0 8px rgba(89,181,255,.15))
            drop-shadow(0 0 18px rgba(89,181,255,.12))
            drop-shadow(0 0 40px rgba(89,181,255,.08));
    }
    50%{
        transform:scale(1.018);
        filter:
            drop-shadow(0 0 16px rgba(89,181,255,.42))
            drop-shadow(0 0 34px rgba(89,181,255,.30))
            drop-shadow(0 0 75px rgba(89,181,255,.20));
    }
}

/* ==========================================================
   RINGS
========================================================== */

.preloader-ring{
    position:absolute;
    top:50%; left:50%;
    border-radius:50%;
    border:1px solid rgba(89,181,255,.45);
    opacity:0;
}

.preloader-ring.ring-1{
    width:100px; height:100px;
    margin:-50px 0 0 -50px;
    animation:ringExplosion .9s ease .65s forwards;
}

.preloader-ring.ring-2{
    width:130px; height:130px;
    margin:-65px 0 0 -65px;
    border-color:rgba(89,181,255,.30);
    animation:ringExplosionBlur .95s ease .78s forwards;
}

.preloader-ring.ring-3{
    width:160px; height:160px;
    margin:-80px 0 0 -80px;
    border-color:rgba(89,181,255,.18);
    animation:ringExplosionBlur 1.0s ease .90s forwards;
}

@keyframes ringExplosion{
    0%   { opacity:0; transform:scale(.2); }
    15%  { opacity:.9; }
    100% { opacity:0; transform:scale(24); }
}

@keyframes ringExplosionBlur{
    0%   { opacity:0; transform:scale(.15); filter:blur(1px); }
    12%  { opacity:.75; filter:blur(0px); }
    60%  { opacity:.35; filter:blur(3px); }
    100% { opacity:0; transform:scale(28); filter:blur(12px); }
}