/* ============================================================
   liquid-glass.css — an approximation of Apple's Liquid Glass for the web
   ------------------------------------------------------------
   .lg            a glass surface: tint + backdrop blur/saturation, a light rim, a specular glint
   .lg-dark       tint for dark UI           .lg-light   tint for light UI
   .lg-press      springs up when pressed (needs liquid-glass.js for touch, :active works without it)
   .lg-lens       bends what is behind it (Chromium only; Safari falls back to plain glass)

   Tunable on any glass element (or an ancestor):
     --lg-tint     surface colour, translucent          --lg-blur   backdrop blur
     --lg-sat      backdrop saturation                  --lg-bright backdrop brightness
     --lg-rim      rim light strength (0–1)             --lg-glint  specular strength (0–1)
     --lg-x/--lg-y where the light falls (set by liquid-glass.js from the finger or pointer)
   No pseudo-elements are used, so ::before/::after stay free for the host page.
   ============================================================ */
.lg{
  --lg-tint:rgba(255,255,255,.18); --lg-blur:18px; --lg-sat:180%; --lg-bright:1.05;
  --lg-rim:.55; --lg-glint:.22; --lg-x:30%; --lg-y:0%;
  border:1px solid transparent;
  background:
    /* specular glint where the light falls */
    radial-gradient(120% 90% at var(--lg-x) var(--lg-y), rgba(255,255,255,var(--lg-glint)), rgba(255,255,255,0) 60%) padding-box,
    /* the tinted body of the glass */
    linear-gradient(var(--lg-tint),var(--lg-tint)) padding-box,
    /* the rim: bright where light enters (top-left) and exits (bottom-right), clear along the sides */
    linear-gradient(135deg,
      rgba(255,255,255,var(--lg-rim)) 0%, rgba(255,255,255,calc(var(--lg-rim)*.25)) 28%,
      rgba(255,255,255,.04) 50%,
      rgba(255,255,255,calc(var(--lg-rim)*.2)) 72%, rgba(255,255,255,calc(var(--lg-rim)*.7)) 100%) border-box;
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat)) brightness(var(--lg-bright));
          backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat)) brightness(var(--lg-bright));
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,calc(var(--lg-rim)*.45)),   /* light caught on the top lip */
    inset 0 -1px 2px rgba(255,255,255,calc(var(--lg-rim)*.15)),  /* and on the bottom lip */
    0 6px 22px rgba(0,0,0,.22), 0 1px 3px rgba(0,0,0,.12);        /* resting on the surface */
}
.lg-dark{--lg-tint:rgba(20,26,36,.42); --lg-rim:.42; --lg-glint:.16; --lg-bright:.92}
.lg-light{--lg-tint:rgba(250,248,243,.62); --lg-rim:.9; --lg-glint:.5; --lg-bright:1.08; --lg-sat:160%}

/* a press swells the glass a little and lets it settle back with a spring */
.lg-press{transition:transform .38s cubic-bezier(.34,1.56,.64,1),--lg-glint .2s;will-change:transform}
.lg-press:active,.lg-press.lg-pressing{transform:scale(1.08);--lg-glint:.42;transition-duration:.12s}
@property --lg-glint{syntax:'<number>';inherits:true;initial-value:.22}

/* refraction: bend the backdrop through an SVG displacement map (liquid-glass.js adds html.lg-refract where it works) */
html.lg-refract .lg-lens{
  -webkit-backdrop-filter:url(#lg-refract) blur(calc(var(--lg-blur)*.5)) saturate(var(--lg-sat)) brightness(var(--lg-bright));
          backdrop-filter:url(#lg-refract) blur(calc(var(--lg-blur)*.5)) saturate(var(--lg-sat)) brightness(var(--lg-bright));
}

/* no glass where the browser cannot blur: fall back to a solid tint */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .lg-dark{--lg-tint:rgba(20,26,36,.94)} .lg-light{--lg-tint:rgba(250,248,243,.97)}
}
@media (prefers-reduced-transparency:reduce){
  .lg{-webkit-backdrop-filter:none;backdrop-filter:none}
  .lg-dark{--lg-tint:rgb(24,30,40)} .lg-light{--lg-tint:rgb(246,244,239)}
}
@media (prefers-reduced-motion:reduce){ .lg-press{transition:none} .lg-press:active,.lg-press.lg-pressing{transform:none} }