@import './mixins/black-background';
@import './mixins/light-blinking';

.animated {
  .ambulance_2 {
    #doctor {
      animation-name: doctor;
      animation-duration: 5s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      transform-origin: 3743px 8189px;
    }

    #head {
      animation-name: doctors_head;
      animation-duration: 4s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      transform-origin: 3537px 6553px;
    }

    #hand_x5F_1_1_ {
      animation-name: doctors_hand_1;
      animation-duration: 2s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      transform-origin: 2904px 6774px;
    }

    #hand_x5F_2 {
      animation-name: doctors_hand_2;
      animation-duration: 3s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      transform-origin: 4307px 6869px;
    }

    #eyes {
      transform-origin: 0px 5418px;
      animation-name: doctors_eyes;
      animation-duration: 2s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }

    #broken-light,
    #turn-on-light_1_,
    #pillow {
      @include lightBlinkingAnimationStylesMixin;
    }

    #pillow {
      animation-delay: 5.3s;
    }

    #turn-off-light {
      display: block;
    }

    #pillow-broken {
      stroke: #6387bb;
    }
  }

  &.after-10-circles,
  &.after-20-circles,
  &.after-30-circles,
  &.after-40-circles,
  &.after-50-circles {
    use.d-none.use-cat {
      display: block;
    }
  }
}

@keyframes doctor {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(0deg);
  }
  55% {
    transform: rotate(-5deg);
  }
  95% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes doctors_head {
  0% {
    transform: rotate(-25deg);
  }
  50% {
    transform: rotate(-25deg);
  }
  55% {
    transform: rotate(-10deg);
  }
  95% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(-25deg);
  }
}

@keyframes doctors_hand_1 {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(0deg);
  }
  55% {
    transform: rotate(-10deg);
  }
  95% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes doctors_hand_2 {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(0deg);
  }
  55% {
    transform: rotate(10deg);
  }
  95% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes doctors_eyes {
  0% {
    transform: scaleY(1);
  }
  45% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(0.2);
  }
  55% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(1);
  }
}
