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

.animated.remove_credit {
  @include blackBackgroundMixin;

  #remove_credit-main-container {
    animation-name: remove_credit_main_container_animation;
    animation-delay: var(--animation-delay, 0s);
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    transform-origin: center center;
  }


  #remove_credit_eye_1,
  #remove_credit_eye_2 {
    animation-name: eye_animation;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
  }

  #remove_credit_eye_1 {
    transform-origin: 0 2870px;
  }

  #remove_credit_eye_2 {
    transform-origin: 0 2720px;
  }

  #remove_credit_bag_with_arm,
  #remove_credit_bag_top,
  #remove_credit_arm_1 {
    animation-name: remove_credit_bag_with_arm_1_animation;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
    animation-timing-function: ease-in-out;
    transform-origin: 6365px 3810px;
  }

  #remove_credit_arm_2 {
    animation-name: remove_credit_bag_with_arm_2_animation;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
    animation-timing-function: ease-in-out;
    transform-origin: 5691px 3983px;
  }

  #use-dollar-1,
  #use-dollar-2,
  #use-dollar-3,
  #use-dollar-4 {
    animation-name: remove_credit_dollar_1_animation;
    animation-duration: 0.7s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }

  #use-dollar-2 {
    animation-delay: -0.3;
    animation-duration: 0.6s;
  }

  #use-dollar-3 {
    animation-delay: -0.5;
    animation-duration: 0.65s;
  }

  #use-dollar-4 {
    animation-delay: -0.2;
    animation-duration: 0.6s;
  }

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

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

@keyframes eye_animation {
  0% {
    scale: 1 1;
  }
  90% {
    scale: 1 1;
  }
  95% {
    scale: 1 0;
  }
  100% {
    scale: 1 1;
  }
}

@keyframes remove_credit_bag_with_arm_1_animation {
  100% {
    rotate: 5deg;
  }
}

@keyframes remove_credit_bag_with_arm_2_animation {
  100% {
    rotate: 8deg;
  }
}

@keyframes remove_credit_dollar_1_animation {
  100% {
    translate: -201px 1200px;
  }
}
