/* ===================================================================
   三星堆与古蜀文明 · 数字课程门户 · 全局设计系统
   主色: 青铜绿 / 陨铁黑 / 太阳金  ·  中文衬线 + 描金
=================================================================== */

:root{
  --bronze: #2d5a4a;        /* 青铜绿 */
  --bronze-deep:#16312a;
  --bronze-light:#4f8a72;
  --bronze-glow:#6fbf9e;
  --iron:#0b0e0d;           /* 陨铁黑 */
  --iron-2:#12161a;
  --iron-3:#1b2125;
  --gold:#c9a14a;           /* 太阳金 */
  --gold-bright:#ecc869;
  --gold-soft:#a8842f;
  --rust:#7a5a3a;
  --paper:#ece3d0;
  --ink:#d8cdb4;

  --font-serif:"Noto Serif SC","Songti SC","SimSun",serif;
  --font-display:"ZCOOL XiaoWei","Noto Serif SC",serif;
  --font-mono:"Cormorant Garamond",serif;

  --maxw:1280px;
  --nav-h:64px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow-bronze:0 0 40px rgba(45,90,74,.45),0 0 80px rgba(0,0,0,.6);
  --shadow-gold:0 0 24px rgba(233,200,106,.5);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--iron);
  color:var(--ink);
  font-family:var(--font-serif);
  line-height:1.8;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body::before{ /* 颗粒噪点叠层 */
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.05;
  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'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;
}
img{display:block;max-width:100%}
a{color:var(--gold-bright);text-decoration:none}
::selection{background:var(--gold);color:var(--iron)}

/* 描金标题 */
.gilt{
  font-family:var(--font-display);
  background:linear-gradient(180deg,#f6e3a5 0%,var(--gold-bright) 35%,var(--gold) 60%,#9c7730 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  text-shadow:0 1px 0 rgba(0,0,0,.4);
  letter-spacing:.08em;
}
.serif-rust{ /* 青铜锈斑标题 */
  font-family:var(--font-display);
  color:#cfe0d6;
  text-shadow:0 0 1px #3a6a55,0 2px 6px rgba(0,0,0,.7);
}
.kicker{
  font-family:var(--font-mono);font-style:italic;letter-spacing:.4em;
  text-transform:uppercase;color:var(--gold-soft);font-size:.78rem;
}

/* ---------- 顶部导航 ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(16px,4vw,48px);
  background:linear-gradient(180deg,rgba(8,10,9,.92),rgba(8,10,9,.4));
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(201,161,74,.18);
  transition:background .4s var(--ease);
}
.nav .brand{display:flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-size:1.15rem;letter-spacing:.12em}
.nav .brand .seal{
  width:34px;height:34px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 35% 30%,var(--gold-bright),var(--gold-soft) 60%,#5a4216 100%);
  box-shadow:inset 0 0 6px rgba(0,0,0,.5),0 0 10px rgba(201,161,74,.4);
  position:relative;
}
.nav .brand .seal::after{
  content:"蜀";position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--font-display);color:#2a1d05;font-size:.85rem;font-weight:bold;
}
.nav .brand .gilt{font-size:1.05rem}
.nav ul{list-style:none;display:flex;gap:clamp(10px,2vw,28px);align-items:center}
.nav ul a{
  color:var(--ink);font-size:.92rem;letter-spacing:.12em;opacity:.82;
  position:relative;padding:.3rem 0;transition:opacity .3s,color .3s;
}
.nav ul a:hover{opacity:1;color:var(--gold-bright)}
.nav ul a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--gold);transition:width .3s var(--ease)}
.nav ul a:hover::after,.nav ul a.active::after{width:100%}
.nav .menu-btn{display:none;background:none;border:0;color:var(--gold);font-size:1.4rem;cursor:pointer}
@media(max-width:860px){
  .nav ul{position:fixed;inset:var(--nav-h) 0 0 0;background:rgba(8,10,9,.97);flex-direction:column;justify-content:center;gap:2rem;font-size:1.2rem;transform:translateX(100%);transition:transform .4s var(--ease)}
  .nav ul.open{transform:translateX(0)}
  .nav .menu-btn{display:block}
}

/* ---------- 通用容器 ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.section{padding:clamp(60px,9vw,120px) 0;position:relative}
.page-top{padding-top:calc(var(--nav-h) + 60px)}
.eyebrow{display:flex;align-items:center;gap:1rem;margin-bottom:1.4rem}
.eyebrow .line{flex:0 0 48px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.7rem 1.6rem;border:1px solid var(--gold-soft);color:var(--gold-bright);
  font-family:var(--font-display);letter-spacing:.14em;font-size:.9rem;cursor:pointer;
  background:linear-gradient(180deg,rgba(201,161,74,.06),transparent);
  position:relative;overflow:hidden;transition:.35s var(--ease);
}
.btn:hover{background:linear-gradient(180deg,rgba(201,161,74,.2),rgba(201,161,74,.04));box-shadow:var(--shadow-gold);color:#fff}
.btn.solid{background:linear-gradient(180deg,var(--gold),var(--gold-soft));color:#1a1305;border-color:transparent}
.divider-rune{display:flex;align-items:center;justify-content:center;gap:1rem;color:var(--gold-soft);opacity:.6;margin:2rem 0}
.divider-rune::before,.divider-rune::after{content:"";height:1px;flex:1;max-width:160px;background:linear-gradient(90deg,transparent,var(--gold-soft),transparent)}
.divider-rune span{font-family:var(--font-mono);letter-spacing:.5em;font-size:.75rem}

/* ---------- 页脚 ---------- */
footer{border-top:1px solid rgba(201,161,74,.16);padding:48px 0 32px;background:linear-gradient(180deg,var(--iron),var(--iron-2));position:relative}
footer .wrap{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-start}
footer .col h4{font-family:var(--font-display);color:var(--gold-bright);font-size:.95rem;letter-spacing:.14em;margin-bottom:.8rem}
footer .col p,footer .col a{font-size:.82rem;opacity:.7;line-height:1.9}
footer .bottom{margin-top:32px;padding-top:20px;border-top:1px solid rgba(255,255,255,.05);text-align:center;font-size:.74rem;opacity:.45;letter-spacing:.1em}

/* ---------- 滚动渐入 ---------- */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.1s}.reveal.d2{transition-delay:.2s}.reveal.d3{transition-delay:.3s}.reveal.d4{transition-delay:.4s}

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--iron-2)}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--bronze),var(--gold-soft));border-radius:6px}

