/* ======================================================
   PREMIUM LOADER
====================================================== */

.loader{

    position:fixed;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    gap:30px;

    background:#090909;

    z-index:99999;

    transition:opacity .6s ease,
               visibility .6s ease;

}

.loader.hide{

    opacity:0;

    visibility:hidden;

}

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

.loader-logo{

    width:120px;

    animation:logoPop 1s ease;

}

.loader-logo img{

    width:100%;

    display:block;

}

/* ===================================
SPINNER
=================================== */

.loader-spinner{

    position:relative;

    width:80px;

    height:80px;

}

.loader-spinner::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:50%;

    border:4px solid rgba(255,255,255,.08);

}

.loader-spinner::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:50%;

    border:4px solid transparent;

    border-top:4px solid var(--primary);

    animation:spin .9s linear infinite;

}

/* ===================================
TEXT
=================================== */

.loader h2{

    font-size:1.2rem;

    font-weight:700;

    letter-spacing:3px;

    color:#fff;

    text-transform:uppercase;

}

.loader p{

    color:var(--text);

    font-size:.95rem;

    letter-spacing:2px;

}

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

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes logoPop{

    0%{

        opacity:0;

        transform:scale(.6);

    }

    100%{

        opacity:1;

        transform:scale(1);

    }

}

/* ===================================
RESPONSIVE
=================================== */

@media(max-width:768px){

    .loader-logo{

        width:90px;

    }

    .loader-spinner{

        width:65px;

        height:65px;

    }

    .loader h2{

        font-size:1rem;

    }

}