@use "sass:math";

@mixin runMixin($animation-duration) {
  #jumping_person {
    animation-name: jumping_person_animation;
    animation-duration: math.div($animation-duration, 2);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
  }

  #jumping_person_shadow {
    animation-name: jumping_person_shadow_animation;
    animation-duration: math.div($animation-duration, 2);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
  }

  #leg_1,
  #leg_2 {
    animation-name: leg_1_animation;
    animation-duration: $animation-duration;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
  }

  #leg_1_1,
  #leg_2_1 {
    animation-name: leg_1_1_animation;
    animation-duration: $animation-duration;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
  }

  #leg_2,
  #leg_2_1 {
    animation-delay: math.div(-$animation-duration, 2);
  }

  @keyframes jumping_person_animation {
    0% {
      translate: 0px;
    }
    70% {
      translate: 0 -200px;
    }
    100% {
      translate: 0px;
    }
  }

  @keyframes jumping_person_shadow_animation {
    0% {
      scale: 1;
    }
    70% {
      scale: 0.9;
    }
    100% {
      scale: 1;
    }
  }

  @keyframes leg_1_animation {
    0% {
      rotate: -90deg;
    }
    60% {
      rotate: 45deg;
    }
    80% {
      rotate: -70deg;
    }
    100% {
      rotate: -90deg;
    }
  }

  @keyframes leg_1_1_animation {
    0% {
      rotate: 30deg;
    }
    50% {
      rotate: 45deg;
    }
    60% {
      rotate: 80deg;
    }
    75% {
      rotate: 110deg;
    }
    100% {
      rotate: 30deg;
    }
  }
}
