/* ================================================================
   TEAM — 核心团队页专属样式
     · 背景：与首页"关于至正新材料"一致的交互漂浮三角（.team__deco）
     · 通栏横向走马灯：中间人物放大 + 100% 不透明，其余 65%
     · 居中人物下方动态出现个人信息卡片
   依赖：tokens.css、base.css、hero-image.css、footer-cta.css
   交互逻辑见 js/pages/team.js
   ================================================================ */

.team {
  position: relative;
  z-index: 11;                 /* 不透明白底盖住下方 vision 抽屉（§7D） */
  background: #fff;
  overflow: hidden;            /* 三角不溢出 + 走马灯裁切 */
  padding: clamp(0px, 0vh, 120px) 0 clamp(0px, 0vh, 96px);
}

/* ── 交互漂浮三角背景（同首页 about 区） ─────────────────────────── */
.team__deco {
  position: absolute; inset: 0; pointer-events: none;
  z-index: 0;
  will-change: transform;
}
.team__deco i {
  position: absolute; display: block;
  opacity: 0;
  will-change: transform, opacity, filter;
}
.team__deco i::before {
  content: ""; display: block; width: 100%; height: 100%;
  background: var(--green);
}
.team__deco i.l1 { left: 71%; top: 10%; width: 280px; height: 130px; opacity: .16 !important; filter: blur(5px); }
.team__deco i.l1::before { clip-path: polygon(0 0, 100% 0, 0 100%); }
.team__deco i.l2 { left: 14%; top: 6%; width: 70px; height: 35px; opacity: .12 !important; filter: blur(3px); }
.team__deco i.l2::before { clip-path: polygon(0 0, 100% 0, 0 100%); }
.team__deco i.l3 { left: 30%; bottom: 16%; width: 110px; height: 65px; opacity: .14 !important; filter: blur(8px); }
.team__deco i.l3::before { clip-path: polygon(0 0, 100% 0, 0 100%); }
.team__deco i.r1 { left: -4%; top: 46%; width: 300px; height: 150px; opacity: .13 !important; filter: blur(10px); }
.team__deco i.r1::before { clip-path: polygon(0 100%, 100% 100%, 100% 0); }
.team__deco i.r2 { right: 14%; bottom: 8%; width: 460px; height: 200px; opacity: .10 !important; filter: blur(12px); }
.team__deco i.r2::before { clip-path: polygon(0 100%, 100% 100%, 100% 0); }

/* ── 章节标题：核心团队 / MANAGEMENT TEAM ─────────────────────── */
.team__head {
  position: relative; z-index: 2;
  max-width: 1280px;
  margin: 0 auto clamp(12px, 2vh, 28px);
  padding: 0 clamp(24px, 5vw, 60px);
}
.team__head .triangle {
  display: block;
  width: 42px; aspect-ratio: 54 / 33;
  background: url('../../../images/half-green-logo.svg') no-repeat center / contain;
  margin-bottom: 14px;
  margin-left: -40px;
}
.team__head .cn {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.4vw, 38px);
  color: var(--red);
  font-weight: 900;
  letter-spacing: .15em;
  line-height: 1;
}
.team__head .en {
  margin-top: 10px;
  font-family: var(--font-en);
  font-size: clamp(12px, 1vw, 15px);
  letter-spacing: .25em;
  color: var(--green);
  font-weight: 600;
}

/* ── 通栏走马灯舞台 ───────────────────────────────────────────── */
.team__stage {
  position: relative; z-index: 2;
  width: 100%;
  overflow: hidden;            /* 裁横向越界；overflow 裁到 padding box，
                                  顶部 padding 给放大后的头部留出空间（不被切） */
  padding: clamp(56px, 9vh, 110px) 0 0;
  cursor: grab;                /* 可拖动滚动 */
  touch-action: pan-y;         /* 触屏：纵向留给页面滚动，横向给走马灯拖动 */
}
.team__stage.is-dragging,
.team__stage.is-dragging .team__member { cursor: grabbing; }
.team__track {
  display: flex;
  align-items: flex-end;       /* 人像底部对齐站立 */
  width: max-content;
  will-change: transform;
  transition: transform .8s var(--ease-out);
}
/* 人像相互叠加：负 margin 让相邻人物身侧重叠；z-index 由 JS 按"离中心距离"
   设置（中间最高、向两侧递减），实现近中心者遮挡外侧者的群像效果。
   尺寸/间距使 7 人正好通栏铺满，中心±3 之外由 JS 隐藏 → 只显示 7 人。 */
