/* ============================================================
   LIQUID GLASS — Apple-style refractive surface
   Companion to colors_and_type.css
   Requires: liquid-glass.svg inlined in the page (provides
   #liquid-displace filter referenced below)
   ============================================================ */

/* --------- Stage background (use on body or hero) --------- */
.stage {
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
  background:
    radial-gradient(1200px 800px at 78% -10%, rgba(243,154,107,0.22), transparent 60%),
    radial-gradient(1100px 900px at 8% 30%, rgba(122,69,232,0.50), transparent 60%),
    radial-gradient(900px 700px at 50% 110%, rgba(232,199,107,0.18), transparent 60%),
    linear-gradient(180deg, #0E0626 0%, #1B0E2E 50%, #2A1664 100%);
  color: #fff;
}
.stage::before {
  /* fine grain */
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.4 0 0 0 0 0.3 0 0 0 0 0.6 0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  z-index: 0;
}

/* --------- The glass primitive --------- */
.liquid {
  position: relative;
  isolation: isolate;
  border-radius: var(--r-lg, 20px);
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 -1px 0 rgba(0,0,0,0.12) inset,
    0 30px 60px -20px rgba(20,10,40,0.55),
    0 12px 30px -10px rgba(20,10,40,0.35);
}

/* refractive backdrop — blur + saturate + dark tint */
.liquid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  backdrop-filter: blur(28px) saturate(180%) brightness(1.04);
  -webkit-backdrop-filter: blur(28px) saturate(180%) brightness(1.04);
  background: rgba(20, 10, 40, 0.45);
}

/* second layer — SVG displacement warp */
.liquid > .lq-warp {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  backdrop-filter: url(#liquid-displace);
  -webkit-backdrop-filter: url(#liquid-displace);
  border-radius: inherit;
}

/* tint + specular highlight */
.liquid::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.10) 18%, transparent 38%),
    radial-gradient(140% 100% at 100% 100%, rgba(194,166,245,0.30) 0%, transparent 42%),
    linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02) 40%, rgba(157,117,240,0.12));
  mix-blend-mode: screen;
  pointer-events: none;
}

/* crisp double-stroke for the glass edge */
.liquid > .lq-edge {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,0.28);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.06),
    inset 0 1px 1px rgba(255,255,255,0.45),
    inset 0 -1px 1px rgba(255,255,255,0.10);
}

/* sliding sheen on hover */
.liquid > .lq-sheen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  overflow: hidden;
}
.liquid > .lq-sheen::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -30%;
  width: 60%;
  height: 200%;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
  transform: rotate(8deg) translateX(-120%);
  transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.liquid:hover > .lq-sheen::before {
  transform: rotate(8deg) translateX(280%);
}

/* --------- Variant: dark (over saturated/dark backgrounds) --------- */
.liquid--dark {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.10) inset,
    0 -1px 0 rgba(0,0,0,0.30) inset,
    0 30px 60px -20px rgba(0,0,0,0.6),
    0 12px 30px -10px rgba(0,0,0,0.4);
}
.liquid--dark::after {
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.04) 22%, transparent 40%),
    radial-gradient(140% 100% at 100% 100%, rgba(157,117,240,0.18) 0%, transparent 45%),
    linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01) 40%, rgba(91,46,196,0.10));
}
.liquid--dark > .lq-edge {
  border-color: rgba(255,255,255,0.16);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.10),
    inset 0 1px 1px rgba(255,255,255,0.22),
    inset 0 -1px 1px rgba(0,0,0,0.25);
}

/* --------- Variant: pill (nav bars, buttons) --------- */
.liquid--pill { border-radius: var(--r-pill, 999px); }

/* --------- Strongest blur (for sticky nav over scrolling content) --------- */
.liquid--nav::before {
  backdrop-filter: blur(40px) saturate(180%) brightness(1.05);
  -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(1.05);
  background: rgba(14, 6, 38, 0.72);
}

/* --------- Buttons --------- */
.lq-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: var(--r-pill, 999px);
  font: 600 14px/1 var(--font-sans, system-ui);
  letter-spacing: 0.01em;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 240ms ease-out;
}
.lq-btn:hover { transform: translateY(-1px); }
.lq-btn:active { transform: translateY(0) scale(0.98); }

.lq-btn--primary {
  color: #fff;
  background: linear-gradient(180deg, #9D75F0 0%, #5B2EC4 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.4) inset,
    0 -1px 0 rgba(0,0,0,0.2) inset,
    0 14px 30px -8px rgba(122,69,232,0.6),
    0 2px 6px rgba(20,10,40,0.3);
}
.lq-btn--primary:hover {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.5) inset,
    0 -1px 0 rgba(0,0,0,0.2) inset,
    0 22px 50px -8px rgba(122,69,232,0.7),
    0 4px 10px rgba(20,10,40,0.35);
}

.lq-btn--ghost {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
}
.lq-btn--ghost:hover { background: rgba(255,255,255,0.15); }

/* --------- Reduced motion --------- */
@media (prefers-reduced-motion: reduce) {
  .liquid > .lq-sheen::before { transition: none; }
}