/* 智慧医疗子页面 · 纵向滚动叙事
   复用 site.css 的 nav / reveal / 配色变量；本文件负责 hero、章节画幅与图谱交互。 */

:root {
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* ── 字号规范：3 级层级，clamp 自适配移动端 → 桌面 ── */
  --fs-hero:  clamp(28px, 3.0vw, 44px);   /* H1 页面主标题（仅 Hero） */
  --fs-title: clamp(23px, 2.2vw, 33px);   /* H2 区块 / 卡片标题（统一） */
  --fs-body:  clamp(14px, 1.05vw, 16px);  /* 正文 / 描述文字（统一） */
  --lh-title: 1.25;   /* 标题行高 */
  --lh-body:  1.85;   /* 正文行高 */
}

/* ── 页面基底 ── */
body { background: var(--void); }
.sh-shell { position: relative; z-index: 1; }

/* ═══════ Hero 页头 ═══════ */
.sh-hero {
  min-height: clamp(620px, 55.81vw, 900px); display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  padding: clamp(88px, 6vw, 112px) 0;
  background: #000000;
}
.sh-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: url("assets/medical-ontology-hero-2560.webp") center top / 100% auto no-repeat;
  opacity: 0.92;
}
.sh-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 58% 30% at 50% 48%, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.60) 44%, rgba(0,0,0,0.14) 82%, rgba(0,0,0,0) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.18) 48%, rgba(0,0,0,0.72) 100%),
    linear-gradient(90deg, rgba(0,0,0,0.56) 0%, rgba(0,0,0,0.10) 42%, rgba(0,0,0,0.10) 70%, rgba(0,0,0,0.22) 100%);
}
.sh-hero-inner {
  position: relative; z-index: 2;
  width: 100%; max-width: min(1160px, 100vw);
  margin: 0 auto; padding: 0 clamp(22px, 4vw, 56px);
  text-align: center;
  transform: none;
}
.sh-hero-title {
  max-width: none;
  font-size: var(--fs-hero); font-weight: 600; line-height: var(--lh-title);
  letter-spacing: 0; margin: 0 auto 18px;
  color: #ffffff; text-wrap: balance;
  text-shadow: 0 10px 42px rgba(0,0,0,0.88), 0 0 22px rgba(0,0,0,0.82);
}
.sh-title-break { white-space: normal; }
.sh-hero-sub {
  font-size: var(--fs-body); line-height: var(--lh-body); color: rgba(255,255,255,0.84);
  max-width: 920px; margin: 0 auto; opacity: 0.94;
  letter-spacing: 0.02em;
  text-shadow: 0 8px 34px rgba(0,0,0,0.9), 0 0 16px rgba(0,0,0,0.72);
}

/* ═══════ 章节 section ═══════ */
.sh-chapter {
  padding: clamp(52px, 7.4vh, 96px) 0 clamp(60px, 8.8vh, 112px);
  position: relative;
  scroll-margin-top: 88px;
}
body > footer { border-top: 0; }

/* 图谱画幅：尽量大以保证 SVG 内文字可读 */
.sh-figure { max-width: 1520px; margin: 0 auto; padding: 0 clamp(18px, 2.4vw, 34px); }
.sh-figure svg {
  width: 100%; height: auto; aspect-ratio: 1920 / 1080; display: block; overflow: visible;
  transform: translateZ(0);
}
/* 院内星图节点多、最密，给更大画幅 */
#ch-ontology .sh-figure { max-width: 1680px; }

/* ═══════ 应用场景：模块总标题 ═══════ */
.sh-cases-head { padding: clamp(46px, 7vh, 92px) 0 clamp(4px, 1.2vh, 14px); text-align: center; }
.sh-cases-head-inner { max-width: 760px; margin: 0 auto; padding: 0 clamp(22px, 4vw, 56px); }
.sh-cases-title { font-size: var(--fs-title); font-weight: 600; line-height: var(--lh-title); letter-spacing: 0.01em; color: var(--bone); margin: 0 0 14px; }
.sh-cases-sub { font-size: var(--fs-body); line-height: var(--lh-body); color: rgba(255, 255, 255, 0.7); margin: 0; }
/* 标题与首张卡贴近：压缩第一张卡的上间距 */
.sh-cases-head + .sh-case { padding-top: clamp(20px, 3vh, 40px); }

