/* arch-people-ring.css
 * 参考站 kononenkogroup.com 首页 section.nwv (SectionAboutPeople) 的照片环序列。
 * 所有数值来自实测文档 kononenko-底部圆环切换-实测-20260913.md 与线上 index.CnTdPHgc.css / BILhttA3.js。
 * ⚠ 照片容器用 .pvj 而不是参考站的 .vnj:主包里已有一个 an('.vnj') 模块(给 .uod 用的自动转椭圆环),
 *   它会抓走页面上所有 .vnj 并覆写 transform / --ring-size。改名是为了避开这个冲突,语义仍对应参考站的 .vnj。
 * 作用域一律用 [data-people-ring] 限定,避免与本站已有的 .nwv(联系节)/.enr/.ima/.ppi/.ohb 冲突。
 * rem 基准与参考站一致: root font-size = 100vw/1920 (本站 CSS 已是 .0520833vw)。
 */

/* ---- .pvj 照片容器 ---- */
/* 桌面: 定位交给 JS 写 transform, 容器铺满视口(参考站是全屏 WebGL canvas, 我们用 fixed DOM 层等价替代) */
[data-people-ring] .pvj{
  position:fixed; left:0; top:0; width:100vw; height:100vh;
  display:block; margin:0; pointer-events:none; z-index:0;
  visibility:hidden;            /* 由 IntersectionObserver 打开,防止溢出到相邻节 */
  contain:layout style;
}
[data-people-ring].is-ring-live .pvj{ visibility:visible }

/* .elr 单张照片。参考站 .pvj .elr{height:377rem;width:377rem} */
[data-people-ring] .pvj .elr{
  position:absolute; left:0; top:0; margin:0;
  width:377rem; height:377rem;
  border-radius:0; opacity:1;
  transform-origin:50% 50%;
  will-change:transform;
  display:block; overflow:hidden;
  backface-visibility:hidden;
}
[data-people-ring] .pvj .elr img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* ---- .uwg 中心年份块 (参考站 .uwg / .vrc / .ciz / .iek) ---- */
[data-people-ring] .uwg{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  margin:1200rem auto; text-align:center;
}
[data-people-ring] .uwg .vrc{ width:100%; position:relative }
[data-people-ring] .uwg .kca{
  line-height:.85; width:100%; max-width:990rem;
  margin-left:auto; margin-right:auto; text-align:center;
  position:relative; z-index:1;
}
[data-people-ring] .uwg .ciz{
  display:flex; gap:80rem; justify-content:center; margin-top:70rem;
}
[data-people-ring] .uwg .ciz .iek{
  opacity:.5; text-align:center; width:356rem;
}

/* ---- .ima 数字条目 ---- */
/* .ima/.ppi/.ohb/.ouc 的样式本站 CSS 已经有了(与参考站逐字一致),这里只补 .ouc 的驱动缺口所需的兜底 */
[data-people-ring] .ima{ position:relative; z-index:1 }

/* ---- 窄屏: 参考站在 <=767.98px 把 JS 关掉,.pvj 退化成一圈纯 CSS 静态环 ---- */
@media (max-width:767.98px){
  [data-people-ring] .pvj{
    position:absolute; inset:0; width:100%; height:100%;
    visibility:visible;
  }
  [data-people-ring] .pvj .elr{
    width:var(--ring-size); height:var(--ring-size);
    left:50%; top:50%; margin:0; will-change:auto;
    transform:translate(-50%,-50%) rotate(var(--angle)) translateY(calc(var(--ring-radius) * -1)) rotate(calc(var(--angle) * -1));
  }
  [data-people-ring] .pvj .elr:nth-child(2n){ display:none }
  [data-people-ring] .uwg{ margin-top:80rem; margin-bottom:80rem }
  [data-people-ring] .uwg .vrc{
    display:flex; align-items:center; justify-content:center;
    width:345rem; height:345rem; margin-left:auto; margin-right:auto; position:relative;
  }
  [data-people-ring] .uwg .ciz{ flex-direction:column; gap:24rem; margin-top:40rem }
  [data-people-ring] .uwg .ciz .iek{ width:100% }
}

