@import './boom';
@import './black-background';

@mixin buyArmyMixin {
  .animated.army {
    @include blackBackgroundMixin;

    #banknotes-container {
      animation-name: banknotes_animation;
      animation-duration: 3s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: 1;
      animation-fill-mode: forwards;
      transform-origin: center center;

      #money {
        animation-name: buy_army_animation;
        animation-duration: 3s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        transform-origin: center center;

        #note_1,
        #note_2 {
          animation-name: note_animation;
          animation-duration: 1s;
          animation-timing-function: ease-in-out;
          animation-iteration-count: infinite;
          animation-direction: alternate;
        }

        #note_1 {
          animation-delay: -0.5s;
        }
      }

      #circle-background {
        animation-name: circle_animation;
        animation-duration: 0.7s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        transform-origin: center center;
      }
    }

    #army-container {
      scale: 0;
      animation-name: army_animation;
      animation-duration: 3s;
      animation-delay: 3s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: 1;
      animation-fill-mode: forwards;
      transform-origin: center center;
    }

    .d-none.use-buy-army {
      display: block;
    }
  }

  @keyframes banknotes_animation {
    0% {
      opacity: 0;
      scale: 1;
    }
    10% {
      opacity: 1;
      scale: 1;
    }
    90% {
      opacity: 1;
      scale: 1;
    }
    100% {
      opacity: 1;
      scale: 0;
    }
  }

  @keyframes army_animation {
    0% {
      opacity: 1;
      scale: 0;
    }
    10% {
      opacity: 1;
      scale: 1;
    }
    50% {
      opacity: 1;
      scale: 1.1;
    }
    90% {
      opacity: 1;
      scale: 1;
    }
    100% {
      opacity: 0;
      scale: 1;
    }
  }

  @keyframes buy_army_animation {
    0% {
      rotate: -10deg;
    }
    100% {
      rotate: 10deg;
    }
  }

  @keyframes note_animation {
    100% {
      translate: 0 200px;
    }
  }

  @keyframes circle_animation {
    100% {
      scale: 0.9;
    }
  }
}
