/* ============================
   Full Screen Loader
============================ */

#page-loader{
    position:fixed;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;

    background: linear-gradient(rgb(10 18 34 / 0%), rgb(10 18 34 / 0%)), 
                radial-gradient(circle at top, #29486f 0%, #14294200 55%, #0c1a2d 100%);

    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);

    z-index:99999;
    transition:.35s;
}

#page-loader.hide{
    opacity:0;
    visibility:hidden;
}


/* ============================
   Glass Card
============================ */

.loader-card{

    width:280px;
    padding:40px 30px;
    border-radius:20px;

    background:rgba(35,46,65,.85);
    border:1px solid rgba(255,255,255,.25);

    box-shadow:
        0 15px 45px rgba(0,0,0,.35),
        inset 0 0 20px rgba(255,255,255,.04);

    text-align:center;
}


/* ============================
   Gradient Spinner
============================ */

.loader{

    width:74px;
    height:74px;
    margin:auto;

    border-radius:50%;
    position:relative;

    animation:spin 1.2s linear infinite;
}


.loader::before,
.loader::after{
    content:"";
    position:absolute;
    border-radius:50%;
}

/* Outer Ring */
.loader::before{
    inset:0;
    border:5px solid transparent;
    border-top-color:#f8de62;
    border-right-color:#f8de62;
    animation:spinClockwise 1.9s linear infinite;
}

/* Inner Ring */
.loader::after{
    inset:10px;
    border:5px solid transparent;
    border-bottom-color:#2f5bd6;
    border-left-color:#2f5bd6;
    animation:spinAntiClockwise 1.0s linear infinite;
}

/* Clockwise */
@keyframes spinClockwise{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}

/* Anti-clockwise */
@keyframes spinAntiClockwise{
    from{
        transform:rotate(360deg);
    }
    to{
        transform:rotate(0deg);
    }
}


/* ============================
   Text
============================ */

.loader-card h4{

    margin:22px 0 8px;

    color:#f8de62;
    font-weight:700;
    letter-spacing:.5px;
}

.loader-card .loading-text{

    margin:0;

    color:#d6dce8;
    font-size:14px;
    letter-spacing:.8px;
}

/* ============================
   Text dot blink
============================ */
.dots::after{
    content:"";
    display:inline-block;
    width:1.5em;          /* reserve space to prevent text shifting */
    text-align:left;
    animation:blinkDots 1.5s steps(4,end) infinite;
}

@keyframes blinkDots{
    0%   { content:""; }
    25%  { content:"."; }
    50%  { content:". ."; }
    75%,
    100% { content:". . ."; }
}