/* LAST BITE - Animations */
@keyframes slideInRight { from { opacity:0; transform:translateX(40px); } to { opacity:1; transform:translateX(0); } }
@keyframes slideInUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes pulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.05); } }
@keyframes glow { 0%,100% { box-shadow:0 0 20px var(--green-glow); } 50% { box-shadow:0 0 40px var(--green-glow), 0 0 80px var(--green-glow); } }
@keyframes countUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes blink { 0%,100% { opacity:1; } 50% { opacity:0.3; } }
@keyframes float { 0%,100% { transform:translateY(0px); } 50% { transform:translateY(-10px); } }
@keyframes shimmer {
  0% { background-position:-200% 0; }
  100% { background-position:200% 0; }
}
@keyframes timerPulse { 0%,100% { color:#ef4444; } 50% { color:#fca5a5; } }
@keyframes badgePop { 0% { transform:scale(0); } 70% { transform:scale(1.1); } 100% { transform:scale(1); } }
@keyframes slideDown { from { opacity:0; transform:translateY(-20px); } to { opacity:1; transform:translateY(0); } }
@keyframes progressFill { from { width:0%; } to { width:var(--target-width); } }
@keyframes particleFloat {
  0% { transform:translateY(0) rotate(0deg); opacity:1; }
  100% { transform:translateY(-100vh) rotate(720deg); opacity:0; }
}

/* Apply animations */
.animate-slide-up { animation: slideInUp 0.6s ease forwards; }
.animate-fade-in { animation: fadeIn 0.5s ease forwards; }
.animate-pulse { animation: pulse 2s ease-in-out infinite; }
.animate-glow { animation: glow 2s ease-in-out infinite; }
.animate-float { animation: float 3s ease-in-out infinite; }
.animate-blink { animation: blink 1.5s ease-in-out infinite; }
.animate-spin { animation: spin 1s linear infinite; }
.badge-pop { animation: badgePop 0.4s cubic-bezier(0.175,0.885,0.32,1.275); }
.timer-pulse { animation: timerPulse 1s ease-in-out infinite; }

/* Stagger delays */
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }

/* Shimmer skeleton */
.shimmer {
  background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 75%);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

/* Hero particles */
.particles { position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:0; overflow:hidden; }
.particle {
  position:absolute; bottom:-20px;
  width:6px; height:6px; border-radius:50%;
  background:var(--green-primary); opacity:0.4;
  animation:particleFloat linear infinite;
}

/* Flash sale pulse ring */
.pulse-ring {
  position:relative; display:inline-block;
}
.pulse-ring::before {
  content:''; position:absolute; inset:-6px;
  border-radius:50%; border:2px solid var(--orange-energy);
  animation:pulse 1.5s ease-in-out infinite; opacity:0.6;
}

/* Gradient text animation */
.gradient-text-anim {
  background: linear-gradient(270deg, #22c55e, #f97316, #22c55e);
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  animation: shimmer 3s linear infinite;
}

/* Card entrance */
.card-enter {
  opacity:0; transform:translateY(20px);
  animation: slideInUp 0.5s ease forwards;
}

/* Live indicator */
.live-dot {
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:600; color:var(--red-alert);
}
.live-dot::before {
  content:''; width:8px; height:8px; border-radius:50%;
  background:var(--red-alert);
  animation:blink 1s ease-in-out infinite;
  display:inline-block;
}

/* Countdown timer digits */
.countdown-digit {
  display:inline-block;
  font-family:'Poppins',sans-serif;
  font-size:2rem; font-weight:800;
  color:var(--orange-energy);
  min-width:50px; text-align:center;
  background:rgba(249,115,22,0.1);
  border:1px solid rgba(249,115,22,0.3);
  border-radius:8px; padding:4px 8px;
}

/* Notification bell shake */
@keyframes bellShake {
  0%,100% { transform:rotate(0); }
  20% { transform:rotate(-15deg); }
  40% { transform:rotate(10deg); }
  60% { transform:rotate(-10deg); }
  80% { transform:rotate(5deg); }
}
.bell-shake { animation:bellShake 0.6s ease; }

/* Impact counter animation */
.impact-num {
  display:inline-block;
  animation:countUp 0.5s ease;
}