/* ---------- 滚动进度 ---------- */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:1100;background:rgba(255,255,255,.05)}
.scroll-progress i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--bronze-light),var(--gold-bright));box-shadow:0 0 8px var(--gold)}

/* ---------- 古蜀祭司讲解员 ---------- */
.narrator{position:fixed;right:18px;bottom:18px;z-index:1050;font-family:var(--font-serif)}
.nr-avatar{position:relative;width:62px;height:62px;border-radius:50%;cursor:pointer;border:none;
  background:radial-gradient(circle at 35% 30%,#e9c96a,var(--gold-soft) 55%,#5a4216 100%);
  box-shadow:0 6px 24px rgba(0,0,0,.5),inset 0 0 8px rgba(0,0,0,.4);transition:transform .3s var(--ease)}
.nr-avatar:hover{transform:scale(1.08) rotate(-4deg)}
.nr-glyph{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-display);color:#2a1d05;font-size:1.5rem;font-weight:bold}
.nr-pulse{position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--gold);opacity:.6;animation:nrpulse 2.6s var(--ease) infinite}
@keyframes nrpulse{0%{transform:scale(.9);opacity:.6}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}
.nr-panel{position:absolute;right:0;bottom:72px;width:300px;max-width:84vw;max-height:60vh;display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--iron-3),var(--iron-2));border:1px solid rgba(201,161,74,.3);border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.6);opacity:0;transform:translateY(14px) scale(.96);pointer-events:none;transition:.32s var(--ease)}
.nr-panel.open{opacity:1;transform:none;pointer-events:auto}
.nr-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid rgba(201,161,74,.15);
  font-family:var(--font-display);color:var(--gold-bright);letter-spacing:.1em}
