@use "sass:math";

$animation-wings-duration: 2s;
$amount-of-slides: 10;

#forest #bird_001 path {
  fill: #052d25;
}

.animated {
  #forest {
    #bird_001 {
      animation-name: bird_animation;
      animation-duration: 60s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;

      @for $i from 1 through $amount-of-slides {
        #slide-#{$i} {
          display: block;
          opacity: 0;
          animation-name: wings_animation;
          animation-duration: $animation-wings-duration;
          animation-delay: math.div(-$animation-wings-duration, $amount-of-slides) * $i;
          animation-timing-function: steps(2, jump-none);
          animation-iteration-count: infinite;
        }
      }
    }

    #layer_1 {
      animation-name: layer_1_animation;
      animation-duration: 30s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      animation-direction: alternate-reverse;
    }

    #layer_2 {
      animation-name: layer_2_animation;
      animation-duration: 30s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      animation-direction: alternate-reverse;
    }

    #layer_3 {
      animation-name: layer_3_animation;
      animation-duration: 30s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      animation-direction: alternate-reverse;
    }

    #layer_4_1_ {
      animation-name: layer_4_animation;
      animation-duration: 30s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      animation-direction: alternate-reverse;
    }

    #layer_5 {
      animation-name: layer_5_animation;
      animation-duration: 30s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      animation-direction: alternate-reverse;
    }

    #layer_6 {
      animation-name: layer_6_animation;
      animation-duration: 30s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      animation-direction: alternate-reverse;
    }
  }
}

@keyframes bird_animation {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(500px, 50px);
  }
  100% {
    transform: translate(1000px, -50px);
  }
}

@keyframes wings_animation {
  0% {
    opacity: 0;
  }
  #{math.div(($amount-of-slides - 2), $amount-of-slides) * 100}% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


@keyframes layer_1_animation {
  0% {
    translate: -30px 0;
  }
  100% {
    translate: 30px 0;
  }
}

@keyframes layer_2_animation {
  0% {
    translate: -20px 0;
  }
  100% {
    translate: 20px 0;
  }
}

@keyframes layer_3_animation {
  0% {
    translate: -10px 0;
  }
  100% {
    translate: 10px 0;
  }
}

@keyframes layer_4_animation {
  0% {
    translate: -5px 0;
  }
  100% {
    translate: 5px 0;
  }
}

@keyframes layer_5_animation {
  0% {
    translate: -2.5px 0;
  }
  100% {
    translate: 2.5px 0;
  }
}

@keyframes layer_6_animation {
  0% {
    translate: -1.25px 0;
  }
  100% {
    translate: 1.25px 0;
  }
}
