#sayeh-character {
    position: fixed;
    left: -430px;
    top: 80px;

    width: 210px;
    height: 210px;

    background-repeat: no-repeat;
    background-size: 1000% 100%;
    background-position: 0 50%;
    background-color: transparent;

    transform: translateY(-50%) scaleX(1);
    transform-origin: center center;

    z-index: 999999;
    pointer-events: none;
    user-select: none;
    will-change: left, top, transform, background-position;
}

@keyframes sayeh-walk {
    0%   { background-position: 0% 50%; }
    25%  { background-position: 11.111111% 50%; }
    50%  { background-position: 22.222222% 50%; }
    75%  { background-position: 33.333333% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes sayeh-sprint {
    0%   { background-position: 55.555556% 50%; }
    50%  { background-position: 77.777778% 50%; }
    100% { background-position: 55.555556% 50%; }
}

@keyframes sayeh-exit {
    0%   { background-position: 88.888889% 50%; }
    100% { background-position: 100% 50%; }
}

#sayeh-character.sayeh-walking {
    animation: sayeh-walk .82s steps(1) infinite;
}

#sayeh-character.sayeh-sprinting {
    animation: sayeh-sprint .42s steps(1) infinite;
}

#sayeh-character.sayeh-exiting {
    animation: sayeh-exit .35s steps(1) infinite;
}

@media (max-width: 800px) {
    #sayeh-character {
        width: 145px;
        height: 145px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #sayeh-character.sayeh-walking,
    #sayeh-character.sayeh-sprinting,
    #sayeh-character.sayeh-exiting {
        animation: none;
    }
}