/* =====================================================================
   orbit-3d.css — 首页「轨道」模块 3D 动画层
   ---------------------------------------------------------------------
   定位：在 styles.css 已有的 .orbit（圆形白底 + 深蓝中央品牌盘）基础之上，
        仅补充 4 层：
          1. CSS 轨道示意环（.orbit-arcs）——静态椭圆结构线，无 OGL 也能看
          2. OGL 粒子层（.orbit-ogl）——透明 canvas，动态粒子轨道（增强）
          3. DOM 深度标签环（.orbit-ring .orbit-chip）——全链工艺标签 3D 绕行
          4. 中央品牌盘（.orbit-disc）——保持在最上层，品牌不被遮挡
   兼容：
        · 遵循 site-motion.css 的 html[data-motion="off"] / prefers-reduced-motion
        · 无 JS 时隐藏标签环（避免互相叠压）；JS 就绪后打 .orbit-ready 再显示
   注意：选择器均以 .orbit 前缀（0,3,0）+ 高特异性，覆盖 styles.css 中
        .orbit em / .orbit em:nth-of-type(n) 的旧定位规则。
   ===================================================================== */

/* ---------- 容器 ---------- */
.orbit{
  position:relative;
  overflow:hidden;        /* 粒子/标签裁切到圆内，避免溢出 */
  border-radius:50%;
  isolation:isolate;      /* 独立层叠上下文，防止 z-index 泄漏到页面 */
  overflow:clip;          /* 现代浏览器：更彻底地裁切子级到圆 */
}

/* ---------- 中央品牌盘（置于最上层） ---------- */
.orbit .orbit-disc{
  position:relative;
  z-index:50;             /* 品牌盘永不被标签/粒子盖住 */
}

/* ---------- CSS 轨道示意环（静态结构线，提升“精密轨道”感） ---------- */
.orbit .orbit-arcs{
  position:absolute; inset:0; z-index:1; pointer-events:none;
}
.orbit .orbit-arcs::before,
.orbit .orbit-arcs::after{
  content:""; position:absolute; left:50%; top:50%;
  border:1px solid rgba(18,86,201,.14);
  border-radius:50%;
  transform:translate(-50%,-50%);
}
/* 2026-09-19 六轮：业主「整个大圈在小一点与文字对齐」。
   容器 border 已去掉（见 styles.css），大圈改由本圆环承担：
   80%（半径 0.40）紧贴标签环（0.36）外侧 —— 外圈变小且与文字对齐。
   内圈结构线 52% → 58%（半径 0.29），落在蓝盘（30%）与标签环之间。 */
.orbit .orbit-arcs::before{ width:80%; height:80%; }              /* 大圈：紧贴标签外侧 */
.orbit .orbit-arcs::after{ width:58%; height:58%; opacity:.5; }   /* 内圈结构线 */

/* ---------- OGL 粒子层（透明 canvas，位于最底） ---------- */
.orbit .orbit-ogl{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:.6;              /* 柔和悬浮的粒子光 */
}
.orbit .orbit-ogl canvas{ display:block; width:100%; height:100%; }
html[data-motion="off"] .orbit .orbit-ogl{ display:none; }  /* 关闭特效时隐藏粒子 */

/* ---------- DOM 深度标签环 ---------- */
.orbit .orbit-ring{
  position:absolute; inset:0; z-index:2; pointer-events:none;
}

/* 单个工艺标签：居中 + 偏移 + 缩放，具体值由 orbit-3d.js 逐帧写入内联变量 */
.orbit .orbit-ring .orbit-chip{
  position:absolute;
  left:50%; top:50%;
  right:auto; bottom:auto;                 /* 清除旧 .orbit em:nth-of-type 的定位 */
  transform:translate(calc(-50% + var(--ox,0px)), calc(-50% + var(--oy,0px))) scale(var(--sc,1));
  opacity:var(--op,1);
  z-index:var(--zi,10);
  will-change:transform,opacity;
  display:inline-flex; align-items:center; justify-content:center;
  padding:4px 7px;
  border:1px solid #dbe4ee;
  border-radius:4px;
  background:rgba(255,255,255,.92);
  color:#5d7387;
  font-style:normal; font-family:inherit;
  /* 五轮演进：
     第一轮 9px / 容器 420px；第二轮 11px / 620px；第三轮 13px / 540px；
     第四轮 15px / 520px（业主「字全大一点」）；
     第五轮（2026-09-19 七轮，业主「字小一点」）：15→13px。
       字号收小后，相邻标签的最小中心距余量反而更宽松，为后续再调留出空间。
       几何校验（英文档最严）：最小中心距 ≈ 1.10 × 0.36 × 520 ≈ 206px，
       最长标签「HINGES & RIM-LOCKS」13px 约 158px，余量约 48px。 */
  /* 2026-09-19 十轮：字号改由工作台参数驱动（--orbit-chip，由 site-motion.js 下发）。 */
  font-size:var(--orbit-chip,13px); font-weight:700; line-height:1;
  letter-spacing:.02em;
  white-space:nowrap;
  text-transform:uppercase;
  box-shadow:0 2px 10px rgba(14,35,60,.06);
  -webkit-font-smoothing:antialiased;
}

/* 无 JS：隐藏标签环避免叠压；JS 就绪后显示 */
.orbit:not(.orbit-ready) .orbit-chip{ opacity:0; }

/* 中文态：沿用基础字号（中文标签最宽仅 71css px、零碰撞，无需缩小）；
   仅不再额外压小字距，保持紧凑。 */
html[lang="zh-CN"] .orbit-chip{ font-weight:600; }

/* 平板（≤900px）：容器 φ580，标签随桌面档同步提到 13px（原 9.5px→11px→现 13px）。
   几何校验：相邻标签最小中心距 ≈ 1.10 × 0.42 × 580 ≈ 268px，
   最长标签 13px 下约 158px，余量约 110px，零重叠。 */
@media(max-width:900px){
  .orbit .orbit-ring .orbit-chip{ font-size:13px; padding:4px 7px; letter-spacing:.02em; }
}

/* 窄屏（≤560px）：圆盘 φ370（styles.css ≤690px 断点），标签 6.8px + 内边距 3px 5px。
   手机档「零重叠」实测（144 个相位、真实渲染框两两求交，390 视口）：
     7.5px + 4px 6px → 9/96 相位重叠（最差 2.7%）
     7px   + 4px 6px → 9/96 相位重叠（最差 0.96%）
     7px   + 3px 5px → 3/144 相位重叠（最差 0.25%）
     6.8px + 3px 5px → 0/144 相位重叠  ← 现用
   换言之手机档上限约 6.9px：7px 要零重叠需要 φ446 以上，而 390 视口 wrap 只有
   calc(100% - 28px) = 362px，物理放不下。 */
@media(max-width:560px){
  .orbit .orbit-ring .orbit-chip{ font-size:6.8px; padding:3px 5px; }
}

/* reduced-motion：无论 JS 是否开启，保证不出现 CSS 动画/过渡（JS 本身也已停帧） */
@media(prefers-reduced-motion:reduce){
  .orbit .orbit-ring .orbit-chip,
  .orbit .orbit-arcs::before,
  .orbit .orbit-arcs::after{ transition:none; }
}