.nr-close{background:none;border:0;color:var(--gold-soft);font-size:1.4rem;cursor:pointer;line-height:1}
.nr-body{padding:14px 16px;overflow-y:auto;font-size:.92rem;line-height:1.85;min-height:60px;color:var(--ink);max-height:240px}
.nr-msg{margin:6px 0;padding:8px 12px;border-radius:10px;max-width:92%}
.nr-msg.me{background:rgba(201,161,74,.12);margin-left:auto;align-self:flex-end;color:var(--gold-bright)}
.nr-msg.shu{background:rgba(45,90,74,.18);border-left:2px solid var(--bronze-light)}
.nr-quick{display:flex;flex-wrap:wrap;gap:6px;padding:8px 14px}
.nr-q{font-size:.74rem;padding:4px 10px;border:1px solid rgba(201,161,74,.3);border-radius:20px;background:transparent;color:var(--gold-soft);cursor:pointer;transition:.25s}
.nr-q:hover{background:rgba(201,161,74,.15);color:var(--gold-bright)}
.nr-input{display:flex;gap:6px;padding:10px 14px;border-top:1px solid rgba(201,161,74,.12)}
.nr-input input{flex:1;background:rgba(0,0,0,.3);border:1px solid rgba(201,161,74,.25);color:var(--ink);border-radius:8px;padding:8px 10px;font-family:var(--font-serif);font-size:.85rem}
.nr-input button{background:linear-gradient(var(--gold),var(--gold-soft));color:#1a1305;border:0;border-radius:8px;padding:0 14px;cursor:pointer;font-family:var(--font-display)}
.nr-voice{display:flex;align-items:center;gap:6px;padding:0 16px 12px;font-size:.72rem;color:var(--gold-soft);cursor:pointer}
.nr-voice input{accent-color:var(--gold)}

/* ---------- 背景音乐按钮 ---------- */
.music-toggle{position:fixed;left:18px;bottom:18px;z-index:1050;display:flex;align-items:center;gap:.5rem;
  padding:8px 14px;border:1px solid rgba(201,161,74,.3);border-radius:30px;cursor:pointer;
  background:rgba(11,14,13,.7);backdrop-filter:blur(8px);color:var(--gold-soft);font-size:.78rem;transition:.3s var(--ease)}
.music-toggle .mt-ic{font-size:1rem}
.music-toggle.on{color:var(--gold-bright);border-color:var(--gold);box-shadow:0 0 16px rgba(233,200,106,.25)}
.music-toggle.on .mt-ic{animation:spin 6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============ 首页：视差开场 ============ */
.hero{position:relative;height:100vh;min-height:640px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.hero .layer{position:absolute;inset:0;will-change:transform}
.hero .bg-img{background-size:cover;background-position:center;transform:scale(1.12)}
.hero .veil{background:radial-gradient(ellipse at 50% 40%,transparent,rgba(8,10,9,.85) 70%,var(--iron));z-index:2}
.hero .star{z-index:1;opacity:.7}
.hero .content{position:relative;z-index:5;text-align:center;padding:0 20px}
.hero .badge{font-family:var(--font-mono);letter-spacing:.5em;color:var(--gold-soft);font-size:.8rem;margin-bottom:1.2rem}
.hero h1{font-family:var(--font-display);font-size:clamp(2.8rem,8vw,6.4rem);line-height:1.1;margin-bottom:.4rem}
.hero .sub{font-size:clamp(1rem,2.4vw,1.4rem);letter-spacing:.4em;color:var(--bronze-light);margin-bottom:2.4rem}
.hero .gold-rays{position:absolute;left:50%;top:50%;width:140vmax;height:140vmax;transform:translate(-50%,-50%);z-index:3;pointer-events:none;opacity:.4;mix-blend-mode:screen;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(233,200,106,.18) 8deg,transparent 16deg,rgba(233,200,106,.1) 24deg,transparent 32deg);
  animation:spin 90s linear infinite}
.hero .scroll-cue{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:5;color:var(--gold-soft);font-size:.74rem;letter-spacing:.3em;display:flex;flex-direction:column;align-items:center;gap:8px}
.hero .scroll-cue .bar{width:1px;height:48px;background:linear-gradient(var(--gold),transparent);animation:cue 2s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}50.1%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* 金杖光效 */
.staff-glow{position:absolute;left:50%;top:8%;bottom:0;width:6px;transform:translateX(-50%);z-index:4;border-radius:6px;
  background:linear-gradient(180deg,transparent,var(--gold-bright) 12%,var(--gold) 50%,var(--gold-soft) 88%,transparent);
  box-shadow:0 0 40px var(--gold),0 0 90px rgba(233,200,106,.5);opacity:0;animation:staffrise 4.5s var(--ease) .6s forwards}
@keyframes staffrise{0%{opacity:0;transform:translateX(-50%) scaleY(0)}60%{opacity:.9}100%{opacity:.55;transform:translateX(-50%) scaleY(1)}}

/* 首页特性卡 */
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.feat{position:relative;padding:30px 26px;border:1px solid rgba(201,161,74,.18);border-radius:8px;background:linear-gradient(160deg,rgba(45,90,74,.12),rgba(11,14,13,.6));overflow:hidden;transition:.4s var(--ease)}
.feat:hover{border-color:var(--gold-soft);transform:translateY(-6px);box-shadow:var(--shadow-bronze)}
.feat .fi{font-size:1.8rem;color:var(--gold-bright);margin-bottom:.6rem}
.feat h3{font-family:var(--font-display);color:var(--gold-bright);font-size:1.1rem;letter-spacing:.08em;margin-bottom:.5rem}
.feat p{font-size:.88rem;opacity:.78;line-height:1.8}

/* 星图轨迹区 */
.starmap{position:relative;height:340px;border:1px solid rgba(201,161,74,.14);border-radius:8px;overflow:hidden;background:radial-gradient(ellipse at 50% 60%,#0d1814,var(--iron))}