/* =========================================================================
   NVC 交互特效层（nvc-buttons.css）
   目标：全站每个可点击元素都有统一的"物理感 + 液态感"反馈
     1. 悬停：抬起 + 光带扫过 + 玻璃变亮
     2. 按下：内凹 + 轻微收缩（真实压感）
     3. 光标跟随高光：光斑位置随指针移动（--mx/--my 由 JS 写入）
     4. 点击涟漪：由 nvc-buttons.js 注入
     5. 键盘焦点：清晰焦点环（可访问性不打折）
     6. 尊重 prefers-reduced-motion：全部动效可关
   ========================================================================= */

:root {
  --btn-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --btn-teal: #2f6b75;
  --btn-ring: rgba(47, 107, 117, 0.35);
}

/* 统一交互基底 */
a.btn,
button,
.btn,
.btn-main,
.btn-ghost,
.nv-btn,
.cmp-chip,
.nv-cmp-chips .cmp-chip,
.nv-cmp-send,
.cmp-send,
.nv-cmp-clear,
.cmp-clear,
.nv-cmp-web,
.cmp-web-toggle,
.lang-switch .ls-opt,
.nav-toggle,
[role="button"],
input[type="submit"],
button[type="submit"] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 0.28s var(--btn-ease),
    box-shadow 0.28s var(--btn-ease),
    background-color 0.28s var(--btn-ease),
    border-color 0.28s var(--btn-ease),
    color 0.2s var(--btn-ease);
  will-change: transform;
}

/* 1) 光标跟随高光（--mx/--my 由 JS 设置，0~100%） */
a.btn::before,
button::before,
.btn::before,
.btn-main::before,
.btn-ghost::before,
.nv-btn::before,
.cmp-chip::before,
.nv-cmp-send::before,
.cmp-send::before,
.lang-switch .ls-opt::before,
[role="button"]::before {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, 0.55),
    rgba(255, 255, 255, 0) 45%
  );
  transition: opacity 0.3s var(--btn-ease);
}

a.btn:hover::before,
button:hover::before,
.btn:hover::before,
.btn-main:hover::before,
.btn-ghost:hover::before,
.nv-btn:hover::before,
.cmp-chip:hover::before,
.nv-cmp-send:hover::before,
.cmp-send:hover::before,
.lang-switch .ls-opt:hover::before,
[role="button"]:hover::before {
  opacity: 1;
}

/* 2) 悬停抬起 + 光带扫过 */
a.btn:hover,
button:hover,
.btn:hover,
.btn-main:hover,
.btn-ghost:hover,
.nv-btn:hover,
.cmp-chip:hover,
.nv-cmp-send:hover,
.cmp-send:hover,
[role="button"]:hover {
  transform: translateY(-2px);
}

a.btn::after,
.btn::after,
.btn-ghost::after,
.nv-btn::after,
.cmp-chip::after,
[role="button"]::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.42) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-14deg) translateX(0);
  opacity: 0;
  transition: opacity 0.25s var(--btn-ease);
}

a.btn:hover::after,
.btn:hover::after,
.btn-ghost:hover::after,
.nv-btn:hover::after,
.cmp-chip:hover::after,
[role="button"]:hover::after {
  opacity: 1;
  animation: nvc-sheen 0.72s var(--btn-ease) forwards;
}

@keyframes nvc-sheen {
  from { transform: skewX(-14deg) translateX(0); }
  to { transform: skewX(-14deg) translateX(380%); }
}

/* 3) 按下：内凹 + 收缩 */
a.btn:active,
button:active,
.btn:active,
.btn-main:active,
.btn-ghost:active,
.nv-btn:active,
.cmp-chip:active,
.nv-cmp-send:active,
.cmp-send:active,
[role="button"]:active {
  transform: translateY(0) scale(0.968);
  box-shadow: inset 0 2px 6px rgba(47, 107, 117, 0.22), inset 0 -1px 0 rgba(255, 255, 255, 0.4);
  transition-duration: 0.09s;
}

/* 4) 涟漪（JS 注入 span） */
.nvc-ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transform: scale(0);
  opacity: 0.55;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 70%);
  animation: nvc-ripple 0.62s var(--btn-ease) forwards;
  z-index: 0;
}

@keyframes nvc-ripple {
  to { transform: scale(1); opacity: 0; }
}

/* 5) 键盘焦点：独立于鼠标高光 */
a.btn:focus-visible,
button:focus-visible,
.btn:focus-visible,
.btn-main:focus-visible,
.btn-ghost:focus-visible,
.nv-btn:focus-visible,
.cmp-chip:focus-visible,
.nv-cmp-send:focus-visible,
.cmp-send:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--btn-teal);
  outline-offset: 3px;
  border-radius: 999px;
}

