/* ===== LIKEFOOD UX ENHANCEMENTS (Safe) ===== */
html { scroll-behavior: smooth; }

/* ===== ANIMATIONS (keyframes only, no opacity:0 defaults) ===== */
@keyframes lfFadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes lfSlideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes lfCartPop { 0% { transform: scale(1); } 30% { transform: scale(1.3); } 60% { transform: scale(0.9); } 100% { transform: scale(1); } }
@keyframes lfFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ===== SCROLL REVEAL (JS adds .lf-animate to trigger) ===== */
.lf-animate { animation: lfFadeInUp 0.5s ease-out both; }

/* ===== BUTTON RIPPLE ===== */
.lf-ripple { position: relative; overflow: hidden; }
.lf-ripple::after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: radial-gradient(circle, rgba(255,255,255,0.35) 10%, transparent 70%); transform: scale(0); opacity: 0; transition: transform 0.5s, opacity 0.5s; pointer-events: none; border-radius: inherit; }
.lf-ripple:active::after { transform: scale(3); opacity: 1; transition: 0s; }

/* ===== NAVBAR SCROLL ===== */
.top-navbar { transition: all 0.35s cubic-bezier(.4,0,.2,1) !important; animation: lfSlideDown 0.5s ease-out; }
.top-navbar.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,0.08) !important; }

/* ===== CARD HOVER ===== */
.lf-card, .lf-card-flash, .wf-product-card { transition: all 0.35s cubic-bezier(.4,0,.2,1) !important; }
.lf-card:hover, .lf-card-flash:hover, .wf-product-card:hover { transform: translateY(-6px) !important; box-shadow: 0 12px 40px rgba(0,0,0,0.12) !important; }

/* ===== TOAST ===== */
.lf-toast { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%) translateY(20px); background: #1f2937; color: #fff; padding: 14px 24px; border-radius: 12px; font-size: .9rem; font-weight: 500; z-index: 10000; display: flex; align-items: center; gap: 10px; box-shadow: 0 8px 30px rgba(0,0,0,0.2); opacity: 0; transition: all 0.35s cubic-bezier(.4,0,.2,1); max-width: 90vw; }
.lf-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.lf-toast.success { border-left: 4px solid #22c55e; }
.lf-toast.warning { border-left: 4px solid #f59e0b; }
.lf-toast.error { border-left: 4px solid #ef4444; }

/* ===== SCROLL PROGRESS ===== */
.lf-scroll-progress { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, #22c55e, #86efac); z-index: 10001; transition: width 0.1s ease; border-radius: 0 2px 2px 0; }

/* ===== FLOATING CART BOUNCE ===== */
.lf-floating-cart { animation: lfFloat 3s ease-in-out infinite; }
.lf-floating-cart:hover { animation-play-state: paused; }

/* ===== SCROLL FADE EDGES ===== */
.lf-cat-scroll, .lf-flash-scroll { mask-image: linear-gradient(90deg, transparent, black 3%, black 97%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 3%, black 97%, transparent); }

/* ===== CART POP ===== */
.lf-cart-pop { animation: lfCartPop 0.4s cubic-bezier(.4,0,.2,1); }

/* ===== ACCESSIBILITY ===== */
a:focus-visible, button:focus-visible { outline: 2px solid #22c55e; outline-offset: 2px; border-radius: 4px; }
::selection { background: #bbf7d0; color: #111827; }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f9fafb; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }