/* =====================================================================
   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%);
}
.orbit .orbit-arcs::before{ width:86%; height:70%; }              /* 与标签环外半径对齐 */
.orbit .orbit-arcs::after{ width:66%; height:52%; 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:5px 8px;
  border:1px solid #dbe4ee;
  border-radius:4px;
  background:rgba(255,255,255,.92);
  color:#5d7387;
  font-style:normal; font-family:inherit;
  font-size:8px; font-weight:700; line-height:1;
  letter-spacing:.1em;
  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; }

/* 中文态：字号略小，避免长词撑破 */
html[lang="zh-CN"] .orbit-chip{ font-size:7px; letter-spacing:.05em; font-weight:600; }

/* 窄屏：标签再小一点，避免拥挤 */
@media(max-width:560px){
  .orbit .orbit-ring .orbit-chip{ font-size:7px; padding:4px 6px; }
}

/* 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; }
}