/* ==========================================================================
   ANIMATIONS.CSS - SMOOTH KEYFRAMES & MICRO-INTERACTIONS
   ========================================================================== */

/* Shimmer Swipe for Buttons & Featured Cards */
@keyframes shimmer-swipe {
  0% {
    transform: translateX(-150%) rotate(25deg);
  }

  20%,
  100% {
    transform: translateX(150%) rotate(25deg);
  }
}

/* Pulsing Live Dot */
@keyframes pulse-glow {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(254, 240, 138, 0.7);
  }

  70% {
    transform: scale(1.1);
    box-shadow: 0 0 0 8px rgba(254, 240, 138, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(254, 240, 138, 0);
  }
}

@keyframes pulse-dot {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  }

  70% {
    transform: scale(1.15);
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

/* Gentle Floating Effect for Decorative Food Icons */
@keyframes float-slow {

  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    transform: translateY(-12px) rotate(3deg);
  }
}

@keyframes float-reverse {

  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    transform: translateY(10px) rotate(-3deg);
  }
}

.float-element {
  animation: float-slow 4s ease-in-out infinite;
}

.float-element-rev {
  animation: float-reverse 5s ease-in-out infinite;
}

/* Verified Badge Subtle Breathing Glow */
@keyframes badge-glow {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.4);
  }

  50% {
    box-shadow: 0 0 10px 2px rgba(22, 163, 74, 0.25);
  }
}

.badge-verified-glow {
  animation: badge-glow 2.5s infinite;
}

/* Ripple Click Feedback */
.btn:active {
  transform: scale(0.97) !important;
}

/* Ticker Marquee for Trending Food Items */
@keyframes marquee {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-50%);
  }
}

.marquee-container {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  display: flex;
}

.marquee-track {
  display: flex;
  gap: 20px;
  animation: marquee 25s linear infinite;
}

.marquee-track:hover {
  animation-play-state: paused;
}

/* Slide Up Fade In */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}