/* =========================================================================
   LIQUID GLASS — Apple-inspired frosted surfaces with edge refraction.
   Approximation: backdrop-filter + layered borders + specular highlights.
   ========================================================================= */

/* Base glass surface. Layered approach:
   1. backdrop-filter blurs+saturates what's behind
   2. translucent fill
   3. 1px gradient border via mask
   4. top specular highlight via ::before
*/
.glass {
  position: relative;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-glass);
  border-radius: var(--radius-lg);
  isolation: isolate;
  overflow: hidden;
}

/* Top specular highlight — the "edge refraction" that sells the glass */
.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    var(--glass-highlight) 0%,
    rgba(255, 255, 255, 0.2) 30%,
    transparent 50%,
    rgba(255, 255, 255, 0.1) 80%,
    rgba(255, 255, 255, 0.4) 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: 1;
}

/* Soft inner glow at top — simulates light hitting the surface */
.glass::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  border-radius: inherit;
  background: radial-gradient(120% 80% at 30% 0%, rgba(255, 255, 255, 0.45) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* Strong variant — more opaque, used for CTAs/highlights */
.glass--strong { background: var(--glass-bg-strong); }

/* Soft variant — more transparent, used for backgrounds */
.glass--soft { background: var(--glass-bg-soft); }

/* Dark glass — for deep sections (e.g. footer, transformation box) */
.glass--dark {
  background: var(--glass-dark-bg);
  border-color: var(--glass-dark-border);
  color: var(--white);
}
.glass--dark::before {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, transparent 50%, rgba(255, 255, 255, 0.1) 100%);
}
.glass--dark::after {
  background: radial-gradient(120% 80% at 30% 0%, rgba(122, 91, 200, 0.4) 0%, transparent 60%);
}

/* Content inside glass should sit above ::before/::after */
.glass > * { position: relative; z-index: 2; }

/* Spotlight border — illuminates dynamically under the cursor.
   Applied to .glass elements that also have .glass--spotlight. */
.glass--spotlight {
  background: var(--glass-bg) radial-gradient(
    400px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, 0.5) 0%,
    transparent 40%
  );
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}

/* Fallback for browsers without backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(255, 255, 255, 0.92); }
  .glass--soft { background: rgba(255, 255, 255, 0.85); }
  .glass--dark { background: rgba(26, 21, 48, 0.95); }
}

/* Reduce blur on mobile for performance */
@media (max-width: 767px) {
  .glass {
    -webkit-backdrop-filter: blur(var(--glass-blur-mobile)) saturate(160%);
    backdrop-filter: blur(var(--glass-blur-mobile)) saturate(160%);
  }
}