/* ============================================
   GLASS MORPHISM + CURSOR MESH GRADIENT
   Erebora Motorcycles - Premium White Theme
   Multi-layer glass depth system
   ============================================ */

/* ===== CURSOR MESH GRADIENT (Layer 1) ===== */
/* 4-blob radial gradient follows mouse on desktop */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
            rgba(212, 175, 55, 0.18), transparent 40%),
        radial-gradient(600px circle at
            calc(var(--mouse-x, 50%) + 15%)
            calc(var(--mouse-y, 50%) + 10%),
            rgba(37, 211, 102, 0.08), transparent 45%),
        radial-gradient(500px circle at
            calc(var(--mouse-x, 50%) - 10%)
            calc(var(--mouse-y, 50%) - 8%),
            rgba(184, 148, 31, 0.12), transparent 50%),
        radial-gradient(1200px circle at
            var(--mouse-x, 50%)
            var(--mouse-y, 50%),
            rgba(250, 245, 235, 0.35), transparent 60%);
    transition: opacity 0.6s ease;
    opacity: 0.9;
}

/* Intensify mesh when hovering interactive elements */
body:has(.bike-card:hover)::after,
body:has(.btn-primary:hover)::after {
    opacity: 1;
}

/* ===== GLASS CARD OVERRIDES (Layer 3) ===== */
/* These override the opaque styles in glass.css (previous version) */

.quick-faq-item {
    background: linear-gradient(145deg,
        rgba(250, 245, 235, 0.7) 0%,
        rgba(245, 240, 230, 0.8) 100%);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    border: var(--glass-border);
    box-shadow: var(--elevation-1), var(--glass-highlight);
}

.calculator-card {
    background: linear-gradient(145deg,
        rgba(250, 245, 235, 0.75) 0%,
        rgba(245, 240, 230, 0.88) 100%);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: var(--glass-border);
    box-shadow: var(--elevation-2), var(--glass-highlight);
}

.benefit-card {
    background: linear-gradient(145deg,
        rgba(250, 245, 235, 0.7) 0%,
        rgba(245, 240, 230, 0.82) 100%);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    border: var(--glass-border);
    box-shadow: var(--elevation-1), var(--glass-highlight);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.benefit-card:hover {
    background: linear-gradient(145deg,
        rgba(250, 245, 235, 0.8) 0%,
        rgba(245, 240, 230, 0.92) 100%);
    backdrop-filter: blur(20px) saturate(165%);
    -webkit-backdrop-filter: blur(20px) saturate(165%);
    box-shadow: var(--elevation-3), var(--glow-gold-sm);
    border-color: rgba(212, 175, 55, 0.25);
    transform: translateY(-4px) scale(1.02);
}

.testimonial-card {
    background: linear-gradient(145deg,
        rgba(250, 245, 235, 0.7) 0%,
        rgba(245, 240, 230, 0.82) 100%);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    border: var(--glass-border);
    box-shadow: var(--elevation-1), var(--glass-highlight);
    transition: all 0.3s ease;
    position: relative;
}

.testimonial-card:hover {
    box-shadow: var(--elevation-2), var(--glow-gold-sm);
    border-color: rgba(212, 175, 55, 0.25);
}

/* Gold accent stripe on testimonial hover */
.testimonial-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: var(--space-4);
    bottom: var(--space-4);
    width: 3px;
    background: var(--cta-gradient);
    border-radius: 0 2px 2px 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.testimonial-card:hover::before {
    opacity: 1;
}

.filter-btn {
    background: linear-gradient(145deg,
        rgba(250, 245, 235, 0.65) 0%,
        rgba(245, 240, 230, 0.75) 100%);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border: var(--glass-border);
    transition: all 0.3s ease;
}

.filter-btn:hover {
    background: linear-gradient(145deg,
        rgba(250, 245, 235, 0.85) 0%,
        rgba(245, 240, 230, 0.95) 100%);
    border-color: rgba(212, 175, 55, 0.3);
    box-shadow: var(--elevation-1), var(--glow-gold-sm);
}

.filter-btn.active {
    background: var(--cta-gradient);
    border-color: var(--cta1);
    color: #FAFAF8;
    box-shadow: var(--elevation-1), var(--glow-gold-sm);
}

/* Footer - warm glass section */
.footer {
    background: linear-gradient(180deg,
        rgba(240, 237, 232, 0.75) 0%,
        rgba(245, 240, 230, 0.9) 100%);
    backdrop-filter: blur(8px) saturate(130%);
    -webkit-backdrop-filter: blur(8px) saturate(130%);
}

.footer-quick-links .btn-outline {
    background: linear-gradient(145deg,
        rgba(250, 245, 235, 0.65) 0%,
        rgba(245, 240, 230, 0.75) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-color: rgba(212, 175, 55, 0.1);
}

.footer-quick-links .btn-outline:hover {
    background: linear-gradient(145deg,
        rgba(250, 245, 235, 0.85) 0%,
        rgba(245, 240, 230, 0.95) 100%);
    border-color: rgba(212, 175, 55, 0.3);
    box-shadow: var(--glow-gold-sm);
}

/* ===== MOBILE: SCROLL-LINKED GRADIENT ===== */
@media (max-width: 768px) {
    body::after {
        background:
            radial-gradient(600px circle at 50% var(--scroll-progress, 20%),
                rgba(212, 175, 55, 0.10), transparent 50%),
            radial-gradient(400px circle at 30% calc(var(--scroll-progress, 20%) + 15%),
                rgba(37, 211, 102, 0.05), transparent 50%);
        position: fixed;
    }

    /* Reduce blur on mobile for performance */
    .quick-faq-item,
    .benefit-card,
    .testimonial-card,
    .filter-btn,
    .footer-quick-links .btn-outline {
        backdrop-filter: blur(6px) !important;
        -webkit-backdrop-filter: blur(6px) !important;
    }

    .calculator-card {
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
    }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    body::after {
        display: none;
    }

    .benefit-card,
    .testimonial-card,
    .filter-btn {
        transition-duration: 0.01ms !important;
    }
}