@keyframes logoAppear {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes lineAppear {
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes circleAppear {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes titleAppear {
  from {
    opacity: 0;

    transform: translateX(40px);
  }
  to {
    opacity: 1;

    transform: translateX(0);
  }
}

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

@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(-35px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes buttonPop {
  0% {
    transform: translateY(25px) scale(0.95);
  }
  60% {
    transform: translateY(0) scale(1.04);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes float {
  from {
    transform: translateY(50px);
  }
  to {
    transform: translateY(-500px);
  }
}

@keyframes floatingLeft {
  0% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(-18px) rotate(2deg);
  }
  100% {
    transform: translateY(0) rotate(-2deg);
  }
}

@keyframes floatingRight {
  0% {
    transform: translateY(0) rotate(2deg);
  }
  50% {
    transform: translateY(12px) rotate(-2deg);
  }
  100% {
    transform: translateY(0) rotate(2deg);
  }
}

@keyframes pulseCircle {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.04);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes floatCircle {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(20px, -20px);
  }
}

@keyframes floatCircleVariant {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-20px, 20px);
  }
}

@keyframes rotateSlow {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes rotateHex {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes whatsappPulse {
  0% {
    transform: scale(0.9);
    opacity: 1;
  }

  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

@keyframes bounceArrow {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
    opacity: 0.8;
  }
  40% {
    transform: translateY(8px);
    opacity: 1;
  }
  60% {
    transform: translateY(4px);
  }
}

@keyframes shine {
  0% {
    left: -120%;
  }
  100% {
    left: 130%;
  }
}