.team__member {
  flex: 0 0 auto;
  width: clamp(300px, 28vw, 400px);   /* 放大到 400px 宽 */
  margin: 0 -95px;                    /* 负 margin → 紧密叠加（人像 700×700 含透明边距，
                                          需较大重叠量才能让人物轮廓真正叠在一起，参照方案图）。
                                          脸部在肩部之上，紧叠也不会互相遮挡。 */
  padding: 0;
  border: 0; background: none;
  cursor: grab;                /* 随舞台一起可拖动（点击仍可聚焦该成员） */
  /* 不用透明度（叠加会透出后面人物=叠影）；改用降低对比度 + 轻微提亮淡化，
     人像仍 100% 不透明，叠加处无透视/叠影。 */
  filter: contrast(.72) brightness(1.1) saturate(.9);
  transform: scale(.82);
  transform-origin: bottom center;
  transition: filter .6s var(--ease-out), transform .6s var(--ease-out);
}
.team__member img {
  width: 100%; height: auto; display: block;
  -webkit-user-drag: none; user-select: none;
}
/* 居中人物：放大 + 满对比度（z-index 由 JS 设为最高）。
   1.12 倍使中心边缘不致盖住相邻人物的脸。 */
.team__member.is-active {
  filter: none;
  transform: scale(1.12);
}
/* 中心 ±3 之外的人物隐藏 —— 横向最多只显示 7 人（无重复克隆露出） */
.team__member.is-hidden { visibility: hidden; }

/* 无缝循环瞬移时关闭一切过渡（轨道 + 人物缩放），避免缩放跳动 */
.team__stage.team--no-anim .team__track,
.team__stage.team--no-anim .team__member { transition: none !important; }

/* 左右箭头（桌面端）—— 复用首页最新发展 .news__nav 同款（left.svg / right.svg）。
   放在介绍文字（.team__info）两侧，垂直居中于信息区。 */
.team__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 22px; height: 84px;
  background: transparent; border: 0; padding: 0;
  cursor: pointer; z-index: 4;
  opacity: .85;
  transition: transform .3s var(--ease-out), opacity .3s;
}
.team__nav:hover { opacity: 1; transform: translateY(-50%) scale(1.08); }
.team__nav img { display: block; width: 100%; height: 100%; object-fit: contain; }
.team__nav--prev { left: 0; }       /* .team__info 左边缘（文字在其内边距内，箭头正好在文字左侧） */
.team__nav--next { right: 0; }      /* .team__info 右边缘 */

/* ── 居中人物的个人信息（动态出现） ──────────────────────────── */
.team__info {
  position: relative; z-index: 2;
  max-width: 1080px;
  margin: clamp(20px, 3vh, 44px) auto 0;
  padding: 0 clamp(24px, 5vw, 60px);
  min-height: 240px;           /* 容纳最高卡片，避免切换抖动 */
}
.team__card {
  padding: 15px 10%;
  position: absolute;
  left: clamp(24px, 5vw, 60px);
  right: clamp(24px, 5vw, 60px);
  top: 0;
  opacity: 0;
  transform: translateY(26px);
  pointer-events: none;
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.team__card.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* 卡片头：姓名（红，大）+ 职务 + 英文名 */
.team__card-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 2px solid rgba(47, 131, 78, 0.18);
}
.team__card-name {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 46px);
  color: var(--red);
  font-weight: 900;
  letter-spacing: .12em;
  line-height: 1;
}
.team__card-role {
  font-family: var(--font-cn);
  font-size: clamp(14px, 1.2vw, 18px);
  color: var(--green-deep);
  font-weight: 700;
  letter-spacing: .06em;
}
.team__card-en {
  margin-left: auto;
  font-family: var(--font-en);
  font-size: clamp(12px, 1vw, 15px);
  letter-spacing: .2em;
  color: var(--ink-soft);
  text-transform: uppercase;
}
/* 简历要点：多列自动排版 */
.team__card-bio {
  columns: 2;
  column-gap: clamp(28px, 4vw, 64px);
  list-style: none;
}
.team__card-bio li {
  break-inside: avoid;
  position: relative;
  padding-left: 18px;
  margin-bottom: 9px;
  font-family: var(--font-cn);
  font-size: clamp(12.5px, .95vw, 14.5px);
  line-height: 1.7;
  color: #5C6B62;
}
.team__card-bio li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
}

