/* A continuous curtain keeps the page laid out underneath, without visibility flashes. */
html.preloader-active {
    touch-action: none;
    overscroll-behavior: none;
}

html.fonts-fallback {
    --font-heading: Impact, sans-serif;
    --font-body: Arial, sans-serif;
}

.preloader {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: grid;
    place-items: center;
    background: var(--color-bg-light, #fff);
    transform: translateY(0);
}

.preloader[hidden] {
    display: none;
}

.preloader-logo {
    width: clamp(85px, 9vw, 120px);
    height: auto;
}

.preloader--intro {
    transition: transform 850ms cubic-bezier(0.77, 0, 0.175, 1);
}

/* Later visits keep the page visible; fast loads never show an indicator. */
.preloader:not(.preloader--intro) {
    bottom: auto;
    height: 3px;
    background: var(--color-brand-green, #307146);
    pointer-events: none;
    opacity: 0;
    animation: show-font-progress 0s 150ms forwards;
}

.preloader:not(.preloader--intro) .preloader-logo {
    display: none;
}

@keyframes show-font-progress {
    to { opacity: 1; }
}

.preloader--intro .preloader-logo {
    transition: transform 500ms ease, opacity 450ms ease;
}

.preloader.is-loaded {
    transform: translateY(-100%);
    pointer-events: none;
}

.preloader--intro.is-loaded .preloader-logo {
    transform: translateY(-18px) scale(0.94);
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .preloader--intro,
    .preloader--intro .preloader-logo {
        transition: none;
    }
}