:root {
    --pixel-size: 4;
    --animation-time: 20s;
    --displacement: 0px;
}

.sprite-container {
    overflow: hidden;
    position: fixed;
    left: -10vw;
    bottom: 0;
}

.sprite-container:hover {
    animation-play-state: paused;
}

.deer-container {
    width: calc(32px * var(--pixel-size));
    height: calc(32px * var(--pixel-size));
    animation: deer-travel var(--animation-time) linear infinite;
    bottom: -16px;
}

.dog-container {
    width: calc(48px * var(--pixel-size));
    height: calc(48px * var(--pixel-size));
    animation: dog-travel 20s linear infinite;
    animation-delay: 18s;
    left: -25vw;
}

.sprite {
    position: absolute;
    bottom: 0;
    image-rendering: pixelated;
    max-width: none;
}

.sprite-container:hover .sprite {
    animation-play-state: paused;
}

.deer {
    width: calc(192px * var(--pixel-size));
    bottom: var(--displacement);
}

.deer.walk {
    animation:
        frames 1.2s steps(6) infinite,
        walkRunSwitch var(--animation-time) ease-in-out infinite;
}

.deer.run {
    animation:
        frames 0.6s steps(6) infinite,
        walkRunSwitchReverse var(--animation-time) ease-in-out infinite;
}

.dog.walk {
    width: calc(288px * var(--pixel-size));
    animation: frames 0.8s steps(6) infinite;
    opacity: 1;
}

.dog.idle {
    width: calc(192px * var(--pixel-size));
    animation: none;
    opacity: 0;
}

.dog-container:hover .dog.walk {
    opacity: 0;
}

.dog-container:hover .dog.idle {
    opacity: 1;
    animation: frames 1.2s steps(4) infinite;
}

@keyframes frames {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

@keyframes walkRunSwitch {
    0%, 29.9% { opacity: 1; }
    30%, 61% { opacity: 0; }
    61.1%,100% { opacity: 1; }
}

@keyframes walkRunSwitchReverse {
    0%, 29.9% { opacity: 0; }
    30%, 61% { opacity: 1; }
    61.1%,100% { opacity: 0; }
}

@keyframes deer-travel {
    0% { transform: translate3d(-10vw,0,0); }
    35% { transform: translate3d(28vw,0,0); }
    40% { transform: translate3d(40vw,0,0); }
    55% { transform: translate3d(70vw,0,0); }
    60% { transform: translate3d(75vw,0,0); }
    100% { transform: translate3d(110vw,0,0); }
}

@keyframes dog-travel {
    0% { transform: translate3d(-25vw,0,0); }
    30% { transform: translate3d(125vw,0,0); }
    100% { transform: translate3d(125vw,0,0); }
}