/* Animations used in games */

#gameCanvas .game-animator {
    position: absolute;
    width: 100%;
    height: 100%;
    animation-timing-function: linear;
}

#gameCanvas .game-animator.align-left {
    transform: translate3d(0%, 0, 0);
}

#gameCanvas .game-animator.align-right {
    transform: translate3d(-100%, 0, 0);
}

#gameCanvas .game-animator.align-center {
    transform: translate3d(-50%, 0, 0);
}


/* SPRITE PLACEMENT/ANIMATIONS */

#gameCanvas .game-animator.marcus_in {
    width: 17.5%;
    height: 30%;
    animation-name: marcus_in;
    animation-duration: 4166ms;
    animation-fill-mode: forwards;
}

#gameCanvas .game-animator.marcus_jetpack_in {
    width: 20%;
    height: 18%;
    animation-name: marcus_jetpack_in;
    animation-duration: 2666ms;
    animation-fill-mode: forwards;
}

#gameCanvas .game-animator.biplane_in {
    width: 30%;
    height: 19.2%;
    animation-name: biplane_in;
    animation-duration: 2666ms;
    animation-fill-mode: forwards;
}

#gameCanvas .game-animator.marcus_jetpack_out {
    width: 25%;
    height: 21.36%;
    animation-name: marcus_jetpack_out;
    animation-duration: 3834ms;
    animation-fill-mode: forwards;
}

#gameCanvas .game-animator.curtain_out {
    width: 110%;
    height: 70%;
    animation-name: curtain_out;
    animation-duration: 2333ms;
    animation-fill-mode: forwards;
}


/* LETTER/WORD ANIMATIONS */

.game-container .letter.marcus_in_word {
    animation-name: marcus_in_word;
    animation-timing-function: linear;
    animation-duration: 4166ms;
}

.game-container .letter.marcus_jetpack_in_word {
    animation-name: marcus_jetpack_in_word;
    animation-timing-function: linear;
    animation-duration: 2666ms;
}

#gameCanvas .letter.biplane_in_word {
    animation-name: biplane_in_word;
    animation-timing-function: linear;
    animation-duration: 2666ms;
}

#gameCanvas .letter.pop_in_word {
    animation-name: pop_in_word;
    animation-timing-function: cubic-bezier(0.7, 0.37, 0.43, 1.73);
    animation-duration: 999ms;
}

#gameCanvas .letter.slide_in_word {
    animation-name: slide_in_word;
    animation-timing-function: ease-out;
    animation-duration: 999ms;
}

.game-container .letter.marcus_jetpack_out_word {
    animation-name: marcus_jetpack_out_word;
    animation-timing-function: linear;
    animation-duration: 3834ms;
}

#gameCanvas .letter.pop_out_word {
    animation-name: pop_in_word;
    animation-timing-function: cubic-bezier(0.7, 0.37, 0.43, 1.73);
    animation-duration: 999ms;
    animation-direction: reverse;
    animation-fill-mode: forwards;
}

#gameCanvas .letter.slide_out_word {
    animation-name: slide_out_word;
    animation-timing-function: ease-out;
    animation-duration: 1666ms;
    animation-fill-mode: forwards;
}

#gameCanvas .letter.curtain_out_word {
    animation-name: curtain_out_word;
    animation-duration: 2333ms;
    animation-fill-mode: forwards;
}


/* SPRITE ANIMATION KEYFRAMES */

@keyframes marcus_in {
    0% {
        -ms-transform: translate3d(75vh, 0, 0);
        -webkit-transform: translate3d(75vh, 0, 0);
        transform: translate3d(75vh, 0, 0);
    }
    52% {
        -ms-transform: translate3d(-5vh, 0, 0);
        -webkit-transform: translate3d(-5vh, 0, 0);
        transform: translate3d(-5vh, 0, 0);
    }
    68% {
        -ms-transform: translate3d(-5vh, 0, 0);
        -webkit-transform: translate3d(-5vh, 0, 0);
        transform: translate3d(-5vh, 0, 0);
    }
    99% {
        -ms-transform: translate3d(120vh, 0, 0);
        -webkit-transform: translate3d(120vh, 0, 0);
        transform: translate3d(120vh, 0, 0);
    }
    100% {
        -ms-transform: translate3d(120vh, 0, 0);
        -webkit-transform: translate3d(120vh, 0, 0);
        transform: translate3d(120vh, 0, 0);
        display: none;
    }
}

@keyframes marcus_jetpack_in {
    0% {
        -ms-transform: translate3d(95vh, -10vh, 0);
        -webkit-transform: translate3d(95vh, -10vh, 0);
        transform: translate3d(95vh, -10vh, 0);
    }
    99% {
        -ms-transform: translate3d(-95vh, -10vh, 0);
        -webkit-transform: translate3d(-95vh, -10vh, 0);
        transform: translate3d(-95vh, -10vh, 0);
    }
    100% {
        -ms-transform: translate3d(-95vh, -10vh, 0);
        -webkit-transform: translate3d(-95vh, -10vh, 0);
        transform: translate3d(-95vh, -10vh, 0);
        display: none;
    }
}

@keyframes biplane_in {
    0% {
        -ms-transform: translate3d(87vh, 0, 0);
        -webkit-transform: translate3d(87vh, 0, 0);
        transform: translate3d(87vh, 0, 0);
    }
    99% {
        -ms-transform: translate3d(-163vh, 0, 0);
        -webkit-transform: translate3d(-163vh, 0, 0);
        transform: translate3d(-163vh, 0, 0);
    }
    100% {
        -ms-transform: translate3d(-163vh, 0, 0);
        -webkit-transform: translate3d(-163vh, 0, 0);
        transform: translate3d(-163vh, 0, 0);
        display: none;
    }
}

