.painted-footer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 480px;
    background: #f9eddb;
    color: #343b2d;
}

.painted-footer__scene,
.painted-footer__landscape,
.painted-footer__veil {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.painted-footer__scene { z-index: -1; overflow: hidden; }

.painted-footer__landscape {
    object-fit: cover;
    object-position: center 60%;
    transform: scale(1.035);
}

.painted-footer__cloud {
    position: absolute;
    width: clamp(260px, 38vw, 640px);
    height: auto;
    opacity: .85;
    animation: footer-cloud 18s ease-in-out infinite alternate;
    animation-delay: -5s;
}

.painted-footer__cloud--left { top: 8%; left: -12%; }
.painted-footer__cloud--right {
    top: 21%;
    right: -13%;
    width: clamp(220px, 30vw, 520px);
    opacity: .7;
    animation-duration: 23s;
    animation-delay: -15s;
    animation-direction: alternate-reverse;
}

.painted-footer__grass {
    position: absolute;
    bottom: -40px;
    width: clamp(180px, 21vw, 330px);
    height: auto;
    transform-origin: 50% 100%;
    animation: footer-grass 3.8s ease-in-out infinite alternate;
}

.painted-footer__grass--left { left: -50px; --grass-mirror: 1; }
.painted-footer__grass--right {
    right: -45px;
    --grass-mirror: -1;
    animation-duration: 4.6s;
    animation-delay: -2s;
}

.painted-footer__firefly {
    position: absolute;
    left: var(--firefly-left);
    top: var(--firefly-top);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff3b5;
    box-shadow: 0 0 8px 3px rgba(255, 223, 116, .45);
    opacity: .7;
    animation: footer-firefly var(--firefly-duration) ease-in-out infinite alternate;
    animation-delay: var(--firefly-delay);
}

.painted-footer__veil {
    background: linear-gradient(to bottom, #fff, transparent 18%),
                linear-gradient(to top, rgba(22, 38, 29, .86), transparent 25%);
}

.painted-footer [data-scene-animated] { animation-play-state: paused; }
.painted-footer.is-animated [data-scene-animated] { animation-play-state: running; }

.painted-footer__content {
    width: min(100% - 48px, 1152px);
    margin-inline: auto;
    padding-top: 54px;
    text-align: center;
}

.painted-footer__eyebrow {
    margin: 0 0 14px;
    color: #845239;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.painted-footer__brand {
    display: inline-block;
    color: #343b2d;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -.055em;
    line-height: 1.15;
    text-decoration: none;
}

.painted-footer__description {
    margin: 14px 0 0;
    color: #62644e;
    font-size: .9375rem;
    line-height: 1.6;
}

.painted-footer__nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 28px;
    row-gap: 8px;
    margin-top: 30px;
}

.painted-footer__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 48px;
    padding: 4px 0;
    color: #454834;
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
    transition: color .2s;
}

.painted-footer__link svg { width: 14px; height: 14px; opacity: .55; }
.painted-footer__link:hover {
    color: #a43b15;
    text-decoration: underline;
}

.painted-footer__meta {
    position: absolute;
    inset-inline: 24px;
    bottom: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    max-width: 1152px;
    margin-inline: auto;
    color: #fff8e9;
    font-size: .75rem;
    line-height: 1.5;
}

.painted-footer__meta p { margin: 0; }
.painted-footer__motion {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 0;
    border: 0;
    background: transparent;
    color: #fff8e9;
    font: inherit;
    cursor: pointer;
    text-underline-offset: 4px;
}

.painted-footer__motion:hover { text-decoration: underline; }
.painted-footer__motion svg { width: 12px; height: 12px; }
.painted-footer__motion .painted-footer__play { display: none; }
.painted-footer__motion[aria-pressed="true"] .painted-footer__pause { display: none; }
.painted-footer__motion[aria-pressed="true"] .painted-footer__play { display: inline; }
.painted-footer [hidden] { display: none; }
.painted-footer a:focus-visible,
.painted-footer button:focus-visible { outline: 3px solid #e95a21; outline-offset: 5px; }
.painted-footer__link:focus-visible { border-radius: 2px; }
.painted-footer__motion:focus-visible { border-radius: 2px; }
.painted-footer__motion:focus-visible { outline-color: #fff8e9 !important; }

@keyframes footer-cloud {
    from { transform: translateX(-50px); }
    to { transform: translateX(180px); }
}

@keyframes footer-grass {
    from { transform: scaleX(var(--grass-mirror)) rotate(-6deg); }
    to { transform: scaleX(var(--grass-mirror)) rotate(7deg); }
}

@keyframes footer-firefly {
    0% { transform: translate(0, 8px); opacity: .2; }
    50% { opacity: 1; }
    100% { transform: translate(22px, -20px); opacity: .35; }
}

@media (min-width: 1600px) {
    .painted-footer { min-height: 560px; }
    .painted-footer__content { padding-top: 64px; }
}

@media (max-width: 640px) {
    .painted-footer { min-height: 520px; }
    .painted-footer__content { padding-top: 52px; }
    .painted-footer__nav {
        max-width: 290px;
        margin-inline: auto;
        column-gap: 18px;
        row-gap: 0;
    }
    .painted-footer__meta { flex-direction: column; justify-content: center; gap: 12px; bottom: 22px; }
    .painted-footer__cloud--left { left: -40%; }
    .painted-footer__cloud--right { right: -40%; }
    .painted-footer__grass { width: 210px; bottom: -30px; }
    .painted-footer__grass--left { left: -90px; }
    .painted-footer__grass--right { right: -95px; }
}

@media (prefers-reduced-motion: reduce) {
    .painted-footer [data-scene-animated] { animation: none; }
    .painted-footer__grass--right { transform: scaleX(-1); }
    .painted-footer__firefly { opacity: .35; }
    .painted-footer__link,
    .painted-footer__motion { transition: none; }
}