/* Finished raster wetland scenery with editable project overlays and friend sprites. */
.wetland-scene,
.wetland-helpers {
    display: block;
    width: 100%;
    height: auto;
    overflow: hidden;
}

#helperHabitat {
    height: auto;
    aspect-ratio: 1000 / 364;
    overflow: hidden;
    border: 1px solid #b8c5a4;
    border-radius: 15px;
    background: #cad6ae;
}

#helperHabitat .wetland-helpers { width: 100%; height: 100%; aspect-ratio: auto; }
.wetland-scene .animal-ground-shadow { fill: #263633; opacity: .28; }
.wetland-scene .animal-ground-shadow { filter: blur(2px); }

.wetland-scene .project-art,
.wetland-helpers .helper-art {
    opacity: 0;
    transition: opacity 450ms ease;
    pointer-events: none;
}

.wetland-scene .project-art.is-built,
.wetland-scene .project-art[data-built="true"],
.wetland-helpers .helper-art.is-owned,
.wetland-helpers .helper-art[data-owned="true"] {
    opacity: 1;
}

.wetland-helpers .helper-arrival {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center bottom;
    transform: translateY(10px) scale(.96);
    transition: opacity 420ms ease, transform 520ms cubic-bezier(.2,.75,.3,1);
}

.wetland-helpers .helper-arrival.is-arrived {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.wetland-helpers .helper-arrival-shadow {
    fill: #314b35;
    opacity: .26;
    filter: blur(1.5px);
}

.wetland-helpers .helper-wander-motion {
    transform-box: fill-box;
    transform-origin: center bottom;
}

.wetland-helpers .helper-wanderer.is-walking .helper-wander-motion {
    animation: helperGait var(--helper-gait-duration, .42s) ease-in-out var(--helper-gait-delay, 0s) infinite;
}

@keyframes helperGait {
    0%, 100% { transform: translateY(0) rotate(0); }
    20% { transform: translateY(var(--helper-gait-lift, -2px)) rotate(var(--helper-gait-tilt-left, -.7deg)); }
    48% { transform: translateY(0) rotate(0); }
    72% { transform: translateY(var(--helper-gait-half-lift, -1px)) rotate(var(--helper-gait-tilt-right, .7deg)); }
}

#helperHabitat.is-hydrating .helper-art,
#helperHabitat.is-hydrating .helper-arrival {
    transition: none;
}

.wetland-scene .wetland-landscape {
    transition: filter 600ms ease;
}

/* Restoration layers inherit the dim, cool light of the firefly dusk scene. */
.wetland-scene[data-dusk="true"] .project-art:not(.firefly-glow),
.wetland-scene[data-dusk="true"] .base-animals {
    filter: brightness(.38) saturate(.72) contrast(.96);
}

.wetland-scene[data-dusk="true"] .animal-ground-shadow {
    fill: #14252c;
    opacity: .4;
}

#restorationScene[data-weather="rainy"] .wetland-landscape {
    filter: saturate(.86) brightness(.9) hue-rotate(4deg);
}

#restorationScene[data-weather="flood"] .wetland-landscape {
    filter: saturate(1.08) hue-rotate(9deg);
}

#restorationScene[data-weather="receding"] .wetland-landscape {
    filter: saturate(.93) sepia(.08);
}

#restorationScene[data-weather="dry"] .wetland-landscape {
    filter: saturate(1.18) sepia(.2) brightness(1.04);
}

.wetland-scene .firefly-glow.is-built image,
.wetland-scene .firefly-glow[data-built="true"] image {
    animation: wetland-firefly 2.8s ease-in-out infinite alternate;
}

@keyframes wetland-firefly {
    from { opacity: .38; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .wetland-scene *,
    .wetland-helpers * {
        animation: none !important;
        transition: none !important;
    }
}