/* 合作案例：运动员页与俱乐部页共用。

   ── 这一页为什么几乎没有描边 ──
   早先每一块内容都套一张描边卡片、正文压到 12–13px 的灰字，读起来像一份技术
   报告：信息都在，但没有主次也没有呼吸。苹果产品页与 Notion 客户故事的共同做法
   是反过来的——分层靠留白与字号，不靠框：一屏只讲一件事，标题大到能当锚点，
   数字比标签重一档，发丝线只在两块内容真的需要断开时才出现。

   这里照那一套重来：
   · 描边与底衬只留给「必须被读成一个物件」的少数几处（左栏事实卡不是物件，
     所以它现在只是一列字）。
   · 正文回到 16px / 1.8，颜色从 .5 提到 .66——深色底上过淡的小字是最费眼的组合。
   · 每一步的产出提成一行大字，而不是角落里一枚小药丸。
   · 节与节之间的留白拉到十几个视口百分点，滚动时一次只落一件事。 */

:root {
  /* 全站只保留这两档分隔：发丝线与再淡一档的辅助线 */
  --case-line: rgba(241, 248, 250, .1);
  --case-line-soft: rgba(241, 248, 250, .06);
  --case-text: rgba(241, 248, 250, .66);
  --case-dim: rgba(241, 248, 250, .42);
  --case-faint: rgba(241, 248, 250, .3);
}

.cases-page { position: relative; padding-bottom: 16vh; }

/* ── 首屏 ───────────────────────────────────────────── */

