/* =========================================
   LIQUID GLASS SYSTEM
   Version: 1.0.0
   Author: Antigravity
   ========================================= */

:root {
    /* --- CONFIGURATION VARIABLES --- */
    --lg-blur: 12px;
    --lg-saturation: 1.5;
    --lg-contrast: 1.1;
    --lg-scale: 1.0;
    --lg-gloss-intensity: 0.4;
    --lg-border-opacity: 0.2;
    --lg-bg-opacity: 0.15;

    /* Colors */
    --lg-color-highlight: rgba(255, 255, 255, 0.6);
    --lg-color-shadow: rgba(0, 0, 0, 0.1);
}

/* --- BASE CLASS --- */
.liquid-glass {
    position: relative;
    background: rgba(255, 255, 255, var(--lg-bg-opacity));
    border: 1px solid rgba(255, 255, 255, var(--lg-border-opacity));
    border-radius: 16px;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
    overflow: hidden;
    transform: scale(var(--lg-scale));
    transition: transform 0.3s ease, box-shadow 0.3s ease;

    /* BACKDROP FILTER (Modern Browsers) */
    backdrop-filter:
        blur(var(--lg-blur)) saturate(var(--lg-saturation)) contrast(var(--lg-contrast));
    -webkit-backdrop-filter:
        blur(var(--lg-blur)) saturate(var(--lg-saturation)) contrast(var(--lg-contrast));
}

/* --- GLOSS EFFECT (Pseudo-element) --- */
/* --- GLOSS EFFECT REMOVED BY USER REQUEST --- */
/* .liquid-glass::before { ... } */

/* --- DISPLACEMENT VARIANT (Requires SVG) --- */
.liquid-glass--displaced {
    /* Apply SVG Filter */
    filter: url('#lg-displacement');
}

/* --- FALLBACK (For browsers without backdrop-filter) --- */
/* Applied automatically by JS if needed */
.liquid-glass--fallback,
html:not(.lg-backdrop-supported) .liquid-glass {
    background: rgba(255, 255, 255, 0.85);
    /* More opaque */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Reduce noise on slow devices */
@media (prefers-reduced-motion: reduce) {
    .liquid-glass--displaced {
        filter: none;
    }

    .liquid-glass::before {
        display: none;
    }
}