/* ==========================================================================
   WAI WAI INDIA - ANIMATIONS & KEYFRAMES
   ========================================================================== */

/* --- Steam Lines Rising Animation --- */
@keyframes steamRise {
  0% {
    stroke-dashoffset: 200;
    opacity: 0;
    transform: translateY(10px) scaleX(1);
  }
  30% {
    opacity: 0.8;
  }
  80% {
    opacity: 0.4;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
    transform: translateY(-40px) scaleX(1.2);
  }
}

.steam-path {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: steamRise 3.5s ease-in-out infinite;
}

.steam-path-2 {
  animation-delay: 1.2s;
}

.steam-path-3 {
  animation-delay: 2.4s;
}

/* --- Hero Bowl Float --- */
@keyframes floatBowl {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-15px) rotate(1.5deg);
  }
}

/* --- Floating Ingredient Badges --- */
@keyframes floatBadge {
  0% {
    transform: translateY(0) scale(1);
  }
  100% {
    transform: translateY(-12px) scale(1.03);
  }
}

/* --- Infinite Marquee Track --- */
@keyframes marqueeScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* --- Badge Pulse Effect --- */
@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(228, 3, 46, 0.4);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(228, 3, 46, 0);
  }
}

.pulse-badge {
  animation: pulseGlow 2.5s infinite;
}

/* --- Subtle Noodle Toss Animation for Easter Egg Mascot --- */
@keyframes mascotToss {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  30% {
    transform: translateY(-30px) rotate(-15deg);
  }
  60% {
    transform: translateY(-40px) rotate(15deg);
  }
  100% {
    transform: translateY(0) rotate(0deg);
  }
}

.animate-toss {
  animation: mascotToss 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --- Custom GSAP ScrollReveal Fallbacks & Utilities --- */
.gsap-reveal {
  opacity: 0;
  transform: translateY(30px);
  will-change: opacity, transform;
}

.gsap-reveal-left {
  opacity: 0;
  transform: translateX(-40px);
}

.gsap-reveal-right {
  opacity: 0;
  transform: translateX(40px);
}

.gsap-reveal-scale {
  opacity: 0;
  transform: scale(0.9);
}

/* Hover tilt setup */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.1s ease-out;
}