/* body-interaction-v1 — 视觉规则
   Overlay 坐标：人工校准真值 D:\商业网站图\_analysis\overlay-calibrator\overlay-coordinates.json
   12 个部位 PNG 均为单一平色剪影 → 用 alpha 作 mask，颜色全部由 CSS 控制，原 PNG 零修改
*/

.bdx {
  --bdx-ink: #224466;          /* 深蓝：active */
  --bdx-mute: #72889d;
  --bdx-line: #90A1B2;
  --bdx-soft: #CAD6E0;
  --bdx-pale: #F9F9F9;
  --bdx-ov-idle: #b9c7d6;      /* 浅灰蓝：未选中 */
  --bdx-ov-hover: #97abc1;     /* hover 轻微增强 */
  --bdx-ov-active: #1f3f66;    /* 深蓝强调 */
  position: relative;
  width: 100%;
  padding: 40px 0 56px;
  box-sizing: border-box;
  letter-spacing: 0;
}

/* 五列：信息卡(左外) | 左导航 | 人体+圆环 | 右导航 | 信息卡(右外) */
.bdx__grid {
  display: grid;
  grid-template-columns: 280px 240px minmax(0, 1fr) 240px 280px;
  align-items: center;
  gap: 0 18px;
  width: min(1760px, 100%);
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

/* ---------------- 中央：人体 + 雷达圆环 ---------------- */
.bdx__stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; }

