/* ============================================================
   LIQUID GLASS — portable engine
   The .lg element + the #lg-refraction SVG filter (in the HTML) are
   everything you copy into your own project. Every knob is a CSS custom
   property, so a single :root block reskins the whole thing.

   The two layers that make it read as LIQUID, not just frosted:
     1. backdrop blur + saturate + tint        (the frost)
     2. .lg-refract: backdrop-filter url(#…)    (the refraction — bends
        the pixels behind the glass; this is what most generators skip)
   ============================================================ */
:root {
  --lg-blur:          8px;          /* backdrop blur */
  --lg-saturate:      1.7;          /* pop the colours behind */
  --lg-tint-rgb:      255 255 255;  /* glass colour (R G B) */
  --lg-tint-opacity:  0.16;         /* how milky the glass is */
  --lg-border:        0.55;         /* rim highlight opacity */
  --lg-radius:        28px;         /* corner radius */
  --lg-specular:      0.45;         /* inner top highlight (the lit edge) */
  --lg-shadow:        0.22;         /* drop-shadow depth */
  --lg-refract:       14;           /* refraction strength (also on the SVG) */
  --lg-chromatic:     0.22;         /* iridescent edge-light opacity */
}

/* ---- the glass surface (frost + tint + rim + depth) ---- */
.lg {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: rgb(var(--lg-tint-rgb) / var(--lg-tint-opacity));
  border: 1px solid rgb(255 255 255 / var(--lg-border));
  border-radius: var(--lg-radius);
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
          backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / var(--lg-specular)),
    inset 0 -1px 1px rgb(255 255 255 / calc(var(--lg-specular) * 0.35)),
    0 10px 40px rgb(0 0 0 / var(--lg-shadow));
}

/* ---- the refraction layer — bends the backdrop (Chromium) ----
   Kept on its own layer so the frost above NEVER breaks: where
   backdrop-filter: url() is unsupported (Safari / Firefox), this
   simply no-ops and you keep clean frosted glass. */
.lg-refract {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
}
@supports ((backdrop-filter: url("#lg-refraction")) or (-webkit-backdrop-filter: url("#lg-refraction"))) {
  .lg-refract {
    -webkit-backdrop-filter: blur(0.5px) url("#lg-refraction");
            backdrop-filter: blur(0.5px) url("#lg-refraction");
  }
}

/* ---- iridescent edge-light (the recognisable liquid-glass rim) ---- */
.lg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: conic-gradient(from 120deg,
    rgb(120 200 255 / var(--lg-chromatic)),
    transparent 22%, transparent 50%,
    rgb(190 150 255 / calc(var(--lg-chromatic) * 0.85)),
    transparent 72%, transparent 100%);
  -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;
}

/* keep real content above the optics layers */
.lg-content,
.lg-btn-label,
.lg-pill-label,
.lg-circle-label { position: relative; z-index: 2; }

/* ---- accessibility floor: if backdrop-filter is unsupported, fill
   solid enough to carry content on its own ---- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lg { background: rgb(var(--lg-tint-rgb) / 0.9); }
}
@media (prefers-reduced-transparency: reduce) {
  .lg { background: rgb(var(--lg-tint-rgb) / 0.92); }
}

/* ============================================================
   SHAPE VARIANTS — the element under test in the generator.
   (Your own project only needs .lg + whatever radius you copy.)
   ============================================================ */
.lg--card {
  width: min(360px, 78vw);
  padding: 34px 32px 36px;
}
.lg--btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 38px;
  height: 60px;
  border: 0;
  font: 600 16px/1 "Inter", system-ui, sans-serif;
  color: #fff;
  cursor: grab;
  letter-spacing: 0.01em;
}
.lg--pill {
  --lg-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  height: 64px; padding: 0 42px;
}
.lg--circle {
  width: 240px; height: 240px;
  --lg-radius: 50%;
  display: grid; place-items: center; text-align: center; padding: 28px;
}
.lg-pill-label {
  font: 600 17px/1 "Inter", system-ui, sans-serif;
  color: #fff; white-space: nowrap; letter-spacing: 0.01em;
}
.lg-circle-label {
  font: 700 27px/1.06 "Inter", system-ui, sans-serif;
  letter-spacing: -0.02em; color: #fff;
  text-shadow: 0 1px 16px rgb(0 0 0 / 0.25);
}

/* sample content inside the card */
.lg-eyebrow {
  font: 600 11px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.22em;
  color: rgb(255 255 255 / 0.72);
}
.lg-title {
  margin: 14px 0 10px;
  font: 700 30px/1.08 "Inter", system-ui, sans-serif;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 1px 18px rgb(0 0 0 / 0.25);
}
.lg-sub {
  margin: 0;
  font: 400 14px/1.5 "Inter", system-ui, sans-serif;
  color: rgb(255 255 255 / 0.82);
  text-shadow: 0 1px 12px rgb(0 0 0 / 0.2);
}