/* =================================
   NEOZHA LOADER
================================= */

.loader{

    position:fixed;

    inset:0;

    background:#050816;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:999999;

    transition:1s ease;

}

.loader-hide{

    opacity:0;

    visibility:hidden;

}

/* =================================
   CONTENT
================================= */

.loader-content{

    text-align:center;

    position:relative;

}

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

.loader-logo{

    position:relative;

    font-size:4.5rem;

    font-weight:900;

    letter-spacing:10px;

    color:#00ffff;

    text-transform:uppercase;

    text-shadow:
    0 0 10px #00ffff,
    0 0 25px #00ffff,
    0 0 50px #00ffff;

    animation:
    pulseLogo 2s ease-in-out infinite;

    overflow:hidden;

}

/* =================================
   ELECTRIC FLOW
================================= */

.loader-logo::before{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:80%;

    height:100%;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.9),
        #00ffff,
        rgba(255,255,255,.9),
        transparent
    );

    filter:blur(2px);

    animation:
    electricFlow 2s linear infinite;

}

.loader-logo::after{

    content:"";

    position:absolute;

    inset:0;

    background:
    repeating-linear-gradient(
        90deg,
        transparent 0px,
        transparent 8px,
        rgba(0,255,255,.15) 10px,
        transparent 12px
    );

    animation:
    electricNoise .25s infinite;

    mix-blend-mode:screen;

}

/* =================================
   LOADING BAR
================================= */

.loader-bar{

    width:280px;

    height:6px;

    margin:25px auto 0;

    background:
    rgba(255,255,255,.08);

    border-radius:30px;

    overflow:hidden;

}

.loader-bar span{

    display:block;

    height:100%;

    width:0%;

    border-radius:30px;

    background:
    linear-gradient(
        90deg,
        #00ffff,
        #8b5cf6
    );

    box-shadow:
    0 0 15px #00ffff;

    animation:
    loadingBar 2.5s linear forwards;

}

/* =================================
   SUBTITLE
================================= */

.loader-text{

    margin-top:15px;

    color:#cbd5e1;

    font-size:14px;

    letter-spacing:3px;

    text-transform:uppercase;

}

/* =================================
   ANIMATIONS
================================= */

@keyframes loadingBar{

    from{

        width:0%;

    }

    to{

        width:100%;

    }

}

@keyframes electricFlow{

    0%{

        left:-120%;

    }

    100%{

        left:120%;

    }

}

@keyframes electricNoise{

    0%{

        opacity:.2;

    }

    50%{

        opacity:.7;

    }

    100%{

        opacity:.2;

    }

}

@keyframes pulseLogo{

    0%,100%{

        transform:scale(1);

        text-shadow:
        0 0 10px #00ffff,
        0 0 25px #00ffff,
        0 0 50px #00ffff;

    }

    50%{

        transform:scale(1.03);

        text-shadow:
        0 0 20px #00ffff,
        0 0 40px #00ffff,
        0 0 80px #00ffff,
        0 0 120px #00ffff;

    }

}

/* =================================
   MOBILE
================================= */

@media(max-width:768px){

    .loader-logo{

        font-size:3rem;

        letter-spacing:6px;

    }

    .loader-bar{

        width:220px;

    }

}