/* ============================================================
   life.css — 站 2「放牛娃到皇帝」站内样式
   背景：base.css 定暗金展览令牌；本文件做人生路径图布局。
   设计意图：一条从左下向右上的蜿蜒金线路径，走过的路点亮
             （stroke-dashoffset 过渡），当前节点脉冲；故事卡
             按节点切换；终点皇冠在到达时点亮。
   约束：节点坐标由 JS 按路径长度定位，CSS 只管形。
   ============================================================ */

.head-actions { display: flex; gap: var(--sp); align-items: center; }
.back-link { text-decoration: none; }

.lesson-head { padding: calc(var(--sp) * 5) 0 calc(var(--sp) * 3); }
.kicker { font-size: var(--fs-sm); letter-spacing: .14em; margin-bottom: var(--sp); }
.lesson-head h1 { font-size: var(--fs-xl); margin-bottom: calc(var(--sp) * 2); }
.intro { max-width: 640px; color: var(--ink-soft); }
.hint { display: flex; align-items: center; gap: .5em; font-size: var(--fs-sm); color: var(--gold); }

/* ---------- 人生路径舞台 ---------- */
.life-stage {
  background: var(--paper-2);
  border: 1px solid var(--line-dim);
  border-radius: var(--radius);
  padding: calc(var(--sp) * 2);
  outline: none;
}
.life-stage:focus-visible { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-mist); }
#lifeSvg { display: block; width: 100%; height: auto; }

#lifeSvg .bg-hill { fill: var(--paper-3); opacity: .55; }

#lifeSvg .life-path {
  fill: none;
  stroke: var(--gold-soft);
  stroke-opacity: .25;
  stroke-width: 5;
  stroke-linecap: round;
}
#lifeSvg .life-path.lit {
  stroke: var(--gold);
  stroke-opacity: .9;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset .65s cubic-bezier(.25, .8, .3, 1);
}

/* 节点 */
#lifeSvg .lnode circle.core {
  fill: var(--paper);
  stroke: var(--gold-soft);
  stroke-width: 3;
  transition: fill .25s ease, stroke .25s ease;
}
#lifeSvg .lnode .yy {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  fill: var(--ink-soft);
  paint-order: stroke;
  stroke: var(--paper-2);
  stroke-width: 4px;
  transition: fill .25s ease;
}
#lifeSvg .lnode.past circle.core { fill: var(--gold); stroke: var(--gold); }
#lifeSvg .lnode.past .yy { fill: var(--gold); }
#lifeSvg .lnode.current circle.core { fill: var(--gold); stroke: var(--zhu); }
#lifeSvg .lnode.current .yy { fill: var(--zhu); }
#lifeSvg .lnode circle.halo {
  fill: none;
  stroke: var(--gold);
  opacity: 0;
}
#lifeSvg .lnode.current circle.halo {
  opacity: 1;
  animation: node-pulse 1.2s ease-out infinite;
}
@keyframes node-pulse {
  0%   { stroke-width: 3; r: 16; opacity: .8; }
  100% { stroke-width: 1; r: 30; opacity: 0; }
}
#lifeSvg .lnode { cursor: pointer; }

/* 终点皇冠：到达后点亮 */
#lifeSvg .life-crown path {
  fill: none;
  stroke: var(--gold-soft);
  stroke-width: 2;
  stroke-linejoin: round;
  opacity: .5;
  transition: all .4s ease;
}
#lifeSvg .life-crown circle { fill: var(--gold-soft); opacity: .5; transition: all .4s ease; }
#lifeSvg.done .life-crown path { fill: var(--gold); stroke: var(--zhu); opacity: 1; }
#lifeSvg.done .life-crown circle { fill: var(--zhu); opacity: 1; }

/* 控制条 */
.life-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: calc(var(--sp) * 1.5);
  padding: 0 calc(var(--sp) * 1);
}
#stepInd { font-size: var(--fs-md); }

/* ---------- 故事卡 ---------- */
.life-card {
  margin-top: calc(var(--sp) * 3);
  background: var(--gold-mist);
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  padding: calc(var(--sp) * 3);
  min-height: 150px;
}
.life-card .lc-meta {
  display: flex;
  gap: calc(var(--sp) * 1.5);
  align-items: baseline;
  margin-bottom: calc(var(--sp) * 1.2);
}
.life-card .lc-year { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-md); color: var(--gold); }
.life-card .lc-age {
  font-size: var(--fs-sm);
  color: #fff8ea;
  background: var(--gold);
  border-radius: 999px;
  padding: .1em .8em;
  font-weight: 700;
}
.life-card h3 { font-size: var(--fs-lg); margin-bottom: calc(var(--sp) * 1.4); }
.life-card p { margin: 0; max-width: 700px; }

/* ---------- 结尾 ---------- */
.ending { text-align: center; padding-bottom: calc(var(--sp) * 6); }
.ending-line {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.65;
  max-width: 700px;
  margin: 0 auto calc(var(--sp) * 3);
}

@media (max-width: 760px) {
  #lifeSvg .lnode .yy { font-size: 12px; }
  .life-controls { flex-wrap: wrap; gap: var(--sp); }
}

@media (prefers-reduced-motion: reduce) {
  #lifeSvg .life-path.lit { transition: none; }
  #lifeSvg .lnode.current circle.halo { animation: none; opacity: 0; }
}