@import '../../scss/cells/mixins/black-background';
@import '../../scss/cells/mixins/grass';

// sticker animation duration = 0.3s;

.animated.sell {
  @include blackBackgroundMixin;
  @include grassMixin;

  #sell_main_container {
    scale: 0;
    animation-name: sell_main_container_animation;
    animation-timing-function: linear;
    animation-delay: var(--animation-delay, 0s);
    animation-duration: var(--animation-duration, 5s);
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    transform-origin: center center;
  }

  #earthquake_container {
    animation-name: main_earthquake_animation;
    animation-delay: calc(var(--animation-delay, 0s) + var(--animation-duration, 5s) / 2 + 0.3s + 0.3s / 20);
    animation-duration: 0.2s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    transform-origin: 4109px 3656px;
  }

  #sell_title_sold {
    scale: 15;
    opacity: 0;
    animation-name: sell_title_sold_animation;
    animation-delay: calc(var(--animation-delay, 0s) + var(--animation-duration, 5s) / 2);
    animation-duration: 0.3s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    transform-origin: 4109px 3656px;
  }

  .grass {
    transform-origin: center 4785px;
  }

  #sell_sigh {
    scale: 0;
    animation-name: sell_sigh_animation;
    animation-delay: calc(var(--animation-delay, 0s) + var(--animation-duration, 5s) / 10);
    animation-duration: 0.4s;
    animation-timing-function: cubic-bezier(0.84, 1.84, 0.59, 0.72);
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    transform-origin: 3902px 5701px;
  }

  #sell_cloud_1 {
    translate: -2000px 0px;
    animation-name: sell_cloud_1_animation;
    animation-duration: calc(var(--animation-delay, 0s) + var(--animation-duration, 5s));
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
  }

  #sell_cloud_2 {
    translate: 2000px 0px;
    animation-name: sell_cloud_2_animation;
    animation-duration: calc(var(--animation-delay, 0s) + var(--animation-duration, 5s));
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
  }

  #sell_left_plant > * {
    animation-name: sell_left_plant_animation;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    transform-origin: 1560px 6370px;

    &:nth-child(1) {
      animation-delay: -0.2s;
    }
    &:nth-child(2) {
      animation-delay: -0.4s;
    }
    &:nth-child(3) {
      animation-delay: -0.6s;
    }
    &:nth-child(4) {
      animation-delay: -0.8s;
    }
  }

  #sell_right_plant > * {
    animation-name: sell_right_plant_animation;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    transform-origin: 6825px 6351px;

    &:nth-child(1) {
      animation-delay: -0.2s;
    }
    &:nth-child(2) {
      animation-delay: -0.4s;
    }
    &:nth-child(3) {
      animation-delay: -0.6s;
    }
  }

  use.use-sell.d-none {
    display: block;
  }
}

@keyframes sell_main_container_animation {
  0% {
    scale: 0;
  }
  5% {
    scale: 1;
  }
  95% {
    scale: 1;
  }
  100% {
    scale: 0;
  }
}

@keyframes main_earthquake_animation {
  0% {
    transform: scale(0.9);
  }
  40% {
    transform: scale(1.1);
  }
  65% {
    transform: scale(0.95);
  }
  80% {
    transform: scale(1.05);
  }
  90% {
    transform: scale(0.98);
  }
  96% {
    transform: scale(1.02);
  }
  99% {
    transform: scale(0.99);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes sell_title_sold_animation {
  0% {
    scale: 15;
    opacity: 0;
  }
  5% {
    scale: 15;
    opacity: 1;
  }
  100% {
    scale: 1;
    opacity: 1;
  }
}

@keyframes sell_sigh_animation {
  100% {
    scale: 1;
  }
}

@keyframes sell_cloud_1_animation {
  10% {
    translate: 0px 0px;
  }
  100% {
    translate: 500px 0px;
  }
}

@keyframes sell_cloud_2_animation {
  10% {
    translate: 0px 0px;
  }
  100% {
    translate: -500px 0px;
  }
}

@keyframes sell_left_plant_animation {
  100% {
    rotate: -30deg;
  }
}

@keyframes sell_right_plant_animation {
  100% {
    rotate: 30deg;
  }
}
