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

#spi-loader{

    position:fixed;

    inset:0;

    overflow:hidden;

    background:#0F172A;

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:99999;

    transition:opacity .8s ease;
    
    padding:
        env(safe-area-inset-top)
        env(safe-area-inset-right)
        env(safe-area-inset-bottom)
        env(safe-area-inset-left);

}

#spi-loader::before{
    content:"";
    position:absolute;
    inset:0;

    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);

    background-size:50px 50px;

    animation:gridMove 20s linear infinite;
}

@keyframes gridMove{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(50px);

    }

}

.loader-orb{

    position:absolute;

    border-radius:50%;

    filter:blur(90px);

    opacity:.35;

}

.orb-1{

    width:280px;
    height:280px;

    background:#10B981;

    top:15%;
    left:15%;

    animation:float1 10s ease-in-out infinite;

}

.orb-2{

    width:220px;
    height:220px;

    background:#38BDF8;

    right:15%;
    bottom:10%;

    animation:float2 12s ease-in-out infinite;

}

.loader-content{

    position:relative;

    z-index:5;

    text-align:center;

    padding:20px;

}

.loader-logo{

    width:110px;

    height:110px;

    margin:auto;

    border-radius:28px;

    overflow:hidden;

    box-shadow:
        0 20px 60px rgba(16,185,129,.25);

}

.loader-logo img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.loader-title{

    margin-top:28px;

    color:white;

    font-size:34px;

    font-weight:700;

    letter-spacing:-1px;

}

.loader-subtitle{

    color:#94A3B8;

    margin-top:10px;

    font-size:15px;

}

.loader-progress{

    width:280px;

    height:4px;

    margin:35px auto 0;

    background:#1E293B;

    border-radius:50px;

    overflow:hidden;

}

.loader-progress-bar{

    background:linear-gradient(
        90deg,
        #10B981,
        #34D399,
        #6EE7B7
    );

    box-shadow:
        0 0 20px #10B981,
        0 0 40px rgba(16,185,129,.4);

}

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

@media (max-width:1200px){

    .loader-logo{

        width:100px;
        height:100px;

    }

    .loader-title{

        font-size:30px;

    }

    .loader-progress{

        width:260px;

    }

}

@media (max-width:992px){

    .loader-logo{

        width:90px;
        height:90px;

        border-radius:24px;

    }

    .loader-title{

        margin-top:24px;

        font-size:28px;

    }

    .loader-subtitle{

        font-size:14px;

    }

    .loader-progress{

        width:240px;

        margin-top:30px;

    }

    .orb-1{

        width:220px;
        height:220px;

    }

    .orb-2{

        width:180px;
        height:180px;

    }

}

@media (max-width:768px){

    .loader-logo{

        width:80px;
        height:80px;

        border-radius:20px;

    }

    .loader-title{

        margin-top:20px;

        font-size:24px;

        letter-spacing:-.5px;

    }

    .loader-subtitle{

        margin-top:8px;

        font-size:13px;

        padding:0 24px;

        line-height:1.6;

    }

    .loader-progress{

        width:220px;

        height:5px;

        margin-top:26px;

    }

    .orb-1{

        width:180px;
        height:180px;

        filter:blur(70px);

    }

    .orb-2{

        width:150px;
        height:150px;

        filter:blur(60px);

    }

}

@media (max-width:576px){

    #spi-loader::before{

        background-size:35px 35px;

    }

    .loader-logo{

        width:72px;
        height:72px;

        border-radius:18px;

    }

    .loader-title{

        font-size:21px;

    }

    .loader-subtitle{

        font-size:12px;

        max-width:280px;

        margin-inline:auto;

    }

    .loader-progress{

        width:180px;

        height:4px;

    }

    .orb-1{

        width:150px;
        height:150px;

        top:8%;
        left:-30px;

    }

    .orb-2{

        width:120px;
        height:120px;

        right:-20px;
        bottom:8%;

    }

}

@media (max-width:380px){

    .loader-logo{

        width:64px;
        height:64px;

    }

    .loader-title{

        font-size:18px;

    }

    .loader-subtitle{

        font-size:11px;

        line-height:1.5;

    }

    .loader-progress{

        width:160px;

    }

}