/**
 * Bricksable – Liquid Glass
 *
 * Mirrors EA Pro's liquid glass implementation adapted for Bricks.
 * Key technique: effects 3-6 use backdrop-filter with url(#svg-filter-id)
 * directly on the element. The ::before pseudo-element provides the
 * stacking context with backdrop-filter: blur(0px) + filter: url(#id).
 */

/* ── CSS custom properties ──────────────────────────────────────────────────── */
:root {
    --c-light: #fff;
    --c-dark: #000;
    --glass-reflex-dark: 2;
    --glass-reflex-light: 2;
}

/* ── Base ──────────────────────────────────────────────────────────────────── */
.ba-liquid-glass {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* ::before layer — stacking context for SVG distortion (effects 3–6 only) */
.ba-lg-effect3::before,
.ba-lg-effect4::before,
.ba-lg-effect5::before,
.ba-lg-effect6::before {
    position: absolute;
    content: "";
    z-index: -99;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    /* backdrop-filter: blur(0px) creates the stacking context needed for
       filter: url(#svg-id) to capture the backdrop pixels */
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
}

/* ── Effect 1: Heavy Frost ─────────────────────────────────────────────────── */
/* EA: backdrop-filter: blur(24px); bg: #FFFFFF1F */
.ba-lg-effect1 {
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    background-color: rgba(255, 255, 255, 0.12);
}

/* ── Effect 2: Soft Mist ───────────────────────────────────────────────────── */
/* EA: backdrop-filter: blur(20px) brightness(1); bg: #FFFFFF1F */
.ba-lg-effect2 {
    backdrop-filter: blur(20px) brightness(1);
    -webkit-backdrop-filter: blur(20px) brightness(1);
    background-color: rgba(255, 255, 255, 0.12);
}

/* ── Effect 3: Glass Frost ─────────────────────────────────────────────────── */
/* EA Pro: backdrop-filter: url(#distortion3-{id}) — pure SVG warp, no blur.
   filter: saturate(X%) on the element. Border radius 24px default.
   Reflex box-shadow baked in (matches EA's CSS). */
.ba-lg-effect3 {
    border: none;
    -webkit-box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent), inset 2px 1px 0px -1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent), inset -1.5px -1px 0px -1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent), inset -2px -6px 1px -5px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent), inset -1px 2px 3px -1px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent), inset 0px -4px 1px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent), 0px 3px 6px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent) !important;
            box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent), inset 2px 1px 0px -1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent), inset -1.5px -1px 0px -1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent), inset -2px -6px 1px -5px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent), inset -1px 2px 3px -1px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent), inset 0px -4px 1px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent), 0px 3px 6px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent) !important;
}

/* ── Effect 4: Light Frost ─────────────────────────────────────────────────── */
/* EA Pro: backdrop-filter: blur(5px) url(#distortion4); bg via JS/PHP; border-radius 24px default */
.ba-lg-effect4 {
    border-radius: 24px;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* ── Effect 5: Grain Frost ─────────────────────────────────────────────────── */
/* EA Pro: backdrop-filter: blur(0px) url(#distortion5); no blur; border-radius 24px default */
.ba-lg-effect5 {
    border-radius: 24px;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* ── Effect 6: Fine Frost ──────────────────────────────────────────────────── */
/* EA Pro: backdrop-filter: blur(7px) url(#distortion6) */
.ba-lg-effect6 {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* ── Border Distortion ─────────────────────────────────────────────────────── */
.ba-lg-border-distortion {
    border: none !important;
    box-shadow:
        inset 0 0 0 2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
        inset 2px 1px 0px -1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
        inset -1.5px -1px 0px -1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
        inset -2px -6px 1px -5px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
        inset -1px 2px 3px -1px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
        inset 0px -4px 1px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
        0px 3px 6px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent) !important;
}

/* ── Shadow Effects ────────────────────────────────────────────────────────── */
/* Shadow presets are applied via Bricks native _border and _boxShadow settings.
   No custom CSS classes needed — Bricks renders them from the saved settings. */