@import './mixins/curved-path';
@import './mixins/small-rotating-blick';

.animated {
  .three_kg_gold_treasure_found {
    #leg_1 #leg_1_movable {
      animation-name: leg_1_animation;
      animation-duration: 2s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      animation-direction: alternate;
      transform-origin: 1781px 3657px;
    }

    #leg_2 #leg_2_movable {
      animation-name: leg_2_animation;
      animation-duration: 2s;
      animation-delay: 0.5s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      animation-direction: alternate;
      transform-origin: 3520px 5074px;
    }

    #coin_1_movable_1_ {
      animation-name: Coin1xAxis;
      animation-duration: 1s;
      animation-iteration-count: infinite;

      #outter_container_1_ {
        animation-name: Coin1yAxis;
        animation-duration: 1s;
        animation-iteration-count: infinite;
      }
    }

    #coin_2_movable_1_ {
      animation-name: Coin2xAxis;
      animation-duration: 1s;
      animation-delay: 0.3s;
      animation-iteration-count: infinite;

      #outter_container_2_ {
        animation-name: Coin2yAxis;
        animation-duration: 1s;
        animation-delay: 0.3s;
        animation-iteration-count: infinite;
      }
    }

    #coin_3_movable {
      animation-name: Coin3xAxis;
      animation-duration: 1.1s;
      animation-delay: 2.1s;
      animation-iteration-count: infinite;

      #outter_container {
        animation-name: Coin3yAxis;
        animation-duration: 1.1s;
        animation-delay: 2.1s;
        animation-iteration-count: infinite;
      }
    }

    @include smallRotatingBlickAnimationStylesMixin;

    use.d-none.use-small-blick {
      display: block;
    }
  }
}

@keyframes leg_1_animation {
  0% {
    rotate: 0deg;
  }
  100% {
    rotate: 15deg;
  }
}

@keyframes leg_2_animation {
  0% {
    rotate: 0deg;
  }
  100% {
    rotate: -15deg;
  }
}

@include curvedPath(
  (
    (0px, 0px) (500px, -1000px) (1000px, 3400px) (1400px, 3000px) (1750px, 3500px) (2050px, 3300px) (2300px, 3600px)
      (2550px, 3400px) (2750px, 3700px)
  ),
  9,
  Coin1
);

@include curvedPath(
  (
    (0px, 0px) (-500px, -1000px) (-1000px, 3400px) (-1400px, 2500px) (-1750px, 3500px) (-2050px, 3200px)
      (-2300px, 3600px) (-2550px, 3300px) (-2750px, 3700px)
  ),
  9,
  Coin2
);

@include curvedPath(
  (
    (0px, 0px) (-1500px, -1000px) (-2000px, 3400px) (-2200px, 2500px) (-2400px, 3500px) (-2700px, 3200px)
      (-2850px, 3600px) (-2950px, 3300px) (-3000px, 3700px)
  ),
  9,
  Coin3
);

@include smallRotatingBlickAnimationKeyframeMixin;
