/* ====================================================================
   PROJECT: LUNA DIGITAL MENU - MAGIC EDITION
   VERSION: 4.0.0 (The Perfect Balance)
   FEATURES: Spotlight, Reflection, 3D Ribbons, Neon Scrollbar, Noise
   ==================================================================== */

/* =================================================================
   1. CUSTOM SCROLLBAR (FEATURE #10)
   ???????? ?????????? ??? ?????? ?? ????
================================================================= */
::-webkit-scrollbar {
    width: 8px;
    height: 8px; /* ???? ?????? ???? */
}
::-webkit-scrollbar-track {
    background: #050505; 
}
::-webkit-scrollbar-thumb {
    background: #10b981;
    border-radius: 10px;
    box-shadow: 0 0 10px #10b981; /* ????? ????? */
}

/* =================================================================
   2. CORE SETUP & VARIABLES
================================================================= */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0; padding: 0; outline: none;
    -webkit-tap-highlight-color: transparent;
}
html { scroll-behavior: smooth; }

:root {
    --clr-bg-main: #050505;
    --clr-primary: #10b981;      /* Emerald Neon */
    --clr-primary-glow: rgba(16, 185, 129, 0.5);
    --clr-secondary: #3b82f6;    /* Ocean Blue */
    --clr-danger: #ef4444;
    --clr-text-main: #ffffff;
    --clr-text-muted: #94a3b8;
    
    --glass-bg: rgba(15, 23, 42, 0.6);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-blur: blur(16px);
    
    --font-family: 'Vazirmatn', sans-serif;
}

body {
    font-family: var(--font-family);
    background-color: var(--clr-bg-main);
    color: var(--clr-text-main);
    min-height: 100vh;
    padding-top: 180px;
    overflow-x: hidden;
    perspective: 1000px;
}

/* FEATURE: NOISE TEXTURE (???? ???????) */
body::before {
    content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* ???????? ????? (Blobs) */
body::after {
    content: ''; position: fixed; top: -20%; left: -20%; width: 80vw; height: 80vw;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.1), transparent 60%);
    filter: blur(100px); z-index: -1; animation: breathe 10s infinite alternate;
}
@keyframes breathe { from { transform: scale(1); } to { transform: scale(1.1); } }

.container { max-width: 1300px; margin: 0 auto; padding: 0 20px; }

/* =================================================================
   3. TYPOGRAPHY & HEADER
================================================================= */
/* FEATURE #8: TYPEWRITER & SHIMMER TEXT */
h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 900; text-align: center; margin: 40px 0;
    color: transparent;
    background: linear-gradient(to right, #fff, var(--clr-primary), #fff);
    background-size: 200%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: textShimmer 3s linear infinite;
    text-shadow: 0 0 30px rgba(16, 185, 129, 0.2);
}
@keyframes textShimmer { 0% { background-position: 0% center; } 100% { background-position: 200% center; } }

.sticky-header {
    position: fixed; top: 0; left: 0; width: 100%; z-index: 100; padding: 20px 0 15px;
    background: rgba(5, 5, 10, 0.8);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--glass-border);
}

/* Scroll Progress */
#scroll-progress-bar {
    position: absolute; bottom: 0; right: 0; height: 3px; width: 100%;
    background: linear-gradient(90deg, var(--clr-primary), var(--clr-secondary));
    transform-origin: right; scale: 0 1;
    animation: scrollProgress auto linear; animation-timeline: scroll();
}
@keyframes scrollProgress { to { scale: 1 1; } }

/* Search Bar */
.search-bar-container { max-width: 800px; margin: 0 auto 15px; padding: 0 20px; position: relative; }
#live-search {
    width: 100%; background: rgba(255,255,255,0.03); border: 1px solid var(--glass-border);
    color: #fff; padding: 16px 50px 16px 20px; border-radius: 50px; transition: 0.3s;
}
#live-search:focus {
    background: rgba(255,255,255,0.08); border-color: var(--clr-primary);
    box-shadow: 0 0 20px var(--clr-primary-glow);
}
.search-icon { position: absolute; right: 40px; top: 50%; transform: translateY(-50%); color: var(--clr-text-muted); }

