/* ==========================================================================
   glass.css — Liquid Glass material system
   Ultra-transparent, visionOS-inspired surfaces. The background must remain
   visibly perceivable through every surface here. Frosted is the exception,
   used sparingly where readability demands more separation.
   ========================================================================== */

:root {
  /* Ultra Glass — default surface. Barely-there tint, mostly blur + edge.
     On the light atmosphere, the panel and background are close in
     lightness by design — depth reads through blur/saturate refraction,
     the border, and the shadow, not through an opacity gap. */
  --glass-ultra-bg: rgba(255, 255, 255, 0.05);
  --glass-ultra-blur: 24px;
  --glass-ultra-saturate: 170%;
  --glass-ultra-border: rgba(var(--ink-rgb), 0.08);

  /* Floating Glass — for elevated, interactive surfaces (nav, hero object,
     primary cards). Slightly more present so it reads as "lifted". */
  --glass-floating-bg: rgba(255, 255, 255, 0.1);
  --glass-floating-blur: 34px;
  --glass-floating-saturate: 180%;
  --glass-floating-border: rgba(var(--ink-rgb), 0.14);

  /* Frosted Glass — use only where text-heavy content needs extra contrast
     separation from a busy background. Not the default surface. */
  --glass-frosted-bg: rgba(255, 255, 255, 0.18);
  --glass-frosted-blur: 40px;
  --glass-frosted-saturate: 190%;
  --glass-frosted-border: rgba(var(--ink-rgb), 0.2);
}

.glass {
  position: relative;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft), var(--shadow-inner-highlight);
  isolation: isolate;
}

/* Shared edge-lighting + gradient-reflection treatment for every glass tier,
   layered via ::before so content never needs its own wrapper. */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(255, 255, 255, 0.03) 22%,
    rgba(255, 255, 255, 0) 55%,
    rgba(255, 255, 255, 0.05) 100%
  );
  mix-blend-mode: overlay;
  z-index: 1;
}

.glass > * {
  position: relative;
  z-index: 2;
}

.glass-ultra {
  background: var(--glass-ultra-bg);
  backdrop-filter: blur(var(--glass-ultra-blur)) saturate(var(--glass-ultra-saturate));
  -webkit-backdrop-filter: blur(var(--glass-ultra-blur)) saturate(var(--glass-ultra-saturate));
  border: 1px solid var(--glass-ultra-border);
}

.glass-floating {
  background: var(--glass-floating-bg);
  backdrop-filter: blur(var(--glass-floating-blur)) saturate(var(--glass-floating-saturate));
  -webkit-backdrop-filter: blur(var(--glass-floating-blur)) saturate(var(--glass-floating-saturate));
  border: 1px solid var(--glass-floating-border);
  box-shadow: var(--shadow-lift), var(--shadow-inner-highlight);
}

.glass-frosted {
  background: var(--glass-frosted-bg);
  backdrop-filter: blur(var(--glass-frosted-blur)) saturate(var(--glass-frosted-saturate));
  -webkit-backdrop-filter: blur(var(--glass-frosted-blur)) saturate(var(--glass-frosted-saturate));
  border: 1px solid var(--glass-frosted-border);
}

/* Pill variant — for nav, tags, small floating controls */
.glass-pill {
  border-radius: var(--radius-pill);
}

/* Hover lift — opt-in, used by interactive glass surfaces (cards, nav items) */
.glass-interactive {
  transition: transform var(--duration-normal) var(--ease-glass),
    border-color var(--duration-normal) var(--ease-glass),
    background-color var(--duration-normal) var(--ease-glass);
}

.glass-interactive:hover,
.glass-interactive:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(var(--ink-rgb), 0.22);
}

@media (prefers-reduced-motion: reduce) {
  .glass-interactive:hover,
  .glass-interactive:focus-visible {
    transform: none;
  }
}

/* 3D tilt (Phase 7 — Advanced Motion) — glass.js sets [data-tilt]
   elements' transform directly on mousemove for responsive tracking, so
   transform's transition is suspended while active (it resumes once
   .is-tilting is removed on mouseleave and the inline transform is
   cleared). Re-lists .glass-interactive's other two transitions rather
   than `transition: none`, which would also kill border-color/
   background-color and make :hover's fade snap instantly for the whole
   time a card is being tilted. */
[data-tilt].is-tilting {
  transition: border-color var(--duration-normal) var(--ease-glass),
    background-color var(--duration-normal) var(--ease-glass);
}

/* Dark theme — see main.css's :root[data-theme="dark"] block for the
   full explanation. These three fills are the one place the glass
   system itself (not just consumers via --ink-rgb) needs an explicit
   override: white-on-dark reads clearly at a lower fill than
   white-on-light needed, so these go back down from #0007's light-mode
   5%/10%/18% to the original 3%/6%/9%. */
[data-theme="dark"] {
  --glass-ultra-bg: rgba(255, 255, 255, 0.03);
  --glass-floating-bg: rgba(255, 255, 255, 0.06);
  --glass-frosted-bg: rgba(255, 255, 255, 0.09);
}

/* Fallback for browsers without backdrop-filter support: fall back to a
   more opaque tint (light or dark, matching the current theme) so
   content stays readable without blur. */
@supports not (backdrop-filter: blur(1px)) {
  .glass-ultra {
    background: rgba(255, 255, 255, 0.82);
  }
  .glass-floating {
    background: rgba(255, 255, 255, 0.88);
  }
  .glass-frosted {
    background: rgba(255, 255, 255, 0.94);
  }

  [data-theme="dark"] .glass-ultra {
    background: rgba(23, 35, 45, 0.86);
  }
  [data-theme="dark"] .glass-floating {
    background: rgba(23, 35, 45, 0.9);
  }
  [data-theme="dark"] .glass-frosted {
    background: rgba(23, 35, 45, 0.95);
  }
}