/*
 * 关于页「能力范围 / AI 交互能力」卡组。
 *
 * 原状：卡片做成一副牌的形态，卡背是一张装饰插画
 * （assets/images/cards/back.png），卡面右上是英文首字母 s / c / t / P，
 * 副标题下四个徽标是 s / d / t / 3，卡背 DOM 里是空的。
 *
 * ── 设计依据（先看这个站点自己的规则，再动手）──
 *
 * 卡面材质是：纯白、0.8em 圆角、无阴影、无渐变、黑字。
 * 关于页整体是黑底白字的高对比编辑式系统，已有三样视觉词汇：
 *   1. 超大字号当图形用（能力范围标题 173px、团队简介 108px）；
 *   2. 描边字——#about-who-team-title 的 TEAM 是 fill:transparent +
 *      stroke:rgba(255,255,255,.105)；
 *   3. 细线做结构分隔（团队简介左侧竖导轨、CTA 下方横线）。
 *
 * 所以卡背应当是单色、字体主导，并引用上面这些词汇，
 * 而不是引入渐变、彩色或声纹插画这类系统里不存在的材质。
 * 第一版做成蓝紫渐变 + 声纹柱是错的：白卡面翻到饱和渐变背是割裂的，
 * 「语音=波形」也是最直白的联想，不是这个站点的调性。
 *
 * ── 实现约束 ──
 *
 * 只改两个卡面内部，不碰卡片本身：AboutCapabilitySection.update 每帧都在写
 * .about-capability-card 的 transform（扇形展开 + 持续浮动 + 逐张错峰翻面），
 * 在卡片上加任何 CSS transform 都会被下一帧覆盖，和 GoalWhiteTunnelStickers
 * 是同一个坑。错峰与浮动本来就有，不需要也不应该再加。
 *
 * 卡组扇形展开时，前三张各被后一张压掉右侧一大半，稳定暴露区只有左上角。
 * 需要被读到的信息必须落在那里；描边编号是图形，允许被压住一部分。
 */

#about-capability {
  /*
   * 深藏青而不是纯黑。卡背原本是 #0a0b12，四张并排落在 #1a2ffb 的蓝场上，
   * 读起来是四个等大的「洞」——又重又雷同。改成同色系的深蓝：
   * 与蓝场是一个色族的明度台阶，而不是从场里挖掉四块。
   * 与蓝场对比 2.38:1（卡缘可辨即可，非文字）；白字压在它上面 17.6:1。
   */
  --cap-surface: #0c1140;
  --cap-hairline: rgba(255, 255, 255, 0.18);
}

/* ---------- 卡背 ---------- */

#about-capability .about-capability-card-back {
  background-color: var(--cap-surface) !important;
  background-image: none !important;
  overflow: hidden;
}

#about-capability .cap-back-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 1.25em 1.875em; /* 与卡面同一组内边距，翻转前后对齐 */
  color: #fff;
}

#about-capability .cap-back-top {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

/*
 * 编号退成小字标签，阶段名放大当图形用——引用本页既有词汇
 * （能力范围标题 173px、团队简介 108px：超大字号当图形）。
 * 一律锚在左上：卡组扇形展开时前三张各被后一张压掉右侧一大半，
 * 稳定暴露区只有左上角，这是上一轮试卡背导语时实测过的。
 */
#about-capability .cap-back-num {
  font-size: 0.95em;
  font-weight: 500;
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
  opacity: 0.5;
}

#about-capability .cap-back-name {
  font-size: 2.6em;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
}

#about-capability .cap-back-top::after {
  content: "";
  display: block;
  width: 2.4em;
  height: 1px;
  margin-top: 0.35em;
  background: var(--cap-hairline);
}

/*
 * 链条指示点：四个点标出本卡在「入口→模型→执行→运营」里的位置。
 * 这是四张卡背唯一互不相同的元素——原先四张除了名字和编号完全一样，
 * 「单调」有一半来自这里。同时它把「这是一条四步链」在卡背上就说清楚。
 */
#about-capability .cap-back-chain {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.6em;
}

#about-capability .cap-back-chain i {
  width: 0.4em;
  height: 0.4em;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
}

#about-capability .cap-back-chain i.on {
  width: 1.9em;
  border-radius: 999px;
  background: #fff;
}

/* ---------- 卡面：编号取代原来的英文首字母 ---------- */

#about-capability .about-capability-card-header-letter {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ---------- 副标题徽标：与卡片编号呼应 ---------- */

#about-capability .about-capability-subheader-card {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* ---------- 黑蓝交界：把硬边界化成过渡 ---------- */

/*
 * 这一节的蓝底是 WebGL 画的（AboutPage.update 里 bgColor 从黑 lerp 到 --color-blue #1a2ffb），
 * 但实测蓝不是「渐变上来」的，而是在本节顶边越过视口顶部时约 280px 内直接出现——
 * 上方那片黑另有来源（各区块 background-color 全是 rgba(0,0,0,0)，不是 DOM 底色），
 * 所以观感是黑底突然切成一大片蓝。
 *
 * 蓝本身不动：它是全站唯一强调色，结尾 CTA 与首页播放按钮同色，这段蓝是那个 CTA 的铺垫；
 * 白字压在 #1a2ffb 上是 7.39:1，过 AA 也过 AAA，不是对比度问题。要修的只是到达方式。
 *
 * 曾试过把运行时那条 lerp 的插值窗口拉宽，但 math.fit 走 cUnMix→clamp，
 * screenRatio 恒在 [-1,1]，窗口下界低于 -1 的部分不可达；改完实测行为也与推算对不上，
 * 说明画面另有一层覆盖。既然那条路径预测不了，就不在这份 1.2MB 的运行时里留这种补丁。
 *
 * 改走 DOM 层：本节 background-color 本来就是透明，这里只加 background-image，
 * 不碰 position、不新建层叠上下文，对布局和逐帧 transform 零影响。
 * 顺带让构图更有道理——标题留在黑场，蓝随卡片一起到场。
 */
@media (min-width: 813px) {
  #about-capability {
    background-image: linear-gradient(
      to bottom,
      #000 0,
      rgba(0, 0, 0, 0.94) 20vh,
      rgba(0, 0, 0, 0.6) 48vh,
      rgba(0, 0, 0, 0.22) 68vh,
      rgba(0, 0, 0, 0) 88vh
    );
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 88vh;
  }
}

/* ---------- 移动端 ---------- */

@media (max-width: 812px) {
  /*
   * 这一节背景是 3D 碎片粒子，小屏上会直接压在文字上。
   * 团队简介那节已经这样处理过，这里补上，保持一致。
   */
  #about-capability {
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.62) 8%,
      rgba(0, 0, 0, 0.8) 24%,
      rgba(0, 0, 0, 0.8) 88%,
      rgba(0, 0, 0, 0) 100%
    ) !important;
  }

  #about-capability .cap-back-inner {
    padding: 1.1em 1.35em;
  }

  /*
   * 这里原有一条 .cap-back-num{font-size:7.5em}，是上一版设计的遗物——
   * 那时编号是溢出卡片下缘的巨型描边字。改版后编号退成 0.95em 的小标签，
   * 这条覆盖没跟着删，手机上把它放大到 146px，占掉 342px 卡宽里的 289px。
   * 桌面端看不出来（媒体查询只在 ≤812px 生效），只有小屏会中招。
   */
}