/* Premium, restrained motion for the customer homepage. */
:root {
  --motion-fast: 220ms;
  --motion-medium: 420ms;
  --motion-ease: cubic-bezier(.22,.68,0,1);
}

/* 1. Hero entrance */
.hero .hero-content,
.hero .hero-visual {
  animation: cfp-hero-enter 760ms var(--motion-ease) both;
}
.hero .hero-visual { animation-delay: 120ms; }
.hero-food img { animation: cfp-food-float 6s ease-in-out 900ms infinite; }
@keyframes cfp-hero-enter {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes cfp-food-float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-7px) rotate(1deg); }
}

/* 2. Menu and featured food cards */
.menu-grid > *,
.featured-grid > * {
  transition: transform var(--motion-medium) var(--motion-ease),
              box-shadow var(--motion-medium) var(--motion-ease),
              border-color var(--motion-medium) ease;
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .menu-grid > *:hover,
  .featured-grid > *:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 34px rgba(20, 45, 28, .13);
  }
  .menu-grid img,
  .featured-grid img {
    transition: transform 550ms var(--motion-ease);
  }
  .menu-grid > *:hover img,
  .featured-grid > *:hover img { transform: scale(1.035); }
}
.menu-grid > *:active,
.featured-grid > *:active { transform: scale(.985); }

/* 3. Cart confirmation feedback */
#cartCount.cart-count-pop { animation: cfp-cart-pop 420ms var(--motion-ease); }
.cart-button.cart-button-pop { animation: cfp-cart-pop 420ms var(--motion-ease); }
@keyframes cfp-cart-pop {
  0% { transform: scale(1); }
  38% { transform: scale(1.12); }
  72% { transform: scale(.97); }
  100% { transform: scale(1); }
}
.cfp-added-feedback {
  animation: cfp-feedback-in 1.25s ease both;
}
@keyframes cfp-feedback-in {
  0% { opacity: 0; transform: translateY(7px); }
  18%, 76% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-4px); }
}

/* 4. Offer labels get a gentle highlight, not a distracting pulse */
.offers-grid [class*="badge"],
.offers-grid [class*="tag"],
.offers-grid [class*="label"] {
  animation: cfp-offer-glow 3.8s ease-in-out infinite;
}
@keyframes cfp-offer-glow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.12); }
}

/* 5. Shimmer while existing content is loading */
.menu-empty,
.menu-status[aria-busy="true"],
.testimonial-loading,
#featuredMenuGrid:has(.menu-empty),
#menuGrid:empty {
  background-image: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.48) 45%, transparent 70%);
  background-size: 220% 100%;
  animation: cfp-shimmer 1.7s linear infinite;
}
@keyframes cfp-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -120% 0; }
}

/* 6. Scroll reveal */
.cfp-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 560ms var(--motion-ease), transform 560ms var(--motion-ease);
}
.cfp-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.cfp-reveal-child {
  transition-delay: var(--cfp-reveal-delay, 0ms);
}

@media (max-width: 640px) {
  .hero .hero-content,
  .hero .hero-visual { animation-duration: 600ms; }
  .menu-grid > *,
  .featured-grid > * { will-change: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .cfp-reveal { opacity: 1; transform: none; }
}


/* 7. Contact actions: call vibration with expanding signal rings */
.contact-button--call,
.contact-button--whatsapp {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: visible;
  transform: translateZ(0);
}
.contact-button--call {
  animation: cfp-call-vibrate 3.2s ease-in-out infinite;
}
.contact-button--call::before,
.contact-button--call::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 2px solid currentColor;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  animation: cfp-call-wave 3.2s ease-out infinite;
}
.contact-button--call::after { animation-delay: 1.05s; }
@keyframes cfp-call-vibrate {
  0%, 8%, 16%, 24%, 100% { transform: translateX(0) rotate(0); }
  10%, 18% { transform: translateX(-1.5px) rotate(-1deg); }
  12%, 20% { transform: translateX(1.5px) rotate(1deg); }
  14%, 22% { transform: translateX(-1px) rotate(-.5deg); }
}
@keyframes cfp-call-wave {
  0% { transform: scale(.96); opacity: .42; }
  72%, 100% { transform: scale(1.28); opacity: 0; }
}

