/* ============================================================
   LIQUID GLASS KIT — real optical refraction for the web
   Technique: SVG feDisplacementMap (Aave "Building Glass for the Web")
   Works fully only in Chromium (backdrop-filter: url(#svg)). Your render
   pipeline is headless Chrome, so it always renders the full effect.

   Usage:
     <div class="lg" data-lg-scale="110" data-lg-bezel="80" data-lg-blur="2">…</div>
     <script src="liquid-glass.js"></script>
     LiquidGlass.apply();           // call after layout / fonts loaded
   ============================================================ */

.lg {
  position: relative;
  /* backdrop-filter is set per-element by liquid-glass.js (blur + url(#filter)).
     Near-transparent so you SEE THROUGH the lens (Aave look), not a frosted tint. */
  background: rgba(255,255,255,.02);
  -webkit-backdrop-filter: blur(0.5px);
  backdrop-filter: blur(0.5px);
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 48px;
  box-shadow:
    0 30px 90px rgba(0,0,0,.18),
    inset 0 2px 2px rgba(255,255,255,.95),     /* bright top rim light */
    inset 0 -3px 8px rgba(255,255,255,.18),
    inset 0 0 30px rgba(255,255,255,.06);
  isolation: isolate;
}

/* specular sheen — diagonal glance of light across the surface */
.lg::before {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(
    var(--lg-light, 135deg),
    rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 22%,
    rgba(255,255,255,0) 78%, rgba(255,255,255,.18) 100%);
  z-index:1;
}

/* chromatic dispersion at the rim (RGB split where light bends hardest) */
.lg::after {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  padding: var(--lg-chroma-w, 2px);
  background: linear-gradient(120deg,
    rgba(120,200,255,var(--lg-chroma, .7)), rgba(255,255,255,0) 40%,
    rgba(255,255,255,0) 60%, rgba(255,140,200,var(--lg-chroma, .7)));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  z-index:1;
}

/* content sits above the sheen/rim */
.lg > * { position: relative; z-index: 2; }