@import './black-background';

// add_money;
// 0% - closed wallet;
// 0% - 5%   - appearing wallet;
// 10% - 25%  - moving wallet to the right bottom;
// 28% - 30% - opening wallet lock;
// 30% - 34% - opening wallet;
// 35% - 37% - pre closing wallet lock;
// 45% - 50% - appearing money;
// 55% - 70% - putting money to the wallet;
// 64% - 70% - moving wallet down a little because of put money in;
// 75% - 80% - fade out money;
// 78% - 80% - opening wallet lock;
// 80% - 84% - closing wallet;
// 84% - 86% - closing wallet lock;
// 90% - 95% - moving wallet to the center again;
// 97% - 100% - disappear wallet again;

@mixin addMoneyMixin {
  .animated.add_money {
    @include blackBackgroundMixin;

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

    #background_circle {
      scale: 0;
      animation-name: background_circle_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;
      transform-origin: center center;
    }

    #add_money_wallet {
      scale: 0;
      animation-name: main_money_wallet_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;
      transform-origin: 5500px 5300px;
    }

    #part_1_top,
    #part_1_bottom {
      animation-name: part_1_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;
      transform-origin: 4016px 0px;
    }

    #part_2_top,
    #part_2_bottom {
      animation-name: part_2_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;
    }

    #part_1_front {
      display: block;
      animation-name: part_1_front_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;
      transform-origin: 4016px 0px;
    }

    .add_money_dollar {
      animation-name: add_money_animation;
      animation-timing-function: linear;
      animation-delay: calc(var(--animation-delay, 0s) + var(--animation-delay-money, 0s));
      animation-duration: var(--animation-duration, 5s);
      animation-fill-mode: forwards;
      animation-iteration-count: 1;
    }

    #wallet_lock {
      animation-name: wallet_lock_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;
      transform-origin: 7130px 0px;
    }
  }

  @keyframes background_circle_animation {
    0% {
      scale: 0;
    }
    7% {
      scale: 1.2;
    }
    10% {
      scale: 0.8;
    }
    25% {
      scale: 1;
    }
    50% {
      scale: 0.9;
    }
    75% {
      scale: 1.1;
    }
    90% {
      scale: 0.7;
    }
    95% {
      scale: 1.2;
    }
    100% {
      scale: 0;
    }
  }

  @keyframes main_money_wallet_animation {
    0% {
      scale: 0;
      rotate: -40deg;
      translate: -1300px -1300px;
    }
    5% {
      scale: 1;
      rotate: 0deg;
      translate: -1300px -1300px;
    }
    10% {
      scale: 1;
      rotate: 0deg;
      translate: -1300px -1300px;
    }
    25% {
      scale: 0.9;
      rotate: -25deg;
      translate: 500px -700px;
    }
    64% {
      scale: 0.9;
      rotate: -25deg;
      translate: 500px -700px;
    }
    67% {
      scale: 0.9;
      rotate: -25deg;
      translate: 600px -500px;
    }
    70% {
      scale: 0.9;
      rotate: -25deg;
      translate: 500px -700px;
    }
    90% {
      scale: 0.9;
      rotate: -25deg;
      translate: 500px -700px;
    }
    95% {
      scale: 1;
      rotate: 0deg;
      translate: -1300px -1300px;
    }
    97% {
      scale: 1;
      rotate: 0deg;
      translate: -1300px -1300px;
    }
    100% {
      scale: 0;
      rotate: 0deg;
      translate: -1300px -1300px;
    }
  }

  @keyframes part_1_animation {
    0% {
      scale: 0 1;
    }
    32% {
      scale: 0 1;
    }
    34% {
      scale: 1 1;
    }
    80% {
      scale: 1 1;
    }
    82% {
      scale: 0 1;
    }
    100% {
      scale: 0 1;
    }
  }

  @keyframes part_2_animation {
    0% {
      opacity: 0;
    }
    30% {
      opacity: 0;
    }
    32% {
      opacity: 1;
    }
    82% {
      opacity: 1;
    }
    84% {
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }

  @keyframes part_1_front_animation {
    0% {
      scale: 1 1;
    }
    30% {
      scale: 1 1;
    }
    32% {
      scale: 0 1;
    }
    82% {
      scale: 0 1;
    }
    84% {
      scale: 1 1;
    }
    100% {
      scale: 1 1;
    }
  }

  @keyframes wallet_lock_animation {
    0% {
      scale: 1 1;
    }
    28% {
      scale: 1 1;
    }
    30% {
      scale: 0.5 1;
    }
    35% {
      scale: 0.5 1;
    }
    37% {
      scale: 0.8 1;
    }
    78% {
      scale: 0.8 1;
    }
    80% {
      scale: 0.5 1;
    }
    84% {
      scale: 0.5 1;
    }
    86% {
      scale: 1 1;
    }
    100% {
      scale: 1 1;
    }
  }

  @keyframes add_money_animation {
    0% {
      scale: 0;
      translate: 0 -2000px;
      opacity: 1;
    }
    45% {
      scale: 0;
      translate: 0 -2000px;
      opacity: 1;
    }
    50% {
      scale: 1;
      translate: 0 -2000px;
      opacity: 1;
    }
    55% {
      scale: 1;
      translate: 0 -2000px;
      opacity: 1;
    }
    65% {
      scale: 1;
      translate: 0px 0px;
      opacity: 1;
    }
    70% {
      scale: 1;
      translate: 0px 0px;
      opacity: 1;
    }
    75% {
      scale: 1;
      translate: 0px 0px;
      opacity: 1;
    }
    80% {
      scale: 1;
      translate: 0px 0px;
      opacity: 0;
    }
    100% {
      scale: 1;
      translate: 0px 0px;
      opacity: 0;
    }
  }
}
