@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes mouseWheel {
  0% {
    opacity: 0;
    transform: translate(-50%, 0);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 22px);
  }
}

@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

@keyframes floatY {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-18px);
  }
}

@keyframes productFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-1deg);
  }
  50% {
    transform: translate3d(0, -18px, 0) rotate(1deg);
  }
}

@keyframes rotateFloat {
  0%,
  100% {
    transform: rotateY(0deg) translateY(0);
  }
  25% {
    transform: rotateY(4deg) translateY(-8px);
  }
  50% {
    transform: rotateY(0deg) translateY(-14px);
  }
  75% {
    transform: rotateY(-4deg) translateY(-6px);
  }
}

@keyframes pulseGlow {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(255, 211, 54, 0.18);
  }
  50% {
    box-shadow: 0 0 40px rgba(255, 211, 54, 0.38);
  }
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes driftUp {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0;
  }
  20% {
    opacity: 0.65;
  }
  100% {
    transform: translate3d(40px, -120px, 0) scale(1.6);
    opacity: 0;
  }
}

@keyframes cardGlow {
  0%,
  100% {
    filter: drop-shadow(0 24px 44px rgba(255, 211, 54, 0.14));
  }
  50% {
    filter: drop-shadow(0 32px 56px rgba(255, 211, 54, 0.26));
  }
}

.floating-product {
  animation: productFloat 6.4s ease-in-out infinite, cardGlow 5.5s ease-in-out infinite;
}

.hero__product-card,
.showcase-display,
.faux-map {
  background-size: 160% 160%;
  animation: gradientShift 14s ease infinite;
}

.hero__orbit-card,
.about-floating-card,
.faux-map__card {
  animation: floatY 6s ease-in-out infinite;
}

.hero__orbit-card--two {
  animation-delay: 1.2s;
}

.hero__orbit-card--three {
  animation-delay: 2s;
}

.feature-card:hover .feature-icon,
.floating-button--whatsapp,
.button--primary {
  animation: pulseGlow 3.5s ease-in-out infinite;
}

.hero__particles span {
  animation: driftUp linear infinite;
}