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

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

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

.about-page { position: relative; }

.about-backdrop {
  /* 遮罩只裁绘制不裁布局：里层放大后会撑出横向滚动，必须显式裁掉 */
  overflow: hidden;
  position: absolute; inset: 0 0 auto; height: 720px;
  /* .page > * 的 1400 上限会把通栏底切出硬边；main.page 本身即通栏，不再加负外边距 */
  max-width: none;
  /* 遮罩留在外层：图在里面缓慢平移，这团光本身不跟着晃 */
  -webkit-mask-image: radial-gradient(74% 70% at 77% 10%, #000 14%, transparent 76%);
  mask-image: radial-gradient(74% 70% at 77% 10%, #000 14%, transparent 76%);
}
/* 三层各管一个自由度：横向与转动在 i、纵向在 b、缩放在 b::before。
   三个周期互质，任一时刻的相位组合都不同，合成轨迹是一条缓慢进动的曲线，
   不会退化成来回推拉的斜线。三层都只改 transform，由合成器执行，不触发重排重绘。 */
.about-backdrop i, .about-backdrop b { position: absolute; inset: 0; }
.about-backdrop i {
  animation: about-court-sweep 31s var(--ease-in-out) infinite alternate;
}
.about-backdrop b {
  animation: about-court-rise 19s var(--ease-in-out) infinite alternate;
}
.about-backdrop b::before {
  content: ""; position: absolute; inset: 0;
  /* 调色（去色 .72、压暗 .46、微提对比）已经烘焙进图片：这一层整屏且一直在动，
     用 CSS filter 就是每帧一次全屏滤镜通道，而这里背后还压着正文，不能与文字争。 */
  background: url("/illustrations/about-net-wide-graded.jpg") no-repeat;
  /* 纵向取 34% 而不是居中：居中会把停在网绳上的球顶出画面上沿 */
  background-position: right 34%; background-size: cover;
  animation: about-court-swell 43s var(--ease-in-out) infinite alternate;
}
/* 行程与方向都与邀请码页错开：两页取自同一张照片，只有底片的走位不同才不至于像同一段素材。
   缩放下限 1.2 给出每侧 10% 的余量，大于横向 4.5% + 转动约 0.8%、纵向 3% + 约 0.9%，
   三个相位任意组合下画面边缘都不会露出来 */
@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: auto 220%; background-position: 8% 86%; }
  .about-backdrop {
    height: 460px;
    -webkit-mask-image: radial-gradient(104% 42% at 68% 2%, #000 0%, transparent 76%);
    mask-image: radial-gradient(104% 42% at 68% 2%, #000 0%, transparent 76%);
  }
  .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; }
}