/* A small, decorative pixel journey at the bottom of the footer. */
.yam-runner-lane {
    position: relative;
    box-sizing: border-box;
    height: 120px;
    padding-top: 24px;
    overflow: hidden;
    overflow-anchor: none;
    contain: layout paint;
    pointer-events: none;
    isolation: isolate;
}

.yam-runner-scenery {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    width: max-content;
    height: 96px;
    animation: yam-scenery-scroll 26s linear infinite;
}

.yam-runner-scenery img {
    display: block;
    flex: none;
    width: 2400px;
    height: 96px;
}

.yam-runner-hero {
    --sprite-end: -160px;
    position: absolute;
    z-index: 1;
    left: clamp(40px, 14vw, 220px);
    bottom: 8px;
    width: 80px;
    height: 80px;
    background: url('/img/yam-runner-hero.svg') no-repeat left top / 160px 80px;
    image-rendering: pixelated;
    animation: yam-runner-steps .42s steps(2) infinite,
               yam-runner-leap 12s steps(1, end) infinite;
}

@keyframes yam-scenery-scroll {
    to { transform: translateX(-2400px); }
}

@keyframes yam-runner-steps {
    to { background-position-x: var(--sprite-end); }
}

@keyframes yam-runner-leap {
    0%, 16%, 22%, 48%, 54%, 78%, 84%, 100% { transform: translateY(0); }
    18%, 20%, 50%, 52%, 80%, 82% { transform: translateY(-6px); }
}

@media (max-width: 600px) {
    .yam-runner-lane {
        height: 92px;
        padding-top: 20px;
    }
    .yam-runner-scenery {
        height: 72px;
        animation-name: yam-scenery-scroll-mobile;
    }
    .yam-runner-scenery img {
        width: 1800px;
        height: 72px;
    }
    .yam-runner-hero {
        --sprite-end: -120px;
        left: 30px;
        bottom: 5px;
        width: 60px;
        height: 60px;
        background-size: 120px 60px;
    }
    @keyframes yam-scenery-scroll-mobile {
        to { transform: translateX(-1800px); }
    }
}

@media (prefers-reduced-motion: reduce) {
    .yam-runner-scenery,
    .yam-runner-hero { animation: none; }
}