/* =====================================================================
   animations.css — keyframes, scroll-reveal, micro-interactions
   ===================================================================== */

/* Scroll reveal: elements start hidden, .in-view reveals them */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in-view { opacity: 1; transform: none; }
.reveal.delay-1 { transition-delay: .08s; }
.reveal.delay-2 { transition-delay: .16s; }
.reveal.delay-3 { transition-delay: .24s; }
.reveal.delay-4 { transition-delay: .32s; }

/* Staggered card entrance */
.stagger > * { opacity: 0; transform: translateY(18px); }
.stagger.in-view > * { animation: cardRise .6s var(--ease) forwards; }
.stagger.in-view > *:nth-child(1) { animation-delay: .03s; }
.stagger.in-view > *:nth-child(2) { animation-delay: .09s; }
.stagger.in-view > *:nth-child(3) { animation-delay: .15s; }
.stagger.in-view > *:nth-child(4) { animation-delay: .21s; }
.stagger.in-view > *:nth-child(5) { animation-delay: .27s; }
.stagger.in-view > *:nth-child(6) { animation-delay: .33s; }
.stagger.in-view > *:nth-child(7) { animation-delay: .39s; }
.stagger.in-view > *:nth-child(8) { animation-delay: .45s; }

@keyframes cardRise { to { opacity: 1; transform: none; } }

@keyframes heroZoom { from { transform: scale(1.05); } to { transform: scale(1.16); } }

@keyframes fadeSlide { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

@keyframes scrollTopFloat {
  0%, 100% { transform: translateY(0) scale(1); box-shadow: var(--shadow-md); }
  50% { transform: translateY(-5px) scale(1.03); box-shadow: 0 10px 24px rgba(39,25,19,.3); }
}
@keyframes scrollTopArrow {
  0%, 100% { transform: translateY(2px); }
  50% { transform: translateY(-3px); }
}

@keyframes toastIn { from { opacity: 0; transform: translateY(18px) scale(0.95); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(18px) scale(0.95); } }

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(202,166,91,0.35); transform: scale(1); }
  50% { box-shadow: 0 0 0 18px rgba(202,166,91,0); transform: scale(1.04); }
}
@keyframes loaderSlide { 0% { transform: translateX(-120%); } 100% { transform: translateX(360%); } }
html[dir="rtl"] @keyframes loaderSlide { 0% { transform: translateX(120%); } 100% { transform: translateX(-360%); } }

/* Add-to-cart fly pulse on the float cart */
@keyframes cartBump { 0% { transform: translateX(-50%) scale(1); } 40% { transform: translateX(-50%) scale(1.06); } 100% { transform: translateX(-50%) scale(1); } }
.floating-cart.bump { animation: cartBump .4s var(--ease); }

/* Heart pop */
@keyframes heartPop { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } }
.fav-btn.pop { animation: heartPop .4s var(--ease); }

/* Badge ping on nav count */
@keyframes ping { 0% { transform: scale(1); } 50% { transform: scale(1.4); } 100% { transform: scale(1); } }
.nav-badge.ping, .fc-count.ping { animation: ping .35s var(--ease); }

/* Floating decorative bob */
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.bob { animation: bob 3.5s ease-in-out infinite; }

/* Shimmer for skeletons / placeholders */
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.skeleton {
  background: linear-gradient(90deg, var(--cream-2) 25%, var(--beige) 37%, var(--cream-2) 63%);
  background-size: 200% 100%; animation: shimmer 1.4s infinite;
}

/* gentle press for any .tap */
.tap { transition: transform .15s var(--ease); }
.tap:active { transform: scale(0.95); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .hero::before { animation: none; }
}