:root{
  --night:#0b0e29;
  --night-2:#171a45;
  --violet:#2c2863;
  --gold:#f6d88a;
  --gold-2:#ffeab0;
  --gold-deep:#c9973f;
  --red:#b8342a;
  --ink:#fdf3da;
  --ink-dim:#c9c3e6;
  --brush:"Ma Shan Zheng","STXingkai","STKaiti","KaiTi","楷体",serif;
  --serif:"Noto Serif SC","Songti SC","SimSun","宋体",serif;
  --mx:0; --my:0;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--night)}
body{
  background:linear-gradient(180deg,var(--night) 0%,var(--night-2) 40%,#1d1a4a 70%,var(--night) 100%);
  color:var(--ink);font-family:var(--serif);line-height:1.7;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.is-locked{overflow:hidden;height:100svh}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
input{font:inherit}

/* ================= 开场 ================= */
#intro{
  position:fixed;inset:0;z-index:50;
  background:radial-gradient(ellipse at 50% 110%,#2a2466 0%,#12143a 45%,#05061a 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(18px,4vh,40px);
  overflow:hidden;padding:40px 16px;
}
#intro.gone{display:none}
#introStars{position:absolute;inset:0;width:100%;height:100%}
.intro-clouds .ic{
  position:absolute;border-radius:50%;filter:blur(30px);opacity:0;
  background:radial-gradient(closest-side,rgba(170,150,255,.35),transparent);
  animation:cloudIn 4s ease-out forwards, drift 26s ease-in-out infinite alternate;
}
.ic1{width:70vw;height:22vw;left:-15vw;bottom:8vh}
.ic2{width:60vw;height:18vw;right:-18vw;bottom:22vh;animation-delay:.6s,0s!important}
.ic3{width:50vw;height:14vw;left:25vw;bottom:-4vh;animation-delay:1.1s,0s!important}
@keyframes cloudIn{to{opacity:1}}
@keyframes drift{from{transform:translateX(-3vw)}to{transform:translateX(3vw)}}

.intro-moon{
  position:relative;flex:none;width:min(34vmin,240px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 38% 35%,#fffbe8 0%,#ffeeb0 38%,#f3cf73 72%,#d8a74a 100%);
  box-shadow:0 0 40px 10px rgba(255,226,140,.55),0 0 140px 50px rgba(255,210,120,.25),0 0 300px 120px rgba(160,140,255,.15);
  animation:moonRise 3.2s cubic-bezier(.2,.7,.2,1) both;
}
.intro-moon i{
  position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(circle at 30% 60%,rgba(200,150,60,.25) 0 9%,transparent 10%),
    radial-gradient(circle at 62% 30%,rgba(200,150,60,.2) 0 6%,transparent 7%),
    radial-gradient(circle at 70% 68%,rgba(200,150,60,.18) 0 12%,transparent 13%);
  filter:blur(2px);
}
.intro-moon::after{ /* 月晕呼吸 */
  content:"";position:absolute;inset:-35%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,230,160,.35),transparent 70%);
  animation:breathe 4s ease-in-out infinite;
}
@keyframes moonRise{
  0%{transform:translateY(60vh) scale(.55);filter:brightness(.6)}
  100%{transform:none;filter:brightness(1)}
}
@keyframes breathe{50%{scale:1.15;opacity:.6}}
.intro-moon.charge{animation:moonCharge .65s ease-in-out forwards}
@keyframes moonCharge{
  0%{transform:none}
  55%{transform:scale(.94)}
  100%{transform:scale(1.04)}
}

.intro-text{
  position:relative;z-index:1;display:flex;flex-direction:row-reverse;gap:1.2em;font-family:var(--brush);
  font-size:clamp(20px,4.2vh,38px);letter-spacing:.3em;color:var(--gold-2);
  text-shadow:0 0 18px rgba(255,210,120,.6);
}
.intro-text .line{writing-mode:vertical-rl;white-space:nowrap;opacity:0;clip-path:inset(0 0 100% 0);animation:brush 1.6s ease-out forwards}
.intro-text .l1{animation-delay:1.9s}
.intro-text .l2{animation-delay:2.6s}
@keyframes brush{to{opacity:1;clip-path:inset(0 0 0 0)}}

.enter-btn{
  position:relative;z-index:1;flex:none;white-space:nowrap;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:14px 38px 12px;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,226,150,.2),rgba(255,226,150,.06));
  border:1px solid rgba(255,226,150,.55);color:var(--gold-2);
  box-shadow:0 0 0 0 rgba(255,220,140,.5),inset 0 0 20px rgba(255,220,140,.15);
  opacity:0;animation:fadeUp 1s 3.6s ease-out forwards, ping 2.4s 4.6s ease-out infinite;
  transition:background .3s,transform .3s;backdrop-filter:blur(4px);
}
.enter-btn span{font-family:var(--brush);font-size:26px;letter-spacing:.3em;padding-left:.3em}
.enter-btn small{font-size:12px;letter-spacing:.2em;opacity:.7}
.enter-btn:hover{background:rgba(255,226,150,.25)}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(255,220,140,.5),inset 0 0 20px rgba(255,220,140,.15)}100%{box-shadow:0 0 0 22px rgba(255,220,140,0),inset 0 0 20px rgba(255,220,140,.15)}}
.skip-btn{position:absolute;top:18px;right:20px;font-size:13px;color:var(--ink-dim);opacity:.6;letter-spacing:.2em;padding:6px 10px}
.skip-btn:hover{opacity:1}


