@import './mixins/earthquake';

.animated {
  .bank_27 {
    #bank-b1 {
      @include bankB1Mixin;
    }

    #bank-b2 {
      @include bankB2Mixin;
    }

    #layer_x5F_1_x5F_wrapper_1_ {
      @include mainEarthquake1Mixin;
    }

    #Layer_x5F_1_1_ {
      @include mainEarthquake2Mixin;
    }

    #moveable {
      animation-name: moveable_animation;
      animation-duration: 1s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      animation-direction: alternate;
    }

    #leg_1 {
      animation-name: leg_1_animation;
      animation-duration: 1s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      animation-direction: alternate;
      transform-origin: 1678px 5827px;

      #shin {
        animation-name: leg_1_shin_animation;
        animation-duration: 1s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        transform-origin: 2142px 5889px;
      }
    }

    #leg_2 {
      animation-name: leg_2_animation;
      animation-duration: 1s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      animation-direction: alternate;
      transform-origin: 1584px 5909px;

      #shin_1_ {
        animation-name: leg_2_shin_animation;
        animation-duration: 1s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        transform-origin: 1744px 5975px;
      }
    }
  }
}

@keyframes moveable_animation {
  0% {
    translate: 0px 0px;
  }
  100% {
    translate: 50px 100px;
  }
}

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

@keyframes leg_1_shin_animation {
  0% {
    rotate: 0deg;
  }
  100% {
    rotate: 10deg;
  }
}

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

@keyframes leg_2_shin_animation {
  0% {
    rotate: 0deg;
  }
  100% {
    rotate: 17deg;
  }
}

@include bankB1AnimationMixin;
@include bankB2AnimationMixin;
@include mainEarthquakeAnimationMixin;
