/* ============================================================
   能力总览 —— 双轨反向横移
   两行卡片极缓慢地朝相反方向流动，两端渐隐。
   指针进入即停，点击翻开。卡片始终正对、始终可读、始终点得中。
   基线 = 静态可读的卡片带；动效只有 JS 确认可用后才接管。
   ============================================================ */

.cap-field {
  --cardW: 172px;
  --cardH: 108px;
  --gap: 12px;
  margin-top: 0;   /* 上方留白交给 .cap-headline 的 margin，避免两处叠加 */
}

/* 满宽出血：轨道要贯穿整个视口，才有「从画面外流进来」的感觉 */
.cap-track {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  /* 两端渐隐 —— 这一层是整个效果成立的关键，
     没有它就是一条被硬切断的列表 */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
}
.cap-track + .cap-track { margin-top: var(--gap); }

.cap-run {
  display: flex;
  gap: var(--gap);
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cap-item { flex: none; }

.cap-card {
  display: block;
  width: var(--cardW);
  height: var(--cardH);
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  perspective: 800px;
}

.cap-inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.3, .8, .25, 1);
}

.cap-face {
  position: absolute;
  inset: 0;
  display: flex;
  border: 1px solid rgba(255, 255, 255, .085);
  border-radius: 13px;
  background: linear-gradient(158deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .016));
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  transition: border-color .28s var(--ease), background-color .28s var(--ease);
}

.cap-front {
  flex-direction: column;
  justify-content: space-between;
  padding: 15px 16px 14px;
  text-align: left;
}
.cap-icon { width: 26px; height: 26px; color: var(--azure, #78B5FF); flex: none; }
.cap-title {
  color: var(--text);
  font-size: 13px;
  font-weight: 550;
  line-height: 1.3;
  letter-spacing: -.005em;
}
html[lang="zh-Hans"] .cap-title { letter-spacing: .01em; font-size: 13.5px; }

/* 背面比正面大 —— 翻开时"张开"成一块读得下说明的面板。
   backface-visibility: hidden，没翻过来之前完全不可见，超出正面无妨。 */
.cap-back {
  inset: auto;
  left: 50%;
  top: 50%;
  width: 262px;
  height: 168px;
  margin: -84px 0 0 -131px;
  flex-direction: column;
  gap: 7px;
  padding: 16px 17px;
  text-align: left;
  transform: rotateY(180deg);
  background: linear-gradient(158deg, rgba(47, 118, 255, .17), rgba(47, 118, 255, .05));
  border-color: rgba(120, 181, 255, .28);
}
.cap-back-title { color: var(--text); font-size: 13px; font-weight: 600; }
.cap-text { color: var(--text-body); font-size: 12px; line-height: 1.55; }

.cap-meta {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: clamp(20px, 2.6vh, 30px) 0 0;
  color: var(--text-dim);
  font-size: 13px;
}
.cap-hint { opacity: .7; }

/* ---------- 交互 ---------- */

.js .cap-card:hover .cap-face,
.js .cap-card:focus-visible .cap-face {
  border-color: rgba(120, 181, 255, .34);
  background-color: rgba(120, 181, 255, .05);
}
.cap-card:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 4px; border-radius: 15px; }

.js .cap-item.is-open { z-index: 5; }
.js .cap-item.is-open .cap-inner { transform: rotateY(180deg); }
.js .cap-field.has-open .cap-item:not(.is-open) { opacity: .34; transition: opacity .35s var(--ease); }

/* 翻开时轨道要能露出比自身更高的背面 */
.js .cap-field.has-open .cap-track {
  overflow: visible;
  -webkit-mask-image: none;
  mask-image: none;
}

/* ---------- 极缓横移 ----------
   两条轨道方向相反。走到 -50% 正好是第二份副本的起点，接缝对上，无缝循环。
   指针进入或有卡翻开时暂停 —— 点击永远不是追移动目标。 */

@keyframes cap-run-left  { to   { transform: translateX(calc(-50% - var(--gap) / 2)); } }
@keyframes cap-run-right { from { transform: translateX(calc(-50% - var(--gap) / 2)); } }

.js .cap-track--left .cap-run  { animation: cap-run-left 92s linear infinite; }
.js .cap-track--right .cap-run { animation: cap-run-right 92s linear infinite; }

/* 不因悬停暂停 —— 92 秒一圈已经够慢，点得到；停下来反而破坏观感。
   只有翻开某张卡时才停，否则那张卡会带着背面飘出视野。 */
.js .cap-field.has-open .cap-run { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .js .cap-run { animation: none; }
  .cap-inner { transition: none; }
}

/* ---------- 响应式 ---------- */

@media (max-width: 700px) {
  .cap-field { --cardW: 148px; --cardH: 100px; --gap: 10px; }
  .cap-title { font-size: 12px; }
  .cap-back { width: 232px; margin-left: -116px; }
  .cap-meta { flex-direction: column; gap: 4px; }
}

/* ---------- 数字行 ---------- */

.cap-headline {
  margin: clamp(30px, 4vh, 46px) 0 clamp(24px, 3.2vh, 36px);
  text-align: center;
  color: var(--text);
  font-size: clamp(20px, 2.1vw, 27px);
  font-weight: 600;
  letter-spacing: -.018em;
}
html[lang="zh-Hans"] .cap-headline { font-size: clamp(19px, 1.9vw, 25px); letter-spacing: 0; }

.cap-num {
  color: var(--azure, #78B5FF);
  font-weight: 650;
  /* 等宽数字：每位宽度一致，滚筒不会左右晃 */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* 每位数字是一个独立的竖直滚筒：上面藏着一串数字，
   转到停下时目标数字正好落在窗口里 —— 像里程表。 */
.cap-digit {
  display: inline-block;
  overflow: hidden;
  height: 1.08em;
  line-height: 1.08em;
  vertical-align: baseline;
  /* overflow:hidden 的 inline-block，基线就是**盒子底边**，所以整个盒子会浮在
     文字基线之上；而格子里的字形又在 1.08em 行盒里居中，于是数字显得偏高。
     往下推半个行距把字形的基线压回到文字基线上。 */
  transform: translateY(.19em);
}
.cap-reel { display: block; }
.cap-reel > span { display: block; height: 1.08em; line-height: 1.08em; }

/* 起点是滚筒顶端，落点由 --steps 决定。
   缓动尾巴拉得长，让它「慢慢停稳」而不是急刹。 */
.is-rolling .cap-reel {
  transform: translateY(calc(var(--steps) * -1.08em));
  transition: transform 1.45s cubic-bezier(.13, .86, .21, 1);
}
.cap-sep { margin: 0 .55em; color: var(--text-dim); font-weight: 400; }