/* ===== Timeline Page ===== */
.timeline-page {
  padding-top: 100px;
  background: var(--bg);
}

.timeline-intro {
  text-align: center;
  padding: 1rem 0 2rem;
}

.timeline-bar {
  position: sticky;
  top: 76px;
  z-index: 50;
  background: rgba(250, 249, 246, 0.96);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.25rem 0 1rem;
  /* 兜底：任何子元素都不得把文档撑宽（clip 不产生滚动容器，sticky 不受影响） */
  overflow-x: clip;
}

.timeline-svg-wrap {
  position: relative;
  width: 100%;
  height: 140px;
}

.timeline-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.timeline-points {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.timeline-point {
  position: absolute;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: center;
  font-family: inherit;
}

.timeline-point-dot {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--accent);
  margin: 0 auto;
  transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.timeline-point:hover .timeline-point-dot,
.timeline-point.is-active .timeline-point-dot {
  transform: scale(1.6);
  background: var(--accent);
  box-shadow: 0 6px 20px rgba(160, 48, 48, 0.35);
}

.timeline-point.is-active .timeline-point-dot {
  transform: scale(1.4);
}

.timeline-point-label {
  display: block;
  margin-top: 0.5rem;
  white-space: nowrap;
  /* 宽度上限 + 单行省略：标签不再向外顶出容器把文档撑宽；
     所有标签等高 → 各点 translate(-50%,-50%) 的偏移一致 → 圆点仍与曲线对齐 */
  max-width: 132px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s, transform 0.25s, color 0.25s;
}

.timeline-point:hover .timeline-point-label,
.timeline-point.is-active .timeline-point-label {
  opacity: 1;
  transform: translateY(0);
  color: var(--accent);
}

.timeline-point.is-active .timeline-point-label {
  font-weight: 600;
  /* 点中红点后：文字完整显示（解除省略），并以 scale 真正「小一号」
     —— 中文浏览器强制最小 12px，font-size 缩小无效；scale 不改布局盒，
     按钮总高不变 → translate(-50%,-50%) 不动 → 圆点仍落在曲线上 */
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  transform: translateY(0) scale(0.85);
  transform-origin: top center;
}

.timeline-meta {
  margin-top: 0.5rem;
  text-align: right;
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-light);
}

.timeline-content {
  padding: 3rem 0 6rem;
  min-height: 60vh;
}

.timeline-frame-wrap {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.timeline-frame-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.25rem;
  background: var(--bg-warm);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-small);
}

.timeline-frame-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d8d3cc;
}

.timeline-frame-dot:nth-child(1) { background: #e2a0a0; }
.timeline-frame-dot:nth-child(2) { background: #e2c8a0; }
.timeline-frame-dot:nth-child(3) { background: #a0c8e2; }

.timeline-frame-title {
  margin-left: 0.75rem;
  color: var(--text-muted);
  letter-spacing: var(--ls-sub);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timeline-frame-open {
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--text);
  padding-bottom: 1px;
}

.timeline-frame-open:hover {
  color: var(--accent);
  border-color: var(--accent);
}

#releaseFrame {
  width: 100%;
  min-height: 70vh;
  border: 0;
  display: block;
  background: #fff;
}

.timeline-content.is-loading .timeline-frame-wrap::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border: 3px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  z-index: 2;
}

.timeline-frame-wrap { position: relative; }

@keyframes spin {
  to { transform: rotate(360deg); }
}

.timeline-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 4rem 0;
}

.is-active {
  position: relative;
}

.is-active::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--accent);
}

@media (max-width: 768px) {
  .timeline-page { padding-top: 90px; }
  .timeline-svg-wrap { height: 120px; }
  .timeline-point-label { font-size: var(--fs-caption); max-width: 104px; }
  #releaseFrame { min-height: 60vh; }
  /* 移动端把命中区放大到 44×44（视觉圆点不变）：
     用不占布局的 ::before，避免改动按钮盒高导致 translate(-50%,-50%) 偏移、圆点离开曲线 */
  .timeline-point::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 7px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }
}