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

.animated {
  .desert_island {
    @include birdMixin;
    @include clouds_animation;

    #arrow {
      animation-name: blinking_arrow;
      animation-duration: 2s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }

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

    #island,
    #title {
      animation-name: main_day_night_animation;
      animation-duration: 5s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
    }

    #sun {
      animation-name: sun_animation;
      animation-duration: 5s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      transform-origin: 3231px 3847px;
    }
  }
}

@keyframes blinking_arrow {
  0% {
    fill: #ff005c;
  }
  50% {
    fill: #ffe200;
  }
  100% {
    fill: #ff005c;
  }
}

@keyframes main_day_night_animation {
  0% {
    filter: brightness(1);
  }
  40% {
    filter: brightness(0.5);
  }
  80% {
    filter: brightness(1);
  }
  100% {
    filter: brightness(1);
  }
}

@keyframes sun_animation {
  100% {
    rotate: 360deg;
  }
}

@include letterScaleAnimation;