/* ═══════ 应用场景：图 + 文字描述（运营效率 / 科研加速 / 赋能规培）═══════ */
.sh-case { padding-top: clamp(40px, 5.6vh, 78px); padding-bottom: clamp(40px, 5.6vh, 78px); }
.sh-case-row {
  max-width: 1160px; margin: 0 auto; padding: 0 clamp(22px, 4vw, 56px);
  display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  gap: clamp(30px, 4.4vw, 72px); align-items: center;
}
/* 偶数卡：图在右、文在左，制造左右交替节奏 */
.sh-case--flip .sh-case-figure { order: 2; }
.sh-case--flip .sh-case-copy { order: 1; }

.sh-case-figure { margin: 0; min-width: 0; }
.sh-case-figure img {
  width: 100%; height: auto; display: block; border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}
.sh-case-ph {
  aspect-ratio: 16 / 11; border-radius: 16px;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(61, 139, 253, 0.10), rgba(0, 0, 0, 0) 60%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.025) 0 14px, rgba(255, 255, 255, 0) 14px 28px),
    rgba(255, 255, 255, 0.015);
  display: flex; align-items: center; justify-content: center;
}
.sh-case-ph-text {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.42); text-transform: uppercase;
}

.sh-case-copy { max-width: 520px; min-width: 0; }
.sh-case--flip .sh-case-copy { margin-left: auto; }
.sh-case-title { font-size: var(--fs-title); font-weight: 600; line-height: var(--lh-title); color: var(--bone); margin: 0 0 14px; }
.sh-case-body { font-size: var(--fs-body); line-height: var(--lh-body); color: rgba(255, 255, 255, 0.78); margin: 0; letter-spacing: 0.01em; }

/* ═══════════════════════════════════════════════════════
   图谱视觉（搬自演示 deck，去掉舞台 / ov 角标 / 圆点 / 翻页箭头）
   每章一个独立 <svg>，内部 <g class="sh-scene ...">，节点随滚动逐个浮现
   ═══════════════════════════════════════════════════════ */
.sh-scene .edge { opacity: 0; transition: opacity 0.4s var(--ease); }
.sh-scene.show-edges .edge.in { opacity: 0.30; }
.sh-scene.focusing .edge.lit { opacity: 1; }
.sh-scene.focusing .edge:not(.lit) { opacity: 0.05; }
.edge-base { fill: none; stroke-linecap: round; }
.flow { fill: none; stroke-linecap: round; }

.node { cursor: pointer; transition: opacity 0.34s var(--ease), filter 0.34s var(--ease); will-change: transform; }
.sh-scene .node.rv { opacity: 0; transition: opacity 0.7s var(--ease), filter 0.34s var(--ease); }
.sh-scene .node.rv.in { opacity: 1; }
.node text { pointer-events: none; }
.sh-scene.focusing .node:not(.lit) { opacity: 0.16; }
.sh-scene.focusing .node.focused { filter: drop-shadow(0 0 10px rgba(61,139,253,0.38)); }

.nsub { opacity: 0; transition: opacity 0.3s var(--ease); }
.coresub { opacity: 0; transition: opacity 0.3s var(--ease); }
.sh-scene.focusing .node.focused .nsub { opacity: 1; }
.sh-scene.focusing .node.focused .coresub { opacity: 1; }