/* ── 页脚视频广告位 V mask：白色衔接（上方团队区是 #fff） ──────── */
section.vision::before {
  background: #fff;
}

/* ================================================================
   响应式
   ================================================================ */
@media (max-width: 980px) {
  .team__nav { display: none; }   /* 箭头仅桌面端；移动端用拖动 */
  /* 团队白底与上方 hero、下方页脚(vision)之间的发丝亚像素缝：用上下各 2px 白色投影盖住。
     team 的 z-index 高于 hero/vision，投影绘制在二者之上；与 hero 底 V、vision 顶 V 同为 #fff，不留痕。 */
  .team { box-shadow: 0 -2px 0 0 #fff, 0 2px 0 0 #fff; }
  /* 移动端：一屏 3 人（中心±1，见 team.js 的 half）。成员缩窄、重叠减小，使 3 人清晰可辨；
     可左右滑动切换。 */
  .team__member { width: 78vw; margin: 0 -74px; }
  .team__member.is-active { transform: scale(1.04); }
  /* 拖动时临时显示相邻被隐藏成员，使滑入的下一人在拖动过程中可见（松手 setActive 后复原为 3 人）。 */
  .team__stage.is-dragging .team__member { visibility: visible; }
  .team__card-bio { columns: 1; }
  .team__card-head { gap: 6px 12px; }
  .team__card-en { margin-left: 0; flex-basis: 100%; }
  .team__info { min-height: 320px; }
}

/* ── 走马灯「先 loading 再整体出现」——仅真前台(.zz-js)；构建器(无 .zz-js)默认可见可编辑 ────
   首屏即藏住走马灯内容（避免大图逐张闪出），并用【纯 CSS】遮罩显示加载指示。
   关键：加载指示不用 JS（team.js 与 GSAP/Lenis 同在页脚、加载较晚；缓存重访时图片已就绪，
   JS 注入的遮罩会"太晚 + 瞬间消失"→ 等待期一片空白）。改用 ::before/::after 纯 CSS，
   首屏第一帧就显示，与脚本加载时序无关。team.js 预加载完 → 加 .is-ready → 遮罩淡出整体揭示。 */
.zz-js .team__stage .team__track { visibility: hidden; }
.zz-js .team__stage.is-ready .team__track { visibility: visible; }

/* 白色铺底 + 百分比数字：::before 盖住走马灯并在中央显示 data-loadpct（team-loader.js 实时更新）。
   加载指示是纯 CSS 钩子（--teamload / data-loadpct），由【早脚本 team-loader.js】首屏驱动，
   不依赖 GSAP/common.js 时序 → % 能在图片下载过程中实时增长。 */
.zz-js .team__stage::before {
  content: attr(data-loadpct);
  position: absolute; inset: 0; z-index: 199;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-en); font-size: 14px; font-weight: 600;
  letter-spacing: .14em; color: var(--green);
  transition: opacity .55s var(--ease-out);
}
/* 确定型进度条：绿色填充宽度=--teamload，其余浅绿轨道；位于百分比数字上方约 20px。
   用 background-size（可过渡）而非渐变停止点 → 各步之间平滑增长，不生硬跳变。 */
