/* ============ 基础 ============ */
:root{
  --bg:#120d0c; --ink:#f4ead9; --accent:#c0392b; --glow:#d4a24e;
  --serif-cn:"Noto Serif SC", serif;
  --serif-en:"Cormorant Garamond","Noto Serif SC", serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --pad: clamp(20px, 6vw, 110px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--serif-cn);
  overflow-x:hidden;
  transition:background 1.4s var(--ease), color 1.4s var(--ease);
  line-height:1.7; letter-spacing:.02em;
}
body.preload *{transition:none !important}
img{display:block; max-width:100%}
::selection{background:var(--accent); color:#fff}

/* 滚动条 */
body::-webkit-scrollbar{width:0}

/* ============ 特效层 ============ */
/* 氛围粒子（每章不同：金尘/萤火/花瓣/波光） */
.fx-particles{position:fixed; inset:0; z-index:1; width:100%; height:100%;
  pointer-events:none; opacity:.9}

/* 胶片质感：颗粒噪点 + 漏光 + 暗角（整层不挡点击） */
.fx-film{position:fixed; inset:0; z-index:100; pointer-events:none; overflow:hidden}
.fx-grain{position:absolute; inset:-60%; opacity:.06; will-change:transform;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:120px 120px; animation:grain .9s steps(3) infinite}
@keyframes grain{
  0%{transform:translate(0,0)} 33%{transform:translate(-4px,3px)}
  66%{transform:translate(3px,-2px)} 100%{transform:translate(0,0)}}
.fx-vignette{position:absolute; inset:0;
  background:radial-gradient(125% 100% at 50% 42%, transparent 52%, rgba(0,0,0,.5) 100%)}
.fx-leak{position:absolute; inset:0; opacity:0; mix-blend-mode:screen;
  background:radial-gradient(45% 60% at 82% 18%, rgba(255,184,120,.55), transparent 70%),
             radial-gradient(40% 55% at 12% 88%, rgba(255,150,170,.4), transparent 72%);
  animation:leak 17s ease-in-out infinite}
@keyframes leak{0%,100%{opacity:0} 6%{opacity:.16} 13%{opacity:0}
  52%{opacity:0} 60%{opacity:.13} 68%{opacity:0}}

/* ============ 访问密码门 ============ */
.gate{position:fixed; inset:0; z-index:400; background:#0c0807;
  display:grid; place-items:center; text-align:center; padding:24px;
  transition:opacity .6s var(--ease)}
.gate[hidden]{display:none}
.gate.out{opacity:0; pointer-events:none}
.gate-card{max-width:380px; width:100%; animation:rise 1s var(--ease) both}
.gate-mark{font-family:var(--serif-en); font-size:30px; letter-spacing:.12em;
  color:var(--glow); margin-bottom:26px}
.gate-title{font-family:var(--serif-cn); font-size:18px; color:#f4ead9; line-height:1.9; font-weight:400}
.gate-sub{font-family:var(--serif-cn); font-size:13px; letter-spacing:.2em;
  color:rgba(244,234,217,.5); margin:14px 0 30px}
.gate-input{width:100%; background:transparent; border:none;
  border-bottom:1px solid rgba(244,234,217,.3); color:#f4ead9;
  font-family:var(--serif-cn); font-size:17px; text-align:center; letter-spacing:.2em;
  padding:12px 6px; outline:none; transition:border-color .4s var(--ease)}
.gate-input:focus{border-bottom-color:var(--glow)}
.gate-input::placeholder{color:rgba(244,234,217,.3); letter-spacing:.35em}
.gate-btn{margin-top:30px; padding:13px 46px; background:transparent; cursor:pointer;
  color:#f4ead9; border:1px solid rgba(244,234,217,.4); border-radius:50px;
  font-family:var(--serif-cn); font-size:14px; letter-spacing:.34em; text-indent:.34em;
  transition:.5s var(--ease)}
.gate-btn:hover{background:#f4ead9; color:#1a0f0d; letter-spacing:.4em}
.gate-err{height:18px; margin-top:20px; font-size:12px; letter-spacing:.1em;
  color:#e08a4c; opacity:0; transition:opacity .3s}
.gate-err.show{opacity:1}

/* ============ Loader ============ */
#loader{position:fixed; inset:0; z-index:200; background:var(--bg);
  display:grid; place-items:center; transition:opacity 1s var(--ease), visibility 1s}
#loader.done{opacity:0; visibility:hidden}
.loader-inner{width:46px; height:46px; border-radius:50%;
  border:1px solid rgba(255,255,255,.18); position:relative}
.loader-inner span{position:absolute; inset:-1px; border-radius:50%;
  border:1px solid transparent; border-top-color:var(--glow);
  animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============ 常驻控制 ============ */
.ctrl{position:fixed; top:24px; right:24px; z-index:120;
  width:42px; height:42px; border-radius:50%;
  background:rgba(0,0,0,.28); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.22); color:var(--ink);
  cursor:pointer; display:grid; place-items:center; transition:.4s var(--ease)}
.ctrl:hover{background:rgba(0,0,0,.5); transform:scale(1.06)}
.ctrl svg{width:20px; height:20px; fill:currentColor}
.ctrl .ic-off{display:none}
.ctrl.muted .ic-on{display:none}
.ctrl.muted .ic-off{display:block}

/* 章节圆点导航 */
#dots{position:fixed; right:26px; top:50%; transform:translateY(-50%);
  z-index:110; display:flex; flex-direction:column; gap:14px; opacity:0;
  transition:opacity .8s var(--ease)}
#dots.show{opacity:1}
#dots button{width:9px; height:9px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(255,255,255,.5); background:transparent; padding:0;
  transition:.4s var(--ease); position:relative}
#dots button::after{content:attr(data-label); position:absolute; right:20px; top:50%;
  transform:translateY(-50%); white-space:nowrap; font-family:var(--serif-cn);
  font-size:12px; letter-spacing:.18em; color:var(--ink); opacity:0;
  pointer-events:none; transition:.35s var(--ease)}
