/* ============================================================
   Archive — Cyberpunk Vertical Timeline (方案 A: 霓虹脊柱)
   仅作用于 archive 页 .cyber-timeline,与全局 clean-blog 样式隔离。
   ============================================================ */

.cyber-timeline {
  --tl-cyan: #00c9d7;
  --tl-cyan-deep: #0085a1;
  --tl-ink: #404040;

  position: relative;
  padding: 20px 0 40px;
  margin: 30px 0;
  list-style: none;
}

/* —— 中央发光脊柱:背景流动 + 呼吸发光 —— */
.cyber-timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--tl-cyan-deep) 8%,
    var(--tl-cyan) 50%,
    var(--tl-cyan-deep) 92%,
    transparent 100%
  );
  background-size: 100% 200%;
  box-shadow: 0 0 8px var(--tl-cyan), 0 0 16px rgba(0, 201, 215, 0.5);
  z-index: 0;
  animation: tl-spine 4s linear infinite, tl-glow 2.6s ease-in-out infinite;
}
/* 脊柱渐变沿垂直方向循环流动,模拟数据持续向下传输 */
@keyframes tl-spine {
  0%   { background-position: 0 0; }
  100% { background-position: 0 -200%; }
}
/* 脊柱整体辉光呼吸 */
@keyframes tl-glow {
  0%, 100% { box-shadow: 0 0 6px var(--tl-cyan), 0 0 12px rgba(0, 201, 215, 0.4); }
  50%      { box-shadow: 0 0 10px var(--tl-cyan), 0 0 22px rgba(0, 201, 215, 0.7); }
}

/* —— 扫描光带:沿脊柱向下流动 —— */
.cyber-timeline::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 2px;
  height: 80px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, transparent, #ffffff, var(--tl-cyan), transparent);
  box-shadow: 0 0 12px #ffffff, 0 0 20px var(--tl-cyan);
  z-index: 0;
  opacity: 0.9;
  animation: tl-scan 3.2s linear infinite;
}
@keyframes tl-scan {
  0%   { top: -80px;  opacity: 0; }
  10%  { opacity: 0.9; }
  90%  { opacity: 0.9; }
  100% { top: 100%;   opacity: 0; }
}

/* —— 年份节点 —— */
.tl-year {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 38px 0 26px;
}
.tl-year:first-child { margin-top: 0; }

.tl-year-label {
  position: relative;
  z-index: 2;
  padding: 5px 18px;
  font-family: "Courier New", Consolas, monospace;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--tl-cyan);
  /* 纯文字无框;白底盖住中央竖线,不让线穿过年份 */
  background: #fff;
  border: none;
  border-radius: 0;
}

/* 逐字浮现:JS 把每位数字拆成 .tl-digit 并设 --i 索引 */
.tl-digit {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  text-shadow: none;
}
.tl-year.in-view .tl-digit {
  animation: tl-digit-in 0.5s ease forwards,
             tl-pulse 2.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.12s), calc(var(--i) * 0.12s + 0.5s);
}
/* 入场:从下方淡入并点亮 */
@keyframes tl-digit-in {
  0%   { opacity: 0; transform: translateY(8px); text-shadow: none; }
  100% { opacity: 1; transform: translateY(0); text-shadow: 0 0 8px rgba(0, 201, 215, 0.8); }
}
/* 入场后持续发光呼吸闪烁 */
@keyframes tl-pulse {
  0%, 100% { text-shadow: 0 0 6px rgba(0, 201, 215, 0.6); }
  50%      { text-shadow: 0 0 14px rgba(0, 201, 215, 1); }
}
/* 无 JS 时年份仍可见(JS 没拆分时 .tl-digit 不存在,文字直接显示) */

/* —— 文章条目(左右交替)—— */
.tl-item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: 44px;
  /* 间距由 JS 按相邻发文时间间隔换算后写入 margin-top;
     无 JS 时用 14px 等距降级。去掉下边距避免与下一条的 margin-top 叠加。 */
  margin: 14px 0 0;
  transition: margin-top 0.4s ease;
}

/* 中央节点:菱形圆点 */
.tl-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--tl-cyan-deep);
  border: 1px solid var(--tl-cyan);
  z-index: 2;
  transition: background 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
}
.tl-item.in-view .tl-dot {
  background: var(--tl-cyan);
  box-shadow: 0 0 8px var(--tl-cyan), 0 0 14px rgba(0, 201, 215, 0.6);
  transform: translate(-50%, -50%) rotate(45deg) scale(1.25);
}

/* 卡片:无边框无背景,简约纯文字 */
.tl-card {
  position: relative;
  width: 45%;
  padding: 4px 18px;
}

/* 左右交替:奇数靠左、偶数靠右(nth-of-type 只计 .tl-item,忽略年份节点) */
.tl-item:nth-of-type(odd) .tl-card  { margin-right: auto; text-align: right; }
.tl-item:nth-of-type(even) .tl-card { margin-left: auto; text-align: left; }

/* 日期:等宽字体,青色闪烁发光(进入视口后点亮) */
.tl-date {
  display: block;
  font-family: "Courier New", Consolas, monospace;
  font-size: 12px;
  color: var(--tl-cyan-deep);
  letter-spacing: 1px;
  opacity: 0.55;
  transition: opacity 0.4s ease, color 0.4s ease, text-shadow 0.4s ease;
}
.tl-item.in-view .tl-date {
  opacity: 1;
  color: var(--tl-cyan);
  text-shadow: 0 0 6px rgba(0, 201, 215, 0.8);
  animation: tl-blink 2.4s ease-in-out infinite;
}
@keyframes tl-blink {
  0%, 100% { opacity: 1; text-shadow: 0 0 6px rgba(0, 201, 215, 0.8); }
  50%      { opacity: 0.45; text-shadow: 0 0 3px rgba(0, 201, 215, 0.4); }
}

/* 标题:纯文字,hover 变青 */
.tl-title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--tl-ink);
  text-decoration: none;
  line-height: 1.4;
  transition: color 0.3s ease;
}
.tl-card:hover .tl-title { color: var(--tl-cyan); }

/* —— reveal 动效(仅 JS 启用 .js 后生效,无 JS 时卡片默认可见)—— */
.cyber-timeline.js .tl-card {
  opacity: 0;
  transform: translateY(12px);
}
.cyber-timeline.js .tl-item.in-view .tl-card {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* —— 响应式:窄屏单侧(脊柱居左,卡片全右侧)—— */
@media only screen and (max-width: 768px) {
  .cyber-timeline::before { left: 20px; }
  .cyber-timeline::after  { left: 20px; }

  .tl-year { justify-content: flex-start; padding-left: 50px; }

  .tl-dot { left: 20px; }

  .tl-item .tl-card {
    width: calc(100% - 50px);
    margin-left: 50px;
    margin-right: 0;
    text-align: left;
  }
}

/* —— 降级:减少动效偏好 —— */
@media (prefers-reduced-motion: reduce) {
  .cyber-timeline::before,
  .cyber-timeline::after { animation: none; }
  .cyber-timeline::after { display: none; }
  .tl-year-label,
  .tl-year.in-view .tl-digit,
  .tl-item.in-view .tl-date { animation: none; }
  .tl-year.in-view .tl-digit { opacity: 1; transform: none; text-shadow: 0 0 8px rgba(0, 201, 215, 0.8); }
  .cyber-timeline.js .tl-card { opacity: 1; transform: none; }
  .tl-card, .tl-dot, .tl-title, .tl-date { transition: none; }
}