/* ===================================================================
 * base.css · 全局变量 / 字体 / reset / 噪点 / 浮尘 / 通用章节骨架
 * 影戏千秋 · 景阳冈重演（小 Demo）
 * =================================================================== */
:root{
  --ink:#0b0606;
  --ink-2:#140807;
  --night:#1c0d0b;
  --vermillion:#c8332a;
  --vermillion-deep:#8e1c18;
  --rouge:#5c0f0d;
  --gold:#d9b15a;
  --gold-bright:#f3d27a;
  --gold-pale:#efe2bd;
  --paper:#efe2c4;
  --paper-dim:#cdbd97;
  --jade:#3f5c4f;
  --line:rgba(217,177,90,.28);
  --line-strong:rgba(217,177,90,.55);

  /* 字体栈：纯系统字体，零外部依赖，双击 index.html 即可呈现楷宋气质。 */
  --font-kai:"STKaiti","KaiTi","楷体",STZhongsong,"ZhongSong","华文中宋","FangSong","仿宋",serif;
  --font-song:"Songti SC","SimSun","宋体",STSong,"FangSong","仿宋",serif;
  --font-en-serif:Georgia,"Times New Roman",Times,serif;
  --font-en-cap:Georgia,"Palatino Linotype",Palatino,serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-song);
  font-weight:300;
  line-height:1.85;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* grain overlay —— 纸纹颗粒 */
body::before{
  content:"";
  position:fixed;inset:0;
  pointer-events:none;
  z-index:9999;
  opacity:.06;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.9'/></svg>");
}

