@import './mixins/curved-path';

.animated {
  .broken_safe {
    #hand_1 {
      animation-name: hand_1_animation;
      animation-duration: 2s;
      animation-iteration-count: infinite;
      animation-direction: alternate;
      animation-timing-function: ease-in-out;
      transform-origin: 3931px 2638px;
    }

    #hand_2,
    #safe_1_ {
      animation-name: hand_2_animation;
      animation-duration: 2s;
      animation-iteration-count: infinite;
      animation-direction: alternate;
      animation-timing-function: ease-in-out;
      transform-origin: 4911px 2892px;
    }

    #falling-coins {
      scale: 1 -1;
      rotate: 90deg;
      transform-origin: center center;
    }

    .coin_movable {
      animation-name: Coin1xAxis;
      animation-iteration-count: infinite;
      animation-duration: var(--animation-duration);
      animation-delay: var(--animation-delay);

      .coin_movable_outter {
        animation-name: Coin1yAxis;
        animation-iteration-count: infinite;
        animation-duration: var(--animation-duration);
        animation-delay: var(--animation-delay);
      }
    }
  }
}

@keyframes hand_1_animation {
  100% {
    rotate: -10deg;
  }
}

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

@include curvedPath(
  ((0px, 0px) (3500px, 1200px) (3000px, 1500px) (3500px, 1700px) (3250px, 1850px) (3500px, 1950px)),
  6,
  Coin1
);

