@import './mixins/buy';

.animated {
  .ads {
    #rotating-background {
      animation-name: rotating_background_animation;
      animation-duration: 10s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      transform-origin: 4689px 3553px;
    }

    #lights {
      animation-name: light_animation;
      animation-duration: 1s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      animation-direction: alternate;
      transform-origin: 4689px 3553px;
    }

    #wave_x5F_1,
    #wave_x5F_2,
    #wave_x5F_3 {
      animation-name: wave_animation;
      animation-duration: 2s;
      animation-timing-function: ease-out;
      animation-iteration-count: infinite;
      transform-origin: 1536px 4273px;
    }

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

    #wave_x5F_3 {
      animation-delay: -1s;
    }

    #person,
    #additional-mask {
      animation-name: person_animation;
      animation-duration: 10s;
      animation-timing-function: ease-in-out;
      animation-direction: alternate;
      animation-iteration-count: infinite;
    }

    #buy-main-container {
      translate: 1900px 3000px;
      scale: 0.6;
    }
  }
}

@keyframes rotating_background_animation {
  100% {
    rotate: 360deg;
  }
}

@keyframes light_animation {
  100% {
    scale: 1.3;
  }
}

@keyframes wave_animation {
  100% {
    scale: 3;
    translate: -500px 0;
    opacity: 0;
  }
}

@keyframes person_animation {
  0% {
    translate: 1500px 0;
  }
  100% {
    translate: -250px 0;
  }
}

@include buyMixin;