/* 6) 禁用态不许有动效暗示 */
button:disabled,
.btn[aria-disabled="true"],
[aria-disabled="true"] {
  transform: none !important;
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

button:disabled::before,
button:disabled::after,
[aria-disabled="true"]::before,
[aria-disabled="true"]::after {
  display: none;
}

/* 7) 减少动效偏好：只保留颜色反馈 */
@media (prefers-reduced-motion: reduce) {
  a.btn,
  button,
  .btn,
  .btn-main,
  .btn-ghost,
  .nv-btn,
  .cmp-chip,
  .nv-cmp-send,
  .cmp-send,
  [role="button"] {
    transition: background-color 0.2s linear, color 0.2s linear !important;
  }

  a.btn:hover,
  button:hover,
  .btn:hover,
  .btn-main:hover,
  .btn-ghost:hover,
  .nv-btn:hover,
  .cmp-chip:hover,
  .nv-cmp-send:hover,
  .cmp-send:hover,
  [role="button"]:hover,
  a.btn:active,
  button:active,
  .btn:active,
  .nv-btn:active {
    transform: none !important;
  }

  a.btn::after,
  .btn::after,
  .btn-ghost::after,
  .nv-btn::after,
  .cmp-chip::after,
  .nvc-ripple {
    display: none !important;
  }
}

/* ============ WS4：交互覆盖补齐（改写页示例、排序、分页、加购、页脚链接） ============ */
.rw-ex,
.ac-tag,
.bc-tag,
.page-numbers,
.woocommerce-ordering select,
.add_to_cart_button,
.nv-footer a,
.nv-cmp-chips .cmp-chip {
  position: relative;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.25s ease,
              background-color 0.25s ease,
              color 0.2s ease;
}

.rw-ex:hover,
.ac-tag:hover,
.bc-tag:hover,
.page-numbers:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 10px 24px -12px rgba(47, 107, 117, 0.45);
}

.rw-ex:active,
.ac-tag:active,
.bc-tag:active,
.page-numbers:active,
.add_to_cart_button:active {
  transform: translateY(0) scale(0.97);
}

.rw-ex:focus-visible,
.page-numbers:focus-visible,
.woocommerce-ordering select:focus-visible,
.nv-footer a:focus-visible {
  outline: 2px solid #2f6b75;
  outline-offset: 3px;
  border-radius: 999px;
}

/* 触控目标 ≥44px */
@media (max-width: 720px) {
  .rw-ex,
  .ac-tag,
  .bc-tag,
  .page-numbers,
  .nv-cmp-chips .cmp-chip,
  .nv-cmp-send,
  .cmp-send,
  .nv-cmp-clear,
  .nv-cmp-web {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rw-ex, .ac-tag, .bc-tag, .page-numbers, .add_to_cart_button, .nv-footer a { transition: none !important; }
  .rw-ex:hover, .ac-tag:hover, .bc-tag:hover, .page-numbers:hover { transform: none !important; }
}

/* ============ WS4-2：审计发现的 19 类未覆盖交互元素 ============ */
a.nv-skip-link:focus-visible,
a.logo:focus-visible,
a.nv-hero-whisper:focus-visible,
a.nv-dlg-note-link:focus-visible,
a.nv-link-arrow:focus-visible,
a.nv-free-card:focus-visible,
a.mobile-cta-bar:focus-visible,
a.nfs-companion:focus-visible,
button.nfs-top:focus-visible,
button.nv-dot:focus-visible,
button.nv-vn-dot:focus-visible,
button.nv-dlg-btn:focus-visible,
textarea.rw-textarea:focus-visible {
  outline: 2px solid #2f6b75;
  outline-offset: 3px;
}

.nv-dlg-btn,
.nv-dot,
.nv-vn-dot,
.nfs-top,
.nv-link-arrow,
.nv-free-card,
.mobile-cta-bar,
.nfs-companion,
.logo {
  transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.25s ease, background-color 0.25s ease, color 0.2s ease;
}

.nv-dlg-btn:hover,
.nfs-top:hover,
.mobile-cta-bar:hover,
.nfs-companion:hover,
.nv-free-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -12px rgba(47, 107, 117, 0.45);
}

.nv-dlg-btn:active,
.nv-dot:active,
.nv-vn-dot:active,
.nfs-top:active,
.mobile-cta-bar:active,
.nfs-companion:active,
.nv-free-card:active {
  transform: translateY(0) scale(0.97);
}

.nv-dot:hover,
.nv-vn-dot:hover {
  transform: scale(1.18);
}

.nv-link-arrow:hover {
  transform: translateX(3px);
}

.logo:hover {
  transform: translateY(-1px);
}

.nv-hero-whisper:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -14px rgba(47, 107, 117, 0.45);
}

/* 无 class 的表单控件（审计按标签匹配） */
input,
textarea,
select {
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

input:hover,
textarea:hover,
select:hover {
  border-color: rgba(91, 158, 166, 0.45);
}

@media (max-width: 720px) {
  .nv-dot,
  .nv-vn-dot,
  .nfs-top,
  .nv-dlg-btn,
  .mobile-cta-bar,
  .nfs-companion {
    min-height: 44px;
    min-width: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nv-dlg-btn, .nv-dot, .nv-vn-dot, .nfs-top, .nv-link-arrow,
  .nv-free-card, .mobile-cta-bar, .nfs-companion, .logo { transition: none !important; }
  .nv-dlg-btn:hover, .nv-dot:hover, .nv-vn-dot:hover, .nfs-top:hover,
  .mobile-cta-bar:hover, .nfs-companion:hover, .nv-free-card:hover { transform: none !important; }
}

/* 返回按钮（陪伴页 / 内页） */
.cmp-back,
.nv-cmp-back {
  transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1), background-color 0.25s ease, color 0.2s ease;
  border-radius: 999px;
}
.cmp-back:hover,
.nv-cmp-back:hover {
  transform: translateX(-2px);
  background: rgba(255, 255, 255, 0.75);
}
.cmp-back:focus-visible,
.nv-cmp-back:focus-visible {
  outline: 2px solid #2f6b75;
  outline-offset: 3px;
}