.zz-js .team__stage::after {
  content: ""; position: absolute; z-index: 200;
  left: 50%; top: 50%; transform: translate(-50%, -20px);
  width: min(56%, 340px); height: 4px; border-radius: 999px;
  background-color: rgba(47, 131, 78, .14);                       /* 浅绿轨道 */
  background-image: linear-gradient(var(--green), var(--green));  /* 绿色填充 */
  background-repeat: no-repeat;
  background-size: var(--teamload, 0%) 100%;                      /* 填充宽度 = 百分比 */
  transition: background-size .35s var(--ease-out), opacity .55s var(--ease-out);
}
/* 加载完成：白底 + 进度条淡出，揭示已组装好的走马灯（整体一起出现） */
.zz-js .team__stage.is-ready::before,
.zz-js .team__stage.is-ready::after { opacity: 0; pointer-events: none; }

/* ================================================================
   凸显模式（spotlight）—— 后台「功能设置 ▸ 核心团队 ▸ 凸显模式」开启时
   body 加 .zz-team-spotlight（functions.php），走马灯保持不变，但：
     ① 下方信息卡只显示「姓名 + 职位」、居中；
     ② 点击任一人物 → 放大凸显：其余淡出，照片移至左侧 1/3，
        右侧 2/3 依次淡入 姓名 / 职位 / 英文名 / 履历 + 右上角 ✕。
   详情面板 .team__detail 由 team.js 注入 .team 内（绝对覆盖走马灯区）。
   交互逻辑见 js/pages/team.js（buildTeamSpotlight）。
   ================================================================ */

/* ① 默认态：信息卡只剩「姓名 + 职位」，居中 */
body.zz-team-spotlight .team__member { cursor: pointer; }
body.zz-team-spotlight .team__card { text-align: center; padding: 12px 6%; }
body.zz-team-spotlight .team__card-en,
body.zz-team-spotlight .team__card-bio { display: none; }
body.zz-team-spotlight .team__card-head {
  justify-content: center;
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
  gap: 4px 16px;
}
body.zz-team-spotlight .team__info { min-height: 90px; }

/* ② 详情面板（绝对覆盖走马灯 + 信息区；top 由 team.js 设为走马灯顶部 → 上方「核心团队」标题保持可见） */
.team__detail {
  position: absolute; left: 0; right: 0; bottom: 0; top: 0; z-index: 20;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(24px, 4vw, 64px);
  padding: clamp(24px, 4vh, 56px) clamp(24px, 6vw, 100px) clamp(72px, 10vh, 104px); /* 底部留白给居中的关闭按钮 */
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .5s var(--ease-out), visibility .5s var(--ease-out);
}
body.zz-team-spotlight.is-expanded .team__detail {
  opacity: 1; visibility: visible; pointer-events: auto;
}
/* 展开时走马灯 + 下方信息淡出 */
body.zz-team-spotlight.is-expanded .team__stage,
body.zz-team-spotlight.is-expanded .team__info {
  opacity: 0; pointer-events: none;
  transition: opacity .4s var(--ease-out);
}

/* 左 1/3：照片（从右滑入并淡入 → "照片左移"到位） */
.team__detail-photo {
  flex: 0 0 33.33%; max-width: 33.33%; align-self: stretch;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateX(60px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.team__detail-photo img {
  width: 100%; height: auto; max-height: 100%; object-fit: contain; display: block;
}
body.zz-team-spotlight.is-expanded .team__detail-photo {
  opacity: 1; transform: translateX(0); transition-delay: .05s;
}

/* 右 2/3：信息 */
.team__detail-info { flex: 1 1 0; min-width: 0; max-height: 100%; overflow-y: auto; }
.team__detail-head {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 18px;
  padding-bottom: 16px; margin-bottom: 18px;
  border-bottom: 2px solid rgba(47, 131, 78, 0.18);
}
.team__detail-name {
  font-family: var(--font-display); font-size: clamp(28px, 3vw, 46px);
  color: var(--red); font-weight: 900; letter-spacing: .12em; line-height: 1;
}
.team__detail-role {
  font-family: var(--font-cn); font-size: clamp(14px, 1.2vw, 18px);
  color: var(--green-deep); font-weight: 700; letter-spacing: .06em;
}
.team__detail-en {
  margin-left: auto; font-family: var(--font-en); font-size: clamp(12px, 1vw, 15px);
  letter-spacing: .2em; color: var(--ink-soft); text-transform: uppercase;
}
.team__detail-bio { columns: 1; list-style: none; margin: 0; padding: 0; }
.team__detail-bio li {
  break-inside: avoid; position: relative; padding-left: 18px; margin-bottom: 9px;
  font-family: var(--font-cn); font-size: clamp(12.5px, .95vw, 14.5px); line-height: 1.7; color: #5C6B62;
}
.team__detail-bio li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--green);
}

