@import './boom';

$animation-army-background-delay: 3s;
$army-appearing-delay-after-background: 0.5s;
$army-appearing-duration: 3s;

@mixin armyMixin {
  .animated.army {
    #main-container {
      animation-name: main_earthquake;
      animation-delay: $animation-army-background-delay + $army-appearing-delay-after-background +
        $army-appearing-duration / 20;
      animation-duration: 0.2s;
      animation-timing-function: linear;
      animation-iteration-count: 1;
      transform-origin: center center;
    }

    .army-background {
      display: block;
      fill: black;
      opacity: 0;
      animation-name: army_background_animation;
      animation-delay: $animation-army-background-delay;
      animation-duration: $army-appearing-duration + 1.5s;
      animation-timing-function: linear;
      animation-iteration-count: 1;
    }

    #army-container {
      display: block;
      animation-name: army_animation;
      animation-delay: $animation-army-background-delay + $army-appearing-delay-after-background;
      animation-duration: $army-appearing-duration;
      animation-timing-function: linear;
      animation-iteration-count: 1;
      animation-fill-mode: forwards;
      opacity: 0;
      scale: 10;
      transform-origin: center center;
    }

    @include boomMixin;

    .boom line {
      animation-delay: $animation-army-background-delay + $army-appearing-delay-after-background +
        $army-appearing-duration;
    }
  }

  @include boomAnimationMixin;

  @keyframes main_earthquake {
    0% {
      transform: scale(0.9);
    }
    40% {
      transform: scale(1.1);
    }
    65% {
      transform: scale(0.95);
    }
    80% {
      transform: scale(1.05);
    }
    90% {
      transform: scale(0.98);
    }
    96% {
      transform: scale(1.02);
    }
    99% {
      transform: scale(0.99);
    }
    100% {
      transform: scale(1);
    }
  }

  @keyframes army_background_animation {
    0% {
      opacity: 0;
    }
    5% {
      opacity: 0.5;
    }
    95% {
      opacity: 0.5;
    }
    100% {
      opacity: 0;
    }
  }

  @keyframes army_animation {
    0% {
      scale: 10;
      opacity: 0;
    }
    5% {
      scale: 1;
      opacity: 1;
    }
    95% {
      scale: 1;
      opacity: 1;
    }
    100% {
      scale: 1.1;
      opacity: 0;
    }
  }
}
