/* ==========================================================================
   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. */
  --glass-ultra-bg: rgba(255, 255, 255, 0.03);
  --glass-ultra-blur: 24px;
  --glass-ultra-saturate: 160%;
  --glass-ultra-border: rgba(255, 255, 255, 0.1);

  /* 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.06);
  --glass-floating-blur: 34px;
  --glass-floating-saturate: 170%;
  --glass-floating-border: rgba(255, 255, 255, 0.16);

  /* 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.09);
  --glass-frosted-blur: 40px;
  --glass-frosted-saturate: 180%;
  --glass-frosted-border: rgba(255, 255, 255, 0.22);
}

.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(255, 255, 255, 0.24);
}

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

/* Fallback for browsers without backdrop-filter support: fall back to a
   slightly more opaque tint so content stays readable without blur. */
@supports not (backdrop-filter: blur(1px)) {
  .glass-ultra {
    background: rgba(23, 35, 45, 0.72);
  }
  .glass-floating {
    background: rgba(23, 35, 45, 0.78);
  }
  .glass-frosted {
    background: rgba(23, 35, 45, 0.86);
  }
}