/* ============================================================
   Neuxin 交互增强层 v1.0
   独立文件，不依赖/不修改 style.css
   作用域：鼠标跟随 / 磁力按钮 / 3D倾斜 / 涟漪 / 滚动进度 / 视差
   降级：移动端 & prefers-reduced-motion 自动关闭动效
   ============================================================ */

/* ========== 全局变量 ========== */
:root {
  --nx-primary: #1a5ab8;
  --nx-primary-light: #3d7fd6;
  --nx-ease-out: cubic-bezier(.22, 1, .36, 1);
}

/* ============================================================
   1. 自定义光标（仅精确指针设备）
   ============================================================ */
.nx-cursor-ring,
.nx-cursor-dot {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 99999;
  border-radius: 50%;
  opacity: 0;
  will-change: transform;
  transition: opacity .3s ease;
}
.nx-cursor-ring {
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;
  border: 1.5px solid rgba(26, 90, 184, .7);
  box-shadow: 0 0 6px rgba(26, 90, 184, .2), 0 0 12px rgba(26, 90, 184, .08);
  transition: opacity .3s ease, width .25s var(--nx-ease-out),
              height .25s var(--nx-ease-out), margin .25s var(--nx-ease-out),
              border-color .25s ease, background .25s ease;
}
.nx-cursor-dot {
  width: 4px; height: 4px;
  margin: -2px 0 0 -2px;
  background: var(--nx-primary);
  box-shadow: 0 0 4px rgba(26, 90, 184, .4);
}
/* 光标激活态：悬停可点击元素 */
.nx-cursor-ring.is-active {
  width: 38px; height: 38px;
  margin: -19px 0 0 -19px;
  border-color: rgba(26, 90, 184, .9);
  background: rgba(26, 90, 184, .1);
  box-shadow: 0 0 8px rgba(26, 90, 184, .3), 0 0 18px rgba(26, 90, 184, .12);
}
.nx-cursor-dot.is-active { opacity: 0 !important; }
/* 深色背景上反色 */
.nx-cursor-ring.on-dark { border-color: rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .12); box-shadow: 0 0 10px rgba(255,255,255,.2), 0 0 24px rgba(255,255,255,.08); }
.nx-cursor-dot.on-dark { background: #fff; box-shadow: 0 0 8px rgba(255,255,255,.6); }

/* 启用自定义光标时隐藏系统光标 */
body.nx-cursor-on,
body.nx-cursor-on a,
body.nx-cursor-on button,
body.nx-cursor-on .article-card,
body.nx-cursor-on .pcard { cursor: none; }

/* ============================================================
   2. 滚动进度条
   ============================================================ */
.nx-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2.5px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--nx-primary), #4da3ff, var(--nx-primary));
  z-index: 100001;
  pointer-events: none;
  will-change: transform;
}

/* ============================================================
   3. 卡片聚光高亮 + 3D 倾斜
   ============================================================ */
.nx-tilt {
  position: relative;
  will-change: transform;
  transform-style: preserve-3d;
}
/* 跟随鼠标的高光 */
.nx-spot::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s ease;
  background: radial-gradient(
    420px circle at var(--nx-mx, 50%) var(--nx-my, 50%),
    rgba(26, 90, 184, .13),
    transparent 42%
  );
  z-index: 1;
}
.nx-spot:hover::before { opacity: 1; }
/* 卡片边框跟随高光 */
.nx-spot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s ease;
  background: radial-gradient(
    300px circle at var(--nx-mx, 50%) var(--nx-my, 50%),
    rgba(26, 90, 184, .35),
    transparent 40%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1.2px;
  z-index: 2;
}
.nx-spot:hover::after { opacity: 1; }

/* 保证卡片内容在高光之上 */
.nx-spot > * { position: relative; z-index: 3; }

/* ============================================================
   4. 按钮磁力 + 光泽扫过 + 涟漪
   ============================================================ */
.nx-magnetic {
  position: relative;
  overflow: hidden;
  will-change: transform;
}
/* 光泽扫过 —— JS 注入真实元素，避免与按钮原有 ::after 冲突 */
.nx-shine {
  position: absolute;
  top: 0; left: -120%;
  width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .34), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  z-index: 5;
  animation: nxShine .78s ease forwards;
}
@keyframes nxShine {
  to { left: 165%; }
}

