#preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;

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

    background:
        radial-gradient(circle at 15% 90%, rgba(163,22,63,.18) 0%, transparent 45%),
        radial-gradient(circle at 85% 85%, rgba(210,184,133,.10) 0%, transparent 30%),
        radial-gradient(circle at 20% 15%, rgba(163,22,63,.14) 0%, transparent 40%),
        radial-gradient(circle at 90% 10%, rgba(131,17,50,.20) 0%, transparent 45%),
        linear-gradient(
            340deg,
            var(--primary-darkest),
            var(--primary-darker),
            var(--primary-darkest)
        );

    transition:
        opacity .8s ease,
        visibility .8s ease;
}


#preloader.hide {
    opacity: 0;
    visibility: hidden;
}

.loader-glass {
    width: 248px;
    aspect-ratio: 1;

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

    border-radius: 50%;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.12),
            rgba(255,255,255,.03)
        );

    border: 1px solid rgba(255,255,255,.10);

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

    box-shadow:
        0 20px 50px rgba(0,0,0,.35),
        inset 0 1px 1px rgba(255,255,255,.28);

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

.loader-glass img {
    width: 236px;
    z-index:2;
    animation:
        logoFloat 2s ease-in-out infinite,
        logoFade 1.5s ease-in-out infinite alternate;
}

@keyframes logoFade {
    from {
        opacity: .75;
    }
    to {
        opacity: 1;
    }
}

@keyframes pulse {
    0%,100%{
        transform:scale(1);
    }
    50%{
        transform:scale(1.04);
    }
}

@keyframes logoFloat {
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-6px);
    }
}


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

.track{
    fill:none;
    stroke:rgba(255,255,255,.08);
    stroke-width:1;
}

.arc{
    fill:none;
    stroke:var(--secondary);
    stroke-width:2;
    stroke-linecap:round;

    stroke-dasharray:163.4;
}

.arc-left{
    animation:leftArc 1.5s ease forwards;
}

.arc-right{
    animation:rightArc 1.5s ease forwards;
}

@keyframes leftArc{

    from{
        stroke-dashoffset:163.4;
    }

    to{
        stroke-dashoffset:81.7;
    }

}

@keyframes rightArc{

    from{
        stroke-dashoffset:-163.4;
    }

    to{
        stroke-dashoffset:-81.7;
    }

}