/* ========================
  Animation Keyframes
======================== */

@keyframes up-fade-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes schoolgirl {
  0% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }

  50% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }

  100% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
}

@keyframes ninja {
  0% {
    -webkit-transform: translate(100px, 100px);
    transform: translate(100px, 100px);
    -webkit-animation-timing-function: cubic-bezier(.17, .67, .55, 1.4);
    animation-timing-function: cubic-bezier(.17, .67, .55, 1.4);
  }

  20% {
    -webkit-transform: translate(0);
    transform: translate(0);
  }

  40% {
    -webkit-transform: translate(0);
    transform: translate(0);
    -webkit-animation-timing-function: cubic-bezier(.41, -.46, 1, .67);
    animation-timing-function: cubic-bezier(.41, -.46, 1, .67);
  }

  60% {
    -webkit-transform: translate(100px, 100px);
    transform: translate(100px, 100px);
  }

  100% {
    -webkit-transform: translate(100px, 100px);
    transform: translate(100px, 100px);
  }
}

@keyframes mules {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  40% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }

  85% {
    -webkit-transform: rotate(-2deg);
    transform: rotate(-2deg);
  }

  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@keyframes shamisen {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  50% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }

  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@keyframes student-pc {
  0% {
    -webkit-transform: translate3d(1200px, 1200px, 1px);
    transform: translate3d(1200px, 1200px, 1px);
  }

  30% {
    -webkit-transform: translate3d(300px, 300px, 1px);
    transform: translate3d(300px, 300px, 1px);
  }

  40% {
    -webkit-transform: translate3d(300px, 300px, 1px);
    transform: translate3d(300px, 300px, 1px);
  }

  100% {
    -webkit-transform: translate3d(-2000px, -2000px, 1px);
    transform: translate3d(-2000px, -2000px, 1px);
  }
}

@keyframes vr {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes animateHeart {
  0% {
    transform: rotate(0deg) scale(0.8);
  }

  5% {
    transform: rotate(0deg) scale(0.9);
  }

  10% {
    transform: rotate(0deg) scale(0.8);
  }

  15% {
    transform: rotate(0deg) scale(1);
  }

  50% {
    transform: rotate(0deg) scale(0.8);
  }

  100% {
    transform: rotate(0deg) scale(0.8);
  }
}

@keyframes animateHeartZoom {
  0% {
    transform: rotate(0deg) scale(1.6);
  }

  5% {
    transform: rotate(0deg) scale(1.8);
  }

  10% {
    transform: rotate(0deg) scale(1.6);
  }

  15% {
    transform: rotate(0deg) scale(2);
  }

  50% {
    transform: rotate(0deg) scale(1.6);
  }

  100% {
    transform: rotate(0deg) scale(1.6);
  }
}

@keyframes pop-up-down {
  0% {
    -webkit-transform: translateY(0vw);
    transform: translateY(0vw);
  }

  12.5% {
    -webkit-transform: translateY(0vw);
    transform: translateY(0vw);
  }

  25% {
    -webkit-transform: translateY(-7vw) rotate(-5deg);
    transform: translateY(-7vw) rotate(-5deg);
  }

  50% {
    -webkit-transform: translateY(-7vw) rotate(5deg);
    transform: translateY(-7vw) rotate(5deg);
  }

  75% {
    -webkit-transform: translateY(-7vw) rotate(-5deg);
    transform: translateY(-7vw) rotate(-5deg);
  }

  87.5% {
    -webkit-transform: translateY(0vw);
    transform: translateY(0vw);
  }

  100% {
    -webkit-transform: translateY(0vw);
    transform: translateY(0vw);
  }
}

/* ========================
  Main Carousel Animations
  ========================= */

@keyframes movebase {
  0% {
    transform: translate3d(0%, 0, 0);
    visibility: visible;
  }

  50% {
    transform: translate3d(-100%, 0, 0);
  }

  100% {
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes movefirst {
  0% {
    transform: translate3d(100%, 0, 0);
  }

  50% {
    transform: translate3d(0%, 0, 0);
  }

  100% {
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes movelast {
  0% {
    transform: translate3d(100%, 0, 0);
  }

  50% {
    transform: translate3d(0%, 0, 0);
  }

  100% {
    transform: translate3d(-100%, 0, 0);
  }
}

/* ========================
Timeline Animations
======================== */

@keyframes fox {
  0% {
    -webkit-transform: translateY(-2vw);
    transform: translateY(-2vw);
  }

  50% {
    -webkit-transform: translateY(1vw);
    transform: translateY(1vw);
  }

  100% {

    -webkit-transform: translateY(-2vw);
    transform: translateY(-2vw);
  }
}

@keyframes frontflip {
  0% {
    -webkit-transform: translateY(0vw) rotate(0deg);
    transform: translateY(0vw) rotate(0deg);
  }

  100% {
    -webkit-transform: translateY(15vw) rotate(360deg);
    transform: translateY(15vw) rotate(360deg);
  }
}

@keyframes backflip {
  0% {
    -webkit-transform: translateY(15vw) rotate(0deg);
    transform: translateY(15vw) rotate(0deg);
  }

  100% {
    -webkit-transform: translateY(0vw) rotate(-360deg);
    transform: translateY(0vw) rotate(-360deg);
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(20px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}