.bdx__radar {
  position: relative; width: 100%; aspect-ratio: 1 / 1; max-width: 620px; margin: 0 auto;
  border-radius: 50%; background: var(--bdx-pale);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
/* 人体容器：固定 833/2539 比例；Overlay 一律百分比定位 */
/* 人体摄影机窗口：与浅灰内盘同心同径（.bg-mid = 雷达的 85.5%，实测 513x513@600）
   85.5% / 2 = 42.75%；circle() 的百分比半径在正方形盒中以盒边长作基准
   inset:0 → 不改变 .body-camera 的取尺基准（仍为雷达高度 92%），人体尺寸/位置零变化
   只裁 人体 + 12 Overlay；连线在 .bdx__stage 下、不受此层裁剪 */
.body-viewport {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  clip-path: circle(42.75% at 50% 50%);
}

/* 焦点摄影机：负责 active 状态的 scale / translate（不动 .bdx__canvas 的坐标体系） */
.body-camera {
  position: relative;
  height: 92%;
  aspect-ratio: 833 / 2539;
  max-height: 100%;
  z-index: 2;
  transform-origin: center center;
  transform: translate3d(var(--camera-x, 0%), var(--camera-y, 0%), 0) scale(var(--camera-scale, 1));
  /* 首帧不加过渡，避免加载时自动"推镜" */
  transition: none;
  will-change: transform;
}
/* 就绪后才启用平滑换镜 */
.bdx.is-ready .body-camera {
  transition: transform 850ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* 坐标画布：833 / 2539 体系不变，Overlay 百分比仍相对它 */
.bdx__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.bdx__body {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  display: block; pointer-events: none; user-select: none;
}

/* ---------------- 12 个 Overlay：默认全部显示 ----------------
   形状来自 PNG 的 alpha（mask），颜色由 CSS 给 → 不改原图即可换色 */
.bdx__overlay {
  position: absolute;
  display: block;
  background-color: var(--bdx-ov-idle);
  opacity: .62;
  pointer-events: none;
  transition: opacity .45s cubic-bezier(0.23, 1, 0.32, 1), background-color .45s cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-position: 0 0; mask-position: 0 0;
}
@media (hover: hover) and (pointer: fine) {
  .bdx__overlay.is-hover { background-color: var(--bdx-ov-hover); opacity: .82; }
}
/* active：深蓝强调，压过 hover */
.bdx__overlay.is-on {
  background-color: var(--bdx-ov-active);
  opacity: .92;
}

/* 命中热点：透明，不产生任何可见框 */
.bdx__hit {
  position: absolute; cursor: pointer;
  background: transparent; border: 0; padding: 0;
  outline: none;
}
.bdx__hit:focus { outline: none; }

/* ---------------- 连线层：细、克制、浅蓝灰 ---------------- */
.bdx__lines {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 3; overflow: visible;
}
.bdx__lines path {
  fill: none;
  stroke: var(--bdx-line);
  stroke-width: 1.4;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity .35s ease;
}
.bdx__lines path.is-on { opacity: .85; }

/* ---------------- 左右导航 ---------------- */
.bdx__nav { position: relative; z-index: 4; min-width: 0; max-width: 100%; }
.bdx__nav ul { list-style: none; margin: 0; padding: 0; min-width: 0; }
.bdx__nav--l { justify-self: end; }
.bdx__nav--r { justify-self: start; }

.bdx__nav-btn {
  position: relative; display: flex; align-items: center; gap: 8px;
  width: 100%; box-sizing: border-box; min-width: 0;
  padding: 7px 6px; margin: 0 0 6px;
  border: 0; background: transparent; cursor: pointer;
  font-family: inherit; letter-spacing: 0; text-align: left; color: var(--bdx-ink);
  transition: color .3s ease;
}

.bdx__dot {
  flex: 0 0 auto;
  width: 34px; height: 34px; aspect-ratio: 1 / 1; border-radius: 50%;
  border: 1px solid rgba(34,68,102,.18);
  background: rgba(34,68,102,.05);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1;
  color: var(--bdx-ink);
  transition: border-color .3s ease, background .3s ease, color .3s ease, transform .3s cubic-bezier(0.23, 1, 0.32, 1);
}
.bdx__nm { font-size: 15px; line-height: 1.2; white-space: nowrap; min-width: 0; transition: opacity .3s ease; }
.bdx__en {
  font-family: "Marcellus SC", serif;
  font-size: 10px; letter-spacing: .18em;
  color: var(--bdx-mute); white-space: nowrap;
  min-width: 0; flex-shrink: 1;
}

@media (hover: hover) and (pointer: fine) {
  .bdx__nav-btn:hover .bdx__dot { background: rgba(34,68,102,.12); border-color: rgba(34,68,102,.45); }
  .bdx__nav-btn:hover .bdx__nm { color: #123; }
}
.bdx__nav-btn:active .bdx__dot { transform: scale(.94); }
.bdx__nav-btn.is-on .bdx__dot { background: var(--bdx-ink); border-color: var(--bdx-ink); color: #fff; }
.bdx__nav-btn.is-on .bdx__nm { font-weight: 700; }
.bdx__nav-btn:focus { outline: none; }
.bdx__nav-btn:focus-visible .bdx__dot { outline: 2px solid var(--bdx-ink); outline-offset: 2px; }

/* ---------------- 信息卡（对应导航最外侧） ---------------- */
/* 左右导航标签块宽度不同（左 167px / 右 223px，因内侧对齐 + 标签长度不同），
   导致「卡片 ↔ 导航」视觉间距 97px vs 41px。
   以导航标签块【外边界】为基准，左右统一 41px：左侧卡片外移 56px（= 标签块宽度差 223-167）。
   卡片宽高 / 内 padding / 字号 / 导航位置 全部不变。 */
.bdx__card--l { left: 56px; }

.bdx__card {
  position: relative; z-index: 4;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .4s ease, transform .4s cubic-bezier(0.23, 1, 0.32, 1), visibility .4s;
  background: #fff; border: 1px solid rgba(34,68,102,.12); border-radius: 10px;
  padding: 18px 18px 20px;
  box-shadow: 0 8px 26px rgba(34,68,102,.10);
  letter-spacing: 0;
}
.bdx__card.is-on { opacity: 1; visibility: visible; transform: none; }

.bdx__card-hd {
  display: flex; align-items: baseline; gap: 10px;
  padding-bottom: 10px; border-bottom: 1px solid rgba(34,68,102,.10); margin-bottom: 12px;
}
.bdx__card-nm { font-size: 20px; font-weight: 700; color: var(--bdx-ink); line-height: 1.2; }
.bdx__card-en { font-family: "Marcellus SC", serif; font-size: 11px; letter-spacing: .2em; color: var(--bdx-mute); }
.bdx__card-desc { font-size: 13px; line-height: 1.85; color: #4a5b6d; margin: 0 0 12px; }

.bdx__thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.bdx__thumb {
  width: 74px; height: 74px; border-radius: 8px;
  background: #f4f6f8; border: 1px solid rgba(34,68,102,.10);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  position: relative;
}
/* 缩略图同样用 mask 上色，保证在浅底上看得见 */
.bdx__thumb-shape {
  width: 62%; height: 62%;
  background-color: var(--bdx-ink);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
}

.bdx__card-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--bdx-ink); text-decoration: none;
  border-bottom: 1px solid rgba(34,68,102,.35); padding-bottom: 2px;
  transition: gap .3s cubic-bezier(0.23, 1, 0.32, 1), border-color .3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .bdx__card-cta:hover { gap: 14px; border-color: var(--bdx-ink); }
}
.bdx__card-cta:focus-visible { outline: 2px solid var(--bdx-ink); outline-offset: 3px; }

/* ---------------- 响应式 ---------------- */
@media (max-width: 1500px) {
  .bdx__grid { grid-template-columns: 240px 230px minmax(0,1fr) 230px 240px; gap: 0 8px; }
  .bdx__card-nm { font-size: 18px; }
  .bdx__nm { font-size: 14px; }
  .bdx__en { font-size: 9px; letter-spacing: .12em; }
  .bdx__nav-btn { gap: 6px; padding: 7px 4px; }
  .bdx__dot { width: 30px; height: 30px; font-size: 13px; }
}
@media (max-width: 1180px) {
  .bdx__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "stage stage" "navL navR" "cardL cardR";
    gap: 18px;
  }
  .bdx__stage { grid-area: stage; }
  .bdx__nav--l { grid-area: navL; justify-self: start; }
  .bdx__nav--r { grid-area: navR; justify-self: end; }
  .bdx__card--l { grid-area: cardL; }
  .bdx__card--r { grid-area: cardR; }
}

@media (prefers-reduced-motion: reduce) {
  .bdx.is-ready .body-camera { transition-duration: .01ms; }
    .bdx__overlay, .bdx__card, .bdx__lines path, .bdx__dot { transition-duration: .01ms; }
}

/* ===== 覆盖（必须放最后）：圆点一律朝人体一侧 ===== */
.bdx__nav--l .bdx__nav-btn { flex-direction: row-reverse; text-align: right; }
.bdx__nav--r .bdx__nav-btn { flex-direction: row; text-align: left; }


/* ============================================================
   body-radar-bg — Demo 自绘背景圆环层
   参考原站【视觉层级 / 动画规律 / 相对比例】重写，非照搬原站 SVG / JS / CSS
   与 .bdx__canvas / .overlay / 导航 / 连线 / 信息卡 完全解耦
   层级：z-index:1（低于 .bdx__canvas 的 z-index:2）
   ============================================================ */

.body-radar-bg {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;

  --bg-disc: #F9F9F9;                       /* 外底色圆盘 */
  --bg-mid: rgba(228, 232, 237, .5);        /* 浅蓝灰内盘 */
  --bg-line: rgba(144, 161, 178, .42);      /* 弧线 / 刻度 */
  --bdx-sector-angle: 0deg;                 /* 焦点扇区角度，由 JS 更新 */
}

.bg-layer {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
.bg-layer > svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* ---- 1 底色圆盘 100% ---- */
.bg-disc { width: 100%; height: 100%; background: var(--bg-disc); }

/* ---- 2 外侧大块弧形 95.7% · 3.5s ease-in-out alternate-reverse ---- */
.bg-outer {
  width: 95.7%; height: 95.7%;
  animation: bdx-rotate1 3.5s ease-in-out infinite alternate-reverse;
  will-change: transform;
}
.bg-outer path { fill: none; stroke: var(--bg-mid); stroke-width: 3; }

/* ---- 3 浅蓝灰内盘 85.5% ---- */
.bg-mid { width: 85.5%; height: 85.5%; background: var(--bg-mid); }

/* ---- 4 外侧浅弧 78% · 5.5s ease-in-out alternate ---- */
.bg-arc-a {
  width: 78%; height: 78%;
  animation: bdx-rotate1 5.5s ease-in-out infinite alternate;
  will-change: transform;
}
.bg-arc-a path { fill: none; stroke: var(--bg-line); stroke-width: 1.6; }

/* ---- 5 细实线圆 85.5%（静止）---- */
.bg-ring-inner {
  width: 85.5%; height: 85.5%;
  border: 1px solid rgba(144, 161, 178, .30);
}

/* ---- 6 刻度环 · 10s ease-in-out alternate ---- */
.bg-ticks {
  width: 49%; height: 49%;
  background: repeating-conic-gradient(from 0deg,
    var(--bg-line) 0deg 0.7deg,
    transparent 0.7deg 5deg);
  -webkit-mask: radial-gradient(circle closest-side at 50% 50%, transparent 0 91%, #000 92% 100%);
  mask: radial-gradient(circle closest-side at 50% 50%, transparent 0 91%, #000 92% 100%);
  animation: bdx-rotate1 10s ease-in-out infinite alternate;
  will-change: transform;
}

/* ---- 7 焦点扇区（跟随 active 部位角度；不自动旋转）---- */
.bg-sector {
  width: 49%; height: 49%;
  /* 扇形中心对准 0deg，再整体 rotate(var) → 指向即 var */
  background: conic-gradient(from -20deg,
    transparent 0deg,
    rgba(144, 161, 178, .16) 12deg 28deg,
    transparent 40deg);
  transform: translate(-50%, -50%) rotate(var(--bdx-sector-angle));
  transition: transform .7s cubic-bezier(0.23, 1, 0.32, 1);
}

/* 旋转规律（与原站一致：0→360deg，靠 alternate 形成往复）
   注意：.bg-layer 本身带 translate(-50%,-50%)，keyframes 必须一并带上，否则元素会跑位 */
@keyframes bdx-rotate1 {
  0%   { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .bg-outer, .bg-arc-a, .bg-ticks { animation: none; }
  .bg-sector { transition-duration: .01ms; }
}


/* ============================================================
   外层展示尺度放大 · 2026-10-17（方案 B，经人工授权）
   ------------------------------------------------------------
   目标：提高中央人体/雷达区域的视觉占比，1920/1600/1440 三档同步。
   允许改：.bdx__grid 的列宽 / gap / padding / width，以及 .bdx__radar 的 max-width。
   禁止改：hotspot、Overlay、连线、navAnchor、bend、CAMERA、viewport、
          .bdx__canvas 坐标体系、PNG、JS、动画与交互逻辑 —— 本段全部未触。

   推导（C = 网格宽 − 2×卡片列 − 2×标签列 − 4×gap − 2×padding）：
     1920 → grid min(1860,100%)=1860，C = 708（原 600）
     1600 → grid 1585，          C = 557（原 425）
     1440 → grid 1425，          C = 500（原 405）
   用 clamp+vw 连续收缩，避免断点处跳变；下限保证标签/卡片不裁切。
   ≥1181px 才生效 —— 现有 ≤1180px 的 2 列移动端布局与 ≤1500px 的窄屏排版完全保留。
   ============================================================ */
@media (min-width: 1181px) {
  .bdx__grid {
    width: min(1860px, 100%);
    grid-template-columns:
      clamp(210px, 15.42vw, 280px)   /* 左信息卡 */
      clamp(196px, 13.65vw, 240px)   /* 左部位标签 */
      minmax(0, 1fr)                 /* 中央 人体 + 雷达 */
      clamp(196px, 13.65vw, 240px)   /* 右部位标签 */
      clamp(210px, 15.42vw, 280px);  /* 右信息卡 */
    gap: 0 clamp(10px, 0.83vw, 18px);
    padding: 0 clamp(16px, 1.39vw, 24px);
  }
  /* 中间列已增长到 708px（1920），原 620px 上限会截断，按新尺度放开 */
  .bdx__radar {
    max-width: 760px;
  }
}