@import './mixins/nth-child-variable';
@import './mixins/letter-scale-animation';

.animated {
  .sleep {
    #clock_head {
      animation-name: clock_head_animation;
      animation-duration: 0.1s;
      animation-timing-function: linear;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      transform-origin: 1290px 5721px;
    }

    #clock {
      animation-name: clock_animation;
      animation-duration: 2s;
      animation-delay: 2s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }
  }
}

@keyframes clock_head_animation {
  0% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(5deg);
  }
}

@keyframes clock_animation {
  0% {
    transform: translateY(0px);
  }
  5% {
    transform: translateY(-300px);
  }
  10% {
    transform: translateY(0px);
  }
  15% {
    transform: translateY(-150px);
  }
  20% {
    transform: translateY(0px);
  }
  25% {
    transform: translateY(-50px);
  }
  30% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(0px);
  }
}
