@import './mixins/nth-child-variable';

.animated {
  .lottery {
    #spinnable {
      transform-origin: 5756px 3549px;
      animation-name: reels_animation;
      animation-duration: 5s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }

    #person_1 {
      #hand_2 {
        animation-name: person_1_hand_2_animation;
        animation-duration: 0.7s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        transform-origin: 3594px 3959px;
      }

      #wrist_3_ {
        animation-name: person_1_hand_2_wrist_animation;
        animation-duration: 0.7s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        transform-origin: 3963px 3608px;
      }

      #hand_1 {
        animation-name: person_1_hand_1_animation;
        animation-duration: 0.7s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        transform-origin: 3287px 4133px;
      }
    }

    #person_2 {
      #hand_2_1_ {
        animation-name: person_2_hand_2_animation;
        animation-duration: 3s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        transform-origin: 2386px 3891px;
      }

      #microfone {
        animation-name: person_2_microfone_animation;
        animation-duration: 3s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-direction: alternate;
      }

      #hand_1_1_ {
        animation-name: person_2_hand_1_animation;
        animation-duration: 5s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        transform-origin: 1762px 3972px;
      }
    }

    #sign #lights path {
      animation-name: sigh_light_animation;
      animation-duration: 0.5s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      animation-delay: calc(var(--nth-child) * 0.1s);

      @include nth_child_variable(25);
    }
  }

  &.cocaCola_up,
  &.cocaCola_down,
  &.car_up,
  &.car_down,
  &.oil_up,
  &.oil_down,
  &.gold_up,
  &.gold_down,
  &.shooting,
  &.winner,
  &.player_lock,
  &.add_money,
  &.gold,
  &.lost,
  &.triple_step {
    .lottery {
      #person_1 {
        #hand_2 {
          animation-name: none;
          rotate: 130deg;
        }

        #wrist_3_ {
          animation-name: none;
        }

        #hand_1 {
          animation-name: none;
          rotate: 40deg;
        }
      }

      #spinnable {
        animation-duration: 3s;
        animation-timing-function: ease-out;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
      }
    }
  }

  &.cocaCola_up,
  &.cocaCola_down,
  &.car_up,
  &.car_down,
  &.oil_up,
  &.oil_down,
  &.gold_up,
  &.gold_down {
    .lottery {
      #spinnable {
        animation-name: reels_sector_1_animation;
      }
    }
  }

  &.shooting .lottery #spinnable {
    animation-name: reels_sector_2_animation;
  }

  &.winner .lottery #spinnable {
    animation-name: reels_sector_3_animation;
  }

  &.player_lock .lottery #spinnable {
    animation-name: reels_sector_4_animation;
  }

  &.add_money .lottery #spinnable {
    animation-name: reels_sector_5_animation;
  }

  &.gold .lottery #spinnable {
    animation-name: reels_sector_6_animation;
  }

  &.lost .lottery #spinnable {
    animation-name: reels_sector_7_animation;
  }

  &.triple_step .lottery #spinnable {
    animation-name: reels_sector_8_animation;
  }
}

@keyframes reels_animation {
  0% {
    rotate: 0;
  }
  100% {
    rotate: -360deg;
  }
}

@keyframes person_1_hand_2_animation {
  0% {
    rotate: 0;
  }
  100% {
    rotate: 90deg;
  }
}

@keyframes person_1_hand_2_wrist_animation {
  0% {
    rotate: 0;
  }
  50% {
    rotate: -65deg;
  }
  75% {
    rotate: -85deg;
  }
  100% {
    rotate: -100deg;
  }
}

@keyframes person_1_hand_1_animation {
  0% {
    rotate: 0;
  }
  100% {
    rotate: 20deg;
  }
}

@keyframes person_2_hand_2_animation {
  0% {
    rotate: 0deg;
  }
  40% {
    rotate: 0deg;
  }
  60% {
    rotate: -20deg;
  }
  100% {
    rotate: -20deg;
  }
}

@keyframes person_2_microfone_animation {
  0% {
    translate: 0 0;
  }
  40% {
    translate: 0 0;
  }
  60% {
    translate: 150px -100px;
  }
  100% {
    translate: 150px -100px;
  }
}

@keyframes person_2_hand_1_animation {
  0% {
    rotate: 0deg;
  }
  20% {
    rotate: 0deg;
  }
  80% {
    rotate: -10deg;
  }
  100% {
    rotate: -10deg;
  }
}

@keyframes sigh_light_animation {
  100% {
    fill: red;
  }
}

@keyframes reels_sector_1_animation {
  100% {
    rotate: -360deg;
  }
}

@keyframes reels_sector_2_animation {
  100% {
    rotate: -410deg;
  }
}

@keyframes reels_sector_3_animation {
  100% {
    rotate: -450deg;
  }
}

@keyframes reels_sector_4_animation {
  100% {
    rotate: -490deg;
  }
}

@keyframes reels_sector_5_animation {
  100% {
    rotate: -550deg;
  }
}

@keyframes reels_sector_6_animation {
  100% {
    rotate: -240deg;
  }
}

@keyframes reels_sector_7_animation {
  100% {
    rotate: -280deg;
  }
}

@keyframes reels_sector_8_animation {
  100% {
    rotate: -320deg;
  }
}