/* 8. WhatsApp: soft lift, luminous icon and a passing highlight */
.contact-button--whatsapp {
  overflow: hidden;
  animation: cfp-whatsapp-float 3.8s ease-in-out infinite;
  transition: transform 260ms ease, box-shadow 260ms ease, filter 260ms ease;
}
.contact-button--whatsapp::before {
  content: "";
  position: absolute;
  top: -45%;
  left: -75%;
  width: 42%;
  height: 190%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent);
  transform: skewX(-22deg);
  pointer-events: none;
  animation: cfp-whatsapp-shine 4.6s ease-in-out infinite;
}
.contact-button--whatsapp img {
  transform-origin: center;
  animation: cfp-whatsapp-icon 2.8s ease-in-out infinite;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.16));
}
@keyframes cfp-whatsapp-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes cfp-whatsapp-shine {
  0%, 18% { left: -75%; opacity: 0; }
  30% { opacity: 1; }
  58%, 100% { left: 140%; opacity: 0; }
}
@keyframes cfp-whatsapp-icon {
  0%, 100% { transform: scale(1) rotate(0); }
  50% { transform: scale(1.09) rotate(-5deg); }
}
@media (hover: hover) and (pointer: fine) {
  .contact-button--call:hover,
  .contact-button--whatsapp:hover {
    animation-play-state: paused;
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(0,0,0,.18);
    filter: brightness(1.04);
  }
}
@media (prefers-reduced-motion: reduce) {
  .contact-button--call,
  .contact-button--call::before,
  .contact-button--call::after,
  .contact-button--whatsapp,
  .contact-button--whatsapp::before,
  .contact-button--whatsapp img {
    animation: none !important;
  }
}


/* Contact button correction: keep both button containers completely still.
   Animate only the icon image; call waves grow from the icon wrapper. */
.contact-button--call,
.contact-button--whatsapp {
  animation: none !important;
  transform: none;
  transition: none;
}
.contact-button--call::before,
.contact-button--call::after,
.contact-button--whatsapp::before {
  content: none !important;
  animation: none !important;
}
.contact-button--call > span:first-child,
.contact-button--whatsapp > span:first-child {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  isolation: isolate;
}
.contact-button--call > span:first-child::before,
.contact-button--call > span:first-child::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 2px solid currentColor;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  animation: cfp-call-icon-wave 2.8s ease-out infinite;
}
.contact-button--call > span:first-child::after {
  animation-delay: 1.4s;
}
.contact-button--call img {
  transform-origin: center;
  animation: cfp-call-icon-vibrate 2.8s ease-in-out infinite;
}
.contact-button--whatsapp img {
  transform-origin: center;
  animation: cfp-whatsapp-icon 2.8s ease-in-out infinite;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.16));
}
@keyframes cfp-call-icon-vibrate {
  0%, 8%, 16%, 24%, 100% { transform: translateX(0) rotate(0); }
  10%, 18% { transform: translateX(-2px) rotate(-5deg); }
  12%, 20% { transform: translateX(2px) rotate(5deg); }
  14%, 22% { transform: translateX(-1px) rotate(-3deg); }
}
@keyframes cfp-call-icon-wave {
  0% { transform: scale(.72); opacity: .5; }
  75%, 100% { transform: scale(1.7); opacity: 0; }
}
@media (hover: hover) and (pointer: fine) {
  .contact-button--call:hover,
  .contact-button--whatsapp:hover {
    transform: none;
    box-shadow: none;
    filter: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .contact-button--call > span:first-child::before,
  .contact-button--call > span:first-child::after,
  .contact-button--call img,
  .contact-button--whatsapp img {
    animation: none !important;
  }
}


/* Featured food cards: remove blinking/fading motion completely. */
#featuredMenuGrid .cfp-reveal,
#featuredMenuGrid .cfp-reveal-child,
#featuredMenuGrid .featured-category-grid,
#featuredMenuGrid .featured-card,
#featuredMenuGrid .featured-card-image-wrap,
#featuredMenuGrid .featured-card img {
  animation: none !important;
  opacity: 1 !important;
  filter: none !important;
}
#featuredMenuGrid .cfp-reveal,
#featuredMenuGrid .cfp-reveal.is-visible {
  transform: none !important;
  transition: none !important;
}
#featuredMenuGrid .featured-card img {
  visibility: visible !important;
}

/* Call action: no expanding waves; vibrate only the call icon image. */
.contact-button--call > span:first-child::before,
.contact-button--call > span:first-child::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}
.contact-button--call img {
  animation: cfp-call-icon-vibrate 2.8s ease-in-out infinite !important;
}