/* Base styles */

.paceman {
    display: inline-block;
    width: 75px;
    height: 75px;
    margin-top: 100px;
}

.how-to-container {
    background: url("../images/GameBackground.png") repeat;
    background-size: 250px;
}

#how-to-text {
    position: relative;
    bottom: 5%;
    width: 100%;
    pointer-events: none;
    font-weight: 900;
    font-size: large;
    left: 0px;
    right: 0px;
}

.how-to-text-fade {
    -webkit-animation: howto-fadeinout 7s ease-in-out infinite; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: howto-fadeinout 7s ease-in-out infinite; /* Firefox < 16 */
    -ms-animation: howto-fadeinout 7s ease-in-out infinite; /* Internet Explorer */
    -o-animation: howto-fadeinout 7s ease-in-out infinite; /* Opera < 12.1 */
    animation: howto-fadeinout 7s ease-in-out infinite;
}

/* Base Animations */

@keyframes howto-fadeinout {
    0%,100% {
        opacity: 0;
    }

    40%,60% {
        opacity: 1;
    }
}

@keyframes yellowMoveAnimation {
    0% {
        background-position-x: 0px;
    }

    100% {
        background-position-x: 375px;
    }
}

@keyframes redMoveAnimation {
    0% {
        background-position-x: 825px;
    }

    100% {
        background-position-x: 450px;
    }
}

/* Eating How-To */

.paceman-eat-killer {
    background: url("../images/paceman_yellow.png");
    position: absolute;
    
    -webkit-animation: 4s linear forwards eat-kill-move, .5s steps(5, start) infinite alternate yellowMoveAnimation;
    -moz-animation: 4s linear forwards eat-kill-move, .5s steps(5, start) infinite alternate yellowMoveAnimation;
    -ms-animation: 4s linear forwards eat-kill-move, .5s steps(5, start) infinite alternate yellowMoveAnimation;
    -o-animation: 4s linear forwards eat-kill-move, .5s steps(5, start) infinite alternate yellowMoveAnimation;
    animation: 4s linear forwards eat-kill-move, .5s steps(5, start) infinite alternate yellowMoveAnimation;
}

.paceman-eat-victim {
    background: url("../images/paceman_eaten_red.png");
    position: absolute;
    
    -webkit-animation: 3s linear forwards eat-victim-move, .6s steps(5, start) alternate infinite victimMoveAnimation;
    -moz-animation: 3s linear forwards eat-victim-move, .6s steps(5, start) alternate infinite victimMoveAnimation;
    -ms-animation: 3s linear forwards eat-victim-move, .6s steps(5, start) alternate infinite victimMoveAnimation;
    -o-animation: 3s linear forwards eat-victim-move, .6s steps(5, start) alternate infinite victimMoveAnimation;
    animation: 3s linear forwards eat-victim-move, .6s steps(5, start) alternate infinite victimMoveAnimation;
}

.paceman-eat-killed {
    background: url("../images/paceman_eaten_red.png");
    position: absolute;
    
    -webkit-animation: 1.5s steps(10, start) alternate forwards deathAnimation;
    -moz-animation: 1.5s steps(10, start) alternate forwards deathAnimation;
    -ms-animation: 1.5s steps(10, start) alternate forwards deathAnimation;
    -o-animation: 1.5s steps(10, start) alternate forwards deathAnimation;
    animation: 1.5s steps(10, start) alternate forwards deathAnimation;
}

@keyframes victimMoveAnimation {
    0% {
        background-position-x: 825px;
    }

    100% {
        background-position-x: 450px;
    }
}

@keyframes deathAnimation {
    0% {
        background-position-x: 825px;
        transform: translateX(150px);
    }

    100% {
        background-position-x: 75px;
        transform: translateX(150px);
    }
}

@keyframes eat-victim-move {
    0% {
        transform: translateX(-100px);
    }

    100% {
        transform: translateX(150px);
    }
}

@keyframes eat-kill-move {
    0%, 50% {
        transform: translateX(-100px);
    }

    100% {
        transform: translateX(400px);
    }
}

/* Bounce How-To */

.paceman-bounce-left {
    background: url("../images/paceman_yellow.png");
    position: relative;

    -webkit-animation: 6s linear forwards bounce-left-to-center, .5s steps(5, start) infinite alternate yellowMoveAnimation;
    -moz-animation: 6s linear forwards bounce-left-to-center, .5s steps(5, start) infinite alternate yellowMoveAnimation;
    -ms-animation: 6s linear forwards bounce-left-to-center, .5s steps(5, start) infinite alternate yellowMoveAnimation;
    -o-animation: 6s linear forwards bounce-left-to-center, .5s steps(5, start) infinite alternate yellowMoveAnimation;
    animation: 6s linear forwards bounce-left-to-center, .5s steps(5, start) infinite alternate yellowMoveAnimation;
}

.paceman-bounce-right {
    background: url("../images/paceman_eaten_red.png");
    position: relative;

    -webkit-animation: 6s linear forwards bounce-right-to-center, .5s steps(5, start) infinite alternate redMoveAnimation;
    -moz-animation: 6s linear forwards bounce-right-to-center, .5s steps(5, start) infinite alternate redMoveAnimation;
    -ms-animation: 6s linear forwards bounce-right-to-center, .5s steps(5, start) infinite alternate redMoveAnimation;
    -o-animation: 6s linear forwards bounce-right-to-center, .5s steps(5, start) infinite alternate redMoveAnimation;
    animation: 6s linear forwards bounce-right-to-center, .5s steps(5, start) infinite alternate redMoveAnimation;
}

@keyframes bounce-left-to-center {
    0% {
        -webkit-transform: translateX(-100px);
        -moz-transform: translateX(-100px);
        -ms-transform: translateX(-100px);
        -o-transform: translateX(-100px);
        transform: translateX(-100px);
    }

    80% {
        -webkit-transform: translateX(100px);
        -moz-transform: translateX(100px);
        -ms-transform: translateX(100px);
        -o-transform: translateX(100px);
        transform: translate(100px);
    }

    100% {
        -webkit-transform: translateX(-100px);
        -moz-transform: translateX(-100px);
        -ms-transform: translateX(-100px);
        -o-transform: translateX(-100px);
        transform: translateX(-100px);
    }
}

@keyframes bounce-right-to-center {
    0% {
        -webkit-transform: translateX(270px) rotate(180deg);
        -moz-transform: translateX(270px) rotate(180deg);
        -ms-transform: translateX(270px) rotate(180deg);
        -o-transform: translateX(270px) rotate(180deg);
        transform: translateX(270px) rotate(180deg);
    }

    80% {
        -webkit-transform: translateX(90px) rotate(180deg);
        -moz-transform: translateX(90px) rotate(180deg);
        -ms-transform: translateX(90px) rotate(180deg);
        -o-transform: translateX(90px) rotate(180deg);
        transform: translateX(90px) rotate(180deg);
    }

    100% {
        -webkit-transform: translateX(280px) rotate(180deg);
        -moz-transform: translateX(280px) rotate(180deg);
        -ms-transform: translateX(280px) rotate(180deg);
        -o-transform: translateX(280px) rotate(180deg);
        transform: translateX(280px) rotate(180deg);
    }
}