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

.animated.remove_money {
  @include blackBackgroundMixin;

  use.use-remove-money.d-none {
    display: block;
  }

  #remove-money-container {
    scale: 0;
    animation-name: remove_money_container_animation;
    animation-timing-function: linear;
    animation-delay: var(--animation-delay, 0s);
    animation-duration: var(--animation-duration, 5s);
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    transform-origin: center 7000px;
  }

  .use-money-with-wings-1 {
    scale: 0;
    translate: 0px 1700px;
    animation-name: use_money_with_wings_1_animation;
    animation-timing-function: linear;
    animation-delay: calc(var(--animation-delay, 0s) + 0.9s);
    animation-duration: calc(var(--animation-duration, 5s) - 2s);
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    transform-origin: center center;
  }

  .use-money-with-wings-2 {
    scale: 0;
    translate: 0px 1700px;
    animation-name: use_money_with_wings_2_animation;
    animation-timing-function: linear;
    animation-delay: calc(var(--animation-delay, 0s) + 1.5s);
    animation-duration: calc(var(--animation-duration, 5s) - 2s);
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    transform-origin: center center;
  }

  .use-money-with-wings-3 {
    scale: 0;
    translate: 0px 1700px;
    animation-name: use_money_with_wings_3_animation;
    animation-timing-function: linear;
    animation-delay: calc(var(--animation-delay, 0s) + 0.5s);
    animation-duration: calc(var(--animation-duration, 5s) - 2s);
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    transform-origin: center center;
  }

  .use-money-with-wings-4 {
    scale: 0;
    translate: 0px 1700px;
    animation-name: use_money_with_wings_4_animation;
    animation-timing-function: linear;
    animation-delay: calc(var(--animation-delay, 0s) + 2s);
    animation-duration: calc(var(--animation-duration, 5s) - 3s);
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    transform-origin: center center;
  }
}

@keyframes remove_money_container_animation {
  0% {
    scale: 0;
  }
  5% {
    scale: 1;
  }
  95% {
    scale: 1;
  }
  100% {
    scale: 0;
  }
}

@keyframes use_money_with_wings_1_animation {
  0% {
    scale: 0;
    rotate: -30deg;
    translate: -500px 1700px;
  }
  5% {
    scale: 0.5;
    rotate: -35deg;
    translate: -500px 1700px;
  }
  25% {
    scale: 0.5;
    rotate: -50deg;
    translate: -2000px -500px;
  }
  50% {
    scale: 0.5;
    rotate: -60deg;
    translate: -3000px -2300px;
  }
  75% {
    scale: 0.5;
    rotate: -70deg;
    translate: -4000px -4000px;
  }
  95% {
    scale: 0.5;
    rotate: -80deg;
    translate: -5000px -5000px;
  }
  100% {
    scale: 0;
    rotate: -80deg;
    translate: -5000px -5000px;
  }
}

@keyframes use_money_with_wings_2_animation {
  0% {
    scale: 0;
    rotate: -35deg;
    translate: 0px 1700px;
  }
  5% {
    scale: 0.5;
    rotate: -35deg;
    translate: 0px 1700px;
  }
  25% {
    scale: 0.5;
    rotate: -25deg;
    translate: -500px -500px;
  }
  50% {
    scale: 0.5;
    rotate: -15deg;
    translate: -700px -2300px;
  }
  75% {
    scale: 0.5;
    rotate: 0deg;
    translate: -800px -4000px;
  }
  95% {
    scale: 0.5;
    rotate: 0deg;
    translate: -900px -5000px;
  }
  100% {
    scale: 0;
    rotate: -35deg;
    translate: -100px -5000px;
  }
}

@keyframes use_money_with_wings_3_animation {
  0% {
    scale: 0;
    rotate: -15deg;
    translate: 0px 1700px;
  }
  5% {
    scale: 0.5;
    rotate: 0deg;
    translate: 0px 1700px;
  }
  25% {
    scale: 0.5;
    rotate: 15deg;
    translate: 1000px -300px;
  }
  50% {
    scale: 0.5;
    rotate: 45deg;
    translate: 2700px -2300px;
  }
  75% {
    scale: 0.5;
    translate: 5000px -4000px;
  }
  95% {
    scale: 0.5;
    translate: 6000px -5000px;
  }
  100% {
    scale: 0;
    translate: 4000px -5000px;
  }
}

@keyframes use_money_with_wings_4_animation {
  0% {
    scale: 0;
    rotate: 5deg;
    translate: 0px 1700px;
  }
  5% {
    scale: 0.5;
    rotate: 5deg;
    translate: 0px 1700px;
  }
  25% {
    scale: 0.5;
    rotate: 15deg;
    translate: 1000px 500px;
  }
  50% {
    scale: 0.5;
    rotate: 25deg;
    translate: 2100px -500px;
  }
  75% {
    scale: 0.5;
    rotate: 35deg;
    translate: 3200px -1000px;
  }
  95% {
    scale: 0.5;
    rotate: 50deg;
    translate: 4500px -1500px;
  }
  100% {
    scale: 0;
    translate: 4500px -1500px;
  }
}