/* ============================================================
   Liquid Glass — Base Mechanics
   Replaces the 12-div CSS glass plate with SVG feDisplacementMap +
   backdrop-filter: blur. Much simpler DOM, real refraction FX.
   ============================================================ */

/* ==========  1. Custom Properties  ========== */

:root {
    /* Blur & refraction — adjustable via Customizer */
    --lg-blur: 1px;
    --lg-displacement-scale: 50;
    --lg-base-frequency: 0.09;

    /* Geometry */
    --lg-radius: 18px;
    --lg-padding: 2rem;

    /* Tint */
    --lg-tint-color: hsla(212, 60%, 70%, 0.12);

    /* Shine (inset box-shadow highlights) */
    --lg-shine-top: inset 0 1px 1px 0 hsla(0, 0%, 100%, 0.45);
    --lg-shine-bottom: inset 0 -1px 1px 0 hsla(0, 0%, 100%, 0.12);

    /* Shadow */
    --lg-shadow: 0 8px 32px hsla(212, 50%, 20%, 0.18),
        0 2px 8px hsla(212, 50%, 20%, 0.12);

    /* Border (edge highlight) */
    --lg-border-color: hsla(0, 0%, 100%, 0.25);

    /* Noise */
    --lg-noise-opacity: 0.025;
}

/* ==========  2. Liquid Glass Container  ========== */

.glass-plate-wrap {
    position: relative;
    border-radius: var(--lg-radius);
    box-shadow: var(--lg-shadow);
    overflow: hidden;
    contain: layout style;
}

/* ==========  3. Effect Layer (backdrop blur + SVG distortion)  ========== */

.liquid-glass-effect {
    position: absolute;
    inset: 0;
    border-radius: var(--lg-radius);
    backdrop-filter: blur(var(--lg-blur));
    -webkit-backdrop-filter: blur(var(--lg-blur));
    z-index: 0;
}

/* Apply SVG displacement filter for chromium browsers */
@supports (backdrop-filter: blur(1px)) and (not (-webkit-hyphens: none)) {
    .liquid-glass-effect {
        filter: url(#liquid-glass-distortion);
    }
}

/* Safari: keep blur-only, skip SVG filter (decision: blur-only fallback) */
/* The @supports above already excludes Safari; this is explicit documentation */

/* ==========  4. Tint Layer  ========== */

.liquid-glass-tint {
    position: absolute;
    inset: 0;
    border-radius: var(--lg-radius);
    background: var(--lg-tint-color);
    z-index: 1;
}

/* ==========  5. Shine Layer (edge highlights)  ========== */

.liquid-glass-shine {
    position: absolute;
    inset: 0;
    border-radius: var(--lg-radius);
    box-shadow: var(--lg-shine-top), var(--lg-shine-bottom);
    border: 1px solid var(--lg-border-color);
    z-index: 2;
    pointer-events: none;
}

/* ==========  6. Noise Layer (surface imperfections)  ========== */

.liquid-glass-noise {
    position: absolute;
    inset: 0;
    border-radius: var(--lg-radius);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    opacity: var(--lg-noise-opacity);
    z-index: 3;
    pointer-events: none;
}

/* ==========  7. Content Layer  ========== */

.liquid-glass-content {
    position: relative;
    z-index: 4;
    padding: var(--lg-padding);
    pointer-events: auto;
}

/* ==========  8. Backward Compatibility  ========== */

/* .plate-content is used by existing templates — alias to liquid-glass-content */
.plate-content {
    position: relative;
    z-index: 4;
    padding: var(--lg-padding);
    pointer-events: auto;
}

/* .plate — keep as container alias */
.plate {
    position: relative;
    pointer-events: none;
    contain: style;
}

/* ==========  9. Color Profiles  ========== */

.glass--blue {
    --lg-tint-color: hsla(212, 60%, 70%, 0.12);
}

.glass--green {
    --lg-tint-color: hsla(150, 55%, 65%, 0.12);
}

.glass--red {
    --lg-tint-color: hsla(350, 60%, 65%, 0.12);
}

.glass--grey {
    --lg-tint-color: hsla(210, 5%, 60%, 0.10);
}