/* Liquid Glass — add class="liquid-glass" to any element (works with liquid-glass.js).
   Chromium gets real refraction (SVG displacement in backdrop-filter, set up by the JS);
   Safari and Firefox get the fallback below: blur + saturate with the same highlights. */

:root {
  --glass-blur: 4px;          /* blur on top of the refraction (Chromium) — Apple's glass is quite clear */
  --glass-refraction: 77px;     /* how far the backdrop is bent at the rim */
  --glass-edge: 50px;           /* how wide the curved rim is (0 shift deeper inside than this) */
  --glass-highlight: 0.2;       /* strength of the light rim, 0–1 */
  --glass-aberration: 1.5px;      /* red/blue split at the rim (Chromium), 0 = off */
  --glass-saturate: 1.7;
  --glass-tint: rgba(255, 255, 255, 0.08);
  --glass-fallback-blur: 6px;   /* Safari / Firefox / iPhone: no refraction — kept close to the Chromium look */
  --glass-solid: rgba(246, 246, 248, 0.96);   /* "reduce transparency" */
}

/* (zero specificity: a position/z-index your own CSS sets always wins) */
:where(.liquid-glass) { position: relative; }

.liquid-glass {
  isolation: isolate;           /* the highlight layers sit under the content, over the glass */
  background-color: var(--glass-tint);
  -webkit-backdrop-filter: blur(var(--glass-fallback-blur)) saturate(var(--glass-saturate));
          backdrop-filter: blur(var(--glass-fallback-blur)) saturate(var(--glass-saturate));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, var(--glass-highlight)),                     /* bright line on top */
    inset 0 -1px 0 rgba(0, 0, 0, calc(var(--glass-highlight) * 0.28)),             /* darker line at the bottom */
    0 8px 28px rgba(0, 0, 0, 0.12),
    0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Chromium with refraction (liquid-glass.js sets --lg-filter to this element's own SVG filter) */
.liquid-glass.lg-refract {
  -webkit-backdrop-filter: var(--lg-filter) blur(var(--glass-blur)) saturate(var(--glass-saturate));
          backdrop-filter: var(--lg-filter) blur(var(--glass-blur)) saturate(var(--glass-saturate));
}

/* specular rim: light catching the top-left edge, fading out, a faint glint again bottom-right */
.liquid-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(155deg,
    rgba(255, 255, 255, calc(var(--glass-highlight) * 1.1)) 0%,
    rgba(255, 255, 255, calc(var(--glass-highlight) * 0.25)) 22%,
    rgba(255, 255, 255, 0) 45%,
    rgba(255, 255, 255, 0) 62%,
    rgba(255, 255, 255, calc(var(--glass-highlight) * 0.55)) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* body of the glass: a soft inner glow at the bottom + a hint of colour fringing at the sides
   (in Chromium the real aberration comes from the filter; this keeps the look in the fallback) */
.liquid-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 2px 0 2px -1px rgba(255, 80, 140, calc(var(--glass-highlight) * 0.22)),
    inset -2px 0 2px -1px rgba(70, 170, 255, calc(var(--glass-highlight) * 0.22)),
    inset 0 -12px 22px -14px rgba(255, 255, 255, calc(var(--glass-highlight) * 0.55)),
    inset 0 10px 18px -14px rgba(255, 255, 255, calc(var(--glass-highlight) * 0.35));
}

/* dark glass (e.g. over light pages, or for a dark navbar) */
.liquid-glass.liquid-glass--dark {
  --glass-tint: rgba(18, 18, 20, 0.32);
  --glass-solid: rgba(28, 28, 30, 0.96);
  color: #fff;
}

/* buttons / pills that react to the pointer */
.liquid-glass.liquid-glass--interactive {
  transition: transform 0.35s cubic-bezier(.34, 1.56, .64, 1), background-color 0.25s ease;
}
.liquid-glass.liquid-glass--interactive:hover  { transform: scale(1.03); background-color: rgba(255, 255, 255, 0.14); }
.liquid-glass.liquid-glass--interactive:active { transform: scale(0.97); }

/* accessibility */
@media (prefers-reduced-transparency: reduce) {
  .liquid-glass,
  .liquid-glass.lg-refract {
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    background-color: var(--glass-solid);
  }
  .liquid-glass::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .liquid-glass,
  .liquid-glass.liquid-glass--interactive { transition: none; }
  .liquid-glass.liquid-glass--interactive:hover,
  .liquid-glass.liquid-glass--interactive:active { transform: none; }
}