.mru {
    animation-name: move-right-up;
    animation-duration: 1000ms;
    animation-play-state: paused;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
@keyframes move-right-up {
    0% {
        transform: translate(0px, 0px);
    }
    25% {
        transform: translate(32px, -25px);
    }
    50% {
        transform: translate(65px, -43px);
    }
    75% {
        transform: translate(98px, -25px);
    }
    100% {
        transform: translate(130px, 0px);
    }
}
.mrd {
    animation-name: move-right-down;
    animation-duration: 1000ms;
    animation-play-state: paused;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
@keyframes move-right-down {
    0% {
        transform: translate(0px, 0px);
    }
    25% {
        transform: translate(32px, 25px);
    }
    50% {
        transform: translate(65px, 43px);
    }
    75% {
        transform: translate(98px, 25px);
    }
    100% {
        transform: translate(130px, 0px);
    }
}

.mfru {
    animation-name: move-far-right-up;
    animation-duration: 1000ms;
    animation-play-state: paused;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
@keyframes move-far-right-up {
    0% {
        transform: translate(0px, 0px);
    }
    25% {
        transform: translate(64px, -50px);
    }
    50% {
        transform: translate(130px, -100px);
    }
    75% {
        transform: translate(196px, -50px);
    }
    100% {
        transform: translate(260px, 0px);
    }
}
.mfrd {
    animation-name: move-far-right-down;
    animation-duration: 1000ms;
    animation-play-state: paused;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
@keyframes move-far-right-down {
    0% {
        transform: translate(0px, 0px);
    }
    25% {
        transform: translate(64px, 50px);
    }
    50% {
        transform: translate(130px, 100px);
    }
    75% {
        transform: translate(196px, 50px);
    }
    100% {
        transform: translate(260px, 0px);
    }
}

.mlu {
    animation-name: move-left-up;
    animation-duration: 1000ms;
    animation-play-state: paused;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
@keyframes move-left-up {
    0% {
        transform: translate(0px, 0px);
    }
    25% {
        transform: translate(-32px, -25px);
    }
    50% {
        transform: translate(-65px, -43px);
    }
    75% {
        transform: translate(-98px, -25px);
    }
    100% {
        transform: translate(-130px, 0px);
    }
}
.mld {
    animation-name: move-left-down;
    animation-duration: 1000ms;
    animation-play-state: paused;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
@keyframes move-left-down {
    0% {
        transform: translate(0px, 0px);
    }
    25% {
        transform: translate(-32px, 25px);
    }
    50% {
        transform: translate(-65px, 43px);
    }
    75% {
        transform: translate(-98px, 25px);
    }
    100% {
        transform: translate(-130px, 0px);
    }
}

.mflu {
    animation-name: move-far-left-up;
    animation-duration: 1000ms;
    animation-play-state: paused;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
@keyframes move-far-left-up {
    0% {
        transform: translate(0px, 0px);
    }
    25% {
        transform: translate(-64px, -50px);
    }
    50% {
        transform: translate(-130px, -100px);
    }
    75% {
        transform: translate(-196px, -50px);
    }
    100% {
        transform: translate(-260px, 0px);
    }
}
.mfld {
    animation-name: move-far-left-down;
    animation-duration: 1000ms;
    animation-play-state: paused;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
@keyframes move-far-left-down {
    0% {
        transform: translate(0px, 0px);
    }
    25% {
        transform: translate(-64px, 50px);
    }
    50% {
        transform: translate(-130px, 100px);
    }
    75% {
        transform: translate(-196px, 50px);
    }
    100% {
        transform: translate(-260px, 0px);
    }
}

/* cup move up and down */
.mu {
    animation-name: move-up;
    animation-duration: 1000ms;
    animation-play-state: paused;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
@keyframes move-up {
    0% {
        transform: translate(0px, 0px);
    }
    100% {
        transform: translate(0px, -100px);
    }
}
.md {
    animation-name: move-down;
    animation-duration: 1000ms;
    animation-play-state: paused;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
@keyframes move-down {
    0% {
        transform: translate(0px, -100px);
    }
    100% {
        transform: translate(0px, 0px);
    }
}

/* move coin to pos[0,1,2] animation */
.mt0 {
    transform: translate(-137px, 130px);
}
.mt1 {
    transform: translate(0px, 130px);
}
.mt2 {
    transform: translate(137px, 130px);
}
/* fade out the coin */
.fdc {
    opacity: 0%;
}