#fx{position:fixed;inset:0;width:100%;height:100%;z-index:40;pointer-events:none}

/* ================= 首屏 ================= */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;isolation:isolate}
/* 月门展开：首屏临时盖在开场层上面，圆形裁切从月亮处放大 */
.hero.gate-open{
  z-index:55;
  -webkit-clip-path:circle(var(--gr) at var(--cx) var(--cy));
          clip-path:circle(var(--gr) at var(--cx) var(--cy));
  transition:clip-path 1.5s cubic-bezier(.65,0,.25,1),-webkit-clip-path 1.5s cubic-bezier(.65,0,.25,1);
}
/* 转场期间先不显示叠加光效和粒子，减轻手机 GPU 负担 */
.overlays{position:absolute;inset:0;pointer-events:none;transition:opacity 1.2s ease}
body.gating .overlays{opacity:0}
.hero-bg{
  position:absolute;inset:-60px;z-index:-2;
  background:radial-gradient(ellipse at 50% 30%,transparent 30%,rgba(8,8,32,.75) 80%),url(assets/poster-blur.jpg) center/cover;filter:saturate(1.1) brightness(.42) hue-rotate(-8deg);
}
#heroStars{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.stage-wrap{
  position:absolute;inset:0;display:flex;justify-content:center;perspective:1400px;
}
.stage{
  position:relative;height:100%;aspect-ratio:2/3;flex:none;overflow:hidden;
  transform:translate3d(calc(var(--mx)*-10px),calc(var(--my)*-8px),0) rotateY(calc(var(--mx)*2deg)) rotateX(calc(var(--my)*-1.5deg));
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
  -webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
@media (max-aspect-ratio:3/4){.stage{-webkit-mask:none;mask:none}}
@media (hover:none){.stage{transform:none;transition:none}}
.poster{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none}
body.revealed .poster{animation:kenburns 3.2s cubic-bezier(.15,.7,.2,1) both}
@keyframes kenburns{from{transform:scale(1.14)}to{transform:none}}

/* 叠加光效（百分比坐标对应原图 1024×1536） */
.glow{position:absolute;border-radius:50%;pointer-events:none;mix-blend-mode:screen;translate:-50% -50%;aspect-ratio:1}
.moon-glow{
  left:77.6%;top:21.4%;width:62%;
  background:radial-gradient(closest-side,rgba(255,236,170,.0) 58%,rgba(255,226,150,.45) 72%,rgba(255,210,130,.12) 86%,transparent);
  animation:moonPulse 5s ease-in-out infinite;
}
@keyframes moonPulse{50%{scale:1.06;opacity:.65}}
.rays{
  position:absolute;left:77.6%;top:21.4%;width:130%;aspect-ratio:1;translate:-50% -50%;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(255,230,160,.10) 0 4deg,transparent 4deg 13deg);
  -webkit-mask:radial-gradient(closest-side,transparent 24%,#000 30%,transparent 72%);
          mask:radial-gradient(closest-side,transparent 24%,#000 30%,transparent 72%);
  mix-blend-mode:screen;animation:spin 90s linear infinite;opacity:0;transition:opacity 2s 1.2s;
}
body.revealed .rays{opacity:1}
@keyframes spin{to{rotate:360deg}}
.g-cake{left:38.6%;top:57.6%;width:24%;background:radial-gradient(closest-side,rgba(255,240,190,.55),transparent);animation:flicker 3.2s ease-in-out infinite}
.g-l1{left:17.8%;top:16%;width:10%;background:radial-gradient(closest-side,rgba(255,210,120,.7),transparent);animation:flicker 2.3s ease-in-out infinite}
.g-l2{left:56.4%;top:38.8%;width:9%;background:radial-gradient(closest-side,rgba(255,200,110,.7),transparent);animation:flicker 2.8s .4s ease-in-out infinite}
.g-l3{left:3%;top:30%;width:16%;background:radial-gradient(closest-side,rgba(255,210,130,.55),transparent);animation:flicker 3.4s .8s ease-in-out infinite}
.g-l4{left:73.5%;top:82%;width:16%;background:radial-gradient(closest-side,rgba(255,225,160,.6),transparent);animation:flicker 2.6s .2s ease-in-out infinite}
.g-l5{left:26.8%;top:91.6%;width:14%;background:radial-gradient(closest-side,rgba(255,240,210,.55),transparent);animation:flicker 3s 1s ease-in-out infinite}
@keyframes flicker{0%,100%{opacity:.55;scale:.95}30%{opacity:1;scale:1.05}55%{opacity:.7}75%{opacity:.95;scale:1.02}}

/* 书法“中秋”流光 */
.shimmer{
  position:absolute;left:19%;top:2%;width:37%;height:28%;pointer-events:none;overflow:hidden;mix-blend-mode:color-dodge;
}
.shimmer::before{
  content:"";position:absolute;top:-20%;bottom:-20%;left:-60%;width:40%;
  background:linear-gradient(100deg,transparent,rgba(255,220,150,.0) 20%,rgba(255,225,160,.75) 50%,transparent 80%);
  transform:skewX(-18deg);animation:sweep 5.5s 2.4s ease-in-out infinite;
}
@keyframes sweep{0%{left:-60%}45%,100%{left:130%}}
/* 水面粼光 */
.water{
  position:absolute;left:52%;top:61%;width:48%;height:9%;pointer-events:none;mix-blend-mode:screen;
  background:repeating-linear-gradient(0deg,transparent 0 5px,rgba(255,230,170,.16) 5px 6px);
  -webkit-mask:radial-gradient(ellipse at 50% 50%,#000,transparent 70%);mask:radial-gradient(ellipse at 50% 50%,#000,transparent 70%);
  animation:ripple 3s linear infinite;
}
@keyframes ripple{to{background-position:0 12px}}

/* 流星 */
.meteors i{
  position:absolute;width:140px;height:2px;border-radius:2px;opacity:0;
  background:linear-gradient(90deg,rgba(255,245,210,1),rgba(255,245,210,0));
  filter:drop-shadow(0 0 6px rgba(255,240,200,.9));
  transform:rotate(-32deg);animation:meteor 7s linear infinite;
}
.meteors i:nth-child(1){left:62%;top:4%;animation-delay:3s}
.meteors i:nth-child(2){left:40%;top:10%;animation-delay:6.5s;width:100px}
.meteors i:nth-child(3){left:85%;top:34%;animation-delay:10s;width:80px}
@keyframes meteor{
  0%{opacity:0;translate:0 0}
  3%{opacity:1}
  12%{opacity:0;translate:-260px 160px}
  100%{opacity:0;translate:-260px 160px}
}

/* 冉冉升起的孔明灯（纯 CSS） */
.sky-lanterns{position:absolute;inset:0;pointer-events:none}
.sl{
  position:absolute;bottom:-8%;width:var(--w,22px);aspect-ratio:3/4;
  animation:rise var(--t,16s) linear forwards;opacity:0;
}
.sl::before{
  content:"";position:absolute;inset:0;border-radius:40% 40% 18% 18%/50% 50% 18% 18%;
  background:radial-gradient(ellipse at 50% 80%,#fff5c8 0%,#ffcf6a 35%,#f08a30 75%,#b04a1f 100%);
  box-shadow:0 0 14px 4px rgba(255,180,80,.6),0 0 40px 10px rgba(255,160,60,.25);
}
.sl::after{content:"";position:absolute;left:30%;right:30%;bottom:-6%;height:10%;border-radius:50%;background:#fff3b0;filter:blur(2px)}
@keyframes rise{
  0%{opacity:0;transform:translate(0,0) scale(1)}
  8%{opacity:1}
  25%{transform:translate(calc(var(--sx)*.4),-30vh) scale(.9) rotate(4deg)}
  50%{transform:translate(calc(var(--sx)*-.2),-58vh) scale(.72) rotate(-3deg)}
  80%{opacity:.9}
  100%{opacity:0;transform:translate(var(--sx),-105vh) scale(.4) rotate(2deg)}
}
#sparkle{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* 对联（宽屏） */
.couplet{
  position:absolute;top:12vh;z-index:2;display:none;
  padding:26px 14px;border-radius:4px;
  background:linear-gradient(180deg,#a82a22,#c63a2d 50%,#9c241d);
  box-shadow:0 10px 40px rgba(0,0,0,.45),inset 0 0 0 3px rgba(246,216,138,.55),inset 0 0 0 7px #a82a22,inset 0 0 0 8px rgba(246,216,138,.4);
  transform-origin:top;scale:1 0;
}
.couplet span{writing-mode:vertical-rl;font-family:var(--brush);font-size:clamp(26px,2.6vw,40px);letter-spacing:.3em;color:var(--gold);text-shadow:0 2px 0 rgba(0,0,0,.25)}
.couplet.left{left:max(3vw,calc(50% - 33.3svh - 190px))}
.couplet.right{right:max(3vw,calc(50% - 33.3svh - 190px))}
.couplet::before{content:"";position:absolute;left:50%;top:-22px;width:2px;height:22px;background:var(--gold-deep)}
@media (min-aspect-ratio:5/4) and (min-width:1000px){.couplet{display:block}}
body.revealed .couplet{animation:unroll 1.6s 1.4s cubic-bezier(.3,.8,.3,1) forwards, sway 6s 3s ease-in-out infinite}
@keyframes unroll{to{scale:1 1}}
@keyframes sway{50%{rotate:1deg}}

.countdown{
  position:absolute;left:50%;bottom:74px;translate:-50% 0;z-index:3;white-space:nowrap;
  display:flex;align-items:center;gap:10px;padding:8px 18px;border-radius:999px;
  background:rgba(12,12,40,.55);border:1px solid rgba(246,216,138,.35);backdrop-filter:blur(8px);
  font-size:14px;color:var(--ink-dim);opacity:0;
}
.countdown b{font-family:var(--serif);font-weight:900;color:var(--gold);font-size:20px;margin:0 3px;font-variant-numeric:tabular-nums}
.cd-label{letter-spacing:.2em}
body.revealed .countdown{animation:fadeUp 1s 2.4s forwards}
.scroll-hint{
  position:absolute;left:50%;bottom:18px;translate:-50% 0;z-index:3;display:flex;flex-direction:column;align-items:center;gap:4px;
  color:var(--gold-2);text-decoration:none;font-size:12px;letter-spacing:.3em;opacity:0;text-shadow:0 1px 6px rgba(0,0,0,.6)
}
.scroll-hint i{width:14px;height:14px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);rotate:45deg;animation:bob 1.6s ease-in-out infinite}
body.revealed .scroll-hint{animation:fadeUp 1s 3s forwards}
@keyframes bob{50%{translate:0 6px}}

/* ================= 奶娥奔月 ================= */
/* --p：0→1 的滚动进度，由 JS 写到 .fly 上；只驱动 transform / opacity */
.fly{position:relative;height:220svh;--p:0}
.fly-sticky{
  position:sticky;top:0;height:100svh;overflow:hidden;
  background:radial-gradient(ellipse at 50% 20%,#2a2766 0%,#15173f 45%,#0b0e29 100%);
}
.fly-sticky *{animation-play-state:paused}
.fly.active .fly-sticky *{animation-play-state:running}
.fly-stars{
  position:absolute;left:0;right:0;top:-60%;height:220%;opacity:.9;
  background:
    radial-gradient(1.4px 1.4px at 20px 30px,#fff,transparent),
    radial-gradient(1px 1px at 90px 120px,#ffeebb,transparent),
    radial-gradient(1.2px 1.2px at 150px 60px,#fff,transparent),
    radial-gradient(1px 1px at 60px 170px,#cfd4ff,transparent),
    radial-gradient(1.6px 1.6px at 170px 190px,#fff6d8,transparent),
    radial-gradient(1px 1px at 120px 20px,#fff,transparent);
  background-size:200px 210px;
  transform:translate3d(0,calc(var(--p) * 30%),0);
}
/* 向下掠过的气流线，营造“往上飞”的速度感 */
.fly-streaks i{
  position:absolute;top:-30%;left:var(--x);width:1.5px;height:var(--h);border-radius:2px;
  background:linear-gradient(180deg,transparent,rgba(255,236,190,.55),transparent);
  animation:streak var(--d) linear var(--delay) infinite;opacity:0;
}
@keyframes streak{0%{transform:translate3d(0,0,0);opacity:0}15%{opacity:1}100%{transform:translate3d(0,150svh,0);opacity:0}}
.fly-title{
  position:absolute;left:0;right:0;top:max(6svh,24px);z-index:3;text-align:center;pointer-events:none;
  opacity:clamp(0,calc((var(--p) - .12) * 4),1);
  transform:translate3d(0,calc((1 - min(var(--p) * 2.5,1)) * 30px),0);
}
.fly-title h2{
  font-family:var(--brush);font-weight:400;font-size:clamp(46px,13vw,96px);line-height:1.1;letter-spacing:.12em;
  background:linear-gradient(180deg,#fff4cf,#f3c96a 60%,#c9973f);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 16px rgba(246,200,110,.45));
}
.fly-title p{font-size:14px;letter-spacing:.25em;color:var(--ink-dim);margin-top:4px}
.fly-actor{
  position:absolute;left:50%;bottom:0;z-index:2;
  width:min(94vw,calc(76svh * .75),620px);aspect-ratio:1086/1448;
  margin-left:calc(min(94vw,calc(76svh * .75),620px) / -2);
  transform:translate3d(0,calc((1 - var(--p)) * 46svh - var(--p) * 3svh),0) scale(calc(.8 + var(--p) * .2));
  transform-origin:50% 100%;will-change:transform;
}
.fly-float{position:absolute;inset:0;animation:floaty 6s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translate3d(0,0,0) rotate(-1deg)}50%{transform:translate3d(6px,-14px,0) rotate(1.2deg)}}
.fly-img{position:relative;z-index:1;display:block;width:100%;height:100%;user-select:none;-webkit-user-drag:none}
/* 月晕与光芒：以图中月亮为中心（约 63.5%, 17%） */
.fly-halo{
  position:absolute;left:63.5%;top:17%;width:80%;aspect-ratio:1;margin:-40% 0 0 -40%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,236,170,.55),rgba(255,210,120,.18) 55%,transparent);
  animation:haloPulse 4s ease-in-out infinite;
}
@keyframes haloPulse{50%{transform:scale(1.12);opacity:.7}}
.fly-rays{
  position:absolute;left:63.5%;top:17%;width:150%;aspect-ratio:1;margin:-75% 0 0 -75%;
  background:repeating-conic-gradient(rgba(255,232,170,.13) 0 5deg,transparent 5deg 15deg);
  -webkit-mask:radial-gradient(closest-side,#000 10%,transparent 70%);mask:radial-gradient(closest-side,#000 10%,transparent 70%);
  animation:spin 60s linear infinite;
}
/* 流光：用图片自身做遮罩，高光只扫过人物 */
.fly-shine{
  position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none;
  -webkit-mask:url(assets/naie.webp) center/100% 100% no-repeat;mask:url(assets/naie.webp) center/100% 100% no-repeat;
}
.fly-shine i{
  position:absolute;top:-10%;bottom:-10%;left:0;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,248,225,.5) 50%,transparent);
  transform:translate3d(-120%,0,0) skewX(-15deg);animation:shineSweep 5s 1s ease-in-out infinite;
}
@keyframes shineSweep{0%{transform:translate3d(-120%,0,0) skewX(-15deg)}55%,100%{transform:translate3d(260%,0,0) skewX(-15deg)}}
/* 脚下的星尘拖尾 */
.fly-trail{position:absolute;left:10%;right:10%;bottom:4%;height:30%;z-index:0}
.fly-trail i{
  position:absolute;left:var(--x);top:40%;width:var(--s);height:var(--s);border-radius:50%;
  background:radial-gradient(circle,#fff8e0 0,#ffd479 40%,rgba(255,190,90,0) 70%);
  animation:dust var(--d) ease-out var(--delay) infinite;opacity:0;
}
@keyframes dust{0%{transform:translate3d(0,0,0) scale(1);opacity:0}10%{opacity:1}100%{transform:translate3d(var(--dx),38svh,0) scale(.2);opacity:0}}
.fly-clouds i{
  position:absolute;bottom:-8%;border-radius:50%;z-index:3;
  background:radial-gradient(closest-side,rgba(190,170,255,.45),rgba(140,120,230,.12) 60%,transparent);
  transform:translate3d(0,calc(var(--p) * 20svh),0);
}
.fly-clouds i:nth-child(1){left:-30%;width:90%;height:22svh}
.fly-clouds i:nth-child(2){right:-30%;width:90%;height:26svh}
.fly-clouds i:nth-child(3){left:15%;width:70%;height:16svh;bottom:-10%}
@media (min-width:900px){
  .fly-title{left:8vw;right:auto;top:50%;margin-top:-30svh;text-align:left;display:flex;gap:18px}
  .fly-title h2{writing-mode:vertical-rl;font-size:clamp(64px,7vw,110px)}
  .fly-title p{writing-mode:vertical-rl;margin-top:14px}
}
@media (prefers-reduced-motion:reduce){.fly{height:auto}.fly-sticky{position:relative}.fly-actor{transform:none}.fly-title{opacity:1;transform:none}}

/* ================= 通用区块 ================= */
.sec{position:relative;padding:clamp(80px,12vh,140px) 20px;max-width:1120px;margin:0 auto}
.sec-head{text-align:center;margin-bottom:48px}
.sec-kicker{font-size:12px;letter-spacing:.45em;color:var(--gold-deep)}
.sec-head h2{
  font-family:var(--brush);font-weight:400;font-size:clamp(40px,7vw,72px);line-height:1.2;margin:8px 0 12px;
  background:linear-gradient(180deg,#fff4cf,#f3c96a 60%,#c9973f);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 18px rgba(246,200,110,.35));
}
.sec-sub{color:var(--ink-dim);max-width:34em;margin:0 auto}
.sec-sub b{color:var(--gold)}
.reveal{opacity:0;transform:translateY(40px);transition:opacity 1s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

.btn-gold{
  padding:12px 28px;border-radius:999px;font-weight:600;letter-spacing:.15em;color:#4a2a08;
  background:linear-gradient(180deg,#fff0bf,#f3c96a 55%,#d6a049);
  box-shadow:0 6px 24px rgba(246,200,110,.35),inset 0 1px 0 #fff;transition:transform .2s,box-shadow .2s,filter .2s;
}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(246,200,110,.5),inset 0 1px 0 #fff}
.btn-gold:active{transform:translateY(1px) scale(.98)}
.btn-gold:disabled{filter:grayscale(.5) brightness(.8);cursor:wait}

/* 时间线 */
.timeline{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:t}
.timeline li{
  position:relative;padding:28px 22px 24px;border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid rgba(246,216,138,.2);
}
.timeline li:nth-child(2){transition-delay:.12s}.timeline li:nth-child(3){transition-delay:.24s}.timeline li:nth-child(4){transition-delay:.36s}
.timeline li::before{
  counter-increment:t;content:counter(t,cjk-ideographic);position:absolute;right:16px;top:8px;
  font-family:var(--brush);font-size:56px;line-height:1;color:rgba(246,216,138,.12);
}
.t-date{display:inline-block;font-size:13px;letter-spacing:.1em;color:var(--night);background:var(--gold);padding:2px 10px;border-radius:999px}
.timeline h3{font-family:var(--brush);font-weight:400;font-size:30px;color:var(--gold-2);margin:12px 0 6px}
.timeline p{font-size:14px;color:var(--ink-dim)}
@media (max-width:860px){.timeline{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.timeline{grid-template-columns:1fr}}

/* 许愿 */
.sec-wish{max-width:none;overflow:hidden;padding-bottom:40px;
  background:radial-gradient(ellipse at 50% 100%,rgba(255,170,80,.18),transparent 60%);
}
.wish-sky{position:relative;height:clamp(380px,62vh,620px);margin:24px auto 0;max-width:1200px}
.sec-wish .sec-head,.wish-form,.wish-count{position:relative;z-index:2}
.wish-form{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:680px;margin:0 auto}
.wish-form input{
  padding:12px 18px;border-radius:999px;border:1px solid rgba(246,216,138,.35);outline:none;
  background:rgba(10,10,35,.6);color:var(--ink);backdrop-filter:blur(6px);transition:border-color .2s,box-shadow .2s;
}
.wish-form input:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(246,216,138,.15)}
#wishName{width:150px}
#wishText{flex:1;min-width:220px}
.wish-count{text-align:center;margin-top:18px;color:var(--ink-dim);font-size:14px}
.wish-count b{color:var(--gold)}

.wl{ /* 许愿孔明灯 */
  position:absolute;width:var(--w,78px);aspect-ratio:3/4;display:grid;place-items:center;text-align:center;
  animation:hover var(--d,6s) ease-in-out infinite alternate;
}
.wl .body{
  position:absolute;inset:0;border-radius:42% 42% 16% 16%/52% 52% 16% 16%;
  background:radial-gradient(ellipse at 50% 85%,#fff7d6 0%,#ffd479 30%,#f2913a 70%,#b8531f 100%);
  box-shadow:0 0 22px 6px rgba(255,180,80,.5),0 0 70px 20px rgba(255,150,60,.18);
}
.wl .body::after{content:"";position:absolute;left:32%;right:32%;bottom:-5%;height:9%;border-radius:50%;background:#fff5bf;filter:blur(2px)}
.wl p{position:relative;z-index:1;font-family:var(--brush);color:#6b2a0c;font-size:calc(var(--w,78px)*.16);line-height:1.25;padding:0 14%;writing-mode:horizontal-tb;word-break:break-all}
.wl small{position:relative;z-index:1;display:block;font-family:var(--serif);font-size:calc(var(--w,78px)*.1);opacity:.75;margin-top:2px}
@keyframes hover{from{translate:0 0;rotate:-2deg}to{translate:6px -14px;rotate:2deg}}
.wl.flying{position:fixed;z-index:45;animation:none;transition:none}

/* 灯谜 */
.riddles{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media (max-width:900px){.riddles{grid-template-columns:repeat(2,1fr)}}
.rd{position:relative;height:260px;perspective:1000px;cursor:pointer;outline:none}
.rd:nth-child(4n+2){transition-delay:.1s}.rd:nth-child(4n+3){transition-delay:.2s}.rd:nth-child(4n+4){transition-delay:.3s}
.rd-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.3,1.4,.4,1)}
.rd.open .rd-inner{transform:rotateY(180deg)}
.rd-face{
  position:absolute;inset:0;backface-visibility:hidden;border-radius:18px;padding:66px 18px 18px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;
  border:1px solid rgba(246,216,138,.28);
}
.rd-front{background:linear-gradient(180deg,rgba(184,52,42,.28),rgba(40,24,70,.7))}
.rd-back{transform:rotateY(180deg);background:linear-gradient(180deg,rgba(246,216,138,.28),rgba(60,40,90,.8))}
.rd-q{font-size:16px;line-height:1.6}
.rd-hint{font-size:12px;color:var(--gold);letter-spacing:.15em}
.rd-a{font-family:var(--brush);font-size:56px;line-height:1;color:var(--gold-2);text-shadow:0 0 20px rgba(255,210,120,.6)}
.rd-tip{font-size:12px;color:var(--ink-dim)}
.rd-lamp{ /* 顶上的小灯笼 */
  position:absolute;left:50%;top:-14px;translate:-50% 0;z-index:2;width:46px;height:52px;pointer-events:none;
}
.rd-lamp::before{content:"";position:absolute;left:50%;top:0;width:2px;height:12px;background:var(--gold-deep)}
.rd-lamp i{
  position:absolute;left:0;right:0;top:10px;bottom:6px;border-radius:45%;
  background:radial-gradient(ellipse at 50% 50%,#6e2a24,#4a1714);border:1px solid rgba(246,216,138,.35);transition:all .6s;
}
.rd-lamp i::after{content:"";position:absolute;left:50%;bottom:-10px;width:2px;height:10px;background:#d2463a;translate:-50% 0}
.rd.open .rd-lamp i{background:radial-gradient(ellipse at 50% 45%,#ffe9a8,#f0503a 55%,#a3211a);box-shadow:0 0 24px 6px rgba(255,120,70,.55)}
.rd.open .rd-lamp{animation:lampSwing 2.4s ease-in-out}
@keyframes lampSwing{20%{rotate:10deg}45%{rotate:-7deg}70%{rotate:4deg}100%{rotate:0}}
.rd:focus-visible .rd-face{box-shadow:0 0 0 3px var(--gold)}

/* 博饼 */
.bowl-area{display:flex;flex-direction:column;align-items:center;gap:22px}
.bowl{
  position:relative;width:min(640px,94vw);aspect-ratio:2.3/1;border-radius:0 0 50% 50%/0 0 100% 100%;
  background:
    radial-gradient(ellipse at 50% 0%,#fdfbf5 0%,#ebe6da 55%,#cfc6b4 100%);
  box-shadow:inset 0 16px 40px rgba(80,60,40,.35),0 30px 60px rgba(0,0,0,.45),0 0 80px rgba(255,220,150,.12);
  display:grid;place-items:center;padding:0 6% 8%;
}
.bowl::before{ /* 碗沿 */
  content:"";position:absolute;left:-1%;right:-1%;top:-5%;height:14%;border-radius:50%;
  background:linear-gradient(180deg,#fffefa,#e6dfcf);box-shadow:0 2px 0 #b9ae98;
}
.bowl::after{ /* 青花 */
  content:"";position:absolute;left:8%;right:8%;bottom:10%;height:14%;border-radius:0 0 50% 50%/0 0 100% 100%;
  border-bottom:3px solid rgba(40,70,160,.45);pointer-events:none;
}
.dice-row{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(8px,2.2vw,18px);perspective:700px;margin-top:4%}
.die{--s:clamp(38px,8vw,58px);width:var(--s);height:var(--s);position:relative;transform-style:preserve-3d;transition:transform 1.3s cubic-bezier(.2,.9,.25,1.05)}
.die.jump{animation:dieJump 1.3s cubic-bezier(.3,.6,.4,1)}
@keyframes dieJump{0%{translate:0 0}25%{translate:var(--jx,0) -90px}50%{translate:calc(var(--jx,0)*.4) 0}65%{translate:calc(var(--jx,0)*.2) -24px}80%,100%{translate:0 0}}
.face{
  position:absolute;inset:0;border-radius:18%;background:linear-gradient(145deg,#ffffff,#eae6dc);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),inset -3px -3px 6px rgba(0,0,0,.08);
  display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:14%;
}
.face b{width:62%;aspect-ratio:1;border-radius:50%;background:#1d1d2a;place-self:center;box-shadow:inset 0 1px 1px rgba(0,0,0,.5)}
.face.red b{background:#d42d23}
.face.one b{width:95%}
.f1{transform:translateZ(calc(var(--s)/2))}
.f6{transform:rotateY(180deg) translateZ(calc(var(--s)/2))}
.f3{transform:rotateY(90deg) translateZ(calc(var(--s)/2))}
.f4{transform:rotateY(-90deg) translateZ(calc(var(--s)/2))}
.f2{transform:rotateX(90deg) translateZ(calc(var(--s)/2))}
.f5{transform:rotateX(-90deg) translateZ(calc(var(--s)/2))}

.bb-result{text-align:center;min-height:84px;display:flex;flex-direction:column;align-items:center}
.bb-title{font-family:var(--brush);font-size:clamp(40px,7vw,60px);line-height:1.2;color:var(--gold-2);text-shadow:0 0 24px rgba(255,210,120,.5)}
.bb-title.pop{animation:pop .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{from{scale:.3;opacity:0}to{scale:1;opacity:1}}
.bb-desc{font-size:14px;color:var(--ink-dim)}
.btn-big{font-size:20px;padding:14px 46px;letter-spacing:.4em}
.bb-log{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:640px}
.bb-log li{font-size:13px;padding:3px 12px;border-radius:999px;background:rgba(246,216,138,.12);color:var(--gold-2);border:1px solid rgba(246,216,138,.2);animation:pop .4s}
.bb-rules{max-width:640px;margin:36px auto 0;padding:14px 22px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(246,216,138,.18)}
.bb-rules summary{cursor:pointer;color:var(--gold);letter-spacing:.2em}
.bb-rules ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:4px 20px;margin-top:10px;font-size:14px;color:var(--ink-dim)}
.bb-rules b{color:var(--gold-2);margin-right:8px;font-weight:600}

/* 页脚 */
.foot{text-align:center;padding:90px 20px 70px;background:radial-gradient(ellipse at 50% 120%,rgba(246,216,138,.2),transparent 60%)}
.foot-poem{font-family:var(--brush);font-size:clamp(30px,5vw,48px);color:var(--gold-2);letter-spacing:.2em}
.foot-small{font-size:12px;color:var(--ink-dim);opacity:.7;margin-top:8px;letter-spacing:.1em}

/* 音乐按钮 */
.music-btn{
  position:fixed;right:18px;top:18px;z-index:60;width:42px;height:42px;border-radius:50%;
  display:flex;align-items:flex-end;justify-content:center;gap:3px;padding-bottom:12px;
  background:rgba(12,12,40,.55);border:1px solid rgba(246,216,138,.45);backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity .6s;
}
body.revealed .music-btn{opacity:1;pointer-events:auto}
.music-btn i{width:3px;height:6px;background:var(--gold);border-radius:2px}
.music-btn.on i{animation:eq .9s ease-in-out infinite}
.music-btn.on i:nth-child(2){animation-delay:.2s}.music-btn.on i:nth-child(3){animation-delay:.4s}
@keyframes eq{50%{height:18px}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
.nw{white-space:nowrap;display:inline-block}
@media (max-width:520px){.sec-head h2{font-size:clamp(34px,10vw,48px)}}