/* =========================================================
   Liquid glass — vanilla CSS reproduction of the iOS-26
   frosted-glass look (backdrop blur + SVG edge refraction).
   The SVG #lg-warp filter lives in index.html (top of body).
   ========================================================= */

.lg {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.32));
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.70),
    inset 0 -1px 0 rgba(255, 255, 255, 0.15),
    0 10px 30px rgba(40, 40, 40, 0.10);
  isolation: isolate;
}

/* ponytail: low specificity lets positioned components keep absolute/fixed. */
:where(.lg) { position: relative; }

.lg--strong {
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border-color: rgba(255, 255, 255, 0.70);
}

/* Dark-section variant: tuned for navy .how, rust .wlb, sage .why */
.lg--dark {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06));
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10),
    0 10px 30px rgba(0, 0, 0, 0.18);
}

/* Refractive edge warp — uses #lg-warp filter defined once in index.html */
.lg--warp::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  filter: url(#lg-warp);
  pointer-events: none;
  z-index: -1;
}

/* Opaque fallback for browsers without backdrop-filter (very old) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lg { background: rgba(246, 245, 242, 0.95); }
  .lg--dark { background: rgba(40, 40, 40, 0.85); }
}

/* Respect reduced-motion: keep frost, drop the wobble */
@media (prefers-reduced-motion: reduce) {
  .lg--warp::before { filter: none; }
}