/* ===========================================================
   GLOBAL
=========================================================== */

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;

    font-family: "Segoe UI", sans-serif;

    background:
        radial-gradient(circle at top,
            rgba(37, 99, 235, .18) 0%,
            transparent 45%),
        linear-gradient(
            135deg,
            #060B16 0%,
            #101827 45%,
            #070D18 100%
        );

    background-size: 200% 200%;

    animation: bgMove 8s ease-in-out infinite;
}

/* ===========================================================
   LOADING SCREEN
=========================================================== */

#loading-screen {

    position: fixed;
    inset: 0;

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

    z-index: 999999;

    transition: opacity .45s ease;
}

/* ===========================================================
   CONTAINER
=========================================================== */

.loading-container {

    display: flex;
    flex-direction: column;
    align-items: center;
}

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

.logo-wrapper{

    position:relative;

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

    overflow:hidden;
}





.tagline{

    margin-top: 20px;

    color: rgba(255,255,255,.82);

    font-size: 17px;

    font-weight: 400;

    letter-spacing: 2.5px;

    text-align:center;

    text-shadow:
        0 0 12px rgba(37,99,235,.15);
}

.loading-status{

    margin-top:10px;

    color:rgba(255,255,255,.45);

    font-size:13px;

    letter-spacing:4px;

    text-transform:uppercase;

    animation:statusBlink 2s ease-in-out infinite;
}

@keyframes statusBlink{

    0%,100%{

        opacity:.35;

    }

    50%{

        opacity:1;

    }

}

/* Logo */

.logo {

    position: relative;

    width: 320px;
    max-width: 70vw;
    height: auto;

    object-fit: contain;

    user-select: none;
    -webkit-user-drag: none;
}

/* ===========================================================
   LOADING DOTS
=========================================================== */

.loading-dots {

    margin-top: 45px;

    display: flex;
    gap: 12px;
}

.loading-dots span {

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: linear-gradient(
        180deg,
        #5ED8FF 0%,
        #29B6F6 55%,
        #0EA5E9 100%
    );

    box-shadow:
        0 0 10px rgba(41,182,246,.45),
        0 0 22px rgba(41,182,246,.25);

    animation: dotBounce 1.2s infinite ease-in-out;
}

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

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

/* ===========================================================
   FADE OUT
=========================================================== */

.fade-out {

    opacity: 0;
    pointer-events: none;
}

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



@keyframes dotBounce {

    0%,
    80%,
    100% {

        transform: scale(.55);

        opacity: .35;

    }

    40% {

        transform: scale(1.35);

        opacity: 1;

    }

}

@keyframes bgMove {

    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }

}