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

.animated {
  .mutiny_on_the_ship {
    #title {
      polygon,
      path {
        animation-name: letterScaleAnimation;
        animation-duration: 5s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        transform-origin: center center;
        animation-delay: calc(var(--nth-child) * 0.1s);

        @include nth_child_variable(16);
      }
    }

    #person {
      animation-name: person_animation;
      animation-duration: 5s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      transform-origin: center center;
    }
  }
}

@keyframes person_animation {
  0% {
    rotate: 0deg;
  }
  1% {
    rotate: -1deg;
  }
  2% {
    rotate: 1deg;
  }
  3% {
    rotate: -1deg;
  }
  4% {
    rotate: 1deg;
  }
  5% {
    rotate: -1deg;
  }
  6% {
    rotate: 1deg;
  }
  7% {
    rotate: -1deg;
  }
  8% {
    rotate: 0deg;
  }
  100% {
    rotate: 0deg;
  }
}

@include letterScaleAnimation;

