/* =====================================================================
   ANIMATIONS.CSS — Keyframes & motion utilities for Over Sauce Lounge
   ===================================================================== */

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ---------------- Hero ambient zoom ---------------- */
@keyframes hero-zoom{
  from{ transform: scale(1.15); }
  to{ transform: scale(1); }
}
.hero-media img{ animation: hero-zoom 16s ease-out forwards; }

/* ---------------- Pulse dot (open-now indicator) ---------------- */
@keyframes pulse-dot{
  0%, 100%{ opacity: 1; transform: scale(1); }
  50%{ opacity: 0.5; transform: scale(0.85); }
}

/* ---------------- Drifting spice-dust particles ---------------- */
@keyframes drift{
  0%{ transform: translateY(0) translateX(0); opacity: 0; }
  10%{ opacity: .6; }
  90%{ opacity: .4; }
  100%{ transform: translateY(-120px) translateX(var(--dx, 20px)); opacity: 0; }
}

/* ---------------- Button bump (add-to-cart feedback) ---------------- */
@keyframes bump{
  0%{ transform: scale(1); }
  35%{ transform: scale(1.3) rotate(6deg); }
  60%{ transform: scale(0.92); }
  100%{ transform: scale(1); }
}

/* ---------------- Cart-count badge pop ---------------- */
@keyframes pop{
  0%{ transform: scale(0); }
  70%{ transform: scale(1.25); }
  100%{ transform: scale(1); }
}
.cart-count-badge{ animation: pop .35s cubic-bezier(.34,1.56,.64,1); }

/* ---------------- Toast enter / exit ---------------- */
@keyframes toast-in{
  from{ opacity: 0; transform: translateY(20px) scale(.95); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toast-out{
  to{ opacity: 0; transform: translateY(10px) scale(.95); }
}
.toast{ animation: toast-in .4s cubic-bezier(.16,1,.3,1) forwards; }
.toast.leaving{ animation: toast-out .35s ease forwards; }

/* ---------------- Scroll reveal ---------------- */
.reveal{
  opacity: 0; transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);
}
.reveal.in{ opacity: 1; transform: translateY(0); }

/* ---------------- Empty-state gentle pulse ---------------- */
@keyframes empty-pulse{
  0%, 100%{ transform: scale(1); opacity: .9; }
  50%{ transform: scale(1.04); opacity: 1; }
}

/* ---------------- Skeleton shimmer sweep ---------------- */
@keyframes shimmer-sweep{
  0%{ background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}

/* ---------------- Image fade-in on load ---------------- */
.img-fade{ opacity: 0; transition: opacity .5s ease; }
.img-fade.loaded{ opacity: 1; }

/* ---------------- WhatsApp send button shine on hover ---------------- */
.wa-btn{ position: relative; overflow: hidden; }
.wa-btn::after{
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.35), transparent 60%);
  opacity: 0; transition: opacity .4s ease;
}
.wa-btn:hover::after{ opacity: 1; }

/* ---------------- Favorite heart "pop" ---------------- */
@keyframes heart-pop{
  0%{ transform: scale(1); }
  40%{ transform: scale(1.4); }
  100%{ transform: scale(1); }
}
.fav-btn.just-added{ animation: heart-pop .4s cubic-bezier(.34,1.56,.64,1); }

/* ---------------- Page-load fade for main content ---------------- */
@keyframes fade-up{
  from{ opacity: 0; transform: translateY(16px); }
  to{ opacity: 1; transform: translateY(0); }
}
.fade-up-in{ animation: fade-up .6s cubic-bezier(.2,.8,.2,1) forwards; }

/* ---------------- Spin (loading indicator) ---------------- */
@keyframes spin{ to{ transform: rotate(360deg); } }
.spin{ animation: spin 1s linear infinite; }

/* ---------------- Marquee for announcement bar (optional long text) ---------------- */
@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}