#dots button:hover::after{opacity:.85}
#dots button.active{background:var(--glow); border-color:var(--glow);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--glow) 22%, transparent)}

/* ============ 封面 ============ */
.cover{position:relative; height:100svh; min-height:560px;
  display:grid; place-items:center; text-align:center; overflow:hidden; isolation:isolate}
.cover-bg{position:absolute; inset:0; z-index:-2; background-size:cover;
  background-position:center; transform:scale(1.08);
  animation:coverZoom 18s var(--ease) forwards; filter:saturate(.92)}
@keyframes coverZoom{to{transform:scale(1)}}
.cover-veil{position:absolute; inset:0; z-index:-1;
  background:radial-gradient(120% 90% at 50% 35%, rgba(10,6,5,.25), rgba(10,6,5,.78) 78%)}
.cover-inner{padding:0 24px}
.cover-pre{font-family:var(--serif-en); letter-spacing:.7em; font-size:clamp(11px,1.6vw,15px);
  text-indent:.7em; color:rgba(244,234,217,.82); margin-bottom:30px;
  opacity:0; animation:rise 1.4s var(--ease) .3s forwards}
.cover-names{font-family:var(--serif-en); font-weight:500;
  font-size:clamp(44px,9vw,128px); line-height:1.05; letter-spacing:.02em;
  display:flex; align-items:center; justify-content:center; gap:clamp(14px,3vw,40px); flex-wrap:wrap}
.cover-names span{font-family:var(--serif-cn); font-weight:400;
  opacity:0; animation:rise 1.5s var(--ease) forwards}
.cover-names span:first-child{animation-delay:.5s}
.cover-names span:last-child{animation-delay:.9s}
.cover-names i{font-style:normal; color:var(--glow); font-size:.7em;
  opacity:0; animation:rise 1.5s var(--ease) .7s forwards, pulse 4s ease-in-out 2s infinite}
@keyframes pulse{50%{opacity:.55}}
.cover-date{font-family:var(--serif-en); letter-spacing:.55em; text-indent:.55em;
  font-size:clamp(14px,2.2vw,20px); margin-top:28px; color:rgba(244,234,217,.78);
  opacity:0; animation:rise 1.5s var(--ease) 1.2s forwards}
