/* ============================================================
   LIQUID GLASS — shared design system for paramchordiya.github.io
   ------------------------------------------------------------
   Inspired by Apple's Liquid Glass material (WWDC 2025):

   1. MATERIAL   — translucent, blurs & saturates what's behind it
                   (backdrop-filter), never fully opaque.
   2. LENSING    — light bends at the edges: a bright inner top
                   edge (specular highlight) + soft dark under-edge.
   3. CONCENTRIC — nested corner radii stay concentric
                   (inner radius = outer radius - padding).
   4. ADAPTIVE   — the material re-tints for light & dark mode;
                   never hardcode glass colors, use the tokens.
   5. FLOATING   — glass sits on its own layer above content:
                   soft, large, low-opacity drop shadows.
   6. ALIVE      — springy, silky motion. Hover = lift + glow,
                   press = compress. Respect reduced motion.

   Usage: apply .lg-material (or a variant) to a container.
   NOTE: .lg-material owns its ::before/::after pseudo-elements
   (specular sheen). Don't apply it to elements whose ::before
   is already used — use .lg-material.lg-flat (no pseudo) there.
   ============================================================ */

:root {
  /* material — "clear" glass: minimal frost, the backdrop stays readable */
  --lg-blur: 12px;
  --lg-saturate: 1.9;
  --lg-bg: rgba(255, 255, 255, 0.045);
  --lg-bg-strong: rgba(255, 255, 255, 0.08);
  --lg-bg-press: rgba(255, 255, 255, 0.12);
  --lg-border: rgba(255, 255, 255, 0.14);
  --lg-border-hover: rgba(255, 255, 255, 0.26);
  /* refraction lens (Chromium progressive enhancement, see liquid-glass.js) */
  --lg-lens-blur: 3px;
  --lg-lens-saturate: 1.7;
  --lg-bg-lens: rgba(255, 255, 255, 0.035);
  /* lensing edges */
  --lg-edge-top: rgba(255, 255, 255, 0.3);
  --lg-edge-bottom: rgba(255, 255, 255, 0.07);
  --lg-sheen: rgba(255, 255, 255, 0.1);
  /* elevation */
  --lg-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  --lg-shadow-hover: 0 16px 48px rgba(0, 0, 0, 0.45);
  --lg-glow: 0 0 40px rgba(128, 0, 255, 0.14);
  /* radii (concentric scale) */
  --lg-radius-xl: 32px;
  --lg-radius-lg: 24px;
  --lg-radius-md: 18px;
  --lg-radius-sm: 12px;
  --lg-radius-pill: 999px;
  /* motion */
  --lg-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --lg-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --lg-dur: 0.45s;
  --lg-dur-fast: 0.25s;
  /* accent (mirrors site palette) */
  --lg-accent: #8000ff;
  --lg-accent-soft: rgba(128, 0, 255, 0.35);
  --lg-accent-2: #6bc5f8;
  --lg-accent-3: #cf59e6;
}

.light-mode {
  --lg-bg: rgba(255, 255, 255, 0.22);
  --lg-bg-strong: rgba(255, 255, 255, 0.36);
  --lg-bg-press: rgba(255, 255, 255, 0.5);
  --lg-bg-lens: rgba(255, 255, 255, 0.16);
  --lg-border: rgba(255, 255, 255, 0.55);
  --lg-border-hover: rgba(255, 255, 255, 0.85);
  --lg-edge-top: rgba(255, 255, 255, 0.95);
  --lg-edge-bottom: rgba(255, 255, 255, 0.3);
  --lg-sheen: rgba(255, 255, 255, 0.3);
  --lg-shadow: 0 8px 32px rgba(80, 60, 120, 0.14);
  --lg-shadow-hover: 0 16px 48px rgba(80, 60, 120, 0.22);
  --lg-glow: 0 0 40px rgba(128, 0, 255, 0.1);
}