/* FEATURE #2: MAGNETIC BUTTONS (Simple Hover Effect) */
.filter-container {
    display: flex; gap: 12px; padding: 0 20px 10px; overflow-x: auto; justify-content: center; scrollbar-width: none;
}
.filter-btn {
    padding: 10px 25px; border-radius: 30px; background: transparent;
    border: 1px solid var(--glass-border); color: var(--clr-text-muted);
    cursor: pointer; transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.filter-btn:hover, .filter-btn.active {
    background: var(--clr-primary); color: #000; font-weight: bold; border-color: var(--clr-primary);
    transform: translateY(-3px) scale(1.05); /* ??? ???????? */
    box-shadow: 0 5px 15px var(--clr-primary-glow);
}

/* =================================================================
   4. MAGIC GRID & SPOTLIGHT EFFECT (FEATURE #12)
================================================================= */
.menu-category-section { margin-bottom: 70px; }
.category-title {
    font-size: 1.8rem; margin-bottom: 30px; display: flex; align-items: center; gap: 15px;
    text-shadow: 0 0 10px rgba(255,255,255,0.3);
}

.menu-items-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 35px; padding: 20px; perspective: 1500px;
    /* ???? ????? ????: */
    transition: 0.3s;
}

/* ???? Spotlight: ???? ??? ???? ???? ????? ????????? ?? ???? ???? ??? ???? */
.menu-items-grid:hover .menu-item-card:not(:hover) {
    filter: blur(2px) grayscale(0.6) brightness(0.7);
    opacity: 0.7;
    transform: scale(0.98);
}

/* =================================================================
   5. MAGIC CARDS (FEATURE #4, #5, #14)
================================================================= */
.menu-item-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    position: relative;
    display: flex; flex-direction: column;
    transform-style: preserve-3d;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    overflow: visible; /* ???? ???????? */
}