.cover-days{font-family:var(--serif-cn); font-weight:300; font-size:clamp(12px,1.7vw,15px);
  letter-spacing:.28em; text-indent:.28em; margin-top:16px; color:var(--glow);
  opacity:0; animation:rise 1.5s var(--ease) 1.5s forwards}
.cover-days:empty{display:none}
.cover-days b{font-family:var(--serif-en); font-weight:500; font-size:1.35em;
  letter-spacing:.06em; margin:0 .15em}
.enter{margin-top:54px; padding:14px 40px; background:transparent; cursor:pointer;
  color:var(--ink); border:1px solid rgba(244,234,217,.4); border-radius:50px;
  font-family:var(--serif-cn); font-size:14px; letter-spacing:.34em; text-indent:.34em;
  opacity:0; animation:rise 1.5s var(--ease) 1.5s forwards; transition:.5s var(--ease)}
.enter:hover{background:var(--ink); color:#1a0f0d; border-color:var(--ink); letter-spacing:.4em}
@keyframes rise{from{opacity:0; transform:translateY(24px)} to{opacity:1; transform:none}}

.scroll-hint{position:absolute; bottom:30px; left:50%; transform:translateX(-50%);
  width:1px; height:54px; background:linear-gradient(rgba(244,234,217,.55), transparent);
  opacity:0; animation:rise 1.5s var(--ease) 2s forwards; overflow:hidden}
.scroll-hint span{position:absolute; top:-50%; left:0; width:100%; height:50%;
  background:var(--glow); animation:drop 2.2s var(--ease) infinite}
@keyframes drop{0%{top:-50%}60%,100%{top:100%}}

/* ============ 章节 ============ */
.chapter{position:relative}
/* 章节 hero */
.ch-hero{position:relative; height:100svh; min-height:560px; overflow:hidden;
  display:grid; place-items:center; text-align:center; isolation:isolate}
.ch-hero-img{position:absolute; inset:0; z-index:-2; background-size:cover;
  background-position:center 50%; transform:scale(1.12); transition:transform 1.8s var(--ease); will-change:transform,background-position}
.ch-hero.in .ch-hero-img{transform:scale(1.04)}
.ch-hero-veil{position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(8,5,5,.55), rgba(8,5,5,.32) 40%, rgba(8,5,5,.82))}
.ch-head{padding:0 24px}
.ch-no{font-family:var(--serif-en); letter-spacing:.5em; text-indent:.5em;
  font-size:13px; color:var(--glow); margin-bottom:22px;
  opacity:0; transform:translateY(16px); filter:blur(4px);
  transition:opacity 1s var(--ease) .35s, transform 1s var(--ease) .35s, filter 1s var(--ease) .35s}
.ch-hero.in .ch-no{opacity:1; transform:none; filter:blur(0)}
.ch-no::before,.ch-no::after{content:""; display:inline-block; width:34px; height:1px;
  background:var(--glow); vertical-align:middle; margin:0 16px; opacity:.7}
.ch-title{font-family:var(--serif-cn); font-weight:500; font-size:clamp(38px,7vw,86px);
  letter-spacing:.14em; text-indent:.14em; transform-origin:center;
  opacity:0; transform:translateY(26px) scale(1.05); filter:blur(9px);
  transition:opacity 1.3s var(--ease) .55s, transform 1.3s var(--ease) .55s, filter 1.3s var(--ease) .55s}
.ch-hero.in .ch-title{opacity:1; transform:none; filter:blur(0)}
.ch-en{font-family:var(--serif-en); font-style:italic; letter-spacing:.28em;
  font-size:clamp(15px,2.4vw,24px); color:rgba(244,234,217,.75); margin-top:14px}
.ch-sub{margin-top:26px; font-size:13px; letter-spacing:.3em; text-indent:.3em;
  color:rgba(244,234,217,.6)}
.ch-lead{max-width:30em; margin:30px auto 0; font-size:clamp(14px,1.7vw,16px);
  line-height:2.1; color:rgba(244,234,217,.82); font-weight:300}

