/* ============================================================================
   glass.css — The Liquid Glass surface system + animated mesh background.
   Frosted translucent panels, top inset highlight (light hitting glass),
   colored glow, specular sweeps. The visual soul of the app.
   ============================================================================ */

/* -------------------------------------------------------------------------- */
/* Animated mesh-gradient background (purple blobs drifting slowly).          */
/* Rendered behind everything; respects reduced-motion.                       */
/* -------------------------------------------------------------------------- */
.mesh-bg {
  position: fixed;
  inset: -20%;
  z-index: var(--z-bg);
  pointer-events: none;
  overflow: hidden;
  background: radial-gradient(120% 120% at 50% 0%, var(--bg-1), var(--bg-0) 60%);
}
.mesh-bg::before,
.mesh-bg::after,
.mesh-bg .blob {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.9;
  will-change: transform;
}
.mesh-bg::before {
  width: 60vmax; height: 60vmax;
  left: -10vmax; top: -12vmax;
  background: var(--mesh-a);
  animation: meshDriftA 26s var(--ease-in-out) infinite alternate;
}
.mesh-bg::after {
  width: 52vmax; height: 52vmax;
  right: -14vmax; top: 18vmax;
  background: var(--mesh-c);
  animation: meshDriftB 32s var(--ease-in-out) infinite alternate;
}
.mesh-bg .blob {
  width: 44vmax; height: 44vmax;
  left: 22vmax; bottom: -18vmax;
  background: var(--mesh-b);
  animation: meshDriftC 30s var(--ease-in-out) infinite alternate;
}
.mesh-bg .blob--accent {
  width: 30vmax; height: 30vmax;
  left: 4vmax; bottom: 8vmax;
  background: var(--mesh-d);
  animation: meshDriftD 38s var(--ease-in-out) infinite alternate;
}
/* subtle film grain to soften gradient banding */
.mesh-bg .grain {
  position: absolute; inset: 0; opacity: 0.04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* -------------------------------------------------------------------------- */
/* Core glass surface                                                          */
/* -------------------------------------------------------------------------- */
.glass {
  position: relative;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--blur-md)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--blur-md)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
  isolation: isolate;
}
/* top inset highlight — light catching the rim of the glass */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    160deg,
    var(--glass-highlight) 0%,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0) 70%,
    rgba(255, 255, 255, 0.08) 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}
/* faint specular sheen across the top */
.glass::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 45%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.10), transparent);
  opacity: 0.5;
  pointer-events: none;
  z-index: 1;
}

.glass-strong {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--blur-strong)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--blur-strong)) saturate(var(--glass-saturate));
}
.glass-soft {
  -webkit-backdrop-filter: blur(var(--blur-soft)) saturate(140%);
  backdrop-filter: blur(var(--blur-soft)) saturate(140%);
}

/* glow variants */
.glass-glow { box-shadow: var(--glass-shadow), var(--glass-glow); }

/* interactive glass: press feedback + hover glow */
.glass-interactive {
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-glass),
              box-shadow var(--t-base) var(--ease-glass),
              background var(--t-base) var(--ease-glass),
              border-color var(--t-base) var(--ease-glass);
}
.glass-interactive:active { transform: scale(0.975); }
@media (hover: hover) {
  .glass-interactive:hover {
    background: var(--glass-bg-hover);
    border-color: var(--glass-border-strong);
    box-shadow: var(--glass-shadow), 0 0 40px -16px var(--brand-glow);
  }
}

/* -------------------------------------------------------------------------- */
/* Highlight sweep — a band of light running across a featured surface         */
/* -------------------------------------------------------------------------- */
.sweep { position: relative; overflow: hidden; }
.sweep::after {
  content: "";
  position: absolute;
  top: -50%; left: -60%;
  width: 40%; height: 200%;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(255, 255, 255, 0.22) 50%,
    transparent
  );
  transform: rotate(8deg) translateX(-120%);
  pointer-events: none;
  z-index: 3;
}
.sweep--run::after { animation: sweepRun 1.5s var(--ease-out); }
.sweep--loop::after { animation: sweepRun 3.6s var(--ease-in-out) infinite; }

/* -------------------------------------------------------------------------- */
/* 3D tilt (set via glass.js: --rx, --ry rotation + --gx,--gy glare pos)       */
/* -------------------------------------------------------------------------- */
.tilt {
  transform-style: preserve-3d;
  transition: transform var(--t-base) var(--ease-glass);
}
.tilt[data-tilting] { transition: transform 60ms linear; }
.tilt-inner { transform: translateZ(36px); }
.tilt-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    240px circle at var(--gx, 50%) var(--gy, 0%),
    rgba(255, 255, 255, 0.28),
    transparent 60%
  );
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-glass);
  pointer-events: none;
  z-index: 3;
}
.tilt[data-tilting] .tilt-glare { opacity: 1; }

/* -------------------------------------------------------------------------- */
/* Brand hero gradient panel (balance card, primary CTAs)                      */
/* -------------------------------------------------------------------------- */
.glass-brand {
  position: relative;
  border-radius: var(--r-lg);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.02)),
    var(--grad-brand);
  box-shadow: 0 20px 60px -16px var(--brand-glow), var(--glass-shadow);
  overflow: hidden;
  isolation: isolate;
}
.glass-brand::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,0.25), transparent 45%);
  pointer-events: none;
}
.glass-brand::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 40%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.18), transparent);
  pointer-events: none;
}

/* Hairline divider that reads on glass */
.hairline {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--glass-border), transparent);
  border: 0;
  margin: var(--s-4) 0;
}