/*
 * landing.css — 首页（Section 0）专用样式
 */

/* #s0 本身不设 display，交由 layout.css 的 .sec / .sec.active 控制显隐 */
#s0.active {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  max-width: 100%;
  padding: 60px 80px;
  position: relative;
  overflow: hidden;
}

/* ── 网格背景 ── */
.grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,255,136,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,136,.03) 1px, transparent 1px);
  background-size: 40px 40px;
  z-index: 0;
}

/* ── 扫描线动画 ── */
.scanline {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--green), transparent);
  animation: scan 5s linear infinite;
  opacity: .25;
  z-index: 1;
}
@keyframes scan { 0% { top: 0; } 100% { top: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .scanline { animation: none; display: none; }
}

#s0 .cnt { position: relative; z-index: 2; }

.badge {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 4px;
  color: var(--green);
  border: 1px solid var(--green);
  padding: 4px 12px;
  margin-bottom: 22px;
  text-transform: uppercase;
}

/* 终端光标 — 赋予 badge「实时运行」的感觉 */
.badge::after {
  content: '|';
  margin-left: 6px;
  font-weight: normal;
  animation: cursor-blink 1s step-end infinite;
}
@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

#s0 h1 { font-size: 48px; font-weight: bold; line-height: 1.1; margin-bottom: 14px; color: #fff; }

/* display: inline-block 使 transform 对行内元素生效 */
#s0 h1 span {
  color: var(--green);
  display: inline-block;
}

#s0 .sub { font-size: 14px; color: var(--dim); margin-bottom: 44px; letter-spacing: 1px; }

/* ── 章节速览网格 ── */
.ch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 44px; }

.ch-mini {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 16px;
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .2s, box-shadow .2s;
  opacity: 0;
  animation: card-rise .4s ease both;
}

/* 错开每张卡片的出场时机 */
.ch-mini:nth-child(1) { animation-delay: .05s; }
.ch-mini:nth-child(2) { animation-delay: .12s; }
.ch-mini:nth-child(3) { animation-delay: .19s; }
.ch-mini:nth-child(4) { animation-delay: .26s; }
.ch-mini:nth-child(5) { animation-delay: .33s; }
.ch-mini:nth-child(6) { animation-delay: .40s; }

@keyframes card-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .ch-mini { animation: none; opacity: 1; }
}

.ch-mini:hover {
  border-color: var(--green);
  background: rgba(0,255,136,.05);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,255,136,.08);
}
.ch-mini .num { font-size: 11px; color: var(--green); margin-bottom: 6px; }
.ch-mini .ttl { font-size: 14px; color: var(--text); }

/* ── 开始按钮 ── */
.btn-start {
  display: inline-block;
  background: var(--green);
  color: #000;
  padding: 14px 40px;
  font-family: inherit;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 2px;
  cursor: pointer;
  border: none;
  text-transform: uppercase;
  transition: all .2s;
}
.btn-start:hover { background: #00cc6e; box-shadow: 0 0 20px rgba(0,255,136,.3); }

/* ── 入场序列 —— 与 #s0.active 绑定，每次导航到首页时重播 ── */
#s0.active .badge {
  /* 入场 + 持续呼吸光晕合并；1s 延迟让光晕在入场结束后才启动 */
  animation: hero-in .5s ease both,
             badge-glow 3.5s ease-in-out 1s infinite;
}
#s0.active h1        { animation: hero-in .5s ease .2s  both; }
#s0.active .sub      { animation: hero-in .45s ease .35s both; }
#s0.active .btn-start { animation: hero-in .4s ease .5s  both; }

@keyframes hero-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Badge 边框呼吸光晕 — 模拟「在线状态」指示灯 */
@keyframes badge-glow {
  0%, 100% { box-shadow: 0 0 4px  rgba(0,255,136,.15); }
  50%       { box-shadow: 0 0 14px rgba(0,255,136,.7),
                          0 0 32px rgba(0,255,136,.25); }
}

/* 标题高亮文字故障闪 — 每 6 秒触发一次，暗示「数字信号干扰」 */
#s0 h1 span {
  animation: glitch 6s ease-in-out infinite;
}
@keyframes glitch {
  /* 大部分时间静止 */
  0%, 84%, 100% {
    text-shadow: none;
    transform: none;
  }
  /* 第一帧：RGB 通道错位 + 轻微斜切 */
  86% {
    text-shadow: 3px 0 var(--cyan), -3px 0 rgba(255,68,68,.65);
    transform: skewX(-4deg) translateX(2px);
  }
  /* 第二帧：方向反转 */
  88% {
    text-shadow: -3px 0 var(--cyan), 3px 0 rgba(255,68,68,.65);
    transform: skewX(3deg) translateX(-2px);
  }
  /* 恢复正常 */
  90% {
    text-shadow: none;
    transform: none;
  }
  /* 微弱残影 */
  92% {
    text-shadow: 1px 0 var(--cyan);
    transform: translateX(1px);
  }
  94% {
    text-shadow: none;
    transform: none;
  }
}

/* ── 无障碍：一键关闭所有首页动画 ── */
@media (prefers-reduced-motion: reduce) {
  #s0.active .badge,
  #s0.active h1,
  #s0.active .sub,
  #s0.active .btn-start,
  #s0 h1 span,
  .badge::after {
    animation: none;
    opacity: 1;
  }
}

/* ── 响应式 ── */
@media (max-width: 768px) {
  #s0 { padding: 56px 20px; }
  #s0 h1 { font-size: 28px; }
  .ch-grid { grid-template-columns: 1fr 1fr; }
}