/* HTML: <div class="loader"></div> */
.loader-wrapper {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999; /* ensures it's on top */
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(8px) saturate(180%);
    -webkit-backdrop-filter: blur(8px) saturate(180%);
}

/* Optional: fade-in animation for the wrapper */
.loader-wrapper {
    animation: loader-fadein 0.3s;
}

@keyframes loader-fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}

.loader {
    width: 50px;
    aspect-ratio: 1;
    color: #000;
    border: 2px solid;
    display: grid;
    box-sizing: border-box;
    animation: l1 4s infinite linear;
}

.loader::before,
.loader::after {
    content: "";
    grid-area: 1/1;
    margin: auto;
    width: 70.7%;
    aspect-ratio: 1;
    border: 2px solid;
    box-sizing: content-box;
    animation: inherit;
}

.loader::after {
    width: 50%;
    aspect-ratio: 1;
    border: 2px solid;
    animation-duration: 2s;
}

@keyframes l1 {
    100% {
        transform: rotate(1turn)
    }
}