.site-loader {
    min-height: 100svh;
    width: 100%;
    display: grid;
    place-items: center;
    padding: 24px;
    background: var(--color-bg);
}

[data-site-content].is-site-entering {
    animation: site-content-enter var(--duration-layout) var(--ease-ui) both;
}

@keyframes site-content-enter {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.site-loader-spinner {
    width: 42px;
    height: 42px;
    opacity: 1;
    transform-origin: center;
    transition: opacity 350ms ease;
    animation: remove-loader-rotate 2s linear infinite;
}

.site-loader.is-leaving .site-loader-spinner {
    opacity: 0;
}

.site-loader-spinner-path {
    stroke: var(--color-primary);
    stroke-linecap: round;
    animation: remove-loader-dash 1.5s infinite;
}

@keyframes remove-loader-rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes remove-loader-dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }

    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-site-content].is-site-entering {
        animation-duration: var(--duration-fast);
    }

    .site-loader-spinner {
        transition: none;
        animation: none;
    }

    .site-loader-spinner-path {
        animation: none;
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
}

/* The page and primary LCP candidates are visible from their first paint. */
[data-site-content].is-site-entering { animation:none; }
[data-site-content].is-site-entering .hero-photo { animation:none !important; }
[data-site-content].is-site-entering main h1 { animation:page-title-enter 850ms var(--ease-ui) both !important; }
@keyframes page-title-enter {
    from { transform:translate3d(0,24px,0); }
    to { transform:translate3d(0,0,0); }
}
@media(prefers-reduced-motion:reduce) {
    [data-site-content].is-site-entering main h1 { animation:none !important; }
}