/* 右侧依次淡入：姓名 → 职位 → 英文名 → 履历 */
.team__detail-name, .team__detail-role, .team__detail-en, .team__detail-bio {
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
body.zz-team-spotlight.is-expanded .team__detail-name { opacity: 1; transform: none; transition-delay: .20s; }
body.zz-team-spotlight.is-expanded .team__detail-role { opacity: 1; transform: none; transition-delay: .32s; }
body.zz-team-spotlight.is-expanded .team__detail-en   { opacity: 1; transform: none; transition-delay: .44s; }
body.zz-team-spotlight.is-expanded .team__detail-bio  { opacity: 1; transform: none; transition-delay: .56s; }

/* 关闭按钮：移到详情面板下方居中 */
.team__detail-close {
  position: absolute; bottom: clamp(14px, 2.5vh, 32px); left: 50%; transform: translateX(-50%);
  width: 46px; height: 46px; padding: 0; cursor: pointer; z-index: 3;
  border: 1.5px solid rgba(47, 131, 78, .35); border-radius: 50%; background: #fff;
  font-size: 0; line-height: 1; color: var(--ink-soft);   /* 隐藏文字「×」字形（× 有光学偏移、不真正居中）→ 改用 ::before/::after 画 X */
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity .4s var(--ease-out) .3s, color .2s, border-color .2s, transform .25s var(--ease-out);
}
/* 绝对居中的 X：两条等长细杠在按钮几何正中心交叉（top/left:50% + translate(-50%,-50%)），不受字体字形偏移影响 */
.team__detail-close::before,
.team__detail-close::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 17px; height: 1.5px; background: currentColor; border-radius: 1px;
}
.team__detail-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.team__detail-close::after  { transform: translate(-50%, -50%) rotate(-45deg); }
body.zz-team-spotlight.is-expanded .team__detail-close { opacity: 1; }
.team__detail-close:hover { color: var(--red); border-color: var(--red); transform: translateX(-50%) rotate(90deg); }

/* 移动端：上下堆叠（照片在上、信息在下），整体可滚动 */
@media (max-width: 980px) {
  .team__detail {
    flex-direction: column; align-items: stretch; gap: 16px;
    padding: 30px 20px; overflow-y: auto; justify-content: flex-start;
  }
  .team__detail-photo {
    flex: 0 0 auto; max-width: 56%; margin: 0 auto; max-height: 36vh;
    transform: translateY(24px);
  }
  body.zz-team-spotlight.is-expanded .team__detail-photo { transform: translateY(0); }
  .team__detail-info { overflow: visible; max-height: none; }
  .team__detail-en { margin-left: 0; flex-basis: 100%; }
  .team__detail-head { gap: 6px 12px; }
  /* 移动端面板自身滚动 → 关闭按钮改为流式置于末尾居中（避免绝对定位随滚动错位） */
  .team__detail-close {
    position: relative; order: 99; transform: none; margin: 6px auto 2px; flex: 0 0 auto;   /* relative（非 static）→ ::before/::after 仍以按钮为定位基准、X 居中；流式位置不变 */
  }
  .team__detail-close:hover { transform: none; }
}