@import './mixins/nth-child-variable';
@import './mixins/letter-scale-animation';

.animated {
  .buy_barrel_oil {
    #background_cars {
      animation-name: buyBarrelOilBackgroundAnimation;
      animation-duration: 20s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }

    #drop {
      display: block;
      animation-name: dropAnimation;
      animation-duration: 3s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      transform-origin: 3231px 6821px;
    }
  }
}

@keyframes buyBarrelOilBackgroundAnimation {
  0% {
    transform: translateY(800px);
  }
  100% {
    transform: translateY(-600px);
  }
}

@keyframes dropAnimation {
  0% {
    transform: translateY(0px) scale(0);
  }
  20% {
    transform: translateY(0px) scale(0);
  }
  90% {
    transform: translateY(0px) scale(1);
  }
  100% {
    transform: translateY(1000px) scale(1);
  }
}
