/* ==========================================================================
   CSS KEYFRAMES & TRANSITIONS
   ========================================================================== */

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

/* Mascot Peeking from Corner */
@keyframes peekMascot {
  0% {
    transform: translate(-10px, 0) rotate(-2deg);
  }
  50% {
    transform: translate(15px, -8px) rotate(3deg);
  }
  100% {
    transform: translate(-10px, 0) rotate(-2deg);
  }
}

/* Rotating Discount/Offer Badge */
@keyframes rotateBadge {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* General Float for Spices/Snacks */
@keyframes floatSnack {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-15px) rotate(8deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

.float-slow {
  animation: floatSnack 7s ease-in-out infinite;
}

.float-medium {
  animation: floatSnack 5s ease-in-out infinite;
}

.float-fast {
  animation: floatSnack 4s ease-in-out infinite;
}

/* Preloader Spinner */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Preloader Logo Pulsing */
@keyframes pulseLogo {
  0% {
    transform: scale(0.95);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
  100% {
    transform: scale(0.95);
    opacity: 0.8;
  }
}

/* Gold Pulse Glow for cards */
@keyframes glowGold {
  0% {
    box-shadow: 0 0 5px rgba(255, 242, 0, 0.2);
  }
  50% {
    box-shadow: 0 0 20px rgba(255, 242, 0, 0.6);
  }
  100% {
    box-shadow: 0 0 5px rgba(255, 242, 0, 0.2);
  }
}

.glow-hover:hover {
  animation: glowGold 2s infinite;
}

/* Timeline Card Reveal Effects */
.reveal-left {
  opacity: 0;
  transform: translateX(-55px);
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.reveal-right {
  opacity: 0;
  transform: translateX(55px);
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.reveal-active {
  opacity: 1;
  transform: translateX(0);
}

/* Magnetic Hover Effect for Icons */
.magnetic-effect {
  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}