@import './mixins/buy';

.animated {
  .war_factory {
    #factory {
      animation-duration: 10s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      animation-name: war_factory_animation;
      transform-origin: bottom center;
    }

    #containers_x5F_1 {
      display: block;
      transform: translate(100%);
      animation-delay: 2.5s;
    }

    #containers,
    #containers_x5F_1 {
      animation-duration: 5s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      animation-name: container_animation;
    }

    #buy-main-container {
      translate: 500px 2000px;
      scale: 0.7;
    }
  }
}

@keyframes war_factory_animation {
  0% {
    transform: translate(-250px);
  }
  50% {
    transform: translate(170px);
  }
  100% {
    transform: translate(-250px);
  }
}

@keyframes container_animation {
  0% {
    transform: translate(100%);
    opacity: 1;
  }
  97% {
    transform: translate(-100%);
    opacity: 1;
  }
  98% {
    transform: translate(-100%);
    opacity: 0;
  }
  99% {
    transform: translate(100%);
    opacity: 0;
  }
  100% {
    transform: translate(100%);
    opacity: 1;
  }
}

@include buyMixin;
