/* First paint: lock scroll while overlay is visible */
html.is-loading {
    overflow: hidden;
}

#page-loader.page-loader {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

#page-loader.page-loader.is-done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader {
    width: fit-content;
    font-weight: bold;
    font-family: monospace;
    font-size: 30px;
    background: radial-gradient(circle closest-side, #000 94%, #0000) right / calc(200% - 1em) 100%;
    animation: l24 1s infinite alternate linear;
}

.loader::before {
    content: "Loading...";
    line-height: 1em;
    color: #0000;
    background: inherit;
    background-image: radial-gradient(circle closest-side, #fff 94%, #000);
    -webkit-background-clip: text;
    background-clip: text;
}

@keyframes l24 {
    100% {
        background-position: left;
    }
}