/* 关于我们页的团队版式：小幅纸面肖像 + 紧凑人物名录，只在本页加载 */

:root {
  /* 与团队肖像的纸面底色同值：图片未就绪时头像位不会先闪出黑洞 */
  --paper: #f4efe4;
}

/* ── 首屏底片：一层压到近乎墨色的球场，只在右上角浮出来 ── */

.about-page { position: relative; }

.about-backdrop {
  overflow: hidden; pointer-events: none;
  position: absolute; inset: 0 0 auto; height: 780px; max-width: none;
  -webkit-mask-image: linear-gradient(#000 40%, transparent 100%);
  mask-image: linear-gradient(#000 40%, transparent 100%);
}
/* 三层各管一个自由度：横向与转动在 i、纵向在 b、缩放在 b::before。
   三个周期互质，任一时刻的相位组合都不同，合成轨迹是一条缓慢进动的曲线，
   不会退化成来回推拉的斜线。三层都只改 transform，由合成器执行，不触发重排重绘。 */
.about-backdrop i, .about-backdrop b { position: absolute; inset: 0; }
.about-backdrop i, .about-backdrop b { animation: none; }
.about-backdrop b::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, #02070b 5%, rgba(2,7,11,.88) 36%, rgba(2,7,11,.3) 100%), url("/illustrations/about-scene.png") center / cover no-repeat;
}

@keyframes about-court-sweep {
  from { transform: translate3d(4.5%, 0, 0) rotate(.8deg); }
  to { transform: translate3d(-4.5%, 0, 0) rotate(-.8deg); }
}
@keyframes about-court-rise {
  from { transform: translate3d(0, 3%, 0); }
  to { transform: translate3d(0, -3%, 0); }
}
@keyframes about-court-swell {
  from { transform: scale(1.2); }
  to { transform: scale(1.38); }
}

/* body 自带墨色底会盖住负 z-index 图层，底片靠 DOM 顺序绘制，正文压在它之上 */
.team-head, .team { position: relative; }

.team-head { max-width: 900px; }
.team { max-width: 1040px; }
html[lang="en"] .team-mission-title [data-semantic-title-part] { white-space: normal; }
.team-lead { color: var(--muted); }

.team-grid {
  display: grid; gap: 44px 72px; margin: 0; padding: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none;
}
.team-member {
  display: grid; align-content: start; column-gap: 16px;
  grid-template-columns: 52px minmax(0, 1fr);
}
.team-member-copy { min-width: 0; }

.team-face {
  display: block; width: 52px; height: 52px; border-radius: 50%; background: var(--paper);
}
.team-face-lg { width: 48px; height: 48px; flex: none; }

.team-role { color: var(--cyan); }
.team-member .team-role { margin: 1px 0 0; }
.team-name { margin-top: 5px; }
.team-bio {
  max-width: 34em; margin-top: 8px; color: var(--muted);
}
.team-bio-line { display: block; }
.team-bio-line + .team-bio-line { margin-top: 1px; }

.team-panels {
  display: grid; gap: 40px; margin-top: 64px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.team-panel {
  display: grid; align-items: start; gap: 16px; padding: 24px 0 0;
  grid-template-columns: 48px minmax(0, 1fr);
  border-top: 1px solid rgba(124, 166, 255, .18);
}
.team-panel-open { border-top-color: rgba(255, 183, 77, .22); }
.team-panel-body { min-width: 0; }
.team-panel .team-role { margin: 0; }
.team-panel .team-bio { max-width: 34em; }

.team-summary { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; }
.team-summary strong { color: var(--text); font-weight: 600; }
.team-panel-open .team-summary strong { color: var(--text); }

/* 在招岗位逐条列出：岗位在前、编制数紧跟其后，读起来是一张招聘清单而不是表格 */
.team-openings { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.team-openings li {
  display: flex; align-items: baseline; gap: 9px; color: var(--muted);
}
.team-openings em { color: var(--amber); font-style: normal; }

@media (hover: hover) and (pointer: fine) {
  .team-face { transition: transform 320ms var(--ease-out); }
  .team-member:hover .team-face { transform: translateY(-3px) rotate(-2deg); }
}

@media (max-width: 720px) {
  /* 单栏时正文占满整幅，底片退成首屏上方的一条天光 */

  .about-backdrop b::before { background-size: cover; background-position: 65% center; opacity: .55; }
  .about-backdrop {
    height: 460px;
    -webkit-mask-image: linear-gradient(#000 20%, transparent 100%);
    mask-image: linear-gradient(#000 20%, transparent 100%);
  }
  .team-grid { gap: 34px; grid-template-columns: minmax(0, 1fr); margin-top: 52px; }
  .team-member { column-gap: 14px; grid-template-columns: 48px minmax(0, 1fr); }
  .team-member .team-face { width: 48px; height: 48px; }
  .team-panels { grid-template-columns: minmax(0, 1fr); margin-top: 52px; }
  .team-panel { gap: 14px; padding-top: 20px; grid-template-columns: 48px minmax(0, 1fr); }
  .team-face-lg { width: 48px; height: 48px; }
  .team-bio, .team-panel .team-bio { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .about-backdrop i, .about-backdrop b, .about-backdrop b::before { animation: none; }
  .team-face { transition: none; }
  .team-member:hover .team-face { transform: none; }
}