/* ---- 减少动态 / 关闭运动: 停在静态环上, 不起 ticker ---- */
@media (prefers-reduced-motion: reduce){
  [data-people-ring] .pvj{ position:absolute; inset:0; width:100%; height:100%; visibility:visible }
  [data-people-ring] .pvj .elr{
    width:var(--ring-size); height:var(--ring-size);
    left:50%; top:50%; margin:0; will-change:auto;
    transform:translate(-50%,-50%) rotate(var(--angle)) translateY(calc(var(--ring-radius) * -1)) rotate(calc(var(--angle) * -1));
  }
  [data-people-ring] .pvj .elr:nth-child(2n){ display:none }
  [data-people-ring] .uwg .vrc{
    display:flex; align-items:center; justify-content:center;
    width:345rem; height:345rem; margin-left:auto; margin-right:auto;
  }
}
.scroll-motion-off [data-people-ring] .pvj{ position:absolute; inset:0; width:100%; height:100%; visibility:visible }
.scroll-motion-off [data-people-ring] .pvj .elr{
  width:var(--ring-size); height:var(--ring-size); left:50%; top:50%; margin:0; will-change:auto;
  transform:translate(-50%,-50%) rotate(var(--angle)) translateY(calc(var(--ring-radius) * -1)) rotate(calc(var(--angle) * -1));
}
.scroll-motion-off [data-people-ring] .pvj .elr:nth-child(2n){ display:none }
.scroll-motion-off [data-people-ring] .uwg .vrc{
  display:flex; align-items:center; justify-content:center;
  width:345rem; height:345rem; margin-left:auto; margin-right:auto;
}

/* ---- 中文排版修正 ----
 * 参考站这一节是拉丁文,用了 line-height:.85 / text-indent:125rem 这类紧排。
 * 中文字面高,照搬会串行,这里按本站既有的 CJK 约定(.arch-page .*.cjk{line-height:1.02~1.08})放宽。
 * 只改行高与标签宽度,不动任何运动参数。 */
[data-people-ring] .uwg .kca.cjk{ line-height:1.06; max-width:1240rem }
[data-people-ring] .ima .ppi .ohb .kca.cjk{ line-height:1.08 }
[data-people-ring] .enr .kca.cjk{ line-height:1.08 }
[data-people-ring] .enr .amv{ max-width:180rem }
@media (max-width:767.98px){
  [data-people-ring] .enr .amv{ max-width:none }
}

/* 窄屏:参考站 .ima .ppi .ohb 在 <=767.98px 是 opacity:1(不做逐条点亮)。
 * 本站压缩 CSS 里这条被后面的 opacity:.2 覆盖了,这里补回来,只作用于本节。 */
@media (max-width:767.98px){
  [data-people-ring] .ima .ppi .ohb{ opacity:1 }
}

/* ---- WebGL 渲染器 ---- */
/* GL 打开时,17 个 .elr 只当尺寸量具用(要保留布局才能读 offsetWidth),画面由 canvas 出 */
[data-people-ring].ring-gl .pvj .elr{ opacity:0; pointer-events:none }
[data-people-ring] .pvj canvas.pvj-gl{
  position:fixed; left:0; top:0; width:100vw; height:100vh;
  display:block; pointer-events:none;
}
/* 窄屏不上 GL(参考站窄屏是 JS 全关 + 纯 CSS 静态环) */
@media (max-width:767.98px){
  [data-people-ring].ring-gl .pvj .elr{ opacity:1 }
  [data-people-ring] .pvj canvas.pvj-gl{ display:none }
}

/* The static layout also applies when motion is disabled at runtime. */
[data-people-ring].ring-static .pvj{position:absolute;inset:0;width:100%;height:100%;visibility:visible}
[data-people-ring].ring-static .pvj .elr{width:var(--ring-size);height:var(--ring-size);left:50%;top:50%;will-change:auto;transform:translate(-50%,-50%) rotate(var(--angle)) translateY(calc(var(--ring-radius) * -1)) rotate(calc(var(--angle) * -1))}
[data-people-ring].ring-static .pvj .elr:nth-child(2n){display:none}
[data-people-ring].ring-static .uwg{margin:100rem auto}
[data-people-ring].ring-static .uwg .vrc{width:min(90vw,540px);height:min(90vw,540px);display:flex;align-items:center;justify-content:center;position:relative;--ring-size:70px;--ring-radius:220px}
[data-people-ring].ring-static .uwg .kca{font-size:clamp(28px,4vw,58px);max-width:65%}
[data-people-ring].ring-static .ima .ohb{opacity:1}
@media(max-width:767.98px){[data-people-ring].ring-static .uwg .vrc{--ring-size:50px;--ring-radius:142px}}

@media(min-width:768px){[data-people-ring]:not(.ring-static) .uwg .kca{font-size:clamp(42px,6vw,96px);max-width:65vw;line-height:1.15}}