.cases-backdrop {
  overflow: hidden; position: absolute; inset: 0 0 auto; height: 760px;
  max-width: none; pointer-events: none;
  -webkit-mask-image: var(--cases-court-mask);
  mask-image: var(--cases-court-mask);
}
.cases-backdrop-athlete {
  --cases-court-image: url("/illustrations/cases-athletes-court.webp");
  --cases-court-position: right 42%;
  --cases-court-mask: radial-gradient(76% 74% at 78% 10%, #000 10%, rgba(0, 0, 0, .9) 42%, transparent 78%);
}
.cases-backdrop-club {
  --cases-court-image: url("/illustrations/cases-clubs-court.webp");
  --cases-court-position: 72% center;
  --cases-court-mask: radial-gradient(84% 76% at 72% 8%, #000 8%, rgba(0, 0, 0, .88) 44%, transparent 82%);
}
.cases-backdrop i, .cases-backdrop b { position: absolute; inset: 0; }
.cases-backdrop i { animation: cases-court-drift 31s var(--ease-in-out) infinite alternate; }
.cases-backdrop b { animation: cases-court-rise 23s var(--ease-in-out) infinite alternate; }
.cases-backdrop b::before {
  content: ""; position: absolute; inset: 0;
  background: var(--cases-court-image) var(--cases-court-position) / cover no-repeat;
  animation: cases-court-swell 47s var(--ease-in-out) infinite alternate;
}
@keyframes cases-court-drift {
  from { transform: translate3d(3.5%, 0, 0) rotate(.55deg); }
  to { transform: translate3d(-3.5%, 0, 0) rotate(-.55deg); }
}
@keyframes cases-court-rise {
  from { transform: translate3d(0, 2.4%, 0); }
  to { transform: translate3d(0, -2.4%, 0); }
}
@keyframes cases-court-swell {
  from { transform: scale(1.12); }
  to { transform: scale(1.24); }
}

.cases-hero { position: relative; max-width: 1180px; }
.cases-lead { color: var(--case-text); }

/* 专项案例标签先交代数字的归属；四个数字是首屏的第二重音，不是脚注。
   竖分隔线去掉——四组之间的空档已经足够宽，再加线只是把它读成一张表。 */
.cases-example-label {
  margin-top: 54px; color: var(--cyan);
}
.cases-metrics {
  display: flex; flex-wrap: wrap; gap: 34px 72px;
  margin: 18px 0 0; padding: 0; list-style: none;
}
.cases-metrics li { display: grid; gap: 8px; }
.cases-metrics strong {
  color: var(--white);
}
.cases-metrics span { color: var(--case-dim); }

.cases-section-lead {
  max-width: 620px; color: var(--case-text);
}

/* ── 案例正文：左栏常驻，右栏叙事 ───────────────────── */

.case-study {
  display: grid; gap: 90px; grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  align-items: start; margin-top: 16vh; scroll-margin-top: 18vh;
}
.case-aside { position: sticky; top: 16vh; display: grid; gap: 40px; }
.case-aside, .case-facts, .case-flow { min-width: 0; }

/* 事实卡不再是一张卡：一张头像、一行名字，下面三行字，靠留白与一道发丝线分层 */
.case-facts-id { display: grid; gap: 14px; }
.case-facts-id img {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
}
.case-facts-id p { display: grid; gap: 5px; margin: 0; }
.case-facts-id strong { font-size: 17px; font-weight: 500; letter-spacing: -.015em; }
.case-facts-id span { color: var(--case-dim); font-size: 12.5px; letter-spacing: .04em; }

.case-facts dl { display: grid; gap: 18px; margin: 22px 0 0; padding-top: 22px; border-top: 1px solid var(--case-line-soft); }
.case-facts dl > div { display: grid; gap: 6px; }
.case-facts dt { color: var(--case-faint); font-size: 11px; letter-spacing: .12em; }
.case-facts dd { margin: 0; color: rgba(241, 248, 250, .82); font-size: 14px; line-height: 1.55; }

/* ── 流程轨（随滚动点亮） ───────────────────────────
   点亮与否写在 aria-current 上：样式钩子与无障碍语义共用一份状态。
   判定逻辑在 cases_flow.js。 */

.case-flow-title {
  margin: 0 0 18px; color: var(--case-faint); font-size: 10.5px; letter-spacing: .18em;
}
.case-flow ol {
  position: relative; display: grid; gap: 1px; max-width: 100%;
  margin: 0; padding: 0 0 0 22px; list-style: none;
}
.case-flow ol::before {
  content: ""; position: absolute; left: 2px; top: 13px; bottom: 13px; width: 1px;
  background: linear-gradient(180deg, rgba(115, 232, 255, .3), rgba(124, 166, 255, .05));
}
.case-flow a {
  position: relative; display: flex; align-items: baseline; gap: 9px;
  padding: 7px 0; text-decoration: none; color: var(--case-dim);
  transition: color 240ms var(--ease-out);
}
/* 节点收成一枚小点：轨是余光里的东西，不该有描边圆环那么重 */
.case-flow a::before {
  content: ""; position: absolute; left: -22px; top: 13px; width: 5px; height: 5px;
  border-radius: 50%; background: rgba(115, 232, 255, .28);
  transition: background 240ms var(--ease-out), box-shadow 240ms var(--ease-out);
}
.case-flow b {
  font-size: 10px; font-weight: 400; letter-spacing: .1em; opacity: .6;
  font-variant-numeric: tabular-nums;
}
.case-flow span { font-size: 13.5px; letter-spacing: .01em; }
.case-flow a[aria-current="step"] { color: var(--white); }
.case-flow a[aria-current="step"]::before {
  background: var(--cyan); box-shadow: 0 0 0 4px rgba(115, 232, 255, .12);
}
@media (hover: hover) and (pointer: fine) {
  .case-flow a:hover { color: rgba(241, 248, 250, .78); }
}

/* ── 线性图标 ───────────────────────────────────────
   一副画法，照 SF Symbols 与 Notion 那一路：20 × 20 的格子、线宽 1.5、圆角端点、
   每枚不超过三四条路径、几何贴 1px 网格、内部留白给足——16px 下也读得出，
   不靠碎笔画凑细节（早先那版的十字刻度、立方体内棱、日历上的对勾都是噪点）。

   ── 颜色是中性的，不是青色 ──
   青色在这个站里是「当前位置」的语义：导航的当前页、流程轨上点亮的那一步。
   图标不表示位置，它只是这一节的标志；跟着染成青色，页面上就有一堆同色的东西
   在争同一个注意力，青色也就不再指示任何事情。所以图标一律走中性的白，
   旁边那行字保留它自己的颜色（进攻端的青、弱点的琥珀），两者分工清楚。 */

.case-icon {
  flex: none; width: 20px; height: 20px;
  color: rgba(241, 248, 250, .72);
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
/* 小标签旁边那一枚跟着字号收一档，也再淡一档：它标注的是一行 11px 的小字 */
.taxonomy-side-name .case-icon,
.dossier-kind-tag .case-icon {
  width: 15px; height: 15px; color: rgba(241, 248, 250, .5); stroke-width: 1.6;
}

/* ── 六节正文 ───────────────────────────────────────── */

.case-body { display: grid; gap: clamp(90px, 13vh, 160px); min-width: 0; }
.case-study-lead {
  max-width: 640px; color: var(--case-text);
}

.case-step { display: grid; gap: 30px; scroll-margin-top: 16vh; }
/* 小节头不画框也不压线：序号一行、标题一行、产出一行，三行本身就是层级 */
.case-step-head { display: grid; gap: 12px; }
/* 图标与序号同一行，这一行就是小节的门牌。两者都走中性：青色在这个站里指示
   「当前位置」（导航的当前页、流程轨上点亮的那一步），门牌不表示位置，
   跟着染青只会把这层意思稀释掉。层级改由明度给——图标 .72、序号 .45。 */
.case-step-index {
  display: flex; align-items: center; gap: 11px;
  color: rgba(241, 248, 250, .45);
}
/* 产出提成一行大字：它是这一步的结果，早先那枚角落里的小药丸读不出这层意思 */
.case-step-out {
  margin-top: 2px; color: rgba(241, 248, 250, .86);
  font-variant-numeric: tabular-nums;
}
.case-block-lead {
  max-width: 660px; color: var(--case-text);
}

/* ── 01 目标对手 ────────────────────────────────────── */

.rival-chips { display: flex; flex-wrap: wrap; gap: 44px; margin: 6px 0 0; padding: 0; list-style: none; }
.rival-chips li { display: grid; gap: 14px; justify-items: start; }
.rival-chips img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; }
.rival-chips span { font-size: 15px; letter-spacing: .01em; color: rgba(241, 248, 250, .9); }

/* ── 02 三场比赛 ────────────────────────────────────── */

/* 三场排成三行而不是三张卡：一行就是一场，两张脸夹着比分，右端是这一场的规模。
   卡片描边在这里只会把同一件事切成三个方块。 */
.match-cards { display: grid; margin: 6px 0 0; padding: 0; list-style: none; }
.match-card {
  display: grid; gap: 18px 32px; align-items: center; padding: 26px 0;
  grid-template-columns: minmax(0, 1fr) auto; border-top: 1px solid var(--case-line-soft);
}
.match-card:last-child { border-bottom: 1px solid var(--case-line-soft); }
.match-card-head {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; margin: 0;
}
.match-event { color: var(--case-dim); font-size: 12.5px; letter-spacing: .04em; }
/* 用途不是徽章，是一句注脚：去掉底衬，只留一个色 */
.case-use { color: var(--teal); font-size: 12px; letter-spacing: .06em; }
.case-use::before { content: "· "; color: var(--case-faint); }
.case-use-scout { color: var(--amber); }

.match-versus { display: flex; align-items: center; gap: 18px; min-width: 0; }
.match-versus figure { display: flex; align-items: center; gap: 12px; margin: 0; min-width: 0; }
.match-versus figure:last-of-type { flex-direction: row-reverse; }
.match-versus img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.match-versus figcaption {
  color: rgba(241, 248, 250, .88); font-size: 15px; letter-spacing: .01em; white-space: nowrap;
}
.match-score {
  margin: 0; color: var(--white); font-size: clamp(22px, 2vw, 28px); font-weight: 400;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.match-score i { margin: 0 5px; color: var(--case-faint); font-style: normal; }

.match-stats { display: flex; gap: 26px; margin: 0; padding: 0; list-style: none; }
.match-stats li { display: grid; gap: 4px; justify-items: end; }
.match-stats b {
  color: rgba(241, 248, 250, .88); font-size: 19px; font-weight: 400;
  letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.match-stats span { color: var(--case-faint); font-size: 11px; letter-spacing: .06em; }

/* ── 03 流水线 ──────────────────────────────────────── */

/* 三步就是三个词，用一枚折角连起来读成顺序；加了底衬就成了三个按钮 */
.pipeline-chips {
  display: flex; flex-wrap: wrap; align-items: center; gap: 22px;
  margin: 6px 0 0; padding: 0; list-style: none;
}
.pipeline-chips li {
  display: flex; align-items: center; gap: 12px;
  color: rgba(241, 248, 250, .88);
}
/* 流水线那三枚跟着这一行的字号走一档 */
.pipeline-chips .case-icon { width: 22px; height: 22px; }
.pipeline-chips li + li::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 22px;
  border-top: 1px solid rgba(115, 232, 255, .55);
  border-right: 1px solid rgba(115, 232, 255, .55);
  transform: translateY(-2px) rotate(45deg);
}

/* ── 04 七个类目 ────────────────────────────────────── */

.case-taxonomy { display: grid; gap: 54px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 6px; }
.taxonomy-side-name {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 6px; color: var(--cyan);
}
.taxonomy-side-defense .taxonomy-side-name { color: var(--amber); }
.taxonomy-side ul { display: grid; margin: 0; padding: 0; list-style: none; }
/* 类目是一份清单，不是七枚按钮：字母退到最轻，名称回到正文字号，行与行之间发丝线 */
.taxonomy-side li {
  display: flex; align-items: baseline; gap: 14px; padding: 15px 0;
  border-bottom: 1px solid var(--case-line-soft);
  color: rgba(241, 248, 250, .88);
}
.taxonomy-side li b {
  flex: none; width: 14px; color: var(--case-faint);
  font-size: 11px; font-weight: 400; letter-spacing: .1em;
}
.taxonomy-side-defense li b { color: rgba(255, 188, 82, .5); }

/* ── 05 战术档案 ────────────────────────────────────── */

.dossier-kinds { display: grid; gap: 44px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 6px; }
.dossier-kind { display: grid; gap: 12px; align-content: start; }
.dossier-kind-tag {
  display: flex; align-items: center; gap: 9px;
}
.dossier-kind-threat .dossier-kind-tag { color: var(--cyan); }
.dossier-kind-weak .dossier-kind-tag { color: var(--amber); }
.dossier-kind p:not(.dossier-kind-tag) {
  color: var(--case-text);
}

.dossier-parts { margin-top: 12px; padding-top: 34px; border-top: 1px solid var(--case-line-soft); }
.dossier-parts-title { margin-bottom: 20px; color: var(--case-faint); }
.dossier-parts ol,
.training-column ol {
  counter-reset: item; display: grid; gap: 16px; margin: 0; padding: 0; list-style: none;
}
.dossier-parts li,
.training-column ol li {
  counter-increment: item; position: relative; padding-left: 34px;
  color: rgba(241, 248, 250, .78);
}
.dossier-parts li::before,
.training-column ol li::before {
  content: counter(item, decimal-leading-zero);
  position: absolute; left: 0; top: 4px; color: var(--case-faint);
  font-size: 11px; letter-spacing: .06em; font-variant-numeric: tabular-nums;
}

/* ── 06 训练重点 ────────────────────────────────────── */

.case-training { display: grid; gap: 54px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 6px; }
.training-column { display: grid; gap: 20px; align-content: start; }
.training-column-name { color: var(--case-faint); }

.rival-list { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
.rival-list li { display: flex; align-items: flex-start; gap: 16px; }
.rival-list img { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.rival-list p { display: grid; gap: 6px; margin: 0; min-width: 0; }
.rival-list b { font-weight: 450; color: rgba(241, 248, 250, .92); }
.rival-list span { color: var(--case-text); }

/* 收束的一句话给足分量：它是整篇的落点，不该和正文一个字号 */
.case-outcome {
  max-width: 720px; margin: 12px 0 0; padding-top: 40px;
  border-top: 1px solid var(--case-line-soft);
  color: rgba(241, 248, 250, .88);
}

/* ── 俱乐部页 ───────────────────────────────────────── */

.club-shapes {
  display: grid; gap: 54px 44px; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0; padding: 0; list-style: none;
}
.club-shapes li { display: grid; gap: 14px; align-content: start; }
.club-shapes .case-icon { width: 24px; height: 24px; }
.club-shapes h3 { margin-top: 4px; }
.club-shapes p { color: var(--case-text); }

.club-status {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 36px; margin-top: 4vh; padding-top: 44px; border-top: 1px solid var(--case-line-soft);
}
.club-status-body { display: grid; gap: 16px; max-width: 620px; }
.club-status-tag { color: var(--amber); }
.club-status-body p { color: var(--case-text); }
.club-status-links { display: flex; flex-wrap: wrap; gap: 14px; }
/* 主按钮是这一页唯一的实色块——整页别处都没有底衬，它因此不必再加重 */
.club-link {
  padding: 12px 22px; border-radius: 999px; white-space: nowrap;
  background: var(--white); color: var(--ink); text-decoration: none;
  font-size: 14px; letter-spacing: .01em;
  transition: opacity 200ms var(--ease-out);
}
.club-link-quiet {
  background: none; border: 1px solid var(--case-line); color: rgba(241, 248, 250, .78);
  transition: border-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .club-link:hover { opacity: .85; }
  .club-link-quiet:hover { border-color: rgba(241, 248, 250, .3); color: var(--white); opacity: 1; }
}

@media (max-width: 1080px) {
  .case-study { grid-template-columns: minmax(0, 1fr); gap: 56px; margin-top: 12vh; }
  /* 单栏之后左栏不再吸顶：它会一路跟着正文走，反而挡住阅读 */
  .case-aside { position: static; grid-auto-flow: row; gap: 32px; }
  .case-facts { display: grid; gap: 24px; grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .case-facts dl {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0; padding: 0; border-top: 0;
  }
  /* 轨改成横向一条：竖着排六步在单栏里要占掉半屏，而它此时已经跟不动了 */
  .case-flow ol {
    grid-auto-flow: column; grid-auto-columns: max-content; gap: 0 26px;
    padding: 0; overflow-x: auto;
  }
  .case-flow ol::before {
    top: 2px; bottom: auto; left: 2px; right: 2px; width: auto; height: 1px;
    background: linear-gradient(90deg, rgba(115, 232, 255, .3), rgba(124, 166, 255, .05));
  }
  .case-flow a { flex-direction: column; align-items: flex-start; gap: 5px; padding: 16px 0 0; }
  .case-flow a::before { left: 0; top: 0; }
  .case-flow span { white-space: nowrap; }
}

@media (max-width: 760px) {
  .cases-backdrop {
    height: 650px;
    -webkit-mask-image: radial-gradient(112% 48% at 70% 2%, #000 0%, rgba(0, 0, 0, .82) 48%, transparent 82%);
    mask-image: radial-gradient(112% 48% at 70% 2%, #000 0%, rgba(0, 0, 0, .82) 48%, transparent 82%);
  }
  .cases-backdrop-athlete { --cases-court-position: 78% center; }
  .cases-backdrop-club { --cases-court-position: 54% center; }
  .club-shapes, .case-taxonomy, .case-training, .dossier-kinds,
  .case-facts, .case-facts dl {
    grid-template-columns: minmax(0, 1fr);
  }
  .case-facts { gap: 22px; }
  .cases-metrics { gap: 26px 44px; }
  .case-body { gap: 72px; }
  /* 一行放不下「两张脸 + 比分 + 三组数字」，规模那一组落到下一行左对齐 */
  .match-card { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .match-stats { gap: 22px; }
  .match-stats li { justify-items: start; }
  .match-versus { flex-wrap: wrap; gap: 12px 16px; }
  .rival-chips { gap: 26px; }
  .rival-chips img { width: 60px; height: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  .cases-backdrop i, .cases-backdrop b, .cases-backdrop b::before { animation: none; }
}