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

.animated {
  .abcde {
    #eyes {
      #eye_x5F_1,
      #eye_x5F_2 {
        transform-origin: 3630px 9930px;
        animation-name: eyeAnimation;
        animation-duration: 2s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
      }

      #eye_x5F_1 {
        transform-origin: 6007px 2746px;
        animation-delay: -1s;
      }

      #eye_x5F_2 {
        transform-origin: 5658px 2594px;
      }
    }

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

    #back-screen {
      fill: #e2fffd;
    }

    #screen {
      filter: url(#tv_noise);
    }

    #buy-main-container {
      translate: 1300px 1250px;
      scale: 0.7;
    }
  }
}

@keyframes eyeAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@include letterScaleAnimation;
@include buyMixin;