/* 涟漪 */
.nx-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  transform: scale(0);
  pointer-events: none;
  animation: nxRippleOut .62s var(--nx-ease-out) forwards;
  z-index: 4;
}
@keyframes nxRippleOut {
  to { transform: scale(2.6); opacity: 0; }
}

/* ============================================================
   5. 导航链接下划线动画
   ============================================================ */
.nav a {
  position: relative;
}
.nav a::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -4px;
  width: 0; height: 2px;
  background: var(--nx-primary);
  transform: translateX(-50%);
  transition: width .32s var(--nx-ease-out);
  border-radius: 2px;
}
.nav a:hover::after,
.nav a.active::after { width: 22px; }

/* ============================================================
   6. 导航栏滚动响应（下滚隐藏 / 上滚显示）
   ============================================================ */
.header {
  transition: transform .42s var(--nx-ease-out), box-shadow .3s ease, background .3s ease !important;
}
.header.nx-hidden { transform: translateY(-100%); }
.header.nx-solid {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 4px 24px rgba(15, 30, 60, .07);
}

/* ============================================================
   7. 视差层（JS 写入 translate3d）
   ============================================================ */
.nx-parallax {
  will-change: transform;
  pointer-events: none;
}

/* ============================================================
   8. 区块进入动画（增强版：分层错落）
   ============================================================ */
.nx-reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .78s var(--nx-ease-out), transform .78s var(--nx-ease-out);
}
.nx-reveal.nx-in {
  opacity: 1;
  transform: translateY(0);
}
/* 从左右两侧进入 */
.nx-reveal-left { transform: translateX(-44px); }
.nx-reveal-right { transform: translateX(44px); }
.nx-reveal-left.nx-in,
.nx-reveal-right.nx-in { transform: translateX(0); }

/* ============================================================
   9. 图片悬停微缩放
   ============================================================ */
/* 裁掉放大溢出的部分，保持卡片边缘干净 */
.nx-zoom { overflow: hidden; }
.nx-zoom img,
img.nx-zoom {
  transition: transform .62s var(--nx-ease-out) !important;
}
.nx-zoom:hover img,
img.nx-zoom:hover { transform: scale(1.07); }

/* ============================================================
   10. 侧边浮标 / 回到顶部 增强
   ============================================================ */
.side-float-item,
.back-top {
  transition: transform .32s var(--nx-ease-out), box-shadow .32s ease, background .3s ease !important;
}
.side-float-item:hover,
.back-top:hover { transform: translateY(-3px) scale(1.07); }

/* ============================================================
   11. 文字逐字/逐行浮现（Banner 标题用）
   ============================================================ */
.nx-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(18px);
  animation: nxWordIn .62s var(--nx-ease-out) forwards;
}
@keyframes nxWordIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   12. 全局视频背景（fixed 全屏：顶部自动播 + 滚动逐帧）
   视频作为整站固定背景，贯穿所有区块；顶部自动播放，
   下滑时由 JS 驱动 currentTime 随滚动逐帧播放，丝滑无跳变。
   ============================================================ */
