@import './mixins/add_money';

.animated {
  #person_1_,
  #arm2-container {
    animation-name: person_animation;
    animation-duration: 4s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    transform-origin: 1317px 1995px;
  }

  #arm_1 {
    animation-name: arm_animation;
    animation-duration: 4s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    transform-origin: 3427px 4425px;
  }

  #arm_2 {
    animation-name: arm_animation;
    animation-duration: 4s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    transform-origin: 3811px 4268px;
  }

  #leg {
    animation-name: leg_animation;
    animation-duration: 4s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    transform-origin: 3325px 5204px;
  }

  #eyes {
    animation-name: eyes_animation;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    transform-origin: 3793px 3665px;
  }

  #head {
    animation-name: head_animation;
    animation-duration: 0.2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    transform-origin: 3793px 3665px;
  }
}

@keyframes person_animation {
  0% {
    rotate: 0deg;
  }
  5% {
    rotate: 0deg;
  }

  10% {
    rotate: -5deg;
  }
  15% {
    rotate: -5deg;
  }
  20% {
    rotate: -5deg;
  }

  25% {
    rotate: -10deg;
  }
  30% {
    rotate: -10deg;
  }
  35% {
    rotate: -10deg;
  }

  40% {
    rotate: -15deg;
  }
  45% {
    rotate: -15deg;
  }
  50% {
    rotate: -15deg;
  }

  55% {
    rotate: -20deg;
  }
  60% {
    rotate: -20deg;
  }
  65% {
    rotate: -20deg;
  }

  70% {
    rotate: -25deg;
  }
  75% {
    rotate: -25deg;
  }
  80% {
    rotate: -25deg;
  }

  100% {
    rotate: 0deg;
  }
}

@keyframes arm_animation {
  0% {
    rotate: -15deg;
  }
  5% {
    rotate: -15deg;
  }

  10% {
    rotate: 0deg;
  }
  15% {
    rotate: 0deg;
  }
  20% {
    rotate: -15deg;
  }

  25% {
    rotate: 0deg;
  }
  30% {
    rotate: 0deg;
  }
  35% {
    rotate: -15deg;
  }

  40% {
    rotate: 0deg;
  }
  45% {
    rotate: 0deg;
  }
  50% {
    rotate: -15deg;
  }

  55% {
    rotate: 0deg;
  }
  60% {
    rotate: 0deg;
  }
  65% {
    rotate: -15deg;
  }

  70% {
    rotate: 0deg;
  }
  75% {
    rotate: 0deg;
  }
  80% {
    rotate: -15deg;
  }

  100% {
    rotate: -15deg;
  }
}

@keyframes leg_animation {
  0% {
    rotate: 0deg;
  }
  5% {
    rotate: 0deg;
  }

  10% {
    rotate: 15deg;
  }
  15% {
    rotate: 0deg;
  }
  20% {
    rotate: 0deg;
  }

  25% {
    rotate: 15deg;
  }
  30% {
    rotate: 0deg;
  }
  35% {
    rotate: 0deg;
  }

  40% {
    rotate: 15deg;
  }
  45% {
    rotate: 0deg;
  }
  50% {
    rotate: 0deg;
  }

  55% {
    rotate: 15deg;
  }
  60% {
    rotate: 0deg;
  }
  65% {
    rotate: 0deg;
  }

  70% {
    rotate: 15deg;
  }
  75% {
    rotate: 0deg;
  }
  80% {
    rotate: 0deg;
  }

  100% {
    rotate: 0deg;
  }
}

@keyframes eyes_animation {
  0% {
    scale: 1 1;
  }
  10% {
    scale: 1 1;
  }
  15% {
    scale: 1 0;
  }
  20% {
    scale: 1 1;
  }

  100% {
    scale: 1 1;
  }
}

@keyframes head_animation {
  100% {
    translate: 0 50px;
  }
}

@include addMoneyMixin;