/* ---------- base material ---------- */
.lg-material {
  position: relative;
  background: var(--lg-bg);
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  border: 1px solid var(--lg-border);
  border-radius: var(--lg-radius-lg);
  box-shadow:
    var(--lg-shadow),
    inset 0 1px 0 var(--lg-edge-top),
    inset 0 -1px 0 var(--lg-edge-bottom);
  transition:
    background var(--lg-dur) var(--lg-ease),
    border-color var(--lg-dur) var(--lg-ease),
    box-shadow var(--lg-dur) var(--lg-ease),
    transform var(--lg-dur) var(--lg-spring);
}

/* specular sheen sweeping from the top-left — the "wet" look — plus a
   pointer-tracked specular highlight (liquid-glass.js drives --lg-px/--lg-py
   and flips --lg-lit between 0 and 1) */
.lg-material:not(.lg-flat)::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(
      220px circle at var(--lg-px, 50%) var(--lg-py, -20%),
      rgb(255 255 255 / calc(0.16 * var(--lg-lit, 0))) 0%,
      rgb(255 255 255 / 0) 62%
    ),
    linear-gradient(
      118deg,
      var(--lg-sheen) 0%,
      rgba(255, 255, 255, 0) 32%,
      rgba(255, 255, 255, 0) 78%,
      rgba(255, 255, 255, 0.04) 100%
    );
  opacity: 0.9;
}

/* refractive rim — light bending around the inside of the edge.
   On Chromium the real displacement lens sits underneath this; on other
   engines this ring alone still reads as thick polished glass. */
.lg-material:not(.lg-flat)::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 2px 5px -1px rgba(255, 255, 255, 0.32),
    inset 2px 0 6px -3px rgba(255, 255, 255, 0.2),
    inset -2px 0 6px -3px rgba(255, 255, 255, 0.2),
    inset 0 -3px 7px -2px rgba(160, 190, 255, 0.14),
    inset 0 0 18px rgba(255, 255, 255, 0.05);
}

/* ---------- interactive states ---------- */
.lg-interactive {
  cursor: pointer;
}
.lg-interactive:hover {
  background: var(--lg-bg-strong);
  border-color: var(--lg-border-hover);
  box-shadow:
    var(--lg-shadow-hover),
    var(--lg-glow),
    inset 0 1px 0 var(--lg-edge-top),
    inset 0 -1px 0 var(--lg-edge-bottom);
  transform: translateY(-3px);
}
.lg-interactive:active {
  background: var(--lg-bg-press);
  transform: translateY(-1px) scale(0.98);
  transition-duration: var(--lg-dur-fast);
}

/* ---------- shape variants ---------- */
.lg-card {
  border-radius: var(--lg-radius-lg);
}
.lg-panel {
  border-radius: var(--lg-radius-xl);
}
.lg-pill,
.lg-chip,
.lg-btn {
  border-radius: var(--lg-radius-pill);
}
.lg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px;
  border: 1px solid var(--lg-border);
  color: var(--color-white, #fff);
  font-family: "JetBrains Mono", monospace;
  font-size: 1.3rem;
  line-height: 1;
  -webkit-user-select: none;
  user-select: none;
}

/* ---------- floating ambient background (subpages) ---------- */
.lg-ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.lg-ambient::before,
.lg-ambient::after {
  content: "";
  position: absolute;
  width: 55vmax;
  height: 55vmax;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.16;
  will-change: transform;
}
.lg-ambient::before {
  background: var(--lg-accent);
  top: -20vmax;
  right: -15vmax;
  animation: lg-drift-a 26s ease-in-out infinite alternate;
}
.lg-ambient::after {
  background: var(--lg-accent-2);
  bottom: -25vmax;
  left: -18vmax;
  animation: lg-drift-b 32s ease-in-out infinite alternate;
}
@keyframes lg-drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-8vmax, 10vmax, 0) scale(1.15); }
}
@keyframes lg-drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.1); }
  to   { transform: translate3d(10vmax, -8vmax, 0) scale(0.95); }
}

/* injected by liquid-glass.js on pages whose markup has no .lg-ambient
   (index.html) — desktop keeps its own backdrop (.blob), small screens
   show this instead so the glass always has colour to refract */
.lg-ambient-auto {
  display: none;
}

