.glass {
  position: relative;
  overflow: hidden;
}

/* Glass Specular highlight & cursor radial light (desktop pointer only) */
@media (hover: hover) and (pointer: fine) {
  .glass::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
      radial-gradient(circle 220px at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.45), transparent 70%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.45) 0%, transparent 40%);
    opacity: 0.85;
    transition: opacity 0.3s var(--ease);
    z-index: 1;
  }
}

/* Glass Variants */
.glass--solid {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08), inset 0 1px 0 #FFFFFF;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
}

.glass--panel {
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px) saturate(170%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.glass--panel-subtle {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(16px) saturate(170%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.glass--chip {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px) saturate(170%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  color: var(--ink);
}

/* Reduced glass cost on mobile */
@media (max-width: 900px) {
  .glass--solid,
  .glass--panel,
  .glass--panel-subtle,
  .glass--chip {
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
  }
}

/* Chromium-only liquid edge filter enhancement */
@supports (backdrop-filter: blur(1px)) and (selector(:has(*))) {
  @supports (-webkit-text-stroke: 1px black) {
    .nav > .glass-liquid-edge {
      position: absolute;
      inset: -2px;
      border-radius: inherit;
      pointer-events: none;
      filter: url('#liquid');
      opacity: 0.35;
      border: 1.5px solid rgba(255, 255, 255, 0.7);
      z-index: 2;
    }
  }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border-radius: var(--radius-full);
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: none;
  outline: none;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
  user-select: none;
  white-space: nowrap;
}

/* Active micro-interaction */
.btn:active {
  transform: scale(0.97) !important;
}

/* Sheen sweep effect on hover */
@media (hover: hover) {
  .btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s var(--ease);
    pointer-events: none;
  }

  .btn:hover {
    transform: translateY(-2px);
  }

  .btn:hover::after {
    left: 130%;
  }

  .btn--ink:hover {
    background-color: var(--accent);
    box-shadow: 0 10px 28px rgba(140, 47, 57, 0.35);
    transform: translateY(-2px);
  }

  .btn--outline:hover {
    background-color: var(--ink);
    color: #FFFFFF;
    border-color: var(--ink);
    transform: translateY(-2px);
  }

  .btn--glass:hover {
    background: rgba(255, 255, 255, 0.85);
    box-shadow: inset 0 1px 0 #FFFFFF, 0 12px 28px rgba(0, 0, 0, 0.12);
  }

  .chip:hover {
    transform: translateY(-2px);
  }
}

.btn--ink {
  background-color: var(--cta);
  color: var(--cta-text);
  box-shadow: 0 8px 24px rgba(17, 17, 17, 0.2);
}

.btn--outline {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  box-shadow: none;
}

.btn--glass {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Chips */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-full);
  font-family: var(--font-ui);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  user-select: none;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .btn, .btn::after, .chip {
    transition: none !important;
  }
}