$hook-animation-duration: 30s;
$hook-2-animation-delay: 8s;
$crane-animation-delay: 12s;
$crane-2-animation-delay: 10s;

.animated {
  #hook_x5F_1,
  #hook_2 {
    animation-name: hook_animation;
    animation-duration: $hook-animation-duration;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }

  #cable_x5F_1,
  #cable_2 {
    animation-name: cable_animation;
    animation-duration: $hook-animation-duration;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }

  #cable_x5F_1 {
    transform-origin: 0 620px;
  }

  #cable_2 {
    transform-origin: 0 604px;
  }

  #hook_2,
  #cable_2 {
    animation-delay: $hook-2-animation-delay;
  }

  #crane_x5F_1,
  #crane_x5F_2 {
    animation-name: cran_animation;
    animation-duration: $hook-animation-duration;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }

  #crane_x5F_1 {
    transform-origin: 2616px 0;
    animation-delay: $crane-animation-delay;
  }

  #crane_x5F_2 {
    transform-origin: 2074px 0;
    animation-delay: $crane-2-animation-delay;
  }

  #cable_x5F_with_x5F_hook_x5F_1,
  #cable_x5F_with_x5F_hook_x5F_2 {
    animation-duration: $hook-animation-duration;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }

  #cable_x5F_with_x5F_hook_x5F_1 {
    animation-name: cable_with_hook_animation;
    animation-delay: $crane-animation-delay;
  }

  #cable_x5F_with_x5F_hook_x5F_2 {
    animation-name: cable_with_hook_animation_2;
    animation-delay: $crane-2-animation-delay;
  }
}

@keyframes hook_animation {
  0% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(40px);
  }
  25% {
    transform: translateY(40px);
  }
  40% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes cable_animation {
  0% {
    transform: scaleY(1);
  }
  10% {
    transform: scaleY(3);
  }
  25% {
    transform: scaleY(3);
  }
  40% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(1);
  }
}

@keyframes cran_animation {
  0% {
    transform: scaleX(1);
  }
  10% {
    transform: scaleX(0.4);
  }
  25% {
    transform: scaleX(0.4);
  }
  40% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(1);
  }
}

@keyframes cable_with_hook_animation {
  0% {
    transform: translateX(0px);
  }
  10% {
    transform: translateX(52px);
  }
  25% {
    transform: translateX(52px);
  }
  40% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(0px);
  }
}

@keyframes cable_with_hook_animation_2 {
  0% {
    transform: translateX(0px);
  }
  10% {
    transform: translateX(-52px);
  }
  25% {
    transform: translateX(-52px);
  }
  40% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(0px);
  }
}
