html {
    scroll-behavior: smooth;
    scroll-padding-top: 5.5rem;
}

/* Applied to <html> by intro-animation.js while the intro overlay is showing. */
html.intro-scroll-lock,
html.intro-scroll-lock body {
    overflow: hidden;
}

/* The hero fog is fully hidden behind the opaque intro overlay anyway, but
   its blurred layers keep animating on the compositor the whole time —
   competing with the intro's own canvas work for GPU time and making the
   intro noticeably less smooth. Freeze it while the intro is up; it simply
   resumes mid-cycle once the overlay is gone (see Home.razor.css). */
html.intro-scroll-lock .hero-fog-back,
html.intro-scroll-lock .hero-fog-front,
html.intro-scroll-lock .hero-headlight-glow {
    animation-play-state: paused;
}

.landing-shell {
    --land-bg: #000;
    --land-red: #ff1a1a;
    --land-red-soft: #e10600;
    --land-gold: #d6ff2a;
    --land-gold-hover: #f3ff8a;
    --land-text: #fff;
    --halogen: #d6ff2a;
    --halogen-hot: #f3ff8a;
    --header-h: 5.25rem;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: clip;
    background: var(--land-bg);
    color: var(--land-text);
    font-family: var(--font-sans);
}

.landing-shell a {
    color: inherit;
}

body:has(.landing-shell) {
    background: #000;
    color: #fff;
}

@media (max-width: 640px) {
    html {
        scroll-padding-top: 4.75rem;
    }

    .landing-shell {
        --header-h: 4.6rem;
    }
}