*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:120px;-ms-overflow-style:none;scrollbar-width:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:root{
--font-sans:"PingFang SC","SF Pro Text","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",sans-serif;
--font-display:"PingFang SC","SF Pro Display","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",sans-serif;
--text-label:12px;
--text-body:17px;
--text-body-large:18px;
--text-title:clamp(2.4rem,4.4vw,4.4rem);
--text-hero:clamp(3.1rem,6vw,5.8rem);
--text-card:clamp(1.85rem,2.45vw,2.45rem);
}
body{
font-family:var(--font-sans);
background:#07110f;
color:#fff;
overflow-x:hidden;
cursor:default;
line-height:1.72;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
}
[id]{scroll-margin-top:120px}
a:focus-visible,button:focus-visible{
outline:1px solid rgba(198,168,106,.72);
outline-offset:4px;
}
body::before{
content:"";
position:fixed;
inset:0;
background:
radial-gradient(circle at 20% 20%,rgba(198,168,106,.08),transparent 25%),
radial-gradient(circle at 80% 30%,rgba(111,168,154,.08),transparent 25%),
linear-gradient(to bottom,#081511,#0d221d,#07110f);
z-index:-3;
}







.hero{
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding:120px 20px;
position:relative;
overflow:hidden;
}
.hero-light{
position:absolute;
width:860px;
height:860px;
background:radial-gradient(circle,rgba(198,168,106,.15),transparent 60%);
filter:blur(20px);
animation:float 12s ease-in-out infinite;
}
.small{
color:rgba(198,168,106,.55);
letter-spacing:.18em;
margin-bottom:18px;
text-transform:uppercase;
font-size:var(--text-label);
font-weight:500;
opacity:.88;
}
h1{
font-family:var(--font-display);
font-size:var(--text-hero);
font-weight:300;
line-height:1.1;
letter-spacing:-.02em;
background:linear-gradient(to right,#f9e6c3,#C6A86A);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.desc{
margin-top:32px;
color:rgba(255,255,255,.6);
line-height:1.75;
font-size:var(--text-body-large);
max-width:35em;
}
.enter{
display:inline-flex;
align-items:center;
justify-content:center;
margin-top:0;
padding:18px 38px;
min-height:58px;
font-size:15px;
letter-spacing:.08em;
font-weight:500;
border-radius:999px;
position:relative;
overflow:hidden;
border:1px solid rgba(198,168,106,.25);
background:rgba(255,255,255,.04);
backdrop-filter:blur(24px) saturate(140%);
color:#C6A86A;
cursor:pointer;
text-decoration:none;
box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
transition:transform .5s cubic-bezier(.25,1.2,.5,1),box-shadow .5s ease,border-color .4s ease;
}
.enter::before{
content:"";
position:absolute;
top:0;left:-120%;
width:80%;height:100%;
background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);
transform:skewX(-25deg);
transition:left .8s ease;
z-index:2;
pointer-events:none;
}
.enter:hover{
transform:translateY(-3px);
border-color:rgba(198,168,106,.4);
box-shadow:0 20px 50px rgba(198,168,106,.12),inset 0 1px 0 rgba(255,255,255,.10);
}
.enter:hover::before{left:130%}
.enter:active{transform:scale(.97)}
.enter-secondary{
background:rgba(111,168,154,.08);
border-color:rgba(111,168,154,.25);
color:#d8ebe6;
}
.section{
padding:140px 8%;
position:relative;
}
.title{
font-family:var(--font-display);
font-size:var(--text-title);
font-weight:300;
margin-bottom:24px;
line-height:1.14;
letter-spacing:-.02em;
background:linear-gradient(to right,#f7e6c8,#C6A86A);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.text{
max-width:40em;
line-height:1.75;
color:rgba(255,255,255,.6);
font-size:var(--text-body);
}
.fade{
opacity:0;
filter:blur(4px);
transform:translate3d(0,30px,0);
transition:opacity .8s cubic-bezier(.25,1.2,.5,1),transform .9s cubic-bezier(.25,1.2,.5,1),filter .7s ease;
will-change:auto;
}
.fade.animating{will-change:opacity,transform,filter}
.fade.show{
opacity:1;
filter:blur(0);
transform:translate3d(0,0,0);
}
.heritage-hero{
padding:150px 7% 90px;
}
.hero-content{
position:relative;
z-index:2;
max-width:920px;
}
.hero-actions{
display:flex;
gap:18px;
justify-content:center;
flex-wrap:wrap;
margin-top:46px;
}
.finale-content .enter{margin-top:34px}
.hero-mist,
.hero-pattern{
position:absolute;
pointer-events:none;
}
.hero-mist{
border-radius:50%;
filter:blur(42px);
opacity:.65;
}
.hero-mist-a{
width:420px;
height:420px;
top:20%;
left:8%;
background:radial-gradient(circle,rgba(111,168,154,.18),transparent 70%);
}
.hero-mist-b{
width:520px;
height:520px;
right:-8%;
bottom:8%;
background:radial-gradient(circle,rgba(198,168,106,.16),transparent 70%);
}
.hero-pattern{
inset:18% 12%;
border:1px solid rgba(198,168,106,.08);
border-radius:40px;
background:
linear-gradient(rgba(198,168,106,.03) 1px,transparent 1px),
linear-gradient(90deg,rgba(198,168,106,.03) 1px,transparent 1px);
background-size:84px 84px;
mask-image:radial-gradient(circle at center,rgba(0,0,0,1),transparent 88%);
}
.section-head{
display:grid;
gap:18px;
margin-bottom:56px;
}
.hall-layout{
display:grid;
grid-template-columns:220px minmax(0,1.2fr) 320px;
gap:28px;
align-items:start;
}
.hall-side{
position:sticky;
top:110px;
}
.side-caption{
margin-bottom:18px;
color:rgba(255,255,255,.45);
letter-spacing:.26em;
font-size:11px;
text-transform:uppercase;
}
.jade-tab{
width:100%;
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
margin-bottom:14px;
padding:18px 20px;
border:none;
border-radius:24px;
background:
linear-gradient(145deg,rgba(111,168,154,.12),rgba(255,255,255,.03)),
rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.07);
backdrop-filter:blur(24px) saturate(140%);
cursor:pointer;
transition:.45s;
text-align:left;
}
.jade-tab:hover,
.jade-tab.active{
transform:translateY(-4px);
border-color:rgba(198,168,106,.3);
box-shadow:0 18px 40px rgba(0,0,0,.16);
}
.jade-tab.active{
background:
linear-gradient(145deg,rgba(198,168,106,.14),rgba(111,168,154,.08)),
rgba(255,255,255,.05);
}
.jade-index{
color:rgba(198,168,106,.55);
font-size:12px;
letter-spacing:.24em;
}
.jade-label{
font-size:19px;
font-weight:300;
color:#f0dfbb;
}
.hall-center,
.guide-card,
.scene-card,
.timeline-card,
.finale-content{
position:relative;
overflow:hidden;
border-radius:34px;
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.07);
backdrop-filter:blur(24px) saturate(140%);
}
.hall-center::before,
.guide-card::before,
.scene-card::before,
.timeline-card::before,
.finale-content::before{
content:"";
position:absolute;
inset:0;
background:radial-gradient(circle at top right,rgba(198,168,106,.14),transparent 42%);
pointer-events:none;
}
.hall-center{
padding:32px;
min-height:920px;
}
.heritage-stage{
display:none;
grid-template-columns:minmax(0,1fr);
gap:24px;
}
.heritage-stage.active{display:grid}
.stage-visual{
position:relative;
}
.visual-glow{
position:absolute;
inset:auto 8% -14% 8%;
height:180px;
background:radial-gradient(circle,rgba(198,168,106,.16),transparent 70%);
filter:blur(26px);
pointer-events:none;
}
.image-placeholder{
position:relative;
overflow:hidden;
border:1px solid rgba(255,255,255,.07);
background:
linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.02)),
radial-gradient(circle at top,rgba(198,168,106,.18),transparent 42%),
linear-gradient(180deg,rgba(7,17,15,.3),rgba(7,17,15,.74));
box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 20px 60px rgba(0,0,0,.2);
}
.image-placeholder::before{
content:"";
position:absolute;
inset:0;
background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.05),transparent 60%);


}
.image-placeholder span{
position:absolute;
left:22px;
right:22px;
bottom:18px;
color:rgba(255,255,255,.78);
font-size:12px;
letter-spacing:.22em;
line-height:1.8;
text-transform:uppercase;
}
.visual-placeholder{
min-height:400px;
border-radius:30px;
}
.stage-content{
display:grid;
gap:14px;
}
.stage-meta,
.guide-role,
.timeline-era{
color:rgba(198,168,106,.55);
letter-spacing:.18em;
font-size:11px;
text-transform:uppercase;
}
.stage-content h3,
.scene-card h3{
font-family:var(--font-display);
font-size:var(--text-card);
font-weight:300;
line-height:1.28;
letter-spacing:-.015em;
color:#f2dfbc;
}
.stage-content p,
.detail-card p,
.scene-card p,
.timeline-card p,
.guide-script p,
.guide-note{
color:rgba(255,255,255,.6);
line-height:1.9;
font-size:16px;
}
.detail-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:20px;
}
.detail-card{
display:grid;
gap:16px;
}
.detail-placeholder{
min-height:200px;
border-radius:24px;
}
.guide-card{
padding:28px 24px;
}
.guide-head{
display:flex;
align-items:center;
gap:16px;
margin-bottom:24px;
}
.guide-avatar{
width:88px;
height:106px;
border-radius:22px;
flex:0 0 auto;
}
.guide-name{
font-family:var(--font-display);
font-size:clamp(1.7rem,2vw,2rem);
font-weight:300;
color:#f2dfbc;
}
.guide-script{
display:grid;
gap:10px;
padding:22px 0;
border-top:1px solid rgba(198,168,106,.12);
border-bottom:1px solid rgba(198,168,106,.12);
min-height:250px;
}
.guide-note{
padding-top:18px;
font-size:15px;
}
.scene-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:24px;
}
.scene-card{
padding:28px;
display:grid;
gap:18px;
}
.scene-placeholder{
min-height:300px;
border-radius:26px;
}
.timeline-ribbon{
display:grid;
grid-template-columns:repeat(4,minmax(280px,1fr));
gap:22px;
overflow-x:auto;
padding-bottom:12px;
scrollbar-width:none;
scroll-snap-type:x proximity;
}
.timeline-ribbon::-webkit-scrollbar{display:none}
.timeline-card{
padding:28px;
display:grid;
gap:18px;
min-height:430px;
scroll-snap-align:start;
}
/* .page-transition-overlay → common.css */
.timeline-placeholder{
min-height:220px;
border-radius:24px;
}
.quote{
min-height:70vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding:40px;
}
.quote h2{
font-family:var(--font-display);
font-size:clamp(2.6rem,4.9vw,4.9rem);
line-height:1.52;
font-weight:300;
letter-spacing:-.018em;
background:linear-gradient(to right,#f9e9cb,#C6A86A);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.finale-section{
position:relative;
min-height:84vh;
padding:120px 7% 110px;
overflow:hidden;
}
.finale-glow{
position:absolute;
inset:18% 18% auto;
height:420px;
background:radial-gradient(circle,rgba(198,168,106,.16),transparent 62%);
filter:blur(30px);
pointer-events:none;
}
.finale-content{
max-width:980px;
margin:0 auto;
padding:72px 48px;
}
.finale-text{
margin:18px auto 0;
max-width:680px;
text-align:center;
}
/* @keyframes float → common.css */
@media(max-width:1180px){
.hall-layout{
grid-template-columns:1fr;
}
.hall-side{
position:relative;
top:auto;
}
.hall-menu{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
}
.jade-tab{margin-bottom:0}
.guide-script{min-height:auto}
.scene-grid{
grid-template-columns:1fr;
}
.timeline-ribbon{
grid-template-columns:repeat(4,78vw);
}
}
@media(max-width:768px){
.nav{width:92%;overflow:auto}
.nav ul{gap:16px}
.section{padding:100px 24px}
.heritage-hero{padding:130px 24px 90px}
.hero-actions{justify-content:center}
.desc{font-size:16px}
.hall-center,
.guide-card,
.scene-card,
.timeline-card,
.finale-content{padding:24px}
.hall-menu{
grid-template-columns:1fr;
}
.detail-grid{
grid-template-columns:1fr;
}
.visual-placeholder{
min-height:320px;
}
.scene-placeholder{
min-height:240px;
}
.timeline-ribbon{
grid-template-columns:repeat(4,84vw);
}
.finale-section{
padding:100px 24px;
min-height:auto;
}
.finale-text{text-align:left}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{
animation:none !important;
transition:none !important;
}
.fade,.fade.show{
opacity:1;
filter:none;
transform:none;
}
}
/* =========================
   鼠标高光
========================= */

.cursor-glow{
  position:fixed;
  width:650px;
  height:650px;

  left:0;
  top:0;

  pointer-events:none;
  z-index:9999;

  border-radius:50%;

  transform:
    translate(-50%,-50%);

  background:
    radial-gradient(
      circle,
      rgba(255,236,188,.22) 0%,
      rgba(255,215,160,.14) 25%,
      rgba(255,180,120,.08) 45%,
      transparent 75%
    );

  filter:blur(80px);

  mix-blend-mode:screen;

  opacity:0;
  transition:opacity 0.3s ease;
}

/* 页面内容保持在高光上方 */

main{
  position:relative;
  z-index:2;
}
.cursor-glow{
    position:fixed;
    z-index:999;
    pointer-events:none;
}