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

.animated {
  #medical_cross_1_ {
    @include lightBlinkingAnimationStylesMixin;
  }

  .protess_mission {
    #medical_cross_1_ {
      animation-delay: 5.3s;
    }

    #medical-cross-broken {
      display: block;
      stroke: #cf95a5;
    }

    #victim {
      animation-name: victimAnimation;
      animation-duration: 20s;
      animation-iteration-count: 1;
      animation-timing-function: linear;
      animation-fill-mode: forwards;
    }

    #wheel {
      animation-name: wheelAnimation;
      animation-duration: 5s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
      transform-origin: 5163px 6353px;
      animation-fill-mode: forwards;
    }

    #car {
      animation-name: carAnimation;
      animation-duration: 20s;
      animation-iteration-count: 1;
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards;
    }

    #wheel-broken {
      display: block;
      opacity: 0;
      animation-name: wheelBrokenAnimation;
      animation-duration: 20s;
      animation-iteration-count: 1;
      animation-timing-function: linear;
      animation-fill-mode: forwards;
    }
  }
}

@keyframes victimAnimation {
  0% {
    transform: translateX(2000px);
    opacity: 1;
  }

  50% {
    opacity: 1;
    transform: translateX(0px);
  }

  51% {
    opacity: 0;
    transform: translateX(0px);
  }

  100% {
    opacity: 0;
    transform: translateX(0px);
  }
}

@keyframes wheelAnimation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}

@keyframes carAnimation {
  0% {
    transform: translateX(-2500px);
  }

  40% {
    transform: translateX(-20000px);
  }

  50% {
    transform: translateX(4000px);
  }

  60% {
    transform: translateX(4000px);
  }

  70% {
    transform: translateX(10000px);
  }

  100% {
    transform: translateX(10000px);
  }
}

@keyframes wheelBrokenAnimation {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 0;
  }

  51% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}