/* ==============================
   NIYAMIT.IN — animations.css
   ============================== */

/* ── Loader Animations ── */
@keyframes loaderPulse {
  from { opacity: 0.7; transform: scale(0.98); }
  to   { opacity: 1;   transform: scale(1.02); }
}

@keyframes loaderBar {
  0%   { width: 0%; }
  60%  { width: 80%; }
  100% { width: 100%; }
}

/* ── Floating Vegetables ── */
@keyframes floatVeg {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%       { transform: translateY(-20px) rotate(5deg); }
  50%       { transform: translateY(-10px) rotate(-3deg); }
  75%       { transform: translateY(-25px) rotate(3deg); }
}

/* ── Promo Banner Pulse ── */
@keyframes promoPulse {
  0%, 100% { opacity: 0; }
  50%       { opacity: 1; }
}

/* ── Marquee ── */
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Scroll Hint ── */
@keyframes fadeInOut {
  0%, 100% { opacity: 0.3; }
  50%       { opacity: 0.8; }
}

@keyframes scrollBounce {
  0%, 100% { transform: rotate(45deg) translateY(0); }
  50%       { transform: rotate(45deg) translateY(5px); }
}

/* ── WhatsApp Pulse ── */
/* @keyframes waPulse {
  0%, 100% { box-shadow: 0 6px 24px rgba(37,211,102,0.4); }
  50%       { box-shadow: 0 6px 36px rgba(37,211,102,0.65); }
} */

/* ── Phone Float ── */
@keyframes phoneFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-14px); }
}

/* ── Phone Glow Pulse ── */
@keyframes glowPulse {
  0%, 100% { opacity: 0.5; transform: translateX(-50%) scaleX(0.8); }
  50%       { opacity: 1; transform: translateX(-50%) scaleX(1.1); }
}

/* ── Card Entrance ── */
@keyframes cardEntrance {
  from { opacity: 0; transform: translateY(30px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Stat Count Up Glow ── */
@keyframes countGlow {
  0%, 100% { text-shadow: 0 0 8px rgba(45,181,78,0.3); }
  50%       { text-shadow: 0 0 20px rgba(45,181,78,0.7); }
}

/* ── Hero Title Gradient Shift ── */
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}

/* ── Veggie Grid Bounce ── */
@keyframes veggieHover {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.15) rotate(10deg); }
}

/* Apply phone float */
.phone-mockup { animation: phoneFloat 5s ease-in-out infinite; }

/* Apply phone glow */
.phone-glow { animation: glowPulse 3s ease-in-out infinite; }

/* Apply stat glow when counting */
.stat-number.counting { animation: countGlow 0.8s ease infinite; }

/* Veggie grid hover */
.veggie-grid span {
  display: inline-block;
  transition: transform 0.3s ease;
  cursor: default;
}
.veggie-grid span:hover { animation: veggieHover 0.5s ease; }

/* ── Step Item Pulse on Hover ── */
.step-icon {
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.step-item:hover .step-icon {
  box-shadow: 0 0 20px rgba(45,181,78,0.3);
}

/* ── Navbar Logo Hover ── */
.nav-logo:hover .logo-icon {
  display: inline-block;
  animation: floatVeg 2s ease-in-out infinite;
}

/* ── Ripple on App Buttons ── */
.btn-app {
  position: relative;
  overflow: hidden;
}
.btn-app::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.08);
  opacity: 0;
  transition: opacity 0.2s;
}
.btn-app:hover::after { opacity: 1; }

/* ── Feature Card Border Glow ── */
.feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(45,181,78,0), rgba(45,181,78,0.4), rgba(45,181,78,0));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.feature-card:hover::before { opacity: 1; }

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ===== Store Badges Dance Animation ===== */
/* @keyframes badgeDance {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  25% {
    transform: translateY(-0px) rotate(-1deg) scale(1.03);
  }
  50% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  75% {
    transform: translateY(-0px) rotate(1deg) scale(1.03);
  }
} */
/* @keyframes badgeDance {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  25% {
    transform: translateY(-6px) rotate(-1deg) scale(1.03);
  }
  50% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  75% {
    transform: translateY(-6px) rotate(1deg) scale(1.03);
  }
} */
 /* ===== Store Badge Soft Animation ===== */

/* ===== Store Badge Background Glow ===== */

@keyframes badgeGlow {
  0%, 100% {
    box-shadow: 0 0 2px rgba(45, 77, 181, 0.15);
  }

  50% {
    box-shadow:
      0 0 15px rgba(45,181,78,0.35),
      0 0 35px rgba(45,181,78,0.25);
  }
}

/* .floating-store-badges a {
  animation: badgeGlow 1.0s ease-in-out infinite;
  transform-origin: center;
} */

/* second badge delay */
/* .floating-store-badges a:nth-child(2) {
  animation-delay: 0.4s;
} */

.floating-store-badges a:hover {
  animation-play-state: paused;
}




/* Apply animation */
/* .floating-store-badges a {
  animation: badgeDance 2.2s ease-in-out infinite;
  transform-origin: center;
} */

/* Different timing for second badge (Play Store) */
/* .floating-store-badges a:nth-child(2) {
  animation-delay: 0.3s;
} */

/* Optional hover boost */
/* .floating-store-badges a:hover {
  animation-play-state: paused;
  transform: translateY(-8px) scale(1.08);
} */




/* ===== WhatsApp Dance Animation ===== */
/* @keyframes waDance {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  25% {
    transform: translateY(-6px) rotate(-1deg) scale(1.04);
  }
  50% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  75% {
    transform: translateY(-6px) rotate(1deg) scale(1.04);
  }
} */

/* @keyframes waDance {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  25% {
    transform: translateY(-2px) rotate(-1deg) scale(1.04);
  }
  50% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  75% {
    transform: translateY(-2px) rotate(1deg) scale(1.04);
  }
} */
/* Apply animation */
/* .whatsapp-btn {
  animation: waDance 2.2s ease-in-out infinite;
  transform-origin: center;
} */

/* Slight delay effect (optional if multiple elements inside) */
/* .whatsapp-btn:hover {
  animation-play-state: paused;
  transform: translateY(-8px) scale(1.08);
} */


/* ===== WhatsApp Image Glow ===== */

@keyframes waImageGlow {
  0%, 100% {
    filter:
      drop-shadow(0 0 1px rgba(141, 136, 207, 0.65));
  }

  50% {
    filter:
      drop-shadow(0 0 4px rgba(141, 136, 207,0.85))
      drop-shadow(0 0 8px rgba(141, 136, 207,0.65));
  }
}


/* Only WhatsApp Image Animation */
.whatsapp-btn img {
  animation: waImageGlow 1.0s ease-in-out infinite;
}

/* ===== Download Icon Animation ===== */
@keyframes downloadFloat {
  0%, 100% {
    transform: translateY(0);
  }

  35% {
    transform: translateY(4px);
  }

  60% {
    transform: translateY(0);
  }

  80% {
    transform: translateY(-2px);
  }
}

.download-icon{
  animation: downloadFloat 1.8s ease-in-out infinite;
  transform-origin: center;
}