/* ===== Scene 04 · 观鉴智源阁 V3.4 · 镜头化 =====
   网页浏览 → 镜头行进
   scroll-snap · 100vh 镜头区块 · 典籍厚卡 · 纵深背景
   字体规范保留（隶书匾/行楷馆/隶书典籍，不加粗） */

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

:root{
  --bg:#040302;
  --gold-bright:#FFF7B8;
  --gold:#FFD45A;
  --gold-deep:#B87816;
  --gold-soft:#FFE08A;
  --text:#FFF3D8;
  --muted:#c4b596;
  --line:rgba(255,212,90,0.25);
  --font-lishu:"华文隶书","STLiti","LiSu","Source Han Serif SC","SimSun",serif;
  --font-xingkai:"华文行楷","STXingkai","KaiTi","Source Han Serif SC",serif;
  --font-songti:"Noto Serif SC","Source Han Serif SC","SimSun",serif;
}

html {
  scroll-behavior:smooth;
  scroll-snap-type:y proximity;                 /* 镜头行进：柔性 snap */
}

body {
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-songti);
  line-height:1.95;
  overflow-x:hidden;
  position:relative;
}

/* —— 纵深背景：天光 + 暗角 + 金尘 —— */
.skylight {
  position:fixed; top:-20vh; left:50%;
  width:100vw; height:70vh; transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 60%, rgba(255,212,90,0.22), transparent 60%);
  pointer-events:none; z-index:0;
}
.skylight-beam {
  position:fixed; top:0; left:50%;
  width:44vw; height:100vh; transform:translateX(-50%);
  background:linear-gradient(180deg, rgba(255,212,90,0.14) 0%, transparent 65%);
  pointer-events:none; z-index:0;
}
/* 暗角（vignette · 电影感） */
body::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%, transparent 50%, rgba(0,0,0,0.6) 100%);
}
/* 金尘（微光点 · 远近层次） */
body::after {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(255,217,138,0.4), transparent),
    radial-gradient(1px 1px at 70% 60%, rgba(255,217,138,0.3), transparent),
    radial-gradient(1.5px 1.5px at 40% 80%, rgba(255,217,138,0.25), transparent),
    radial-gradient(1px 1px at 85% 20%, rgba(255,217,138,0.35), transparent),
    radial-gradient(2px 2px at 15% 70%, rgba(255,217,138,0.2), transparent);
  opacity:0.6;
}

.library { max-width:960px; margin:0 auto; padding:0 28px 100px; position:relative; z-index:1; }

/* ========================================
   L0 · 阁名（首屏镜头 · 100vh · 匾额） */
