@import './mixins/run';

$animation-duration: 0.5s;

.animated {
  .player_lock_103 {
    @include runMixin($animation-duration);

    #hand {
      animation-name: hand_animation;
      animation-duration: 5s;
      animation-direction: alternate;
      animation-iteration-count: infinite;
    }

    #hand_shadow {
      animation-name: hand_shadow_animation;
      animation-duration: 5s;
      animation-direction: alternate;
      animation-iteration-count: infinite;
      transform-origin: 4000px 6000px;
    }

    #person_dialog {
      animation-name: person_dialog_animation;
      animation-duration: 6s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      transform-origin: 4510px 5600px;
    }

    #pupils {
      animation-name: pupils_animation;
      animation-duration: 4s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
    }
  }
}

@keyframes hand_animation {
  0% {
    translate: -500px -400px;
    animation-timing-function: ease-in;
  }
  50% {
    translate: -100px -200px;
    animation-timing-function: ease-out;
  }
  100% {
    translate: 0px 0px;
    animation-timing-function: ease-in;
  }
}

@keyframes hand_shadow_animation {
  0% {
    translate: -500px 0px;
    scale: 0.8;
    animation-timing-function: ease-in;
  }
  50% {
    translate: -100px 0px;
    scale: 0.9;
    animation-timing-function: ease-out;
  }
  100% {
    translate: 0px 0px;
    scale: 1;
    animation-timing-function: ease-in;
  }
}

@keyframes person_dialog_animation {
  0% {
    scale: 0;
    opacity: 1;
  }
  65% {
    scale: 0;
    opacity: 1;
  }
  70% {
    scale: 0.9;
    opacity: 1;
  }
  90% {
    scale: 1;
    opacity: 1;
  }
  95% {
    scale: 1.3;
    opacity: 0;
  }
  100% {
    scale: 0;
    opacity: 0;
  }
}

@keyframes pupils_animation {
  0% {
    translate: 0px 0px;
  }
  50% {
    translate: 0px 0px;
  }
  55% {
    translate: -50px -30px;
  }
  80% {
    translate: -50px -30px;
  }
  85% {
    translate: 0px 0px;
  }
  100% {
    translate: 0px 0px;
  }
}
