/* ============ round three: alive ============ */
/* 1. cinematic intro */
.intro{overflow:hidden}
.intro .i1,.intro .iline,.intro .i2{display:none}
.i-stage{position:relative;width:min(900px,96vw);height:260px;display:flex;align-items:center;justify-content:center}
.i-name{position:absolute;top:50%;font:600 clamp(54px,14vw,150px)/1 var(--disp);transform:translateY(-50%);opacity:0;white-space:nowrap;
  background:linear-gradient(120deg,#fff,var(--pc) 70%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 30px color-mix(in srgb,var(--pc) 50%,transparent))}
.i-name.l{--pc:#ff9fc4;right:52%;animation:inL 2.2s .4s cubic-bezier(.2,.8,.2,1) forwards}
.i-name.r{--pc:#7ee8ff;left:52%;animation:inR 2.2s .4s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes inL{from{opacity:0;transform:translate(-60vw,-50%)}60%{opacity:1;transform:translate(0,-50%)}to{opacity:1;transform:translate(0,-50%)}}
@keyframes inR{from{opacity:0;transform:translate(60vw,-50%)}60%{opacity:1;transform:translate(0,-50%)}to{opacity:1;transform:translate(0,-50%)}}
.i-amp{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(0);font:italic 600 clamp(40px,9vw,90px) var(--disp);color:var(--gold);opacity:0;animation:iamp 1s 2.4s cubic-bezier(.34,1.56,.64,1) forwards;filter:drop-shadow(0 0 30px rgba(255,217,138,.9))}
@keyframes iamp{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.i-heart{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(0);font-size:70px;opacity:0;animation:iheart 1.1s 2.2s cubic-bezier(.34,1.56,.64,1) forwards, hbeat 1.2s 3.3s infinite}
@keyframes iheart{40%{opacity:1;transform:translate(-50%,-50%) scale(1.6)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.i-shoot{position:absolute;top:18%;left:-10%;width:220px;height:2px;background:linear-gradient(90deg,transparent,#fff);transform:rotate(18deg);opacity:0;animation:ishoot 1.1s .1s ease-in forwards;box-shadow:0 0 12px #fff}
@keyframes ishoot{10%{opacity:1}100%{opacity:0;transform:translate(120vw,45vh) rotate(18deg)}}
.intro .i3{animation-delay:3.4s}
html.lite .i-name{animation-duration:.6s}

/* 2. twin comets */
.comet{position:fixed;left:0;top:0;z-index:299;pointer-events:none;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;opacity:0;transition:opacity .4s}
.comet.pk{background:#ff9fc4;box-shadow:0 0 12px 4px rgba(255,159,196,.8),0 0 30px 10px rgba(255,159,196,.25)}
.comet.bl{background:#7ee8ff;box-shadow:0 0 12px 4px rgba(126,232,255,.8),0 0 30px 10px rgba(126,232,255,.25)}
html.has-cur .cur-ring{opacity:0!important}

/* 3. parallax */
html:not(.lite) #sky{transform:translateY(calc(var(--sy,0) * -0.06px))}
html:not(.lite) .aurora{transform:translateY(calc(var(--sy,0) * -0.12px)) scale(1.12)}
html:not(.lite) .orn{transform:translateY(calc(var(--sy,0) * 0.02px))}

/* 4. handwritten title + 14. signature */
.hero h1{position:relative}
.hero h1.writing > span{opacity:0;transition:opacity .8s}
svg.hand{position:absolute;inset:-10% 0;width:100%;height:120%;pointer-events:none;overflow:visible}
svg.hand text{font-family:var(--disp);font-weight:600;fill:transparent;stroke:#ffd98a;stroke-width:1.2;stroke-dasharray:1400;stroke-dashoffset:1400;animation:write var(--d,2.5s) ease-in-out forwards;filter:drop-shadow(0 0 10px rgba(255,217,138,.8))}
svg.hand.title text{font-size:clamp(64px,17vw,180px)}
svg.hand.sig text{font-size:46px;font-style:italic;stroke-dasharray:900;stroke-dashoffset:900}
svg.hand.done{opacity:0;transition:opacity 1.2s}
@keyframes write{to{stroke-dashoffset:0}}
#signature{position:relative;height:70px;margin:20px auto 0;width:min(420px,90%);opacity:1}
#signature .sig-txt{position:absolute;inset:0;display:grid;place-items:center;font:italic 500 32px var(--disp);color:var(--gold);opacity:0;transition:opacity 1.2s}
#signature.inked .sig-txt{opacity:1}
.wm{margin-top:14px;font:600 var(--t1) ui-monospace,Menlo,monospace;letter-spacing:.35em;color:rgba(255,217,138,.35);text-shadow:0 1px 0 rgba(255,255,255,.06),0 -1px 0 rgba(0,0,0,.6)}

/* 6. fireflies */
#fireflies{position:fixed;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;mix-blend-mode:screen}

/* 7. catch a shooting star */
#catch{position:fixed;left:0;top:0;z-index:120;transform:translate(-100px,-100px);padding:6px 12px;border-radius:99px;background:rgba(10,15,40,.85);border:1px solid var(--gold);color:var(--gold);font:500 var(--t1) var(--ui);opacity:0;pointer-events:none;transition:opacity .25s;white-space:nowrap}
#catch.on{opacity:1;pointer-events:auto;animation:catchpulse .8s ease-in-out infinite}
@keyframes catchpulse{50%{box-shadow:0 0 0 6px rgba(255,217,138,.25)}}

/* 8. candle */
#forever .term.big{--lx:70%;--ly:20%}
#forever .term.big::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(420px circle at var(--lx) var(--ly),rgba(255,170,80,.16),transparent 55%);animation:flicker 2.2s ease-in-out infinite;mix-blend-mode:screen}
@keyframes flicker{0%,100%{opacity:1}30%{opacity:.75}55%{opacity:.95}70%{opacity:.7}}
.candle{position:absolute;right:18px;top:-22px;width:12px;height:42px;border-radius:4px;background:linear-gradient(#fff6e0,#f0d9b0);box-shadow:0 2px 6px rgba(0,0,0,.5)}
.candle i{position:absolute;left:50%;top:-16px;width:10px;height:18px;margin-left:-5px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:radial-gradient(circle at 50% 70%,#fff 0,#ffd27a 40%,#ff8a3d 80%,transparent);filter:blur(.4px);transform-origin:50% 100%;animation:flame .35s ease-in-out infinite alternate;box-shadow:0 0 18px 6px rgba(255,160,60,.55)}
@keyframes flame{from{transform:scaleX(.92) rotate(-3deg)}to{transform:scaleX(1.06) rotate(3deg) translateY(-1px)}}
.typed{text-shadow:0 0 1px rgba(255,200,120,.25)}

/* 10. glass refraction */
html:not(.lite) .card,html:not(.lite) .box,html:not(.lite) .qz-box,html:not(.lite) .chapter2,html:not(.lite) .st2,html:not(.lite) .city,html:not(.lite) .moon-card,html:not(.lite) .cw,html:not(.lite) .meet,html:not(.lite) .rp,html:not(.lite) .jar{position:relative;isolation:isolate}
html:not(.lite) .card::after,html:not(.lite) .box::after,html:not(.lite) .qz-box::after,html:not(.lite) .chapter2::after,html:not(.lite) .st2::after,html:not(.lite) .city::after,html:not(.lite) .moon-card::after,html:not(.lite) .cw::after,html:not(.lite) .meet::after,html:not(.lite) .rp::after,html:not(.lite) .jar::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;padding:1px;
  background:conic-gradient(from var(--ra,0deg),rgba(255,159,196,.35),rgba(255,217,138,.55),rgba(126,232,255,.35),rgba(255,255,255,.08),rgba(255,159,196,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:.55;animation:raspin 14s linear infinite}
@property --ra{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes raspin{to{--ra:360deg}}
html:not(.lite) .card::before{background:radial-gradient(420px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.14),transparent 45%),linear-gradient(115deg,transparent 40%,rgba(255,255,255,.05) 50%,transparent 60%)}

/* 11. wax seal breaks in two */
.seal{overflow:visible}
.seal::before,.seal::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;box-shadow:inherit;transition:transform .9s cubic-bezier(.3,.8,.2,1),opacity .9s;z-index:-1}
.seal::before{clip-path:polygon(0 0,52% 0,48% 100%,0 100%)}.seal::after{clip-path:polygon(52% 0,100% 0,100% 100%,48% 100%)}
.env.open .seal{transform:none;opacity:1;background:transparent;box-shadow:none;color:transparent;transition:color .3s,background .3s}
.env.open .seal b,.env.open .seal em{opacity:0;transition:opacity .3s}
.env.open .seal::before{transform:translate(-26px,14px) rotate(-28deg);opacity:0}
.env.open .seal::after{transform:translate(26px,16px) rotate(28deg);opacity:0}

/* 12. display typography */
section h2,.queens h2,.lantern-sec h2,.cinema h2,.together h2{font-family:var(--disp);font-weight:600;letter-spacing:.01em}
html[data-lang="zh"] section h2{font-family:'Songti SC','STSong','Noto Serif CJK SC',var(--disp)}
.stats strong,.st2-row strong,.clock-t b,.meet-n b,.rp-grid b,.h2c b{font-variant-numeric:oldstyle-nums tabular-nums;font-feature-settings:"onum" 1}
.kicker{letter-spacing:.42em}
.lede,.card p.voice,.typed{letter-spacing:.005em}

/* 13. gold curtain */
#curtain{position:fixed;inset:0;z-index:250;pointer-events:none;opacity:0;background:linear-gradient(100deg,transparent 30%,rgba(255,217,138,.55) 45%,rgba(255,255,255,.9) 50%,rgba(255,217,138,.55) 55%,transparent 70%);transform:translateX(-100%)}
#curtain.go{animation:curtain .9s cubic-bezier(.4,0,.2,1)}
@keyframes curtain{0%{opacity:1;transform:translateX(-100%)}100%{opacity:1;transform:translateX(100%)}}

/* 15. sealed photos until together */
html.sealed .m .pics img,html.sealed .polaroid img{filter:blur(14px) saturate(.6);transform:scale(1.1)}
html.sealed .m .pics figure::after{content:"🔒";position:absolute;inset:0;display:grid;place-items:center;font-size:30px;background:rgba(5,8,25,.25)}
html.sealed .m .pics figure{pointer-events:none}
.sealed-note{display:none;color:var(--gold)!important}
html.sealed .sealed-note{display:block}

/* 16. together: synced heartbeat + glowing arc */
#together-tag{display:inline-block;margin:0 auto 8px;padding:6px 14px;border-radius:99px;background:rgba(255,217,138,.14);border:1px solid rgba(255,217,138,.5);color:var(--gold);font-size:var(--t2);animation:hbeat 1.2s infinite}
#together-tag[hidden]{display:none}
html.together .h2c .heart{animation:beat 1.1s ease-in-out infinite!important;animation-delay:0s!important}
html.together .duo-map .arc{stroke:#fff;stroke-width:3;filter:drop-shadow(0 0 8px rgba(255,255,255,.9))}
html.together .duo-map .arc.glow{stroke:rgba(255,217,138,.8);stroke-width:14}
html.together .sep{animation-duration:1.1s!important;animation-delay:0s!important}

/* 18. flip book */
.flipbook{position:fixed;inset:0;z-index:240;background:rgba(3,5,18,.94);backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px}
.flipbook[hidden]{display:none}
.fb-stage{position:relative;width:min(440px,94vw);aspect-ratio:3/4.3;perspective:1600px}
.fb-page{position:absolute;inset:0;transform-origin:left center;transform-style:preserve-3d;backface-visibility:hidden;display:none}
.fb-page.cur{display:block;z-index:3}
.fb-page.flip-n{display:block;z-index:4;animation:flipn .8s ease-in-out forwards}
.fb-page.flip-p{display:block;z-index:4;animation:flipp .8s ease-in-out}
@keyframes flipn{from{transform:rotateY(0)}to{transform:rotateY(-180deg)}}
@keyframes flipp{from{transform:rotateY(-180deg)}to{transform:rotateY(0)}}
.fb-in{position:absolute;inset:0;overflow-y:auto;padding:16px 18px 40px;border-radius:6px 14px 14px 6px;background:linear-gradient(90deg,#efe5d2,#fbf5ea 8%,#fbf5ea);color:#3a3550;box-shadow:0 30px 80px rgba(0,0,0,.6),inset 6px 0 14px rgba(0,0,0,.08);font-family:var(--serif)}
.fb-in img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 20%;border-radius:8px;margin-bottom:10px}
.fb-in .kicker{text-align:left;font-size:var(--t1);color:#b3862d;margin:0}
.fb-in h3{font:600 var(--t4)/1.3 var(--ui);margin:4px 0 8px}.fb-in p{font-size:var(--t2);line-height:1.8}
.fb-reply{margin-top:10px;padding:10px;border-radius:0 10px 10px 0;border-left:3px solid var(--pc);background:rgba(0,0,0,.04)}.fb-reply b{display:block;font:600 var(--t1) var(--ui);color:var(--pc)}
.fb-n{position:absolute;bottom:10px;left:0;right:0;text-align:center;font:var(--t1) var(--ui);color:#9a93a8}
.fb-ctl{display:flex;gap:14px;margin-top:14px;align-items:center}
.fb-ctl button{width:46px;height:46px;border-radius:50%;background:var(--card);border:1px solid var(--line);font-size:var(--t4)}.fb-ctl button[disabled]{opacity:.3}
#fb-x{position:absolute;top:14px;right:16px}
.book-btn{margin:0 auto 24px;display:block}

/* 19. invisible ink */
.ink{display:inline;color:transparent;background:repeating-linear-gradient(90deg,rgba(255,217,138,.08) 0 3px,transparent 3px 6px);border-bottom:1px dashed rgba(255,217,138,.35);cursor:help;transition:color 1.4s,background 1.4s}
.ink.show{color:#ffe9b0;background:none;text-shadow:0 0 12px rgba(255,217,138,.6)}

/* 20. endings */
.ending-tag{margin-top:10px;font-size:var(--t1);color:var(--dim);letter-spacing:.1em}
html.aurora-wave .aurora{animation:drift 2s ease-in-out infinite alternate;opacity:1;filter:saturate(1.6)}
html.bigmoon .moon-card .moon-big{font-size:120px;transition:font-size 3s}
html.bigmoon body::before{content:"🌕";position:fixed;right:6vw;top:8vh;font-size:120px;z-index:2;pointer-events:none;filter:drop-shadow(0 0 60px rgba(255,236,170,.6));animation:iin 3s both}
.lan-free{position:fixed;bottom:-60px;z-index:140;font-size:34px;pointer-events:none;animation:lanfree 9s ease-in forwards;filter:drop-shadow(0 0 18px rgba(255,160,70,.7))}
@keyframes lanfree{0%{transform:translateY(0) rotate(-4deg);opacity:0}10%{opacity:1}100%{transform:translateY(-110vh) rotate(4deg);opacity:0}}