/* 画廊：紧凑瀑布流（JS 按最矮列放置） */
.ch-gallery{padding:clamp(46px,7vw,96px) clamp(10px,2.4vw,46px)}
.gal{--gap:clamp(8px,1.1vw,16px); display:flex; gap:var(--gap); align-items:flex-start}
.gal-col{flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:var(--gap)}
.shot{position:relative; opacity:0; transform:translateY(40px);
  transition:opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease)}
/* 进场方向随机（app.js 给每张随机赋一个类） */
.shot.e-up{transform:translateY(48px)}
.shot.e-left{transform:translateX(-46px) translateY(20px)}
.shot.e-right{transform:translateX(46px) translateY(20px)}
.shot.e-zoom{transform:scale(.88); filter:blur(7px)}
.shot.in{opacity:1; transform:none; filter:blur(0)}
.shot figure{overflow:hidden; background:rgba(255,255,255,.03); line-height:0}
.shot img{width:100%; height:auto; display:block; transition:transform 1.4s var(--ease); cursor:zoom-in}
.shot:hover img{transform:scale(1.04)}

/* 章间分隔语 */
.ch-rule{text-align:center; padding:clamp(20px,5vw,60px) 0 0;
  font-family:var(--serif-en); font-style:italic; letter-spacing:.2em;
  color:var(--glow); font-size:clamp(14px,2vw,18px); opacity:.85}
.ch-rule::before{content:"❋"; display:block; margin-bottom:18px; font-style:normal; opacity:.7}

/* ============ 尾声 ============ */
.closing{min-height:100svh; display:grid; place-items:center; text-align:center;
  padding:18vh var(--pad); background:#0c0807}
.closing-inner{max-width:720px}
.closing-en{font-family:var(--serif-en); letter-spacing:.55em; text-indent:.55em;
  font-size:13px; color:var(--glow); margin-bottom:44px}
.letter{font-family:var(--serif-cn); font-weight:300;
  font-size:clamp(18px,2.8vw,27px); line-height:2.5; color:#f4ead9}
.letter .ln{display:block; opacity:0; transform:translateY(18px);
  transition:opacity 1.1s var(--ease), transform 1.1s var(--ease)}
.letter .ln.in{opacity:1; transform:none}
.letter .ln.sign{margin-top:1.4em; color:var(--glow); font-size:.8em; letter-spacing:.1em}
.closing-days{margin-top:48px; font-family:var(--serif-cn); font-weight:300;
  font-size:clamp(13px,1.9vw,16px); letter-spacing:.26em; text-indent:.26em; color:var(--glow)}
.closing-days:empty{display:none}
.closing-days b{font-family:var(--serif-en); font-weight:500; font-size:1.4em;
  letter-spacing:.06em; margin:0 .18em}
.closing-seal{margin-top:32px; font-family:var(--serif-en); letter-spacing:.32em;
  font-size:13px; color:rgba(244,234,217,.55)}

/* ============ Lightbox ============ */
.lightbox{position:fixed; inset:0; z-index:300; background:rgba(8,5,5,.96);
  display:grid; place-items:center; opacity:0; transition:opacity .45s var(--ease)}
.lightbox.show{opacity:1}
.lightbox[hidden]{display:none}
.lb-stage{max-width:94vw; max-height:90vh}
.lb-stage img{max-width:94vw; max-height:90vh; width:auto; height:auto;
  box-shadow:0 30px 90px rgba(0,0,0,.6); animation:lbin .5s var(--ease)}
@keyframes lbin{from{opacity:0; transform:scale(.96)} to{opacity:1; transform:none}}
.lb-close,.lb-prev,.lb-next{position:fixed; z-index:310; background:none; border:none;
  color:rgba(244,234,217,.8); cursor:pointer; transition:.3s var(--ease)}
.lb-close{top:24px; right:30px; font-size:40px; line-height:1}
.lb-prev,.lb-next{top:50%; transform:translateY(-50%); font-size:54px; padding:20px}
.lb-prev{left:10px} .lb-next{right:10px}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{color:#fff; transform:translateY(-50%) scale(1.1)}
.lb-close:hover{transform:scale(1.15)}
@media(max-width:760px){.lb-prev,.lb-next{font-size:38px; padding:10px}}

/* 减少动效偏好 */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; transition-duration:.2s !important}
}