.nlabel { font-family: var(--sans); font-weight: 500; fill: #ffffff; }
.nsub {
  font-family: var(--sans); font-weight: 400; fill: rgba(255,255,255,0.74);
  paint-order: stroke fill; stroke: rgba(0,0,0,0.78); stroke-width: 2px; stroke-linejoin: round;
}
.corelbl { font-family: var(--sans); font-weight: 600; fill: #ffffff; letter-spacing: 0.03em; }
.coresub {
  font-family: var(--sans); font-weight: 400; fill: rgba(255,255,255,0.76); letter-spacing: 0.08em;
  paint-order: stroke fill; stroke: rgba(0,0,0,0.78); stroke-width: 2px; stroke-linejoin: round;
}

.strip { opacity: 0; transition: opacity 0.8s var(--ease); }
.strip.in { opacity: 1; }
.strip text { font-family: var(--sans); font-weight: 400; letter-spacing: 0.03em; }

.cline { opacity: 0; transition: opacity 0.7s var(--ease); }
.cline.in { opacity: 1; }
.cedge { opacity: 0; transition: opacity 0.7s var(--ease); }
.cedge.in { opacity: 1; }
.ctitle { font-family: var(--sans); font-weight: 600; fill: #ffffff; letter-spacing: 0.04em; }
.csub {
  font-family: var(--sans); font-weight: 400; fill: rgba(255,255,255,0.78);
  paint-order: stroke fill; stroke: rgba(0,0,0,0.78); stroke-width: 2px; stroke-linejoin: round;
}
.clabel {
  font-family: var(--sans); font-weight: 500; fill: rgba(255,255,255,0.88);
  paint-order: stroke fill; stroke: rgba(0,0,0,0.78); stroke-width: 2px; stroke-linejoin: round;
}
.cnote {
  font-family: var(--mono); font-weight: 500; fill: rgba(76,201,240,0.96); letter-spacing: 0.04em;
  paint-order: stroke fill; stroke: rgba(0,0,0,0.78); stroke-width: 2px; stroke-linejoin: round;
}

@keyframes flowmove { from { stroke-dashoffset: 60; } to { stroke-dashoffset: 0; } }
@keyframes corepulse { 0%,100% { opacity: 0.45; } 50% { opacity: 0.85; } }
.corehalo { animation: corepulse 4.5s ease-in-out infinite; }
/* 屏外章节暂停流光/呼吸：stroke-dashoffset 动画走主线程，
   全页 100+ 条边（含 opacity:0 的隐藏边）常驻空转很贵；.sh-live 由 IntersectionObserver 维护。
   !important 压过 .flow / .cedge path 内联 animation shorthand 重置的 play-state */
.sh-chapter:not(.sh-live) .flow,
.sh-chapter:not(.sh-live) .cedge path,
.sh-chapter:not(.sh-live) .corehalo { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .flow { animation: none !important; }
  .corehalo { animation: none !important; }
}

/* ═══════ 响应式 ═══════ */
@media (max-width: 1024px) {
  .sh-figure { max-width: 100%; }
  #ch-ontology .sh-figure { max-width: 100%; }
  .sh-title-break { display: block; }
  .sh-hero-title { max-width: 760px; }
}
/* 应用场景：窄屏单列堆叠（图上文下，复位左右交替） */
@media (max-width: 880px) {
  .sh-case-row { grid-template-columns: 1fr; gap: clamp(20px, 4vw, 30px); }
  .sh-case--flip .sh-case-figure { order: 0; }
  .sh-case--flip .sh-case-copy { order: 0; }
  .sh-case-copy, .sh-case--flip .sh-case-copy { max-width: 100%; margin-left: 0; }
  .sh-case-ph { aspect-ratio: 16 / 10; }
}
@media (max-width: 760px) {
  .sh-hero { min-height: min(620px, 74vh); padding: 82px 0; align-items: center; }
  .sh-hero::before { background-position: 62% top; opacity: 0.82; }
  .sh-hero::after {
    background:
      radial-gradient(ellipse 96% 38% at 50% 48%, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.60) 48%, rgba(0,0,0,0.14) 82%, rgba(0,0,0,0) 100%),
      linear-gradient(180deg, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.40) 48%, rgba(0,0,0,0.88) 100%),
      linear-gradient(90deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.18) 56%, rgba(0,0,0,0.20) 100%);
  }
  .sh-hero-inner { max-width: 100%; padding: 0 22px; transform: none; }
  .sh-hero-title { max-width: 348px; line-height: 1.34; margin-bottom: 18px; }   /* 字号沿用 --fs-hero；窄屏多行标题放宽行高 */
  .sh-title-break { display: block; }
  .sh-hero-sub { max-width: 340px; }   /* 字号 / 行高沿用 --fs-body / --lh-body */
  .sh-chapter { padding: 48px 0 56px; overflow: hidden; }
  .sh-figure {
    max-width: 100%; overflow-x: auto; padding: 0 18px 12px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  }
  .sh-figure::-webkit-scrollbar { display: none; }
  .sh-figure svg { width: 760px; max-width: none; }
  #ch-ontology .sh-figure svg { width: 980px; }
  footer { padding: 34px 0 40px; }
}