@import './mixins/black-background';
@import './mixins/player_lock';

.animated {
  #smoke_x5F_1,
  #smoke_x5F_2 {
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  #smoke_x5F_2 {
    animation-name: decided_to_stop_the_game_smoke_2;
  }
  #smoke_x5F_1 {
    animation-name: decided_to_stop_the_game_smoke_1;
  }
  #pupil_x5F_1,
  #pupil_x5F_2 {
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-name: decided_to_stop_the_game_blinking_eyes;
  }
}

@include playerLockMixin;

@keyframes decided_to_stop_the_game_smoke_2 {
  0% {
    transform: translate(2501px, 13px) scale(4.599);
  }
  50% {
    transform: translate(2501px, -2453px) scale(4.599);
  }
  51% {
    transform: translate(2501px, -2453px) scale(0);
  }
  52% {
    transform: translate(2501px, 2470px) scale(0);
  }
  53% {
    transform: translate(2501px, 2470px) scale(4.599);
  }
  100% {
    transform: translate(2501px, 13px) scale(4.599);
  }
}

@keyframes decided_to_stop_the_game_smoke_1 {
  0% {
    transform: translate(2501px, 2470px) scale(4.599);
  }
  97% {
    transform: translate(2501px, -2453px) scale(4.599);
  }
  98% {
    transform: translate(2501px, -2453px) scale(0);
  }
  99% {
    transform: translate(2501px, 2470px) scale(0);
  }
  100% {
    transform: translate(2501px, 2470px) scale(4.599);
  }
}

@keyframes decided_to_stop_the_game_blinking_eyes {
  0% {
    opacity: 1;
  }
  95.9% {
    opacity: 1;
  }
  96% {
    opacity: 0;
  }
  99.9% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
