/**
 * Next-Level Glassmorphism Enhancements
 * Ultra Premium Glass Effects for VDESIGN INTERIEUR
 * NO glassmorphism on carousel images, hero section, or landing page
 * =========================================
 */

/* ============================================
   CSS VARIABLES FOR GLASSMORPHISM
   ============================================ */
:root {
    /* Glass colors */
    --glass-white: rgba(255, 255, 255, 0.08);
    --glass-white-hover: rgba(255, 255, 255, 0.12);
    --glass-white-strong: rgba(255, 255, 255, 0.15);
    --glass-dark: rgba(0, 0, 0, 0.4);
    --glass-dark-subtle: rgba(0, 0, 0, 0.2);
    --glass-primary: rgba(180, 160, 100, 0.15);
    --glass-primary-glow: rgba(180, 160, 100, 0.3);

    /* Blur intensities */
    --blur-xs: 4px;
    --blur-sm: 8px;
    --blur-md: 16px;
    --blur-lg: 24px;
    --blur-xl: 32px;
    --blur-2xl: 48px;

    /* Glass border colors */
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-border-hover: rgba(255, 255, 255, 0.25);
    --glass-border-primary: rgba(180, 160, 100, 0.3);

    /* Glass shadows */
    --glass-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.2);
    --glass-shadow-md: 0 8px 32px rgba(0, 0, 0, 0.3);
    --glass-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.4);
    --glass-shadow-glow: 0 0 40px rgba(180, 160, 100, 0.2);
}


/* ============================================
   PORTFOLIO CAROUSEL - ADJUSTED CARD SIZES
   Smaller widths so full image is visible
   ============================================ */

/* Keep mobile at 95% */
.flex-\[0_0_100\%\] {
    flex: 0 0 95% !important;
}

@media (min-width: 640px) {
    .sm\:flex-\[0_0_80\%\] {
        flex: 0 0 70% !important;
    }
}

@media (min-width: 768px) {
    .md\:flex-\[0_0_60\%\] {
        flex: 0 0 50% !important;
    }
}

@media (min-width: 1024px) {
    .lg\:flex-\[0_0_45\%\] {
        flex: 0 0 42% !important;
    }
}

@media (min-width: 1280px) {
    .xl\:flex-\[0_0_35\%\] {
        flex: 0 0 38% !important;
    }
}

@media (min-width: 1536px) {
    .xl\:flex-\[0_0_35\%\] {
        flex: 0 0 35% !important;
    }
}


/* ============================================
   CAROUSEL CARDS - NO GLASSMORPHISM
   Keep clean, sharp images
   ============================================ */

.group.relative.overflow-hidden.rounded-lg.bg-card {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}

.group.relative.overflow-hidden.rounded-lg.bg-card::before {
    display: none !important;
}


/* ============================================
   SECTION CARDS GLASSMORPHISM
   Only apply to Services, Process, Testimonials, Contact
   (These are below the landing/hero section)
   ============================================ */

/* Service cards, process cards, testimonial cards */
.stagger-item.bg-card,
.stagger-item.bg-card\/10,
.stagger-item[class*="backdrop-blur"] {
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.08) 0%,
            rgba(255, 255, 255, 0.03) 50%,
            rgba(0, 0, 0, 0.05) 100%) !important;
    backdrop-filter: blur(var(--blur-lg)) saturate(150%) !important;
    -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(150%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.3),
        inset 0 1px 1px rgba(255, 255, 255, 0.08),
        inset 0 -1px 1px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    position: relative;
    overflow: hidden;
}

/* Glass shimmer on hover */
.stagger-item.bg-card::after,
.stagger-item.bg-card\/10::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center,
            rgba(180, 160, 100, 0.1) 0%,
            transparent 60%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.stagger-item.bg-card:hover::after,
.stagger-item.bg-card\/10:hover::after {
    opacity: 1;
}

.stagger-item.bg-card:hover,
.stagger-item.bg-card\/10:hover {
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.12) 0%,
            rgba(255, 255, 255, 0.05) 50%,
            rgba(0, 0, 0, 0.02) 100%) !important;
    border-color: rgba(180, 160, 100, 0.3) !important;
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.4),
        0 0 60px rgba(180, 160, 100, 0.15),
        inset 0 1px 2px rgba(255, 255, 255, 0.12) !important;
    transform: translateY(-4px) !important;
}

/* Icon containers glass effect */
.w-12.h-12.bg-primary\/10,
.w-12.h-12.bg-primary\/20 {
    background: linear-gradient(135deg,
            rgba(180, 160, 100, 0.2) 0%,
            rgba(180, 160, 100, 0.1) 100%) !important;
    backdrop-filter: blur(var(--blur-sm)) !important;
    -webkit-backdrop-filter: blur(var(--blur-sm)) !important;
    border: 1px solid rgba(180, 160, 100, 0.2) !important;
    box-shadow:
        0 4px 12px rgba(180, 160, 100, 0.15),
        inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
}


