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

.animated.add_credit {
  @include blackBackgroundMixin;

  #add-credit-main-container {
    animation-name: add_credit_main_container_animation;
    animation-delay: calc(var(--animation-delay, 0s) + 2.75s);
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }

  .use-bank-building-add-credit {
    scale: 0;
    animation-name: bank_building_animation;
    animation-delay: var(--animation-delay, 0s);
    animation-duration: 0.3s;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(0.84, 1.84, 0.59, 0.72);
    animation-fill-mode: forwards;
    transform-origin: center 5460px;
  }

  #add-credit-hand-and-envelope {
    scale: 0;
    animation-name: hand_and_envelope_animation;
    animation-delay: calc(var(--animation-delay, 0s) + 0.3s);
    animation-duration: var(--animation-duration, 3s);
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    transform-origin: 2000px 4700px;
  }

  #use-add-credit-dollar-sign-and-clock {
    scale: 0;
    animation-name: add_credit_dollar_sign_and_clock_animation;
    animation-delay: var(--animation-delay, 0s);
    animation-duration: var(--animation-duration, 3s);
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    transform-origin: 4400px 2000px;
  }

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

@keyframes add_credit_main_container_animation {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes bank_building_animation {
  0% {
    scale: 0;
  }
  100% {
    scale: 0.8;
  }
}

@keyframes add_credit_dollar_sign_and_clock_animation {
  0% {
    scale: 0;
  }
  5% {
    scale: 0.8;
  }
  55% {
    scale: 1;
  }
  100% {
    scale: 0.8;
  }
}



@keyframes hand_and_envelope_animation {
  0% {
    scale: 0;
  }
  10% {
    scale: 1;
  }
  40% {
    scale: 1;
    rotate: -5deg;
  }
  70% {
    scale: 1;
    rotate: 0deg;
  }
  100% {
    scale: 1;
    rotate: -5deg;
  }
}

