@import './boom';

@mixin playerLockMixin {
  .animated.player_lock {
    .player_lock-background {
      display: block;
      fill: black;
      opacity: 0;
      animation-name: buckground_animation;
      animation-delay: var(--animation-delay);
      animation-duration: 0.3s;
      animation-timing-function: linear;
      animation-fill-mode: forwards;
      animation-iteration-count: 1;
    }

    .player_lock-lock {
      animation-name: player_lock_lock_animation;
      animation-duration: 3s;
      animation-delay: calc(var(--animation-delay) + 0.3s);
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards;
      animation-iteration-count: 1;
      scale: 0;
      transform-origin: 4176px 4439px;
    }

    #lock_head {
      animation-name: lock_head_animation;
      animation-duration: 0.5s;
      animation-delay: calc(var(--animation-delay) + 0.7s);
      animation-timing-function: cubic-bezier(0.84, 1.84, 0.59, 0.72);
      animation-fill-mode: forwards;
      animation-iteration-count: 1;
    }

    .player_lock-container {
      animation-name: player_lock_container_animation;
      animation-duration: 0.3s;
      animation-delay: calc(var(--animation-delay) + 2s);
      animation-timing-function: linear;
      animation-fill-mode: forwards;
      animation-iteration-count: 1;
    }

    use.d-none.use-player_lock,
    use.d-none.use-boom {
      display: block;
    }

    @include boomMixin;

    .boom {
      scale: 20;
      translate: 4200px 3300px;

      line {
        stroke: #ffd457;
        animation-delay: calc(var(--animation-delay) + 1s);
        display: none;

        &:nth-child(1),
        &:nth-child(2),
        &:nth-child(3) {
          display: block;
        }
      }
    }
  }

  @keyframes buckground_animation {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 0.5;
    }
  }

  @keyframes player_lock_lock_animation {
    0% {
      scale: 0;
    }
    10% {
      scale: 1.3;
    }
    15% {
      scale: 1;
    }
    24% {
      translate: 0 0px;
    }
    27% {
      translate: 0 100px;
    }
    30% {
      translate: 0 0px;
    }
    100% {
      scale: 1;
    }
  }

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

  @keyframes player_lock_container_animation {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
}

@include boomAnimationMixin;
