/**
 * ═══════════════════════════════════════════════════════════════════
 *  AURA CAFE — Premium UI Upgrade v3.0 (100X Luxury Rebuild)
 *  Glassmorphism · Liquid Caustics · Gloss Sweeps · Premium Fonts
 * ═══════════════════════════════════════════════════════════════════
 */

/* ═══ 1. CORE FONTS & TYPOGRAPHY ENHANCEMENTS ═══ */
body {
    font-family: var(--fb);
    letter-spacing: 0.02em;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .section-heading, .logo-title {
    font-family: var(--fd);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

/* Elegant italic serif accents */
.accent-serif {
    font-family: var(--fd);
    font-style: italic;
    font-weight: 400;
}

/* ═══ 2. PREMIUM NAVBAR — Scroll-aware Floating Glassmorphism ═══ */
.navbar,
.m3-top-app-bar {
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.navbar.scrolled,
.m3-top-app-bar.scrolled {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(28px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
    box-shadow: 0 10px 40px rgba(26, 42, 78, 0.06), 
                inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    border-bottom: 1px solid rgba(107, 159, 184, 0.18) !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

[data-theme="dark"] .navbar.scrolled,
[data-theme="dark"] .m3-top-app-bar.scrolled {
    background: rgba(5, 13, 26, 0.75) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), 
                inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    border-bottom: 1px solid rgba(201, 214, 223, 0.12) !important;
}

/* ═══ 3. GLOSS SWEEP & GLASSMORPHISM Overhaul ═══ */
/* Elite glassmorphic cards with modern gloss shine effect on hover */
.menu-item, 
.cart, 
.glass-card, 
.space-card, 
.tier-card,
.stat-item {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.65) !important;
    backdrop-filter: blur(28px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
    border: 1px solid rgba(107, 159, 184, 0.18) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 16px 40px rgba(26, 42, 78, 0.04), 
                inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
    border-radius: 24px !important;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

[data-theme="dark"] .menu-item,
[data-theme="dark"] .cart,
[data-theme="dark"] .glass-card,
[data-theme="dark"] .space-card,
[data-theme="dark"] .tier-card,
[data-theme="dark"] .stat-item {
    background: rgba(10, 26, 46, 0.5) !important;
    border: 1px solid rgba(201, 214, 223, 0.1) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3), 
                inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* Glossy Sweep Overlay on Hover */
.menu-item::after,
.space-card::after,
.tier-card::after {
    content: '';
    position: absolute;
    top: 0; left: -150%; width: 50%; height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.35) 50%, 
        transparent);
    transform: skewX(-25deg);
    transition: none;
    pointer-events: none;
}

.menu-item:hover::after,
.space-card:hover::after,
.tier-card:hover::after {
    left: 150%;
    transition: left 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] .menu-item::after,
[data-theme="dark"] .space-card::after,
[data-theme="dark"] .tier-card::after {
    background: linear-gradient(90deg, 
        transparent, 
        rgba(201, 214, 223, 0.2) 50%, 
        transparent);
}

/* Elegant Scale Lift */
.menu-item:hover,
.space-card:hover,
.tier-card:hover {
    transform: translateY(-8px) scale(1.015) !important;
    box-shadow: 0 24px 50px rgba(26, 42, 78, 0.08), 
                0 0 0 1px rgba(107, 159, 184, 0.3) !important;
}

[data-theme="dark"] .menu-item:hover,
[data-theme="dark"] .space-card:hover,
[data-theme="dark"] .tier-card:hover {
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.45), 
                0 0 20px rgba(107, 159, 184, 0.15) !important;
    border-color: rgba(107, 159, 184, 0.3) !important;
}

/* ═══ 4. STUNNING CAUSTIC WATER WAVES & LIQUID BACKGROUNDS ═══ */
/* Smooth moving fluid grid meshes in light and dark mode */
body::after {
    content: "";
    position: fixed;
    top: -50%; left: -50%; width: 200%; height: 200%;
    z-index: -2;
    pointer-events: none;
    background: radial-gradient(circle at 75% 20%, rgba(232, 238, 243, 0.85), transparent 45%),
                radial-gradient(circle at 20% 80%, rgba(201, 214, 223, 0.7), transparent 45%),
                radial-gradient(circle at 50% 50%, rgba(45, 90, 61, 0.04), transparent 50%),
                #F4F7FA;
    animation: lightFluidMesh 22s ease infinite alternate;
}

[data-theme="dark"] body::after {
    background: radial-gradient(circle at 75% 20%, rgba(10, 26, 46, 0.7), transparent 45%),
                radial-gradient(circle at 20% 80%, rgba(5, 13, 26, 0.95), transparent 45%),
                radial-gradient(circle at 50% 50%, rgba(45, 90, 61, 0.03), transparent 50%),
                #050D1A;
    animation: darkFluidMesh 22s ease infinite alternate;
}

@keyframes lightFluidMesh {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(4deg) scale(1.08); }
    100% { transform: rotate(-4deg) scale(0.95); }
}

@keyframes darkFluidMesh {
    0% { transform: rotate(0deg) scale(1.02); }
    50% { transform: rotate(-4deg) scale(0.96); }
    100% { transform: rotate(4deg) scale(1.05); }
}

/* ═══ 5. MODERN INDUSTRIAL HOVER GLOW FOR BUTTONS ═══ */
.btn-primary,
.cta-button,
.m3-filled-button {
    background: linear-gradient(135deg, var(--md-sys-color-primary) 0%, var(--md-sys-color-secondary) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 15px rgba(26, 42, 78, 0.15) !important;
    border-radius: 99px !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative;
    z-index: 1;
}

.btn-primary:hover,
.cta-button:hover,
.m3-filled-button:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(26, 42, 78, 0.25), 
                0 0 20px rgba(107, 159, 184, 0.3) !important;
}

[data-theme="dark"] .btn-primary,
[data-theme="dark"] .cta-button,
[data-theme="dark"] .m3-filled-button {
    background: linear-gradient(135deg, var(--md-sys-color-primary) 0%, var(--md-sys-color-secondary) 100%) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .cta-button:hover,
[data-theme="dark"] .m3-filled-button:hover {
    box-shadow: 0 8px 25px rgba(107, 159, 184, 0.45), 
                0 0 15px rgba(107, 159, 184, 0.25) !important;
}

/* Ghost Button Overhaul */
.btn-ghost {
    background: transparent !important;
    border: 1.5px solid var(--md-sys-color-primary) !important;
    color: var(--md-sys-color-primary) !important;
    font-weight: 600 !important;
    border-radius: 99px !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-ghost:hover {
    background: rgba(107, 159, 184, 0.08) !important;
    border-color: var(--md-sys-color-secondary) !important;
    color: var(--md-sys-color-secondary) !important;
    transform: translateY(-2px) !important;
}

[data-theme="dark"] .btn-ghost {
    border-color: var(--md-sys-color-primary) !important;
    color: var(--md-sys-color-primary) !important;
}

[data-theme="dark"] .btn-ghost:hover {
    background: rgba(201, 214, 223, 0.08) !important;
    color: #FFFFFF !important;
    border-color: #FFFFFF !important;
}

/* ═══ 6. BRAND COUNTERS & INTERACTION SWEARS ═══ */
.stat-number {
    font-size: clamp(2.25rem, 6vw, 3.75rem);
    font-weight: 700;
    color: var(--md-sys-color-primary);
    text-shadow: 0 4px 12px rgba(107, 159, 184, 0.15);
}

[data-theme="dark"] .stat-number {
    color: var(--md-sys-color-primary);
    text-shadow: 0 0 15px rgba(201, 214, 223, 0.3);
}

/* ═══ 7. MỘC ZONE (FOREST GREEN FENG SHUI MEDITATION) ═══ */
/* Add highly balanced plant/jade leaf highlights */
.moc-highlight {
    color: var(--aura-moc-light) !important;
    font-weight: 600;
}

.section-label {
    background: rgba(45, 90, 61, 0.08) !important;
    border: 1px solid rgba(45, 90, 61, 0.18) !important;
    color: var(--aura-moc-primary) !important;
    border-radius: 8px !important;
    padding: 6px 14px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.15em !important;
}

[data-theme="dark"] .section-label {
    background: rgba(45, 90, 61, 0.18) !important;
    border-color: rgba(168, 197, 160, 0.3) !important;
    color: var(--aura-moc-pale) !important;
}

/* ═══ 8. HERO v8 LOGO EMBOSS sweeps ═══ */
.logo-stage {
    filter: drop-shadow(0 12px 32px rgba(26, 42, 78, 0.08));
    animation: goldPulse 4s ease-in-out infinite alternate;
}

[data-theme="dark"] .logo-stage {
    filter: drop-shadow(0 12px 40px rgba(107, 159, 184, 0.18));
}

@keyframes goldPulse {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}

/* ═══ 9. RIPPLES CUSTOM COLORING ═══ */
.ripple-primary {
    border: 2px solid rgba(107, 159, 184, 0.45);
    background: rgba(107, 159, 184, 0.05);
}

.ripple-echo {
    border: 1px solid rgba(107, 159, 184, 0.25);
}

/* ═══ 10. PREFERS REDUCED MOTION ═══ */
@media (prefers-reduced-motion: reduce) {
    body::after {
        animation: none !important;
    }
    .menu-item::after,
    .space-card::after,
    .tier-card::after {
        display: none !important;
    }
}