.lib-head {
  min-height:100vh;
  scroll-snap-align:start;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  padding:80px 24px;
}
.eyebrow {
  color:var(--gold); font-size:clamp(22px,3.2vw,32px); letter-spacing:18px;
  margin-bottom:48px; font-family:'JetBrains Mono','Consolas',monospace; font-weight:bold;
  text-indent:18px;
}
.lib-head h1 {
  font-family:var(--font-lishu);
  font-size:clamp(72px, 9vw, 112px);
  font-weight:400;
  letter-spacing:.18em;
  background:linear-gradient(180deg,#FFF7B8 0%,#FFD45A 45%,#B87816 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  text-shadow:0 0 14px rgba(255,217,138,.35),0 0 42px rgba(255,180,60,.18);
  line-height:1.15;
}
.head-line { width:360px; max-width:82vw; height:2px; background:linear-gradient(90deg, transparent, var(--gold), transparent); margin:52px auto; }
.creed { color:var(--gold-soft); font-size:18px; letter-spacing:5px; font-style:italic; }

/* ========================================
   L1 · 三馆（每馆一镜头 · 100vh · 馆门） */
.collection {
  min-height:100vh;
  scroll-snap-align:start;
  padding:100px 0;
  display:flex; flex-direction:column; justify-content:center;
}
.col-head {
  min-height:55vh;
  scroll-snap-align:start;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center; padding:40px 24px;
}
.gate-line {
  width:100%; height:1.5px;
  background:linear-gradient(90deg, transparent 0%, var(--gold) 20%, var(--gold-bright) 50%, var(--gold) 80%, transparent 100%);
}
.col-head .gate-line:first-child { margin-bottom:48px; }
.col-head .gate-line:last-child { margin-top:48px; }

.seal-stamp {
  display:inline-block;
  background:rgba(255,212,90,0.08);
  color:var(--gold);
  border:1.5px solid var(--gold);
  padding:10px 24px;
  font-weight:400; letter-spacing:.2em;
  font-size:clamp(22px,2.8vw,28px);
  font-family:var(--font-lishu);
  border-radius:3px; margin-bottom:40px;
  box-shadow:0 0 18px rgba(255,212,90,0.2);
}
.col-name {
  font-family:var(--font-xingkai);
  font-size:clamp(48px,5vw,68px); font-weight:400; color:#FFE08A;
  letter-spacing:6px; text-shadow:0 0 12px rgba(255,217,138,.28); line-height:1.2;
}
.col-en {
  display:block; margin-top:20px;
  color:var(--gold); font-size:clamp(20px,2.8vw,26px); letter-spacing:7px;
  font-family:'JetBrains Mono','Consolas',monospace; font-weight:bold;
}
.col-motto {
  margin-top:34px; font-size:clamp(17px,2.8vw,22px);
  color:var(--text); letter-spacing:4px; font-weight:300; font-style:italic; line-height:2;
}

/* ========================================
   L2 · 典籍（厚卡 · 纸纹 · 金角 · 阴影） */
.volumes { margin-top:80px; display:flex; flex-direction:column; gap:28px; }
.vol {
  position:relative;
  min-height:360px;
  padding:56px 48px;
  text-align:center;
  /* 厚度：多层背景（纸纹 + 暗底） */
  background:
    radial-gradient(circle at top, rgba(255,217,138,.10), transparent 45%),
    linear-gradient(145deg, rgba(28,22,12,.96), rgba(5,7,10,.98));
  border:1px solid rgba(255,217,138,.45);
  box-shadow:
    0 30px 80px rgba(0,0,0,.65),
    inset 0 0 0 1px rgba(255,243,216,.06);
  transition:transform .5s, box-shadow .5s;
}
/* 金角（加大 38px） */
.vol::before, .vol::after {
  content:""; position:absolute; width:38px; height:38px;
  border-color:#FFD98A; opacity:.85;
}
.vol::before { top:18px; left:18px; border-top:2px solid; border-left:2px solid; }
.vol::after { right:18px; bottom:18px; border-right:2px solid; border-bottom:2px solid; }
.vol:hover {
  transform:translateY(-10px) scale(1.015);
  box-shadow:
    0 40px 100px rgba(0,0,0,.78),
    0 0 36px rgba(255,217,138,.18);
}

.seal {
  display:inline-block;
  color:var(--gold); font-size:clamp(20px,2.6vw,24px); letter-spacing:8px; font-weight:400;
  border:1px solid var(--gold); padding:6px 18px; border-radius:2px;
  margin-bottom:28px; font-family:var(--font-lishu);
}
.title {
  font-family:var(--font-lishu);
  font-size:clamp(32px,5vw,44px); font-weight:400; color:var(--gold-soft);
  letter-spacing:4px; text-shadow:0 0 30px rgba(255,224,138,0.45);
  line-height:1.25; transition:text-shadow .4s;
}
.vol:hover .title { text-shadow:0 0 44px rgba(255,224,138,0.8); }
.quote {
  margin-top:24px; font-size:clamp(18px,2.8vw,22px);
  color:var(--text); letter-spacing:3px; font-weight:300; font-style:italic;
}
.open {
  display:inline-block; margin-top:32px;
  color:var(--gold); font-size:clamp(16px,2.3vw,19px); letter-spacing:10px;
  border-bottom:1px solid var(--gold); padding-bottom:5px;
  opacity:1; transition:all .4s;
}
.vol:hover .open { opacity:1; letter-spacing:14px; }

/* —— 规划馆 —— */
.collection.planned { opacity:0.6; }
.planned-list { display:flex; flex-direction:column; gap:14px; text-align:center; padding:30px 24px 44px; }
.planned-list span {
  color:var(--gold); font-size:17px; letter-spacing:3px;
  padding:16px; border:1px dashed var(--line); border-radius:2px;
}

/* —— 阁尾 —— */
.lib-foot { text-align:center; margin-top:90px; padding-top:56px; padding-bottom:60px; border-top:1px solid var(--line); }
.lib-foot p { color:var(--gold); font-size:clamp(19px,3vw,26px); letter-spacing:6px; font-weight:300; }
.lib-foot .en { margin-top:16px; color:var(--muted); font-size:15px; letter-spacing:2px; font-style:italic; }

@media(max-width:600px){
  .library{ padding:0 16px 80px; }
  .vol{ min-height:280px; padding:44px 24px; }
  .lib-head h1{ letter-spacing:.08em; }
  .eyebrow{ letter-spacing:10px; }
  .col-name{ letter-spacing:3px; }
}