@keyframes marcus_jetpack_out {
    0% {
        -ms-transform: translate3d(-95vh, -10vh, 0);
        -webkit-transform: translate3d(-95vh, -10vh, 0);
        transform: translate3d(-95vh, -10vh, 0);
    }
    47% {
        -ms-transform: translate3d(0vh, -10vh, 0);
        -webkit-transform: translate3d(0vh, -10vh, 0);
        transform: translate3d(0vh, -10vh, 0);
    }
    99% {
        -ms-transform: translate3d(95vh, -20vh, 0) rotate(-30deg);
        -webkit-transform: translate3d(95vh, -20vh, 0) rotate(-30deg);
        transform: translate3d(95vh, -20vh, 0) rotate(-30deg);
    }
    100% {
        -ms-transform: translate3d(95vh, -20vh, 0) rotate(-30deg);
        -webkit-transform: translate3d(95vh, -20vh, 0) rotate(-30deg);
        transform: translate3d(95vh, -20vh, 0) rotate(-30deg);
        display: none;
    }
}

@keyframes curtain_out {
    0% {
        -ms-transform: translate3d(-50%, -135%, 0);
        -webkit-transform: translate3d(-50%, -135%, 0);
        transform: translate3d(-50%, -135%, 0);
    }
    40% {
        -ms-transform: translate3d(-50%, -60%, 0);
        -webkit-transform: translate3d(-50%, -60%, 0);
        transform: translate3d(-50%, -60%, 0);
    }
    60% {
        -ms-transform: translate3d(-50%, -60%, 0);
        -webkit-transform: translate3d(-50%, -60%, 0);
        transform: translate3d(-50%, -60%, 0);
    }
    100% {
        -ms-transform: translate3d(-50%, -135%, 0);
        -webkit-transform: translate3d(-50%, -135%, 0);
        transform: translate3d(-50%, -135%, 0);
    }
}


/* WORD/LETTER ANIMATION KEYFRAMES */

@keyframes marcus_in_word {
    0% {
        -ms-transform: translate3d(80vh, 0, 0);
        -webkit-transform: translate3d(80vh, 0, 0);
        transform: translate3d(80vh, 0, 0);
    }
    52% {
        -ms-transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes marcus_jetpack_in_word {
    0% {
        -ms-transform: translate3d(95vh, 0, 0);
        -webkit-transform: translate3d(95vh, 0, 0);
        transform: translate3d(95vh, 0, 0);
    }
    50% {
        -ms-transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes biplane_in_word {
    0% {
        -ms-transform: translate3d(125vh, 0, 0);
        -webkit-transform: translate3d(125vh, 0, 0);
        transform: translate3d(125vh, 0, 0);
    }
    50% {
        -ms-transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes pop_in_word {
    0% {
        -ms-transform: scale(0);
        -webkit-transform: scale(0);
        transform: scale(0);
        display: none;
    }
    1% {
        -ms-transform: scale(0);
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    100% {
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes slide_in_word {
    0% {
        -ms-transform: translate3d(95vh, 0, 0);
        -webkit-transform: translate3d(95vh, 0, 0);
        transform: translate3d(95vh, 0, 0);
    }
    70% {
        -ms-transform: translate3d(-5vh, 0, 0);
        -webkit-transform: translate3d(-5vh, 0, 0);
        transform: translate3d(-5vh, 0, 0);
    }
    100% {
        -ms-transform: translate3d(0vh, 0, 0);
        -webkit-transform: translate3d(0vh, 0, 0);
        transform: translate3d(0vh, 0, 0);
    }
}

@keyframes marcus_jetpack_out_word {
    37% {
        -ms-transform: translate3d(0vh, 0, 0);
        -webkit-transform: translate3d(0vh, 0, 0);
        transform: translate3d(0vh, 0, 0);
    }
    100% {
        -ms-transform: translate3d(112vh, -10vh, 0) rotate(0deg);
        -webkit-transform: translate3d(112vh, -10vh, 0) rotate(0deg);
        transform: translate3d(112vh, -10vh, 0) rotate(0deg);
    }
}

@keyframes slide_out_word {
    0% {
        -ms-transform: translate3d(0vh, 0, 0);
        -webkit-transform: translate3d(0vh, 0, 0);
        transform: translate3d(0vh, 0, 0);
    }
    30% {
        -ms-transform: translate3d(5vh, 0, 0);
        -webkit-transform: translate3d(5vh, 0, 0);
        transform: translate3d(5vh, 0, 0);
    }
    99% {
        -ms-transform: translate3d(-95vh, 0, 0);
        -webkit-transform: translate3d(-95vh, 0, 0);
        transform: translate3d(-95vh, 0, 0);
    }
    100% {
        -ms-transform: translate3d(-95vh, 0, 0);
        -webkit-transform: translate3d(-95vh, 0, 0);
        transform: translate3d(-95vh, 0, 0);
        display: none;
    }
}

@keyframes curtain_out_word {
    0% {
        -ms-transform: translate3d(0, 0vh, 0);
        -webkit-transform: translate3d(0, 0vh, 0);
        transform: translate3d(0, 0vh, 0);
    }
    49% {
        -ms-transform: translate3d(0, 0vh, 0);
        -webkit-transform: translate3d(0, 0vh, 0);
        transform: translate3d(0, 0vh, 0);
    }
    50% {
        -ms-transform: translate3d(0, -100vh, 0);
        -webkit-transform: translate3d(0, -100vh, 0);
        transform: translate3d(0, -100vh, 0);
    }
    100% {
        -ms-transform: translate3d(0, -100vh, 0);
        -webkit-transform: translate3d(0, -100vh, 0);
        transform: translate3d(0, -100vh, 0);
    }
}