.loader-logo{
width:100px;
height:100px;

background:rgb(var(--card));

border-radius:30px;

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

position:relative;

z-index:2;

box-shadow:
    0 15px 40px rgba(0,0,0,.25);

animation:
    floatLogo 2.5s ease-in-out infinite;

}

.loader-ring{

position:absolute;

width:150px;
height:150px;

border-radius:50%;

border:4px solid rgba(var(--secondary),.15);

border-top-color:rgb(var(--secondary));

border-right-color:rgb(var(--primary));

top:50%;
left:50%;

transform:translate(-50%,-50%);

animation:
    rotateRing 1.2s linear infinite;

}

@keyframes rotateRing{

from{
    transform:
    translate(-50%,-50%)
    rotate(0deg);
}

to{
    transform:
    translate(-50%,-50%)
    rotate(360deg);
}

}

.ecg{

width:180px;
height:3px;

overflow:hidden;

background:
    rgba(255,255,255,.08);

border-radius:999px;

margin:auto;

}

.ecg span{

display:block;

width:60px;
height:100%;

background:
    linear-gradient(
        90deg,
        transparent,
        rgb(var(--secondary)),
        transparent
    );

animation:
    ecgMove 1.5s linear infinite;

}

@keyframes ecgMove{

from{
    transform:translateX(-60px);
}

to{
    transform:translateX(180px);
}

}

@keyframes floatLogo{

0%,100%{
    transform:translateY(0);
}

50%{
    transform:translateY(-8px);
}

}