:root{--gold:#f8d892;--ink:#071327;--cream:#fff3d6}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#02050d;color:white;font-family:"Noto Serif SC","Songti SC","STSong",serif}button{font:inherit}#fx{position:fixed;inset:0;z-index:20;pointer-events:none}#intro{position:fixed;inset:0;z-index:40;background:radial-gradient(circle at 50% 45%,#071229 0,#02050d 45%,#000 100%);display:grid;place-items:center;transition:opacity 1.6s ease,visibility 1.6s}.intro-copy{text-align:center;letter-spacing:.35em;color:#dceaff;animation:introPulse 2s ease-in-out infinite}.intro-copy span{display:block;font-size:42px;text-shadow:0 0 25px #fff,0 0 60px #8bbcff}.intro-copy p{font-size:14px;opacity:.75}.intro-stars{position:absolute;inset:0;background-image:radial-gradient(circle,#fff 0 1px,transparent 1.8px);background-size:88px 88px;opacity:.45;animation:drift 8s linear infinite}.hide{opacity:0!important;visibility:hidden!important}

#stage{position:fixed;inset:0;opacity:0;transform:scale(1.03);transition:opacity 2s ease,transform 3.4s cubic-bezier(.2,.7,.2,1)}#stage.show{opacity:1;transform:none}.bg{position:absolute;inset:-4%;background:linear-gradient(90deg,rgba(2,8,20,.72) 0%,rgba(2,8,20,.4) 35%,rgba(2,8,20,.05) 70%),url('assets/hero.png') center/cover no-repeat;animation:kenburns 18s ease-in-out infinite alternate;will-change:translate}.moonGlow{position:absolute;width:52vw;height:52vw;right:-4vw;top:-9vw;border-radius:50%;background:radial-gradient(circle,rgba(255,238,180,.32),rgba(255,218,126,.09) 42%,transparent 70%);filter:blur(10px);opacity:0;transform:scale(.2);animation:moonRise 3.3s 2.8s forwards;will-change:translate}.mist{position:absolute;left:0;right:0;bottom:-8%;height:38%;background:linear-gradient(180deg,transparent,rgba(194,217,255,.06) 25%,rgba(12,26,52,.44));filter:blur(14px);animation:mist 10s ease-in-out infinite alternate;will-change:translate}header{position:absolute;z-index:5;left:5vw;right:5vw;top:4vh;display:flex;justify-content:space-between;align-items:center;opacity:0;animation:fadeUp 1.2s 4.8s forwards}.brand{font-size:18px;letter-spacing:.2em}.brand small{display:block;font:10px/1.8 system-ui;letter-spacing:.42em;color:#d7c59e}#soundBtn,.cta{border:1px solid rgba(255,229,174,.55);color:#ffe5a8;background:rgba(5,15,31,.35);backdrop-filter:blur(12px);border-radius:999px;padding:.8rem 1.2rem;cursor:pointer;box-shadow:inset 0 0 18px rgba(255,216,144,.08),0 0 28px rgba(255,205,105,.08)}#soundBtn{position:relative;transition:.3s}#soundBtn.on{color:#fff;font-weight:700;border-color:rgba(255,229,174,.9);box-shadow:0 0 24px rgba(255,205,105,.35),inset 0 0 18px rgba(255,216,144,.18)}#soundBtn.on:after{content:"";position:absolute;right:9px;top:9px;width:5px;height:5px;border-radius:50%;background:#8dff9d;box-shadow:0 0 8px #8dff9d;animation:live 1.6s ease-in-out infinite}.hero{position:absolute;z-index:4;inset:0;display:flex;align-items:center;padding:8vh 7vw}.copy{width:min(520px,46vw);margin-top:6vh;text-shadow:0 2px 14px #031125;opacity:0;transform:translateY(25px);animation:fadeUp 1.8s 4.2s forwards}.eyebrow{font-size:12px;letter-spacing:.45em;color:#f6dda4;margin-bottom:14px}.copy h1{margin:0;font-size:clamp(86px,10vw,150px);line-height:.72;letter-spacing:.04em;color:#ffe2a3;text-shadow:0 0 12px rgba(255,220,150,.7),0 0 42px rgba(255,183,79,.35)}.copy h1 span{display:inline-block;animation:floatChar 5s ease-in-out infinite}.copy h1 span:nth-child(2){animation-delay:.6s}.copy h2{font-weight:400;letter-spacing:.18em;font-size:clamp(18px,2vw,28px);margin:34px 0 18px}.copy p{font-size:15px;line-height:2.1;letter-spacing:.1em;color:#e8edf8;opacity:.88}.cta{margin-top:18px;padding:1rem 1.6rem;transition:.35s}.cta:hover{transform:translateY(-2px);box-shadow:0 0 30px rgba(255,207,115,.28);background:rgba(112,67,22,.22)}
.card{position:absolute;z-index:7;right:7vw;bottom:14vh;width:min(340px,29vw);padding:28px 30px;background:linear-gradient(145deg,rgba(255,249,231,.12),rgba(14,27,50,.54));border:1px solid rgba(255,229,177,.35);backdrop-filter:blur(18px);border-radius:24px;box-shadow:0 20px 60px rgba(0,0,0,.3);opacity:0;transform:translateY(28px) rotate(2deg);transition:1s cubic-bezier(.2,.8,.2,1);will-change:translate}.card.open{opacity:1;transform:none}.seal{position:absolute;right:20px;top:20px;width:34px;height:34px;border:1px solid #d76d55;color:#f28a71;display:grid;place-items:center;border-radius:7px;transform:rotate(8deg);cursor:pointer;transition:.3s;user-select:none}.seal:hover{color:#ffb09e;box-shadow:0 0 14px rgba(242,138,113,.4);transform:rotate(8deg) scale(1.08)}.card-title{font-size:28px;letter-spacing:.22em;color:#ffe5ab}.card-line{height:1px;background:linear-gradient(90deg,#d9b66f,transparent);margin:18px 0}.card p{line-height:2;font-size:15px}.signature{font:10px system-ui;letter-spacing:.22em;color:#c9d5ea;margin-top:18px}
.bg,.moonGlow,.mist,.lanterns,.petals{pointer-events:none}.lantern{position:absolute;width:26px;height:40px;border-radius:7px;background:linear-gradient(#fff0bd,#ffac54);box-shadow:0 0 10px #ffd186,0 0 30px rgba(255,151,51,.45);opacity:.8;animation:lanternFloat linear infinite}.lantern:after{content:"";position:absolute;left:50%;top:100%;width:1px;height:10px;background:#ffbe6b}.petal{position:absolute;width:10px;height:7px;background:#ffd4df;border-radius:80% 20% 70% 30%;opacity:.8;animation:petalFall linear infinite}

.wishPanel{position:absolute;z-index:9;left:50%;bottom:9vh;transform:translateX(-50%) translateY(16px);display:flex;align-items:center;gap:10px;padding:10px 14px;background:linear-gradient(145deg,rgba(255,249,231,.1),rgba(10,22,44,.6));border:1px solid rgba(255,229,177,.4);backdrop-filter:blur(16px);border-radius:999px;box-shadow:0 12px 40px rgba(0,0,0,.35);opacity:0;visibility:hidden;transition:.6s cubic-bezier(.2,.8,.2,1)}.wishPanel.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}.wishPanel input{width:min(300px,52vw);background:rgba(255,240,214,.07);border:1px solid rgba(255,229,177,.25);border-radius:999px;color:#fff3d6;font:15px/1 "Noto Serif SC","Songti SC",serif;letter-spacing:.08em;padding:10px 16px;outline:none;transition:.3s}.wishPanel input:focus{border-color:rgba(255,229,177,.7);box-shadow:0 0 16px rgba(255,205,105,.18)}.wishPanel input::placeholder{color:rgba(220,228,246,.4)}.wishPanel button{border:1px solid rgba(255,229,174,.65);color:#0a1830;background:linear-gradient(180deg,#ffe6ae,#f5b95e);border-radius:999px;padding:10px 20px;cursor:pointer;font-weight:700;letter-spacing:.12em;transition:.3s;box-shadow:0 0 20px rgba(255,190,90,.25)}.wishPanel button:hover{transform:translateY(-2px);box-shadow:0 0 30px rgba(255,200,100,.5)}.wishCount{position:absolute;top:-26px;left:50%;transform:translateX(-50%);white-space:nowrap;font:11px system-ui;letter-spacing:.25em;color:rgba(246,221,164,.75)}
.toast{position:absolute;z-index:30;left:50%;bottom:17vh;transform:translateX(-50%) translateY(10px);padding:10px 26px;background:rgba(8,17,34,.72);border:1px solid rgba(255,229,177,.4);backdrop-filter:blur(14px);border-radius:999px;letter-spacing:.3em;font-size:14px;color:#ffe8b8;opacity:0;pointer-events:none;transition:.7s}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
footer{position:absolute;z-index:5;bottom:2.8vh;left:50%;transform:translateX(-50%);text-align:center;opacity:0;animation:fadeUp 1s 6s forwards;white-space:nowrap}.poem{font-size:13px;letter-spacing:.32em;color:#eadfc2;transition:opacity 1.2s;text-shadow:0 1px 10px rgba(3,17,37,.9)}.poem small{color:rgba(201,213,234,.55);letter-spacing:.2em;margin-left:.8em;font-size:11px}.hint{margin-top:7px;font:10px system-ui;letter-spacing:.28em;color:rgba(216,226,242,.7)}

@keyframes introPulse{50%{opacity:.5;transform:translateY(-4px)}}@keyframes drift{to{background-position:44px 88px}}@keyframes kenburns{to{transform:scale(1.035) translate3d(-.5%,.3%,0)}}@keyframes moonRise{to{opacity:1;transform:scale(1)}}@keyframes fadeUp{to{opacity:1;transform:none}}@keyframes floatChar{50%{transform:translateY(-7px)}}@keyframes mist{to{transform:translateX(3%) scale(1.05)}}@keyframes live{50%{opacity:.35}}@keyframes lanternFloat{0%{transform:translateY(12vh) translateX(0) rotate(-2deg);opacity:0}10%{opacity:.85}100%{transform:translateY(-120vh) translateX(30px) rotate(4deg);opacity:0}}@keyframes petalFall{from{transform:translate3d(0,-10vh,0) rotate(0)}to{transform:translate3d(80px,110vh,0) rotate(540deg)}}
@media(max-width:800px){.bg{background-position:62% center}.hero{padding:8vh 7vw;align-items:flex-end}.copy{width:100%;margin-bottom:16vh}.copy p{max-width:85%}.card{display:none}.copy h1{font-size:92px}header{left:6vw;right:6vw}.brand small{display:none}.hint{display:none}.wishPanel{bottom:13vh}.wishPanel input{width:52vw}}
@media(prefers-reduced-motion:reduce){.lanterns,.petals{display:none}.copy h1 span{animation:none}}