.loader{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:99999;
    background-color:#2a2a72;
}

.loader::before{
    content:"";
    position:absolute;
    inset:0;
    background:
    repeating-linear-gradient(45deg,transparent 0,transparent 35px,rgba(255,255,255,0.15) 35px,rgba(255,255,255,0.15) 70px),
    repeating-linear-gradient(-45deg,transparent 0,transparent 35px,rgba(255,255,255,0.15) 35px,rgba(255,255,255,0.15) 70px),
    linear-gradient(90deg,#009ffd,#2a2a72);
    z-index:0;
}

.ring-loader{
    position:relative;
    width:180px;
    height:180px;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:1;
}

.loader-ring{
    position:absolute;
    width:180px;
    height:180px;
    transform:rotate(-90deg);
}

.loader-ring circle{
    fill:none;
    stroke-width:5px;
    stroke-linecap:round;
}

.ring-back{
    stroke:#90e0ef33;
}

.ring-front{
    stroke:#00b4d8;
    stroke-dasharray:120 220;
    animation:ringSpin 1s linear infinite;
    filter:drop-shadow(0 0 10px #00b4d8);
}

.loader-logo{
    width:125px;
    border-radius:50%;
    filter:drop-shadow(0 0 18px #00b4d8);
    animation:logoPulse 1s ease-in-out infinite;
}

@keyframes ringSpin{
    0%{stroke-dashoffset:0;}
    100%{stroke-dashoffset:-340;}
}

@keyframes logoPulse{
    0%{
        transform:scale(1);
        filter:drop-shadow(0 0 10px #00b4d8);
    }
    50%{
        transform:scale(1.05);
        filter:drop-shadow(0 0 25px #90e0ef);
    }
    100%{
        transform:scale(1);
        filter:drop-shadow(0 0 10px #00b4d8);
    }
}

.loader.hide{
    animation:loaderFade 0.45s ease-out forwards;
}

.loader.hide .ring-loader{
    animation:finalBurst 0.45s ease-out forwards;
}

@keyframes finalBurst{
    0%{transform:scale(1);opacity:1;}
    100%{transform:scale(6);opacity:0;}
}

@keyframes loaderFade{
    to{opacity:0;visibility:hidden;}
}