/*---------- FLOAT BUTTON ----------*/

.telegram-redirect-button img {
  animation: floatPulse 2s infinite linear;
}

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

.section-1-title.animation {
  animation-name: zoomOut;
}

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

.section-2-title.animation {
  animation-name: pixelEffect;
}

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

.section-3-box-1.animation {
  animation-name: slideFromBottom;
}

.section-3-box-2.animation {
  animation-name: slideFromTop;
}

.toggle-button-1 {
  transition: transform 0.5s ease;
}

.toggle-button-2 {
  transition: transform 0.5s ease;
}

.move-down {
  transform: translateY(-68%);
}

.move-up {
  transform: translateY(67%);
}

.section-3-chipsmid img {
  animation: floatZigzag 5s infinite linear;
}

.section-3-chipsbig img {
  animation: floatCoinWavy 4s linear infinite;
}

.section-3-chipssmall img {
  animation: floatCoinWavy 7s infinite linear;
}

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

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

.section-4-content-2.animation,
.section-4-content-4.animation,
.section-4-content-6.animation {
  animation-name: slideFromMidR;
}

.section-4-dice-1 img {
  animation: floatPulse 4s infinite linear;
}

.section-4-dice-2 img {
  animation: floatPulse 4s infinite linear;
  animation-delay: 1s;
}

.section-4-dice-3 img {
  animation: floatPulse 4s infinite linear;
  animation-delay: 1.5s;
}

.section-4-dice-4 img {
  animation: floatPulse 4s infinite linear;
  animation-delay: 2s;
}

.section-4-dice-5 img {
  animation: floatPulse 4s infinite linear;
  animation-delay: 2.5s;
}

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

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

.services-1.animation,
.services-3.animation,
.services-5.animation,
.services-7.animation {
  animation-name: slideFromMidL;
}

.services-2.animation,
.services-4.animation,
.services-6.animation,
.services-8.animation {
  animation-name: slideFromMidR;
}

/*---------- SECTION 6 ----------*/

.section-6-content.animation {
  animation-name: zoomOut;
}

.section-6-element.animation {
  animation-name: burnReveal;
}

/*---------- SECTION 6 ----------*/

.section-7-form.animation {
  animation-name: pixelEffect;
}

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

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

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

@keyframes floatPulse {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }
}

@keyframes pixelEffect {
  0% {
    clip-path: polygon(0 0, 0 100%, 0 100%, 0 0);
    opacity: 0;
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    opacity: 1;
  }
}

@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 floatCoinWavy {
  0% {
    transform: translate(0, 0);
  }

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

  50% {
    transform: translate(0, -15px);
  }

  75% {
    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);
  }
}