:root {
    --bg: #FAFAFA;
    --surface: #FFFFFF;
    --text-primary: #111827;
    --text-secondary: #6B7280;
    --accent: #2563EB;
    --accent-hover: #1D4ED8;
    --accent-light: #DBEAFE;
    --whatsapp: #25D366;
}

html { scroll-behavior: smooth; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #9CA3AF; }

/* Reveal animations */
.reveal-hidden {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger reveal */
.stagger-reveal > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.stagger-reveal.revealed > *:nth-child(1)  { transition-delay: 0ms;    opacity: 1; transform: translateY(0); }
.stagger-reveal.revealed > *:nth-child(2)  { transition-delay: 100ms;  opacity: 1; transform: translateY(0); }
.stagger-reveal.revealed > *:nth-child(3)  { transition-delay: 200ms;  opacity: 1; transform: translateY(0); }
.stagger-reveal.revealed > *:nth-child(4)  { transition-delay: 300ms;  opacity: 1; transform: translateY(0); }
.stagger-reveal.revealed > *:nth-child(5)  { transition-delay: 400ms;  opacity: 1; transform: translateY(0); }
.stagger-reveal.revealed > *:nth-child(6)  { transition-delay: 500ms;  opacity: 1; transform: translateY(0); }
.stagger-reveal.revealed > *:nth-child(7)  { transition-delay: 600ms;  opacity: 1; transform: translateY(0); }
.stagger-reveal.revealed > *:nth-child(8)  { transition-delay: 700ms;  opacity: 1; transform: translateY(0); }
.stagger-reveal.revealed > *:nth-child(9)  { transition-delay: 800ms;  opacity: 1; transform: translateY(0); }
.stagger-reveal.revealed > *:nth-child(10) { transition-delay: 900ms;  opacity: 1; transform: translateY(0); }
.stagger-reveal.revealed > *:nth-child(11) { transition-delay: 1000ms; opacity: 1; transform: translateY(0); }
.stagger-reveal.revealed > *:nth-child(12) { transition-delay: 1100ms; opacity: 1; transform: translateY(0); }

/* Hero animations */
.hero-animate       { animation: fadeIn 0.9s ease-out forwards; }
.hero-animate-delay { animation: fadeIn 0.9s ease-out 0.2s forwards; opacity: 0; }
.hero-animate-delay-2 { animation: fadeIn 0.9s ease-out 0.4s forwards; opacity: 0; }

@keyframes fadeIn {
    0%   { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Map placeholder grid */
.map-placeholder {
    background-image:
        linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
    background-size: 30px 30px;
    background-position: center center;
}

/* Mobile menu */
.mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity 0.3s ease;
    opacity: 0;
}
.mobile-menu.open { max-height: 320px; opacity: 1; }

/* Product cards */
.product-card {
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}

/* Button hover */
.btn-hover-scale {
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.3s ease;
}
.btn-hover-scale:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 30px rgba(37, 99, 235, 0.3);
}

/* Category cards */
.category-overlay { transition: opacity 0.4s ease; }
.category-card:hover .category-overlay { opacity: 0.6; }
.category-card img {
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.category-card:hover img { transform: scale(1.06); }

/* Star rating */
.star-filled { color: #F59E0B; }

/* Product modal */
#product-modal {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
#product-modal.show { opacity: 1; pointer-events: auto; }
#modal-content {
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#product-modal.show #modal-content { transform: scale(1); }
body.modal-open { overflow: hidden; }

/* Floating action button */
.fab-container { transition: all 0.3s ease; }
.fab-option {
    transform: scale(0);
    opacity: 0;
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.fab-container.active .fab-option { transform: scale(1); opacity: 1; }
.fab-option:nth-child(1) { transition-delay: 0s; }
.fab-option:nth-child(2) { transition-delay: 0.05s; }