/* Thynk Cloud — Liquid Glass material (original, futuristic; not an Apple clone).
   Layered translucency + edge specular + cursor glare + (Chromium high-tier) live
   backdrop refraction via SVG displacement. Safari/Firefox get a polished frosted
   fallback automatically (the url() refraction is only enabled by JS where it works).

   Usage:
     .liquid-glass            base material (light specular over any backdrop)
     .liquid-glass.lg-strong  denser tint for dark panels so content stays legible
     .liquid-glass.lg-clip    clip pseudos to a rounded panel (NOT for the nav —
                              it would clip the mega-menu dropdown) */

.liquid-glass {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 48%, rgba(255,255,255,0.06) 100%) !important;
  backdrop-filter: blur(20px) saturate(200%) brightness(1.07) !important;
  -webkit-backdrop-filter: blur(20px) saturate(200%) brightness(1.07) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  box-shadow:
    0 10px 36px rgba(0,0,0,0.40),
    0 0 30px rgba(45,184,75,0.08),
    inset 0 1px 0 rgba(255,255,255,0.50),
    inset 0 0 0 1px rgba(255,255,255,0.05),
    inset 0 -10px 26px rgba(0,0,0,0.22) !important;
  transition: box-shadow .35s ease, border-color .35s ease !important;
}

/* Denser dark tint for panels carrying their own content (dashboard, modals).
   Tinted a touch LIGHTER than the dark hero so the pane visibly lifts off it,
   with a luminous edge + brighter rim so it reads as glass even on dark. */
.liquid-glass.lg-strong {
  background:
    linear-gradient(135deg, rgba(40,58,82,0.55) 0%, rgba(20,34,54,0.34) 50%, rgba(34,52,76,0.48) 100%) !important;
  border: 1px solid rgba(150,200,255,0.22) !important;
  box-shadow:
    0 18px 50px rgba(0,0,0,0.5),
    0 0 40px rgba(45,184,75,0.12),
    inset 0 1px 0 rgba(255,255,255,0.65),
    inset 0 0 0 1px rgba(160,210,255,0.08),
    inset 0 -14px 32px rgba(0,0,0,0.28) !important;
}
.liquid-glass.lg-strong::after {
  height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(180,225,255,0.85), rgba(150,245,195,0.7), transparent);
  opacity: .9;
}

/* Live backdrop refraction — enabled by JS ONLY on capable Chromium (html.lg-refract-on).
   Safari/Firefox never get url() in backdrop-filter, so they keep the frosted look above. */
html.lg-refract-on .liquid-glass {
  backdrop-filter: blur(11px) saturate(195%) brightness(1.12) url(#lg-refract) !important;
  -webkit-backdrop-filter: blur(11px) saturate(195%) brightness(1.12) !important;
}

/* Crisp top edge-light (the glass rim catching light) */
.liquid-glass::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.75), rgba(150,245,195,0.5), transparent);
  opacity: .65;
}

/* Cursor-tracked specular glare, behind content (position/visibility set by liquid-glass.js) */
.liquid-glass::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(240px circle at var(--lg-mx, 30%) var(--lg-my, -10%),
              rgba(255,255,255,0.20), rgba(150,245,195,0.07) 38%, transparent 62%);
  mix-blend-mode: screen;
  opacity: 0; transition: opacity .45s ease; will-change: opacity;
}
/* Always-on faint sheen so the glass reads as glass even without cursor movement / on
   touch & Safari (the cursor-tracked glare brightens it further on hover). */
.liquid-glass::before { opacity: .4; }
.liquid-glass.lg-live::before { opacity: 1; }

/* Keep real content above the glare/rim layers */
.liquid-glass.lg-clip { overflow: hidden; }
.liquid-glass > * { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .liquid-glass::before { transition: none !important; }
}

/* ── LIGHT variant — for inner-page navs over the pearl/light body ──────────── */
.liquid-glass.lg-light {
  background: linear-gradient(135deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.52) 50%, rgba(255,255,255,0.66) 100%) !important;
  border: 1px solid rgba(255,255,255,0.7) !important;
  box-shadow:
    0 10px 30px rgba(16,40,28,0.10),
    0 0 24px rgba(45,184,75,0.05),
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -10px 22px rgba(16,40,28,0.04) !important;
}
/* On a light surface a white screen-blend glare is invisible — use a green tint, normal blend */
.liquid-glass.lg-light::before {
  background: radial-gradient(240px circle at var(--lg-mx, 30%) var(--lg-my, -10%),
              rgba(45,184,75,0.14), rgba(45,184,75,0.05) 40%, transparent 62%);
  mix-blend-mode: normal;
}
.liquid-glass.lg-light::after {
  background: linear-gradient(90deg, transparent, rgba(45,184,75,0.5), rgba(255,255,255,0.65), transparent);
  opacity: .8;
}