/* ---------- mobile: keep the glass glassy ----------
   Small screens run on tighter GPU budgets, and the desktop ambient —
   two 55vmax discs under filter: blur(120px) at 0.16 opacity, parked
   at -20vmax corners — is both expensive and nearly invisible on a
   phone viewport, so backdrop-filter has nothing to frost. Swap the
   blur()ed discs for plain radial-gradient washes (no filter, no
   animation, more presence) and add a fixed whole-viewport wash so
   full-width panels mid-page still sit over colour. */
@media screen and (max-width: 998px) {
  .lg-ambient-auto {
    display: block;
  }

  .lg-ambient {
    background:
      radial-gradient(80vmax 60vmax at 88% 12%,
        rgba(128, 0, 255, 0.2), transparent 68%),
      radial-gradient(70vmax 55vmax at 0% 55%,
        rgba(107, 197, 248, 0.16), transparent 66%),
      radial-gradient(60vmax 48vmax at 70% 95%,
        rgba(207, 89, 230, 0.15), transparent 70%);
  }

  .lg-ambient::before,
  .lg-ambient::after {
    filter: none;
    animation: none;
    width: 120vmin;
    height: 120vmin;
    opacity: 0.34;
  }
  .lg-ambient::before {
    background: radial-gradient(closest-side, var(--lg-accent-3), transparent 72%);
    top: -55vmin;
    right: -45vmin;
  }
  .lg-ambient::after {
    background: radial-gradient(closest-side, var(--lg-accent-2), transparent 72%);
    bottom: -55vmin;
    left: -45vmin;
  }
}

/* ---------- silky reveal (for in-page, non-AOS reveals) ---------- */
.lg-reveal {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(10px);
  transition:
    opacity 0.8s var(--lg-ease),
    transform 0.8s var(--lg-ease),
    filter 0.8s var(--lg-ease);
}
.lg-reveal.lg-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ---------- floating round control (theme toggle etc.) ---------- */
.lg-fab {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 1000;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--lg-border);
  background: var(--lg-bg-strong);
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  box-shadow:
    var(--lg-shadow),
    inset 0 1px 0 var(--lg-edge-top);
  cursor: pointer;
  font-size: 2rem;
  transition:
    transform var(--lg-dur) var(--lg-spring),
    box-shadow var(--lg-dur) var(--lg-ease),
    background var(--lg-dur) var(--lg-ease);
}
.lg-fab:hover {
  transform: translateY(-3px) scale(1.06);
  box-shadow: var(--lg-shadow-hover), var(--lg-glow),
    inset 0 1px 0 var(--lg-edge-top);
}
.lg-fab:active {
  transform: scale(0.94);
}
.lg-fab svg {
  width: 22px;
  height: 22px;
  fill: var(--color-white, #fff);
}
/* icon shows the mode you'll switch TO */
.lg-fab .lg-fab-sun { display: block; }
.lg-fab .lg-fab-moon { display: none; }
.light-mode .lg-fab .lg-fab-sun { display: none; }
.light-mode .lg-fab .lg-fab-moon { display: block; }

/* ---------- displacement-lens enhancement ----------
   liquid-glass.js adds .lg-lensed on Chromium and swaps the backdrop-filter
   for a real refraction lens; the tint drops further so the pane reads as
   clear polished glass. (Doubled class beats page-level background rules.) */
.lg-lensed.lg-lensed {
  background: var(--lg-bg-lens);
}

/* ---------- accessibility & fallbacks ---------- */
:where(.lg-material, .lg-btn, .lg-fab):focus-visible {
  outline: 2px solid var(--lg-accent-2);
  outline-offset: 3px;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lg-material,
  .lg-fab {
    background: rgba(24, 24, 38, 0.92);
  }
  .light-mode .lg-material,
  .light-mode .lg-fab {
    background: rgba(245, 242, 237, 0.94);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lg-material,
  .lg-interactive,
  .lg-fab,
  .lg-reveal {
    transition: none;
  }
  .lg-ambient::before,
  .lg-ambient::after {
    animation: none;
  }
  .lg-reveal {
    opacity: 1;
    transform: none;
    filter: none;
  }
}