@import './mixins/street_clouds';

.animated {
  .bermuda_triangle {
    @include clouds_animation;

    #ship {
      animation-name: ship_animation;
      animation-duration: 2s;
      animation-timing-function: ease-in-out;
      animation-direction: alternate;
      animation-iteration-count: infinite;
    }

    #wave_1,
    #wave_2,
    #wave_3 {
      animation-name: wave_animation;
      animation-duration: 1s;
      animation-timing-function: ease-in-out;
      animation-direction: alternate;
      animation-iteration-count: infinite;
      transform-origin: 2500px 5550px;
    }

    #wave_1 {
      animation-delay: -0.3s;
    }
    #wave_2 {
      animation-delay: -0.6s;
    }

    #oil {
      animation-name: oil_animation;
      animation-duration: 2s;
      animation-timing-function: ease-in-out;
      animation-direction: alternate;
      animation-iteration-count: infinite;
      transform-origin: 4000px 6500px;
    }

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

@keyframes ship_animation {
  100% {
    translate: 0 150px;
  }
}

@keyframes wave_animation {
  100% {
    scale: 1.1;
  }
}

@keyframes oil_animation {
  100% {
    scale: 1.05;
  }
}

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