@import './mixins/buy';

.animated {
  .coffee {
    #title,
    #coffee {
      filter: url('#goovey');
    }

    #_x31_00_percent {
      animation-name: percent_block_animation;
      animation-duration: 2s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      animation-direction: alternate-reverse;
      transform-origin: 4500px 5100px;
    }

    #buy-main-container {
      translate: 0px 800px;
      scale: 0.9;
    }
  }
}

@keyframes percent_block_animation {
  0% {
    scale: 0.9;
    rotate: -7deg;
  }
  30% {
    rotate: -5deg;
  }
  50% {
    rotate: -3deg;
    scale: 1.1;
  }
  70% {
    rotate: 7deg;
    scale: 1.05;
  }
  90% {
    rotate: -5deg;
  }
  100% {
    scale: 1.1;
  }
}

@include buyMixin;
