/* Ascend Liquid Glass — design system v1
 * Apple iOS 26 inspired. Pure CSS + optional SVG refraction enhancement.
 * Falls back gracefully on Safari/iOS WebKit. */

:root {
  --lg-bg-dark: #0a0e1a;
  --lg-bg-light: #FAFAFA;
  --lg-navy: #001F4D;
  --lg-navy-2: #0a2a5e;
  --lg-gold: #f2b544;
  --lg-gold-2: #d99a2b;
  --lg-card-light: #E8ECF1;
  --lg-text-dark: #f5f7fb;
  --lg-text-light: #001F4D;
  --lg-border-light: rgba(0, 31, 77, 0.12);
  --lg-border-dark: rgba(255, 255, 255, 0.18);
}

/* Base glass — works everywhere */
.lg-glass {
  position: relative;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03));
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 8px 32px rgba(0, 0, 0, 0.22),
    0 2px 6px rgba(0, 0, 0, 0.10);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
              background 0.3s ease;
}

/* Specular highlight strip on top — that "glass edge" sheen */
.lg-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.04) 18%,
    transparent 40%,
    transparent 60%,
    rgba(255, 255, 255, 0.02) 100%
  );
  mix-blend-mode: overlay;
}

/* Hover lift */
.lg-glass.lg-interactive:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.40),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    0 16px 48px rgba(0, 0, 0, 0.32),
    0 4px 12px rgba(0, 0, 0, 0.14);
}

/* Light mode variant — apply on light backgrounds */
.lg-light {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.42));
  border: 1px solid var(--lg-border-light);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(0, 31, 77, 0.04),
    0 8px 32px rgba(0, 31, 77, 0.10),
    0 2px 6px rgba(0, 31, 77, 0.06);
}

.lg-light::before {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.6) 0%,
    rgba(255, 255, 255, 0.1) 25%,
    transparent 50%
  );
}

/* Refraction enhancement — Chromium only. Safari ignores the url() and uses the base blur. */
@supports (backdrop-filter: url(#none)) {
  .lg-refract {
    backdrop-filter: blur(18px) saturate(180%) url(#lg-displace);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
  }
}

/* Pill button */
.lg-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  font: 500 14px/1 -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  letter-spacing: 0.01em;
  cursor: pointer;
  user-select: none;
}

.lg-pill.lg-glass {
  color: var(--lg-text-dark);
}

.lg-pill.lg-glass.lg-light {
  color: var(--lg-text-light);
}

/* Gold accent variant */
.lg-gold-accent {
  background: linear-gradient(135deg, rgba(242, 181, 68, 0.95), rgba(217, 154, 43, 0.90));
  border: 1px solid rgba(242, 181, 68, 0.4);
  color: #1a1206;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 8px 24px rgba(242, 181, 68, 0.32),
    0 2px 6px rgba(0, 0, 0, 0.18);
}

.lg-gold-accent:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
}

/* Reduce motion respect */
@media (prefers-reduced-motion: reduce) {
  .lg-glass, .lg-glass.lg-interactive:hover, .lg-gold-accent:hover {
    transition: none;
    transform: none;
  }
}