/*---------- NAVIGATION BAR ----------*/
/* Apply pixelEffect to logo and individual nav links when .animation class added */
.logo.animation {
  animation: pixelEffect 1.1s ease-out forwards;
}
.nav-links li a.animation {
  animation: pixelEffect 1.1s ease-out forwards;
}

/*---------- SECTION 1 ----------*/

.section-1-img-1.animation,
.section-1-img-2.animation,
.section-1-img-3.animation,
.section-1-img-4.animation,
.section-1-img-5.animation,
.section-1-img-6.animation,
.section-1-img-7.animation,
.section-1-img-8.animation,
.section-1-img-9.animation {
  animation-name: slideFromLeft;
  animation-iteration-count: 1;
}
.section-1-img-9.animation {
  animation-name: slideFromRight;
  animation-iteration-count: 1;
}

/* After slide-in completes, resume float animation */
.section-1-img-1.animation,
.section-1-img-2.animation,
.section-1-img-3.animation,
.section-1-img-4.animation,
.section-1-img-5.animation,
.section-1-img-6.animation,
.section-1-img-7.animation {
  animation: slideFromLeft 2s ease both, subtleFloat 3s ease-in-out 2s infinite !important;
}

.section-1-img-1.animation {
  animation: slideFromLeft 2s ease both, subtleFloat 3.6s ease-in-out 2.1s infinite !important;
}
.section-1-img-2.animation {
  animation: slideFromLeft 2s ease both, subtleFloat 3s ease-in-out 2.25s infinite !important;
}
.section-1-img-3.animation {
  animation: slideFromLeft 2s ease both, subtleFloat 3.4s ease-in-out 2.4s infinite !important;
}
.section-1-img-4.animation {
  animation: slideFromLeft 2s ease both, subtleFloat 3.8s ease-in-out 2.15s infinite !important;
}
.section-1-img-5.animation {
  animation: slideFromLeft 2s ease both, subtleFloat 3.2s ease-in-out 2.35s infinite !important;
}
.section-1-img-6.animation {
  animation: slideFromLeft 2s ease both, subtleFloat 3.5s ease-in-out 2.05s infinite !important;
}
.section-1-img-7.animation {
  animation: slideFromLeft 2s ease both, subtleFloat 3.3s ease-in-out 2.45s infinite !important;
}

.contact-us-redirect-button.animation,
.learn-more-redirect-button.animation {
  animation-name: zoomOut;
}

/*---------- SECTION 2 ----------*/

/*---------- SECTION 3 ----------*/

/*---------- SECTION 4 ----------*/


/*---------- ANIMATION ----------*/

.animation {
  animation-duration: 2s;
  animation-fill-mode: both;
  animation-timing-function: ease;
  animation-iteration-count: 1;
}

/*---------- KEYFRAME ANIMATION ----------*/

@keyframes pixelEffect {
  0% {
    clip-path: polygon(0 0, 0 100%, 0 100%, 0 0);
    transform: scale(1);
    filter: brightness(1);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transform: scale(1);
    filter: brightness(1);
  }
}

@keyframes slideFromLeft {
  from {
    transform: translateX(-100%) translateY(0);
    opacity: 0;
  }

  to {
    transform: translateX(0) translateY(0);
    opacity: 1;
  }
}

@keyframes slideFromRight {
  from {
    transform: translateX(100%) translateY(0);
    opacity: 0;
  }

  to {
    transform: translateX(0) translateY(0);
    opacity: 1;
  }
}

@keyframes zoomOut {
  from {
    transform: scale(0);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes slideFromMidL {
  from {
    transform: translateX(50%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes zoomOut2 {
  from {
    transform: scale(0);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes slideFromMidR {
  from {
    transform: translateX(-50%);
    opacity: 0;
  }

  to {
    transform: translateX(0%);
    opacity: 1;
  }
}

@keyframes slideFromTop {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideFromBottom {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes floatZigzag {
  0% {
    transform: translate(0, 0);
  }

  20% {
    transform: translate(10px, -5px);
  }

  40% {
    transform: translate(-10px, -10px);
  }

  60% {
    transform: translate(10px, -15px);
  }

  80% {
    transform: translate(-5px, -10px);
  }

  100% {
    transform: translate(0, 0);
  }
}

@keyframes burnReveal {
  0% {
    opacity: 0;
    filter: blur(6px) brightness(2);
    transform: scale(1.2);
  }
  50% {
    opacity: 0.5;
    filter: blur(3px) brightness(1.5);
  }
  100% {
    opacity: 1;
    filter: blur(0px) brightness(1);
    transform: scale(1);
  }
}