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

.animated {
  .dumping {
    #oil-container {
      scale: -1 1;
      translate: 6000px 2300px;
    }

    .drop {
      animation-iteration-count: infinite;
      animation-duration: var(--animation-duration);
      animation-delay: var(--animation-delay);

      .outter-container {
        animation-iteration-count: infinite;
        animation-duration: var(--animation-duration);
        animation-delay: var(--animation-delay);
      }

      &.drop-1 {
        animation-name: Drop1xAxis;
        .outter-container {
          animation-name: Drop1yAxis;
        }
      }

      &.drop-2 {
        animation-name: Drop2xAxis;
        .outter-container {
          animation-name: Drop2yAxis;
        }
      }

      &.drop-3 {
        animation-name: Drop3xAxis;
        .outter-container {
          animation-name: Drop3yAxis;
        }
      }

      &.drop-4 {
        animation-name: Drop4xAxis;
        .outter-container {
          animation-name: Drop4yAxis;
        }
      }

      &.drop-5 {
        animation-name: Drop5xAxis;
        .outter-container {
          animation-name: Drop5yAxis;
        }
      }

      &.drop-6 {
        animation-name: Drop6xAxis;
        .outter-container {
          animation-name: Drop6yAxis;
        }
      }
    }
  }
}

@include curvedPath(((0px, 0px) (2000px, 2200px)), 2, Drop1);
@include curvedPath(((0px, 0px) (2000px, 1500px)), 2, Drop2);
@include curvedPath(((0px, 0px) (2000px, 1800px)), 2, Drop3);
@include curvedPath(((0px, 0px) (2000px, 3000px)), 2, Drop4);
@include curvedPath(((0px, 0px) (2000px, 3500px)), 2, Drop5);
@include curvedPath(((0px, 0px) (2000px, 5000px)), 2, Drop6);

