@keyframes floatGlow {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -8px, 0);
  }
}

@keyframes smokeDriftOne {
  0% {
    transform: translate3d(-10%, 10%, 0) scale(1);
    opacity: 0.18;
  }
  50% {
    transform: translate3d(0%, -10%, 0) scale(1.08);
    opacity: 0.28;
  }
  100% {
    transform: translate3d(12%, -20%, 0) scale(1.12);
    opacity: 0.1;
  }
}

@keyframes smokeDriftTwo {
  0% {
    transform: translate3d(20%, 0, 0) scale(0.95);
    opacity: 0.14;
  }
  50% {
    transform: translate3d(0, -14%, 0) scale(1.03);
    opacity: 0.22;
  }
  100% {
    transform: translate3d(-12%, -22%, 0) scale(1.1);
    opacity: 0.08;
  }
}

@keyframes pulseBorder {
  0%, 100% {
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.35), 0 0 0 rgba(0, 217, 255, 0.12);
  }
  50% {
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.42), 0 0 26px rgba(0, 217, 255, 0.22);
  }
}

.smoke {
  position: absolute;
  border-radius: 999px;
  filter: blur(64px);
  pointer-events: none;
}

.smoke--one {
  width: 22rem;
  height: 22rem;
  left: 10%;
  bottom: 8%;
  background: radial-gradient(circle, rgba(138, 43, 226, 0.36), transparent 60%);
  animation: smokeDriftOne 12s linear infinite;
}

.smoke--two {
  width: 26rem;
  height: 26rem;
  right: 8%;
  top: 12%;
  background: radial-gradient(circle, rgba(0, 217, 255, 0.3), transparent 62%);
  animation: smokeDriftTwo 14s linear infinite;
}

.product-card,
.category-card,
.blog-card,
.lifestyle-card,
.icon-card,
.btn-primary,
.sticky-whatsapp,
.cta-panel {
  animation: pulseBorder 4.5s ease-in-out infinite;
}

.product-card:hover,
.category-card:hover,
.blog-card:hover,
.lifestyle-card:hover,
.icon-card:hover {
  transform: translateY(-8px);
  border-color: rgba(0, 217, 255, 0.3);
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.45), 0 0 30px rgba(0, 217, 255, 0.14);
}

.category-card,
.product-card,
.blog-card,
.lifestyle-card,
.icon-card,
.flavor-card,
.cta-panel {
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.hero__stats .stat-card,
.sticky-whatsapp,
.cta-panel {
  animation-name: floatGlow;
  animation-duration: 6s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.hero__stats .stat-card:nth-child(2) {
  animation-delay: 0.4s;
}

.hero__stats .stat-card:nth-child(3) {
  animation-delay: 0.8s;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}