/* ===== Scene 03 · The Axis of Civilization · 文明之轴 =====
   东方长廊 · 金色中轴 · 七文明铜碑 · 行走（滚动浮现）· 体积光
   零 Card / Grid / Dashboard / KPI / Sidebar。是文明长廊，不是菜单。 */

* { margin:0; padding:0; box-sizing:border-box; }

:root{
  --bg:#05070A;
  --gold:#FFD98A;
  --gold-deep:#C8A96A;
  --text:#FFF3D8;
  --muted:#b8ad94;
}

body {
  background:var(--bg);
  color:var(--text);
  font-family:'Noto Serif SC','Source Han Serif SC','SimSun',serif;
  line-height:1.95;
  overflow-x:hidden;
  position:relative;
}

/* —— 柔和体积光（顶部洒下，电影感）—— */
.volumelight {
  position:fixed; top:0; left:50%;
  width:80vw; height:80vh;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 0%,
    rgba(255,217,138,0.18) 0%,
    rgba(232,199,122,0.06) 40%,
    transparent 70%);
  pointer-events:none; z-index:1;
}

/* —— 金色中轴（贯穿整条长廊，fixed）—— */
.axis {
  position:fixed; top:0; bottom:0; left:50%;
  width:2px; transform:translateX(-50%);
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(255,217,138,0.5) 8%,
    rgba(255,217,138,0.85) 50%,
    rgba(255,217,138,0.5) 92%,
    transparent 100%);
  z-index:2; pointer-events:none;
  box-shadow:0 0 18px rgba(255,217,138,0.4);
}

.corridor { position:relative; z-index:3; }

/* —— 入口 —— */
.entry {
  min-height:100vh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center; padding:80px 24px;
}
.eyebrow {
  color:var(--gold-deep); font-size:clamp(13px,2vw,17px);
  letter-spacing:10px; margin-bottom:36px;
  font-family:'JetBrains Mono','Consolas',monospace;
}
.entry h1 {
  font-size:clamp(56px, 12vw, 150px);
  font-weight:bold; color:var(--gold);
  letter-spacing:18px;
  text-shadow:0 0 60px rgba(255,217,138,0.6), 0 0 130px rgba(255,217,138,0.3);
  line-height:1.2;
}
.walk {
  margin-top:40px;
  font-size:clamp(18px,3vw,26px);
  color:var(--text); letter-spacing:8px; font-weight:300;
}
.scroll-hint {
  margin-top:60px; color:var(--gold);
  font-size:28px; animation:bob 2.4s ease-in-out infinite;
}
@keyframes bob { 0%,100%{transform:translateY(0);opacity:0.6;} 50%{transform:translateY(12px);opacity:1;} }

/* —— 七座文明铜碑 —— */
.nodes { padding:40px 0 60px; }
.node {
  min-height:88vh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center; padding:60px 24px;
  position:relative;
  opacity:0; transform:translateY(50px);
  transition:opacity 1.4s ease, transform 1.4s ease;
}
.node.visible { opacity:1; transform:translateY(0); }

/* 金点（在轴上，未亮暗；visible 亮+光晕） */
.dot {
  width:16px; height:16px; border-radius:50%;
  background:var(--gold-deep);
  margin-bottom:48px;
  position:relative; z-index:4;
  transition:all 1.2s ease;
  opacity:0.5;
}
.node.visible .dot {
  background:var(--gold); opacity:1;
  box-shadow:
    0 0 24px rgba(255,217,138,0.9),
    0 0 60px rgba(255,217,138,0.5),
    0 0 100px rgba(255,217,138,0.3);
}

/* 铜碑（石刻质感） */
.stele {
  max-width:560px;
  padding:52px 48px;
  border:1.5px solid rgba(255,217,138,0.35);
  background:linear-gradient(160deg, rgba(20,16,10,0.6), rgba(8,6,4,0.4));
  backdrop-filter:blur(2px);
  position:relative;
}
.stele::before, .stele::after {
  content:''; position:absolute;
  width:24px; height:24px;
  border:1.5px solid var(--gold);
}
.stele::before { top:-2px; left:-2px; border-right:none; border-bottom:none; }
.stele::after  { bottom:-2px; right:-2px; border-left:none; border-top:none; }

.era {
  display:block;
  color:var(--gold-deep);
  font-size:clamp(13px,1.8vw,16px);
  letter-spacing:8px; margin-bottom:20px;
}
.stele h2 {
  font-size:clamp(40px, 7vw, 76px);
  font-weight:bold; color:var(--gold);
  letter-spacing:10px;
  text-shadow:0 0 36px rgba(255,217,138,0.5);
  line-height:1.2;
}
.en {
  display:block; margin-top:14px;
  color:var(--gold-deep);
  font-size:clamp(13px,1.8vw,17px);
  letter-spacing:4px; font-style:italic;
}
.stele p {
  margin-top:30px;
  font-size:clamp(17px,2.6vw,22px);
  color:var(--text); letter-spacing:3px;
  font-weight:300; line-height:2;
}

/* —— 远方地平线 —— */
.horizon {
  min-height:80vh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center; padding:80px 24px;
  position:relative;
}
.horizon-light {
  position:absolute; top:50%; left:50%;
  width:60vw; height:30vh;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse, rgba(255,217,138,0.25), transparent 65%);
  filter:blur(20px);
}
.horizon-text {
  font-size:clamp(22px,4vw,34px);
  color:var(--gold); letter-spacing:8px; font-weight:300;
  text-shadow:0 0 30px rgba(255,217,138,0.5);
}
.horizon-en {
  margin-top:18px;
  color:var(--muted); font-size:clamp(13px,2vw,17px);
  letter-spacing:3px; font-style:italic;
}

@media(max-width:600px){
  .entry h1{ letter-spacing:10px; }
  .stele{ padding:36px 24px; }
  .stele h2{ letter-spacing:6px; }
}
@media (prefers-reduced-motion: reduce){
  .node{ transition:opacity .6s ease; transform:none; }
  .scroll-hint{ animation:none; }
}