/* FEATURE #4: ANIMATED RGB BORDER (????? ??????????? ????) */
.menu-item-card::before {
    content: ''; position: absolute; inset: -2px; z-index: -1; border-radius: 22px;
    background: linear-gradient(45deg, #ff0000, #00ff00, #0000ff, #ff0000);
    background-size: 400%; animation: glowingBorder 20s linear infinite;
    opacity: 0; transition: opacity 0.4s;
}
.menu-item-card:hover::before { opacity: 0.6; }
@keyframes glowingBorder { 0% { background-position: 0 0; } 50% { background-position: 400% 0; } 100% { background-position: 0 0; } }

.menu-item-card:hover {
    transform: translateY(-10px) rotateX(5deg);
    box-shadow: 0 20px 40px rgba(0,0,0,0.6);
    background: rgba(30, 41, 59, 0.8);
    z-index: 10;
}

/* FEATURE #5: IMAGE REFLECTION (??????) */
.card-image-container {
    width: 100%; height: 210px; position: relative;
    border-radius: 20px 20px 0 0; overflow: hidden;
    transform: translateZ(20px);
    /* ??? ?? ?????? ???????: */
    -webkit-box-reflect: below 2px linear-gradient(transparent, transparent 80%, rgba(255,255,255,0.2));
}

.card-image { width: 100%; height: 100%; object-fit: cover; transition: 0.8s; }
.menu-item-card:hover .card-image { transform: scale(1.15) rotate(2deg); }

/* FEATURE #14: 3D RIBBONS (????? ?? ??? ?? ????) */
.card-badge-container {
    position: absolute; top: -8px; right: -8px; z-index: 20;
    display: flex; flex-direction: column; gap: 5px; transform: translateZ(50px);
}
.badge {
    background: var(--clr-primary); color: #000; font-weight: bold;
    padding: 5px 15px; font-size: 0.8rem;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10% 50%); /* ??? ????? */
    box-shadow: 0 5px 10px rgba(0,0,0,0.5);
}
.promo-badge { background: var(--clr-danger); color: #fff; }

/* Content */
.card-content {
    padding: 20px; flex-grow: 1; display: flex; flex-direction: column;
    transform: translateZ(30px);
}
.item-name {
    font-size: 1.3rem; font-weight: bold; margin-bottom: 8px; color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.item-description {
    font-size: 0.9rem; color: var(--clr-text-muted); line-height: 1.6;
    margin-bottom: 15px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* FEATURE #3: RIPPLE BUTTON EFFECT (???? ????) */
.item-price {
    margin-top: auto; padding-top: 15px; border-top: 1px solid rgba(255,255,255,0.1);
    display: flex; justify-content: flex-end; align-items: center;
}
.final-price {
    font-size: 1.5rem; font-weight: 800; color: var(--clr-primary);
    text-shadow: 0 0 15px var(--clr-primary-glow);
}
.original-price { text-decoration: line-through; color: #666; font-size: 0.9rem; margin-left: 10px; }

/* =================================================================
   6. MODAL & LOADER (FEATURE #13)
================================================================= */
.modal-overlay {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.9);
    backdrop-filter: blur(20px); z-index: 2000;
    justify-content: center; align-items: center; padding: 20px;
    opacity: 0; transition: 0.3s;
}
.modal-overlay[style*="display: flex"] { opacity: 1; }

.modal-content {
    background: #0f172a; width: 100%; max-width: 550px;
    border-radius: 24px; border: 1px solid var(--glass-border);
    box-shadow: 0 0 60px rgba(16,185,129,0.15);
    overflow: hidden; transform: scale(0.9) translateY(20px);
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.modal-overlay[style*="display: flex"] .modal-content { transform: scale(1) translateY(0); }

.close-modal-btn {
    position: absolute; top: 15px; right: 15px; width: 45px; height: 45px;
    border-radius: 50%; background: rgba(0,0,0,0.6); color: #fff;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    border: 1px solid rgba(255,255,255,0.2); transition: 0.3s; z-index: 10;
}
.close-modal-btn:hover { background: var(--clr-danger); transform: rotate(90deg); }

#modal-image { width: 100%; height: 320px; object-fit: cover; mask-image: linear-gradient(to bottom, black 60%, transparent 100%); }
#modal-name { font-size: 2rem; color: var(--clr-primary); padding: 0 25px; margin-top: -30px; position: relative; }
#modal-description { padding: 10px 25px; color: #cbd5e1; line-height: 1.8; }
.modal-details {
    padding: 20px 25px; background: rgba(255,255,255,0.02);
    border-top: 1px solid var(--glass-border);
    display: flex; justify-content: space-between; align-items: center;
}
#modal-price { font-size: 1.8rem; font-weight: 900; color: #fff; }

/* =================================================================
   7. FOOTER
================================================================= */
.site-footer {
    margin-top: 100px; padding: 60px 0 30px; text-align: center;
    background: linear-gradient(to top, #000, transparent);
    border-top: 1px solid var(--glass-border);
}
.social-link {
    width: 55px; height: 55px; border-radius: 15px; background: rgba(255,255,255,0.05);
    display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.5rem;
    transition: 0.3s; margin: 0 5px; display: inline-flex;
}
.social-link:hover { background: var(--clr-primary); transform: translateY(-5px); box-shadow: 0 0 15px var(--clr-primary); }

/* =================================================================
   8. MOBILE OPTIMIZATIONS (Smart Fallbacks)
================================================================= */
@media (max-width: 768px) {
    body { padding-top: 190px; }
    h1 { margin: 20px 0; -webkit-text-stroke: 0.5px rgba(255,255,255,0.5); }
    
    /* Horizontal Scroll Story Mode */
    .menu-items-grid {
        display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
        gap: 15px; padding: 10px 15px 40px;
        perspective: none; /* Disable 3D on mobile */
    }
    
    /* Disable Spotlight on Mobile (UX bad practice on touch) */
    .menu-items-grid:hover .menu-item-card:not(:hover) {
        filter: none; opacity: 1; transform: none;
    }
    
    .menu-item-card {
        min-width: 280px; scroll-snap-align: center; margin-bottom: 0;
        transform: none !important;
    }
    .menu-item-card:active { transform: scale(0.96) !important; }
    
    .card-badge-container { top: 10px; right: 10px; transform: none; }
    .badge { clip-path: none; border-radius: 6px; } /* Simple badge on mobile */
    
    .filter-container { justify-content: flex-start; }
    .modal-content { width: 95%; height: 85vh; overflow-y: auto; }
}

/* Unavailable */
.menu-item-card.unavailable { opacity: 0.5; filter: grayscale(1); pointer-events: none; }
.menu-item-card.unavailable::after {
    content: "???????"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 2rem; font-weight: 900; color: #fff; background: rgba(0,0,0,0.8);
}