@import '../../scss/cells/mixins/black-background';

.animated.army_defence {
  @include blackBackgroundMixin;

  #main-container {
    animation-name: main_earthquake;
    animation-delay: calc(var(--animation-delay, 3s) + (var(--animation-duration, 5s) - 1s) / 20);
    animation-duration: 0.2s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    transform-origin: center center;
  }

  #army_defence-container {
    animation-name: army_animation;
    animation-delay: var(--animation-delay, 3s);
    animation-duration: calc(var(--animation-duration, 5s) - 1s);
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    opacity: 0;
    scale: 10;
    transform-origin: center center;
  }

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

@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_animation {
  0% {
    scale: 10;
    opacity: 0;
  }
  5% {
    scale: 1;
    opacity: 1;
  }
  95% {
    scale: 1;
    opacity: 1;
  }
  100% {
    scale: 1.1;
    opacity: 0;
  }
}