.nx-video-bg-wrap {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* 兜底：视频未播放/自动播放被拦时，显示产品海报而非纯黑 */
  background: #05091a url('../images/hero-fallback.jpg') center/cover no-repeat;
}
.nx-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 顶部自动播由浏览器/微信脚本控制；滚动时 JS 直接 seek，关掉过渡避免拖影 */
  transition: none !important;
}
/* 暗色渐变蒙版：无论视频当前帧明暗，都保证文字清晰可读 */
.nx-video-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(5,9,26,0.72) 0%,
      rgba(5,9,26,0.42) 30%,
      rgba(5,9,26,0.52) 62%,
      rgba(5,9,26,0.82) 100%);
}
/* body 兜底深色底（视频加载前/间隙不露白） */
.nx-has-stage { background: #05091a !important; }
/* 内容抬到视频之上（视频 z-index:0） */
/* 注意：header 必须保持 position:fixed + 高 z-index，不能改成 relative */
body.nx-has-stage > section,
body.nx-has-stage > footer {
  position: relative;
  z-index: 2;
}
/* header 在深色主题下保持固定 + 深色半透明背景，始终可见 */
.nx-has-stage .header {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 9999 !important;
  background: rgba(5, 9, 26, 0.88) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.nx-has-stage .hero { background: transparent; }
/* 英雄标题加描边阴影，亮帧下也清晰 */
.nx-has-stage .hero-text h1,
.nx-has-stage .hero-text p,
.nx-has-stage .hero-tag {
  text-shadow: 0 2px 18px rgba(0,0,0,0.65), 0 0 40px rgba(0,0,0,0.3);
}
/* section 内容器：透明，不额外遮挡视频 */
.nx-has-stage .section-inner { background: transparent; }

/* ============================================================
   14. 首页视频背景融合（仅 .nx-has-stage 生效，不影响其他页面）
   所有浅色区块改为半透明深色玻璃，视频从背后透出；
   文字统一白色/浅蓝保证可读性。
   ============================================================ */

/* ★ 关键：用 background（简写）而非 background-color，
   因为原样式用的是 background: linear-gradient(...) 简写，
   简写会重置并覆盖 background-color 单属性。 */
/* 同时清除纹理伪元素的背景，否则 ::before/::after 会盖住视频 */
.nx-has-stage .section-wrap.bg-blueprint,
.nx-has-stage .section-wrap.bg-chevron,
.nx-has-stage .section-wrap.bg-grain,
.nx-has-stage .section-wrap.bg-hex,
.nx-has-stage .section-wrap.bg-linen,
.nx-has-stage .section-wrap.bg-light,
.nx-has-stage .section-wrap.bg-twill {
  /* 视频保持清晰可见：仅 38% 暗化，其余透出视频（不模糊，避免背景发虚） */
  background: rgba(6, 11, 28, 0.38) !important;
}
.nx-has-stage .section-wrap.bg-blueprint::before,
.nx-has-stage .section-wrap.bg-blueprint::after,
.nx-has-stage .section-wrap.bg-chevron::before,
.nx-has-stage .section-wrap.bg-chevron::after,
.nx-has-stage .section-wrap.bg-grain::before,
.nx-has-stage .section-wrap.bg-grain::after,
.nx-has-stage .section-wrap.bg-hex::before,
.nx-has-stage .section-wrap.bg-hex::after,
.nx-has-stage .section-wrap.bg-linen::before,
.nx-has-stage .section-wrap.bg-linen::after,
.nx-has-stage .section-wrap.bg-twill::before,
.nx-has-stage .section-wrap.bg-twill::after {
  display: none !important;
}

/* 顶部导航：深色玻璃（logo/链接文字颜色） */
.nx-has-stage .header .logo-text { color: #fff; }
.nx-has-stage .header .logo-text span { color: #b6c5e0; }
.nx-has-stage .nav a { color: #d0dbef; }
.nx-has-stage .nav a:hover,
.nx-has-stage .nav a.active { color: #fff; background: transparent; }
.nx-has-stage .lang-switch { color: #fff; border-color: rgba(255, 255, 255, 0.2); }
.nx-has-stage .hamburger { color: #fff; }

/* 通用标题与正文（视频可见时靠阴影保证可读） */
.nx-has-stage .section-header h2 { color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,0.6); }
.nx-has-stage .section-header p { color: #d2def2; text-shadow: 0 1px 10px rgba(0,0,0,0.5); }
.nx-has-stage .section-tag { color: #7eb8ff; text-shadow: 0 1px 8px rgba(0,0,0,0.5); }

/* 特性卡片 */
.nx-has-stage .feature-card {
  background: rgba(13, 21, 45, 0.82);
  border-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.nx-has-stage .feature-card h3 { color: #fff; }
.nx-has-stage .feature-card p { color: #c2d0e8; }
.nx-has-stage .feature-card:hover { border-color: rgba(126, 184, 255, 0.5); background: rgba(15, 24, 50, 0.9); }

/* 产品卡片 */
.nx-has-stage .product-card {
  background: rgba(13, 21, 45, 0.82);
  border-color: rgba(255, 255, 255, 0.1);
}
.nx-has-stage .product-card h4 { color: #fff; }
.nx-has-stage .product-card .product-info { color: #c2d0e8; }
.nx-has-stage .product-card .thumb { background: rgba(255, 255, 255, 0.04) !important; }

/* 新闻卡片 */
.nx-has-stage .news-card {
  background: rgba(13, 21, 45, 0.82);
  border-color: rgba(255, 255, 255, 0.1);
}
.nx-has-stage .news-card .thumb { background: rgba(255, 255, 255, 0.04); }
.nx-has-stage .news-card h4 { color: #fff; }
.nx-has-stage .news-card p { color: #c2d0e8; }

/* About 简介 */
.nx-has-stage .about-text {
  background: rgba(10, 16, 38, 0.55);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 32px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.nx-has-stage .about-text h2 { color: #fff; }
.nx-has-stage .about-text p { color: #d2def2; }
.nx-has-stage .about-text strong { color: #7eb8ff; }
.nx-has-stage .about-text .sup-label { color: #7eb8ff; }
/* About 图片容器：深色玻璃替代浅蓝底 */
.nx-has-stage .about-img-wrap { background: rgba(15, 24, 50, 0.5); }
.nx-has-stage .about-img-placeholder { background: rgba(15, 24, 50, 0.4); }
/* About 列表项文字 */
.nx-has-stage .about-item { color: #d2def2; }

/* 主按钮在深色背景上保持蓝色 */
.nx-has-stage .btn-primary {
  background: #1a5ab8;
  color: #fff;
}
.nx-has-stage .btn-primary:hover { background: #2470d4; }

/* 产品 hero 数字 */
.nx-has-stage .ph-left h2 { color: #fff; }
.nx-has-stage .ph-left p { color: #b6c5e0; }
.nx-has-stage .ph-stat .n { color: #fff; }
.nx-has-stage .ph-stat .t { color: #b6c5e0; }
.nx-has-stage .ph-arrow { color: #7eb8ff; }

/* outline 按钮在深色背景上的反转 */
.nx-has-stage .btn-outline {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}
.nx-has-stage .btn-outline:hover { background: rgba(255, 255, 255, 0.08); border-color: #fff; }

/* 标签徽章 */
.nx-has-stage .ac-category,
.nx-has-stage .product-tag {
  background: rgba(26, 90, 184, 0.2);
  color: #7eb8ff;
}
.nx-has-stage .ac-date { color: #8b9bbf; }

/* 段落链接颜色 */
.nx-has-stage a { color: #7eb8ff; }

/* ============================================================
   15. 降级处理
   ============================================================ */
@media (hover: none), (pointer: coarse) {
  .nx-cursor-ring, .nx-cursor-dot { display: none !important; }
  .nx-spot::before, .nx-spot::after { display: none; }
  .nx-tilt { transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .nx-cursor-ring, .nx-cursor-dot { display: none !important; }
  .nx-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .nx-tilt { transform: none !important; }
  .nx-magnetic { transform: none !important; }
  .nx-shine { display: none !important; }
  .nx-parallax { transform: none !important; }
  .nx-word { opacity: 1 !important; transform: none !important; animation: none !important; }
  /* 视频背景在 reduced-motion 下由 JS 改为仅自动播放、不滚动驱动，无需额外 CSS 重置 */
}

/* ===== 新闻中心文章 中英双语切换 ===== */
.ac-lang-switch { display: flex; gap: 8px; margin: 4px 0 18px; }
.ac-lang-btn {
  font-size: 13px; line-height: 1; padding: 7px 16px;
  border: 1px solid #d0dcf0; border-radius: 20px;
  background: #fff; color: #5a6b85; cursor: pointer;
  transition: all .2s ease; font-family: inherit;
}
.ac-lang-btn:hover { border-color: #1a5ab8; color: #1a5ab8; }
.ac-lang-btn.active { background: #1a5ab8; border-color: #1a5ab8; color: #fff; }
.ac-lang-block { display: block; }
.ac-lang-block[data-lang="zh"] { display: none; }
.article-card.lang-zh .ac-lang-block[data-lang="en"] { display: none; }
.article-card.lang-zh .ac-lang-block[data-lang="zh"] { display: block; }
.ac-lang-block img {
  max-width: 100%; height: auto; border-radius: 10px;
  margin: 16px 0; box-shadow: 0 6px 20px rgba(10,20,50,.08);
}
.ac-lang-block h3 { margin-top: 22px; }
.ac-lang-block ul { margin: 10px 0 14px; padding-left: 20px; }
.ac-lang-block li { margin: 6px 0; }
.ac-src { margin-top: 18px; font-size: 13px; }
.ac-src a { color: #1a5ab8; text-decoration: none; }
.ac-src a:hover { text-decoration: underline; }