/* ============================================================
   V7 Liquid Glass · 三层材质
   仅覆盖悬浮导航与 CTA；V5 排版、V4 动效和内容卡片保持原样。
   ============================================================ */

:root {
  --lg-fill: color-mix(in srgb, var(--bg-alt) 54%, transparent);
  --lg-tint-a: rgba(255, 255, 255, .24);
  --lg-tint-b: rgba(255, 255, 255, .05);
  --lg-tint-c: rgba(255, 255, 255, .12);
  --lg-edge: rgba(255, 255, 255, .50);
  --lg-spec-1: rgba(255, 255, 255, .86);
  --lg-spec-2: rgba(255, 255, 255, .36);
  --lg-spec-3: rgba(255, 255, 255, .14);
  --lg-spec-shade: rgba(0, 0, 0, .10);
  --lg-drop: rgba(0, 0, 0, .16);
  --lg-cta-fill: color-mix(in srgb, var(--accent) 94%, transparent);
  --lg-cta-edge: rgba(255, 255, 255, .46);
  --lg-cta-spec-1: rgba(255, 255, 255, .78);
  --lg-cta-spec-2: rgba(255, 255, 255, .28);
  --lg-cta-spec-3: rgba(255, 255, 255, .10);
  --lg-cta-shade: rgba(0, 0, 0, .16);
  --lg-cta-text: #fff;
}

:root[data-theme="graphite"],
:root[data-theme="midnight"],
:root[data-theme="terra"] {
  --lg-fill: color-mix(in srgb, var(--card) 50%, transparent);
  --lg-tint-a: rgba(255, 255, 255, .12);
  --lg-tint-b: rgba(255, 255, 255, .025);
  --lg-tint-c: rgba(255, 255, 255, .07);
  --lg-edge: rgba(255, 255, 255, .22);
  --lg-spec-1: rgba(255, 255, 255, .40);
  --lg-spec-2: rgba(255, 255, 255, .18);
  --lg-spec-3: rgba(255, 255, 255, .07);
  --lg-spec-shade: rgba(0, 0, 0, .24);
  --lg-drop: rgba(0, 0, 0, .42);
  --lg-cta-fill: color-mix(in srgb, var(--accent) 92%, transparent);
  --lg-cta-text: #0c1320;
}

:root[data-theme="sage"],
:root[data-theme="oxblood"],
:root[data-theme="mocha"],
:root[data-theme="lilac"],
:root[data-theme="celadon"] {
  --lg-tint-a: rgba(255, 255, 255, .19);
  --lg-tint-b: rgba(255, 255, 255, .04);
  --lg-tint-c: rgba(255, 255, 255, .09);
  --lg-edge: rgba(255, 255, 255, .36);
  --lg-spec-1: rgba(255, 255, 255, .64);
  --lg-spec-2: rgba(255, 255, 255, .27);
  --lg-spec-3: rgba(255, 255, 255, .10);
  --lg-cta-edge: rgba(255, 255, 255, .34);
}

.motion-nav,
.motion-nav__cta,
.hero__cta,
.hero__primary,
.outline-cta,
.mobile-sticky-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 999px;
}

.motion-nav,
.outline-cta {
  background:
    linear-gradient(135deg, var(--lg-tint-a), var(--lg-tint-b) 40%, var(--lg-tint-c)),
    var(--lg-fill);
}

.motion-nav__cta,
.hero__cta,
.hero__primary,
.mobile-sticky-cta {
  border: 0;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .25), rgba(255, 255, 255, .03) 42%, rgba(255, 255, 255, .11)),
    var(--lg-cta-fill);
  color: var(--lg-cta-text);
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}

.motion-nav::before,
.motion-nav__cta::before,
.hero__cta::before,
.hero__primary::before,
.mobile-sticky-cta::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  backdrop-filter: blur(3px) saturate(180%) brightness(1.05);
  -webkit-backdrop-filter: blur(3px) saturate(180%) brightness(1.05);
}

.motion-nav::after,
.motion-nav__cta::after,
.hero__cta::after,
.hero__primary::after,
.mobile-sticky-cta::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  border: 1px solid var(--lg-edge);
  border-radius: inherit;
  box-shadow:
    inset 0 1px 1px var(--lg-spec-1),
    inset 0 2px 3px var(--lg-spec-2),
    inset 0 -2px 4px var(--lg-spec-3),
    inset 0 -8px 16px var(--lg-spec-shade),
    0 20px 50px var(--lg-drop);
  pointer-events: none;
}

.motion-nav__cta::after,
.hero__cta::after,
.hero__primary::after,
.mobile-sticky-cta::after {
  border-color: var(--lg-cta-edge);
  box-shadow:
    inset 0 1px 1px var(--lg-cta-spec-1),
    inset 0 2px 3px var(--lg-cta-spec-2),
    inset 0 -2px 4px var(--lg-cta-spec-3),
    inset 0 -8px 16px var(--lg-cta-shade),
    0 14px 34px color-mix(in srgb, var(--accent) 28%, transparent);
}

.motion-nav > *,
.motion-nav__cta > *,
.hero__cta > *,
.hero__primary > *,
.mobile-sticky-cta > * {
  position: relative;
  z-index: 3;
}

/* V4 已占用该按钮的前层；后层同时承担折射与镜面，不改悬停语义。 */
.outline-cta::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  border: 1px solid var(--lg-edge);
  border-radius: inherit;
  box-shadow:
    inset 0 1px 1px var(--lg-spec-1),
    inset 0 2px 3px var(--lg-spec-2),
    inset 0 -2px 4px var(--lg-spec-3),
    inset 0 -8px 16px var(--lg-spec-shade),
    0 12px 30px var(--lg-drop);
  pointer-events: none;
  backdrop-filter: blur(3px) saturate(175%) brightness(1.04);
  -webkit-backdrop-filter: blur(3px) saturate(175%) brightness(1.04);
}

.outline-cta > * {
  position: relative;
  z-index: 3;
}

/* Chromium 的透镜位移；其他浏览器保留着色、模糊与镜面基线。 */
@supports ((-webkit-app-region: drag) and (filter: url("#lg-lens"))) {
  .motion-nav::before,
  .motion-nav__cta::before,
  .hero__cta::before,
  .hero__primary::before,
  .mobile-sticky-cta::before,
  .outline-cta::after {
    filter: url("#lg-lens");
  }
}

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .motion-nav,
  .outline-cta {
    background: var(--bg-alt);
  }

  .motion-nav__cta,
  .hero__cta,
  .hero__primary,
  .mobile-sticky-cta {
    background: var(--accent);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .motion-nav,
  .outline-cta {
    background: var(--bg-alt);
  }

  .motion-nav__cta,
  .hero__cta,
  .hero__primary,
  .mobile-sticky-cta {
    background: var(--accent);
  }

  .motion-nav::before,
  .motion-nav__cta::before,
  .hero__cta::before,
  .hero__primary::before,
  .mobile-sticky-cta::before,
  .outline-cta::after {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    filter: none;
  }
}

@media (prefers-contrast: more) {
  .motion-nav,
  .outline-cta {
    border: 2px solid color-mix(in srgb, var(--ink) 68%, transparent);
  }

  .motion-nav__cta,
  .hero__cta,
  .hero__primary,
  .mobile-sticky-cta {
    border: 2px solid currentColor;
  }
}