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

.animated.buy {
  @include blackBackgroundMixin;

  #buy-main-container {
    animation-name: buy_appearing_animation;
    animation-timing-function: linear;
    animation-delay: var(--animation-delay, 0);
    animation-duration: var(--animation-duration, 5s);
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
  }

  #buy_hand_and_hand {
    animation-name: hand_and_hand_animation;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-delay: var(--animation-delay, 0);
    animation-duration: 1s;
    animation-direction: alternate;
  }

  #buy_hand_1 {
    animation-name: hand_1_animation;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-delay: var(--animation-delay, 0);
    animation-duration: 1s;
    animation-direction: alternate;
    transform-origin: -2829px 5983px;
  }

  #buy_hand_2 {
    animation-name: hand_2_animation;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-delay: var(--animation-delay, 0);
    animation-duration: 1s;
    animation-direction: alternate;
    transform-origin: 11067px 5241px;
  }

  #buy_message_1 {
    animation-name: message_1_animation;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-delay: var(--animation-delay, 0);
    animation-duration: var(--animation-duration, 5s);
    animation-direction: alternate;
    animation-fill-mode: forwards;
  }

  #buy_message_2 {
    animation-name: message_2_animation;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-delay: var(--animation-delay, 0);
    animation-duration: var(--animation-duration, 5s);
    animation-direction: alternate;
    animation-fill-mode: forwards;
  }

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

@keyframes buy_appearing_animation {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes hand_and_hand_animation {
  100% {
    translate: 0 600px;
  }
}

@keyframes hand_1_animation {
  100% {
    rotate: 6deg;
  }
}

@keyframes hand_2_animation {
  100% {
    rotate: -6deg;
  }
}

@keyframes message_1_animation {
  0% {
    translate: -10000px 0px;
  }
  5% {
    translate: 0px 50px;
  }
  10% {
    translate: 0px -50px;
  }
  15% {
    translate: 0px 50px;
  }
  20% {
    translate: 0px -50px;
  }
  25% {
    translate: 0px 50px;
  }
  30% {
    translate: 0px -50px;
  }
  35% {
    translate: 0px 50px;
  }
  40% {
    translate: 0px -50px;
  }
  45% {
    translate: 0px 50px;
  }
  50% {
    translate: 0px -50px;
  }
  55% {
    translate: 0px 50px;
  }
  60% {
    translate: 0px -50px;
  }
  65% {
    translate: 0px 50px;
  }
  70% {
    translate: 0px -50px;
  }
  75% {
    translate: 0px 50px;
  }
  80% {
    translate: 0px -50px;
  }
  85% {
    translate: 0px 50px;
  }
  95% {
    translate: 10000px 0px;
  }
  100% {
    translate: 10000px 0px;
  }
}

@keyframes message_2_animation {
  0% {
    translate: 20000px 0px;
  }
  5% {
    translate: 0px -50px;
  }
  10% {
    translate: 0px 50px;
  }
  15% {
    translate: 0px -50px;
  }
  20% {
    translate: 0px 50px;
  }
  25% {
    translate: 0px -50px;
  }
  30% {
    translate: 0px 50px;
  }
  35% {
    translate: 0px -50px;
  }
  40% {
    translate: 0px 50px;
  }
  45% {
    translate: 0px -50px;
  }
  50% {
    translate: 0px 50px;
  }
  55% {
    translate: 0px -50px;
  }
  60% {
    translate: 0px 50px;
  }
  65% {
    translate: 0px -50px;
  }
  70% {
    translate: 0px 50px;
  }
  75% {
    translate: 0px -50px;
  }
  80% {
    translate: 0px 50px;
  }
  85% {
    translate: 0px -50px;
  }
  95% {
    translate: -10000px 0px;
  }
  100% {
    translate: -10000px 0px;
  }
}
