/*---------- NAVIGATION BAR ----------*/

.logo.animation {
  animation-name: pixelEffect;
}

.nav-item.animation {
  animation-name: pixelEffect;
}

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

.section-1-text.animation {
  animation-name: slideFromLeft;
}

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

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

.content-1.animation,
.content-4.animation {
  animation-name: slideFromMidL;
}

.content-2.animation,
.content-5.animation {
  animation-name: zoomOut2;
}

.content-3.animation,
.content-6.animation {
  animation-name: slideFromMidR;
}

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

.number-box-1.animation,
.number-box-2.animation,
.number-box-3.animation,
.number-box-4.animation {
  animation-name: burnReveal;
}

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

/*-- GOOGLE --*/

.section-4-element-1 img {
  animation: floatZigzag 4s infinite linear;
}

/*-- META --*/

.section-4-element-2 img {
  animation: floatZigzag 4s infinite linear;
}

/*-- TIKTOK --*/

.section-4-element-3 img {
  animation: floatZigzag 4s infinite linear;
}

/*-- YOUTUBE --*/

.section-4-element-4 img {
  animation: floatZigzag 4s infinite linear;
}

/*-- BIGO --*/

.section-4-element-5 img {
  animation: floatZigzag 4s infinite linear;
}

/*-- KWAI --*/

.section-4-element-6 img {
  animation: floatZigzag 4s infinite linear;
}

/*-- BUTTON --*/

.section-4-button-1.animation,
.section-4-button-3.animation,
.section-4-button-5.animation {
  animation-name: slideFromLeft;
}

.section-4-button-2.animation,
.section-4-button-4.animation,
.section-4-button-6.animation {
  animation-name: slideFromRight;
}

/*---------- SECTION 5 ----------*/

.telegram-redirect-button.animation,
.whatsapp-redirect-button.animation {
  animation-name: zoomOut;
}

/*---------- 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);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

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

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

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

  to {
    transform: translateX(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);
  }
}