/* Progressive enhancement: no dimensions or positioning of the original
   illustration/content change. Without JS, the original hero is untouched. */
#home .landscape-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

#home .landscape-scene { z-index: 2; }
#home .landscape-wildlife { z-index: 3; }

#home.landscape-active .hero-title { color: var(--landscape-heading, #122f52); }
#home.landscape-active .hero-title .highlight { color: var(--landscape-accent, #2563eb); }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
    #home.landscape-active .hero-title,
    #home.landscape-active .hero-description,
    #home.landscape-active .feature-item span,
    #home.landscape-active .trust-badge {
        --ink-start: #122f52;
        --moon-start: #f3f8ff;
    }
    #home.landscape-active .hero-description,
    #home.landscape-active .feature-item span,
    #home.landscape-active .trust-badge {
        --ink-start: #102944;
        --moon-start: #ecf4ff;
    }
    #home.landscape-active .hero-title .highlight {
        --ink-start: #1747bd;
        --ink-end: #5944aa;
        --moon-start: #bedcff;
        --moon-end: #e8deff;
    }
    #home.landscape-active .hero-title,
    #home.landscape-active .hero-title .highlight,
    #home.landscape-active .hero-description,
    #home.landscape-active .feature-item span,
    #home.landscape-active .trust-badge {
        /* The light travels softly across the lettering, reversing at dawn.
           Most glyphs keep a strong dark/light fill through the transition. */
        background-image: linear-gradient(110deg,
            var(--moon-start) calc(var(--landscape-sweep, -12%) - 100%),
            var(--moon-end, var(--moon-start)) calc(var(--landscape-sweep, -12%) - 6%),
            var(--ink-start) calc(var(--landscape-sweep, -12%) + 6%),
            var(--ink-end, var(--ink-start)) calc(var(--landscape-sweep, -12%) + 100%));
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow: none;
    }
    #home.landscape-active .trust-badge i { -webkit-text-fill-color: currentColor; }
}

@media (forced-colors: active) {
    #home.landscape-active .hero-title,
    #home.landscape-active .hero-title .highlight,
    #home.landscape-active .hero-description,
    #home.landscape-active .feature-item span,
    #home.landscape-active .trust-badge {
        background: none;
        -webkit-text-fill-color: currentColor;
    }
}

#home.landscape-active .hero-description,
#home.landscape-active .feature-item,
#home.landscape-active .trust-badge { color: var(--landscape-copy, #334b65); }
#home.landscape-active .hero-description a { color: var(--landscape-link, #233f61); }
#home.landscape-active .hero-description a:hover,
#home.landscape-active .hero-description a:focus-visible { color: var(--landscape-link, #233f61); }
/* JS supplies one continuous palette per frame; CSS easing would keep
   restarting and lag behind the scenery. Reduced motion freezes both. */
#home.landscape-active .hero-title,
#home.landscape-active .hero-title .highlight,
#home.landscape-active .hero-description,
#home.landscape-active .hero-description a,
#home.landscape-active .feature-item,
#home.landscape-active .feature-item i,
#home.landscape-active .trust-badge,
#home.landscape-active .trust-badge i { transition: none; }
#home.landscape-active .feature-item i { color: var(--landscape-check, #287c6c); }
#home.landscape-active .trust-badge i { color: var(--landscape-icon, #426b96); }