.animated {
  .player_lock_drugs_plantation {
    #main {
      animation-name: main_animation;
      animation-duration: 2s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      animation-direction: alternate;
    }

    #cigarette {
      animation-name: fingerAnimation;
      animation-duration: 8s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      transform-origin: 5008px 3064px;
    }

    #hand {
      animation-name: handAnimation;
      animation-duration: 8s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      transform-origin: 4030px 4079px;
    }

    #fire {
      animation-name: fireAnimation;
      animation-duration: 8s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }

    // .use-player_lock,
    // .use-boom {
    //   translate: -910px 140px;
    // }
  }
}

@mixin animationKeyframes($animation-name, $deg) {
  @keyframes #{$animation-name} {
    0% {
      rotate: 0deg;
    }
    20% {
      rotate: 0deg;
    }
    30% {
      rotate: $deg;
    }
    45% {
      rotate: $deg;
    }
    50% {
      rotate: 0deg;
    }
    100% {
      rotate: 0deg;
    }
  }
}

@include animationKeyframes(handAnimation, -30deg);
@include animationKeyframes(fingerAnimation, 15deg);

@keyframes main_animation {
  100% {
    translate: 0 300px;
  }
}

@keyframes fireAnimation {
  0% {
    fill: #ff0000;
  }
  20% {
    fill: #ff0000;
  }
  30% {
    fill: #ff0000;
  }
  33% {
    fill: #ffa700;
  }
  36% {
    fill: #ff0000;
  }
  39% {
    fill: #ffa700;
  }
  42% {
    fill: #ff0000;
  }
  45% {
    fill: #ffa700;
  }
  50% {
    fill: #ff0000;
  }
  100% {
    fill: #ff0000;
  }
}

@keyframes mouthAnimation {
  0% {
    scale: 0.5 1;
  }
  30% {
    scale: 0.5 1;
  }
  32% {
    scale: 1 1;
  }
  45% {
    scale: 1 1;
  }
  47% {
    scale: 0.5 1;
  }
  100% {
    scale: 0.5 1;
  }
}
