/**
 * Liquid Glass — marketing site material (self-contained).
 *
 * The marketing site has no ThemeContext, so this file defines the `--lq-*`
 * custom properties itself. It (1) provides the `.lq-*` primitive classes and
 * (2) UPGRADES the existing `.glass-card` / `.glass-card-dark` / `.hero-badge` /
 * `.stats-card` selectors in place, so every page that already uses them gets
 * the Liquid Glass look without per-page markup edits. Loaded after each page's
 * inline <style> (it ships in the inlined header partial), and uses `body`-
 * prefixed selectors so it reliably wins the cascade.
 *
 * TIERS (set on <html> by the inline probe in _header.html):
 *   [data-lq=refract]  → Chromium: SVG refraction backdrop filter
 *   [data-lq=blur]     → WebKit/Firefox: blur() fallback (default)
 *   reduced-transparency → opaque surfaces
 */

:root {
  --lq-surface: rgba(255, 255, 255, 0.62);
  --lq-surface-strong: rgba(255, 255, 255, 0.78);
  --lq-surface-thin: rgba(255, 255, 255, 0.45);
  --lq-solid: #ffffff;
  --lq-border: rgba(2, 8, 22, 0.08);
  --lq-border-highlight: rgba(255, 255, 255, 0.85);
  --lq-blur: 16px;
  --lq-blur-strong: 26px;
  --lq-blur-thin: 10px;
  --lq-saturate: 1.8;
  --lq-shadow: 0 8px 32px rgba(2, 8, 22, 0.1), 0 1px 2px rgba(2, 8, 22, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --lq-sheen: linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.08) 32%, rgba(255, 255, 255, 0) 60%);
  --lq-tint-accent: rgba(30, 77, 107, 0.14);
  --lq-radius-md: 16px;
}

/* Dark-surface token overrides for elements that opt into the dark material. */
.glass-card-dark,
.lq-dark {
  --lq-surface: rgba(20, 29, 36, 0.55);
  --lq-surface-strong: rgba(20, 29, 36, 0.74);
  --lq-surface-thin: rgba(33, 38, 45, 0.4);
  --lq-solid: #141d24;
  --lq-border: rgba(255, 255, 255, 0.1);
  --lq-border-highlight: rgba(255, 255, 255, 0.18);
  --lq-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --lq-sheen: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 32%, rgba(255, 255, 255, 0) 60%);
}

/* ---- Primitives: full treatment, own radius ----------------------------- */
.lq-glass,
.lq-glass-strong,
.lq-glass-thin {
  border-radius: var(--lq-radius-md);
}

/* ---- The reusable material (no radius — preserve each element's shape) --- */
.lq-glass,
.lq-glass-strong,
.lq-glass-thin,
body .glass-card,
body .glass-card-dark {
  position: relative;
  background-color: var(--lq-surface);
  border: 1px solid var(--lq-border);
  box-shadow: var(--lq-shadow);
  -webkit-backdrop-filter: blur(var(--lq-blur)) saturate(var(--lq-saturate));
  backdrop-filter: blur(var(--lq-blur)) saturate(var(--lq-saturate));
  background-image: linear-gradient(to bottom, var(--lq-border-highlight) 0, transparent 1.5px);
}

/* Light-touch upgrade for badges/stat pills: richer frosted backdrop only,
   keeping their existing border-radius, border and shadow. */
body .hero-badge,
body .stats-card {
  -webkit-backdrop-filter: blur(var(--lq-blur)) saturate(var(--lq-saturate));
  backdrop-filter: blur(var(--lq-blur)) saturate(var(--lq-saturate));
}

.lq-glass-strong,
.lq-glass-modal {
  background-color: var(--lq-surface-strong);
  -webkit-backdrop-filter: blur(var(--lq-blur-strong)) saturate(var(--lq-saturate));
  backdrop-filter: blur(var(--lq-blur-strong)) saturate(var(--lq-saturate));
}
/* Modal sheets read content over a form — keep them on the more opaque side. */
.lq-glass-modal {
  position: relative;
  border: 1px solid var(--lq-border);
  box-shadow: var(--lq-shadow);
  background-image: linear-gradient(to bottom, var(--lq-border-highlight) 0, transparent 1.5px);
}
.lq-glass-thin,
body .hero-badge {
  background-color: var(--lq-surface-thin);
  -webkit-backdrop-filter: blur(var(--lq-blur-thin)) saturate(var(--lq-saturate));
  backdrop-filter: blur(var(--lq-blur-thin)) saturate(var(--lq-saturate));
}

/* Specular sheen overlay. */
.lq-glass::before,
.lq-glass-strong::before,
.lq-glass-thin::before,
body .glass-card::before,
body .glass-card-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--lq-sheen);
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
}
/* Keep card content above the sheen. */
body .glass-card > *,
body .glass-card-dark > *,
.lq-glass > *,
.lq-glass-strong > *,
.lq-glass-thin > * {
  position: relative;
  z-index: 1;
}

/* ---- Tier 2: real refraction on Chromium --------------------------------- */
html[data-lq='refract'] .lq-glass,
html[data-lq='refract'] .lq-glass-strong,
html[data-lq='refract'] .lq-glass-thin,
html[data-lq='refract'] body .glass-card,
html[data-lq='refract'] body .glass-card-dark,
html[data-lq='refract'] body .stats-card {
  -webkit-backdrop-filter: url('#lq-refract') blur(var(--lq-blur)) saturate(var(--lq-saturate));
  backdrop-filter: url('#lq-refract') blur(var(--lq-blur)) saturate(var(--lq-saturate));
}

/* ---- Tier 3: reduced transparency → opaque ------------------------------- */
@media (prefers-reduced-transparency: reduce) {
  .lq-glass,
  .lq-glass-strong,
  .lq-glass-thin,
  body .glass-card,
  body .glass-card-dark,
  body .hero-badge,
  body .stats-card {
    background-color: var(--lq-solid);
    background-image: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .lq-glass::before,
  .lq-glass-strong::before,
  body .glass-card::before,
  body .glass-card-dark::before,
  body .stats-card::before {
    display: none;
  }
}

/* Hidden SVG host for the refraction filter (in the header partial). */
.lq-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}
