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

.animated {
  .bread_plantation {
    #bread_x5F_1,
    #bread_x5F_2,
    #bread_x5F_3,
    #bread_x5F_4,
    #bread_x5F_5 {
      animation-name: bread_animation;
      animation-duration: 6s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }
    #bread_x5F_1 {
      animation-delay: 3s;
      transform-origin: 6320px 3310px;
    }

    #bread_x5F_2 {
      transform-origin: 5030px 3402px;
      animation-delay: 6s;
    }

    #bread_x5F_3 {
      transform-origin: 4260px 2012px;
      animation-delay: 4s;
    }

    #bread_x5F_4 {
      transform-origin: 3000px 2492px;
      animation-delay: 7s;
    }

    #bread_x5F_5 {
      transform-origin: 2180px 4602px;
      animation-delay: 8s;
    }

    #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;
      }
    }
  }
}

@keyframes bread_animation {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  5% {
    transform: translateY(0) rotate(-10deg) scale(1);
  }
  9% {
    transform: translateY(0) rotate(8deg) scale(1);
  }
  12% {
    transform: translateY(0) rotate(-6deg) scale(1);
  }
  14% {
    transform: translateY(0) rotate(4deg) scale(1);
  }
  15% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  17% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  23% {
    transform: translateY(6000px) rotate(0deg) scale(1);
  }
  26% {
    transform: translateY(6000px) rotate(0deg) scale(0);
  }
  60% {
    transform: translateY(0px) rotate(0deg) scale(0);
  }
  65% {
    transform: translateY(0px) rotate(0deg) scale(1);
  }
  100% {
    transform: translateY(0px) rotate(0deg) scale(1);
  }
}

@include letterScaleAnimation;
