/* Loaded before the theme so the page cannot flash while it is being laid out. */
#site-loader {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    background: #fff;
    color: #344f66;
    text-align: center;
    opacity: 1;
    transition: opacity 180ms ease;
}

html.site-loading #site-loader,
#site-loader.site-loader--leaving {
    display: flex;
}

/* Keep layout and image loading active, but prevent early content and focus. */
html.site-loading body > :not(#site-loader) {
    visibility: hidden;
}

#site-loader .site-loader__logo {
    display: block;
    width: min(250px, 75vw);
    height: auto;
    aspect-ratio: 480 / 125;
}

#site-loader .site-loader__spinner {
    width: 32px;
    height: 32px;
    box-sizing: border-box;
    border: 3px solid #e7edef;
    border-top-color: #344f66;
    border-radius: 50%;
    animation: site-loader-spin 800ms linear infinite;
}

#site-loader .site-loader__text {
    margin: 0;
    font: 14px/1.5 Arial, sans-serif;
    color: #344f66;
}

#site-loader.site-loader--leaving {
    opacity: 0;
    pointer-events: none;
}

@keyframes site-loader-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    #site-loader { transition: none; }
    #site-loader .site-loader__spinner { animation: none; }
}