/* ============================================
   CONTACT SECTION GLASSMORPHISM
   ============================================ */

.stagger-item.bg-card.rounded-lg.p-6.shadow-luxury {
    background: linear-gradient(145deg,
            rgba(255, 255, 255, 0.1) 0%,
            rgba(255, 255, 255, 0.04) 100%) !important;
    backdrop-filter: blur(var(--blur-xl)) saturate(180%) !important;
    -webkit-backdrop-filter: blur(var(--blur-xl)) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.25),
        inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
}


/* ============================================
   FOOTER GLASSMORPHISM
   ============================================ */

footer.bg-card {
    background: linear-gradient(180deg,
            rgba(10, 10, 10, 0.95) 0%,
            rgba(5, 5, 5, 0.98) 100%) !important;
    backdrop-filter: blur(var(--blur-xl)) !important;
    -webkit-backdrop-filter: blur(var(--blur-xl)) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 -20px 40px rgba(0, 0, 0, 0.3) !important;
}

/* Social icons glass */
footer a.w-10.h-10.bg-primary\/10 {
    background: rgba(180, 160, 100, 0.1) !important;
    backdrop-filter: blur(var(--blur-md)) !important;
    -webkit-backdrop-filter: blur(var(--blur-md)) !important;
    border: 1px solid rgba(180, 160, 100, 0.2) !important;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.2),
        inset 0 1px 1px rgba(255, 255, 255, 0.05) !important;
    transition: all 0.4s ease !important;
}

footer a.w-10.h-10.bg-primary\/10:hover {
    background: rgba(180, 160, 100, 0.2) !important;
    border-color: rgba(180, 160, 100, 0.4) !important;
    box-shadow:
        0 8px 24px rgba(180, 160, 100, 0.25),
        inset 0 1px 2px rgba(255, 255, 255, 0.1) !important;
    transform: translateY(-2px) scale(1.05) !important;
}


/* ============================================
   CAROUSEL NAVIGATION BUTTONS - Glass
   ============================================ */

/* Only target carousel nav buttons, not all buttons */
.flex.items-center.justify-center.gap-4 button.w-12.h-12.rounded-full {
    background: var(--glass-white) !important;
    backdrop-filter: blur(var(--blur-md)) !important;
    -webkit-backdrop-filter: blur(var(--blur-md)) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow:
        var(--glass-shadow-sm),
        inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.flex.items-center.justify-center.gap-4 button.w-12.h-12.rounded-full:hover {
    background: var(--glass-white-strong) !important;
    border-color: var(--glass-border-primary) !important;
    box-shadow:
        var(--glass-shadow-md),
        var(--glass-shadow-glow),
        inset 0 1px 2px rgba(255, 255, 255, 0.2) !important;
    transform: scale(1.05) !important;
}


/* ============================================
   CAROUSEL DOTS GLASSMORPHISM
   ============================================ */

button.w-2.h-2.rounded-full {
    backdrop-filter: blur(var(--blur-xs)) !important;
    -webkit-backdrop-filter: blur(var(--blur-xs)) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

button.w-2.h-2.rounded-full.bg-primary {
    box-shadow:
        0 4px 12px rgba(180, 160, 100, 0.4),
        0 0 24px rgba(180, 160, 100, 0.3) !important;
}


/* ============================================
   ANIMATED GLOW EFFECTS
   ============================================ */

@keyframes glassGlow {

    0%,
    100% {
        box-shadow:
            0 20px 40px rgba(0, 0, 0, 0.3),
            0 0 30px rgba(180, 160, 100, 0.1);
    }

    50% {
        box-shadow:
            0 25px 50px rgba(0, 0, 0, 0.35),
            0 0 50px rgba(180, 160, 100, 0.2);
    }
}

.stagger-item.bg-card:hover,
.stagger-item.bg-card\/10:hover {
    animation: glassGlow 3s ease-in-out infinite;
}


/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
    :root {
        --blur-lg: 16px;
        --blur-xl: 20px;
        --blur-2xl: 32px;
    }

    .stagger-item.bg-card,
    .stagger-item.bg-card\/10 {
        backdrop-filter: blur(12px) saturate(140%) !important;
        -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
    }
}


/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

.stagger-item.bg-card,
.stagger-item.bg-card\/10 {
    will-change: transform, box-shadow;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

@media (prefers-reduced-motion: reduce) {

    .stagger-item.bg-card:hover,
    .stagger-item.bg-card\/10:hover {
        animation: none !important;
    }
}