/* =========================================================================
 * aero-glass.css — Windows 7 "Aero Glass" chrome variant for LiquidGlass.
 *
 * Apply class `lg-aero` to any glass surface. Works on its own (pure CSS) or
 * layered on top of the JS refraction engine (engine:'svg'|'webgl' + preset
 * 'aero'). Inspired by 7.css (https://khang-nd.github.io/7.css/).
 *
 * The predominant/accent color is `--lg-aero-accent` (an "R, G, B" triplet),
 * mimicking the Windows 7 "Window Color" picker — change it to recolor the
 * whole glass. Default is the classic Aero blue.
 * ========================================================================= */

:root {
    --lg-aero-accent: 50, 120, 215; /* Win7 Aero blue (R, G, B) */
    --lg-aero-radius: 8px;          /* Aero used gentler corners than iOS glass */
}

.lg-aero {
    position: relative;
    border-radius: var(--lg-aero-radius);
    border: 1px solid rgba(255, 255, 255, .7);
    background:
        linear-gradient(to bottom,
            rgba(255, 255, 255, .55) 0%,
            rgba(255, 255, 255, .28) 45%,
            rgba(var(--lg-aero-accent), .12) 100%);
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
    backdrop-filter: blur(16px) saturate(1.5);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .95),     /* top inner gloss line   */
        inset 0 0 0 1px rgba(var(--lg-aero-accent), .14), /* accent inner ring */
        0 8px 24px rgba(0, 0, 0, .18);              /* drop shadow            */
}

/* Glossy upper-half reflection — the signature Aero highlight. */
.lg-aero::before {
    content: '';
    position: absolute;
    inset: 0 0 50% 0;
    border-radius: var(--lg-aero-radius) var(--lg-aero-radius) 0 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
    pointer-events: none;
}

/* Keep content above the gloss layer. */
.lg-aero > * { position: relative; z-index: 1; }

/* Aero-style readable text glow (Win7 title bars used a soft white halo). */
.lg-aero-text { text-shadow: 0 0 2px #fff, 0 0 7px #fff; }