/* drifting lantern dust —— 漂浮灯尘 */
.dust{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.dust span{
  position:absolute;bottom:-20px;
  width:3px;height:3px;border-radius:50%;
  background:radial-gradient(circle,rgba(243,210,122,.9),rgba(243,210,122,0));
  animation:rise linear infinite;
  filter:blur(.4px);
}
@keyframes rise{
  0%{transform:translateY(0) translateX(0);opacity:0}
  10%{opacity:.9}
  90%{opacity:.7}
  100%{transform:translateY(-110vh) translateX(40px);opacity:0}
}

/* ========== 加载提示 ========== */
.app-loader{
  position:fixed;inset:0;z-index:9999;
  background:radial-gradient(ellipse at 50% 45%,#1a0c0a,#0a0504 75%);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .5s ease;
}
.app-loader.hide{opacity:0;pointer-events:none}
.loader-inner{text-align:center}
.loader-lamp{
  font-size:42px;color:var(--gold-bright);
  text-shadow:0 0 20px rgba(243,210,122,.6);
  animation:loaderPulse 1.4s ease-in-out infinite;
  margin-bottom:18px;
}
@keyframes loaderPulse{
  0%,100%{opacity:.5;transform:scale(.9)}
  50%{opacity:1;transform:scale(1.15)}
}
.loader-text{
  font-family:var(--font-kai);font-size:18px;
  letter-spacing:.4em;color:var(--gold);
  margin-bottom:14px;
}
.loader-dots{display:flex;gap:6px;justify-content:center}
.loader-dots span{
  width:7px;height:7px;border-radius:50%;
  background:var(--gold);
  animation:loaderDot 1.2s ease-in-out infinite;
}
.loader-dots span:nth-child(2){animation-delay:.2s}
.loader-dots span:nth-child(3){animation-delay:.4s}
@keyframes loaderDot{
  0%,100%{opacity:.3;transform:translateY(0)}
  50%{opacity:1;transform:translateY(-5px)}
}

/* ========== 通用章节骨架 ========== */
section.chapter{
  position:relative;
  padding:120px 32px;
  overflow:hidden;
}
.wrap{width:min(1280px,100%);margin:0 auto;position:relative;z-index:2}

.chap-mark{
  display:flex;align-items:baseline;gap:20px;
  margin-bottom:18px;
  opacity:0;transform:translateY(20px);
  transition:all .9s ease;
}
.chap-mark.in{opacity:1;transform:translateY(0)}
.chap-mark .num{
  font-family:var(--font-kai);
  font-size:64px;
  color:var(--vermillion);
  line-height:.8;
  text-shadow:0 0 24px rgba(200,51,42,.4);
}
.chap-mark .ord{
  font-family:var(--font-en-cap);
  font-size:11px;letter-spacing:.5em;
  color:var(--gold);
  text-transform:uppercase;
}
.chap-mark .div{
  flex:1;height:1px;background:linear-gradient(to right,var(--line-strong),transparent);
  margin-bottom:12px;
}
.chap-title{
  font-family:var(--font-kai);
  font-size:clamp(36px,5vw,60px);
  color:var(--gold-bright);
  letter-spacing:.15em;
  margin-bottom:12px;
  opacity:0;transform:translateY(20px);
  transition:all .9s ease .1s;
}
.chap-title.in{opacity:1;transform:translateY(0)}
.chap-en{
  font-family:var(--font-en-serif);
  font-style:italic;
  font-size:18px;
  color:var(--paper-dim);
  letter-spacing:.15em;
  margin-bottom:58px;
  opacity:0;transform:translateY(20px);
  transition:all .9s ease .2s;
}
.chap-en.in{opacity:1;transform:translateY(0)}

/* 通用淡入 */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* 通用按钮（首屏 / 转场 / 第一幕共用） */
.btn{
  font-family:var(--font-kai);font-size:15px;letter-spacing:.2em;
  color:var(--paper);
  padding:12px 26px;
  background:linear-gradient(160deg,rgba(28,13,11,.8),rgba(10,5,4,.6));
  border:1px solid var(--line-strong);
  cursor:pointer;
  transition:all .35s ease;
  position:relative;
}
.btn:hover{border-color:var(--gold);color:var(--gold-bright);box-shadow:0 0 18px rgba(243,210,122,.2);transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
/* 键盘焦点样式（不影响鼠标 hover） */
.btn:focus-visible{
  outline:2px solid var(--gold-bright);
  outline-offset:3px;
  border-color:var(--gold-bright);
  box-shadow:0 0 0 4px rgba(243,210,122,.22),0 0 18px rgba(243,210,122,.35);
}
.btn.primary{
  color:var(--gold-bright);
  border-color:var(--vermillion);
  background:linear-gradient(160deg,rgba(200,51,42,.25),rgba(10,5,4,.7));
}
.btn.primary:hover{background:linear-gradient(160deg,rgba(200,51,42,.4),rgba(20,8,7,.8));box-shadow:0 0 22px rgba(200,51,42,.4)}
.btn:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none;border-color:var(--line)}
.btn:disabled:hover{color:var(--paper);border-color:var(--line)}

/* 装饰侧栏 */
.side-deco{
  position:fixed;
  top:0;bottom:0;width:38px;z-index:5;
  pointer-events:none;
  writing-mode:vertical-rl;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-kai);
  font-size:14px;letter-spacing:.6em;
  color:rgba(217,177,90,.25);
}
.side-deco.left{left:0;border-right:1px solid var(--line)}
.side-deco.right{right:0;border-left:1px solid var(--line)}

/* 大水印汉字 */
.watermark{
  position:absolute;
  font-family:var(--font-kai);
  color:rgba(217,177,90,.03);
  font-size:320px;line-height:1;
  pointer-events:none;user-select:none;
  z-index:0;
  opacity:.6;
}

/* 闭幕 */
.closing{
  padding:80px 24px 60px;
  text-align:center;
  background:linear-gradient(180deg,#0c0606,#0a0504);
  border-top:1px solid var(--line);
}
.closing .quote{
  font-family:var(--font-kai);
  font-size:clamp(20px,3.4vw,34px);
  color:var(--gold-bright);
  letter-spacing:.18em;
  line-height:1.8;
}
.closing .quote .red{color:var(--vermillion)}
.closing .from{
  margin-top:18px;
  font-family:var(--font-kai);
  font-style:normal;
  font-size:15px;
  color:var(--paper-dim);
  letter-spacing:.14em;
}
.closing .quote,.closing .from{
  opacity:0;transform:translateY(18px);
  transition:opacity .9s ease,transform .9s ease;
}
.closing .quote.in,.closing .from.in{
  opacity:1;transform:translateY(0);
}
.closing .from{transition-delay:.12s}

/* 页脚 */
footer.foot{
  padding:50px 24px 40px;
  text-align:center;
  border-top:1px solid var(--line);
  background:#0a0504;
}
footer.foot .brand{
  font-family:var(--font-kai);
  font-size:28px;
  color:var(--gold-bright);
  letter-spacing:.3em;
  margin-bottom:10px;
}
footer.foot .meta{
  font-family:var(--font-en-cap);
  font-size:11px;letter-spacing:.4em;
  color:var(--paper-dim);
}

/* 隐藏原提案页中此 Demo 不需要的章节（保留视觉资产，仅不展示） */
section.intro,section.track-sec,section.features,section.users,section.value{display:none!important}

/* 通用响应式（章节内边距 / 侧栏 / 印章） */
@media(max-width:900px){
  .side-deco{display:none}
  section.chapter{padding:80px 20px}
  .chap-mark .num{font-size:48px}
  .chap-title{font-size:clamp(28px,5vw,44px)}
  .chap-en{font-size:15px;margin-bottom:40px}
}