:root{--gold:#dfbe70;--gold2:#f3dfaa;--ivory:#f7efde;--night:#050817;--paper:#e8d9bd;--paper2:#cdb991;--wax:#6f2037}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--night);font-family:Georgia,"Times New Roman",serif}
body{touch-action:manipulation;overscroll-behavior:none}
#stars{position:fixed;inset:0;width:100%;height:100%;display:block;background:radial-gradient(circle at 50% 32%,#182343 0,#080d20 36%,#040712 76%)}
#intro{position:fixed;z-index:50;inset:0;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 50% 35%,rgba(88,72,138,.2),transparent 38%),rgba(3,6,16,.4);cursor:pointer}
#intro p{margin:0;color:var(--gold2);font-size:clamp(1.35rem,5.5vw,2.8rem);letter-spacing:.075em;text-align:center;transform:translateY(-7vh)}
#begin{position:absolute;left:0;right:0;bottom:max(8%,env(safe-area-inset-bottom));margin:auto;border:0;background:none;color:rgba(255,255,255,.74);font:inherit;font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;animation:beginPulse 2.8s ease-in-out infinite;will-change:opacity,transform}
@keyframes beginPulse{0%,100%{opacity:.58;transform:scale(1)}50%{opacity:1;transform:scale(1.025)}}
#stage{position:fixed;inset:0;display:grid;place-items:center;perspective:1400px}
#spark{position:absolute;left:10%;top:52%;width:8px;height:8px;border-radius:50%;background:#fff3bd;box-shadow:0 0 10px #fff3bd,0 0 24px #d9b96c,0 0 48px rgba(217,185,108,.55);opacity:0}
#envelopeScene{width:min(88vw,465px);aspect-ratio:1.53/1;transform-style:preserve-3d;opacity:0}
#envelope{position:relative;width:100%;height:100%;transform-style:preserve-3d;filter:drop-shadow(0 34px 55px rgba(0,0,0,.5))}
.paper-texture{background-color:var(--paper);background-image:radial-gradient(circle at 14% 24%,rgba(81,59,28,.16) 0 .45px,transparent .7px),radial-gradient(circle at 77% 64%,rgba(91,67,34,.13) 0 .5px,transparent .8px),repeating-linear-gradient(18deg,rgba(255,255,255,.055) 0 1px,transparent 1px 5px),linear-gradient(145deg,#f0e4cf 0%,#dfcfb2 50%,#cdb991 100%);background-size:10px 10px,13px 13px,auto,auto}
.env-back,.env-left,.env-right,.env-bottom,.lining{position:absolute;inset:0;border-radius:7px}
.env-back{background:linear-gradient(145deg,#d9c9aa,#bca47b);border:1px solid rgba(255,255,255,.3);box-shadow:inset 0 0 0 1px rgba(109,76,35,.16),inset 0 0 45px rgba(91,64,29,.17)}
.lining{z-index:2;inset:2.5% 3% 7%;clip-path:polygon(0 0,100% 0,50% 82%);background:radial-gradient(circle at 50% 14%,rgba(90,107,157,.22),transparent 40%),linear-gradient(165deg,#111a3d,#080d22 65%,#050817);border:1px solid rgba(221,190,112,.35);box-shadow:inset 0 0 24px rgba(0,0,0,.5)}
.lining:after{content:"D&L";position:absolute;left:50%;top:24%;transform:translateX(-50%);color:rgba(224,190,108,.5);font-size:1rem;letter-spacing:.17em}
.env-left{z-index:5;clip-path:polygon(0 0,53% 54%,0 100%);box-shadow:inset -10px 0 14px rgba(87,61,30,.08)}
.env-right{z-index:5;clip-path:polygon(100% 0,47% 54%,100% 100%);box-shadow:inset 10px 0 14px rgba(87,61,30,.08)}
.env-bottom{z-index:6;clip-path:polygon(0 100%,50% 45%,100% 100%);background-image:radial-gradient(circle at 20% 55%,rgba(80,58,28,.16) 0 .45px,transparent .7px),radial-gradient(circle at 78% 61%,rgba(80,58,28,.12) 0 .45px,transparent .8px),linear-gradient(180deg,#e6d8bd,#cbb58d);box-shadow:inset 0 -16px 22px rgba(83,57,28,.12)}
.env-left:after,.env-right:after,.env-bottom:after{content:"";position:absolute;inset:0;opacity:.45;background:linear-gradient(110deg,transparent 0 48%,rgba(255,255,255,.4) 49%,rgba(109,78,39,.14) 50%,transparent 52%)}
#flap{position:absolute;z-index:8;left:0;right:0;top:0;height:70%;transform-origin:50% 0;transform-style:preserve-3d;backface-visibility:visible}
.flap-front,.flap-back,.flap-gold-edge{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 100%);border-radius:7px 7px 0 0;backface-visibility:hidden}
.flap-front{box-shadow:inset 0 12px 18px rgba(255,255,255,.2),inset 0 -14px 22px rgba(92,63,29,.16)}
.flap-front:after{content:"";position:absolute;left:1.2%;right:1.2%;top:1.3%;height:95%;clip-path:polygon(0 0,100% 0,50% 100%);border-top:1px solid rgba(197,155,73,.7);filter:drop-shadow(0 1px 0 rgba(255,255,255,.42))}
.flap-back{transform:rotateX(180deg);background:radial-gradient(circle at 50% 15%,rgba(80,98,150,.26),transparent 42%),linear-gradient(165deg,#17214b,#080e24 65%,#050817);border:1px solid rgba(219,184,100,.32);box-shadow:inset 0 0 28px rgba(0,0,0,.42)}
.flap-gold-edge{pointer-events:none;background:transparent;filter:drop-shadow(0 1px 0 rgba(245,216,151,.55));border-top:1px solid rgba(190,145,61,.7)}
#seal{position:absolute;z-index:11;left:50%;top:52%;width:82px;height:82px;border-radius:46% 54% 48% 52%/53% 45% 55% 47%;transform:translate(-50%,-50%) rotate(-2deg);display:grid;place-items:center;background:radial-gradient(circle at 34% 26%,#aa5364 0,#7d2b42 34%,#581528 78%);border:2px solid rgba(255,220,156,.32);color:#f1d28d;box-shadow:0 10px 22px rgba(50,7,20,.58),inset 0 2px 4px rgba(255,198,190,.3),inset 0 -4px 8px rgba(45,5,15,.36)}
#seal:before,#seal:after{content:"";position:absolute;border-radius:50%;pointer-events:none}
#seal:before{inset:7px;border:1px solid rgba(245,208,142,.52);box-shadow:inset 0 0 0 2px rgba(60,10,24,.22)}
#seal:after{inset:-4px;border:2px solid rgba(113,28,51,.56);filter:blur(.2px)}
.seal-rim{position:absolute;inset:2px;border-radius:inherit;border:1px solid rgba(255,204,157,.22)}
.seal-inner{position:relative;z-index:2;font-size:1.25rem;letter-spacing:.04em;text-shadow:0 1px 0 rgba(69,12,27,.85),0 0 8px rgba(255,223,159,.16)}
.crack{position:absolute;z-index:4;width:1px;height:0;background:#250711;transform-origin:top}.c1{left:42px;top:7px;transform:rotate(12deg)}.c2{left:33px;top:28px;transform:rotate(-33deg)}.c3{left:50px;top:31px;transform:rotate(41deg)}
#letterPocket{position:absolute;z-index:3;left:7%;right:7%;top:8%;height:86%;overflow:hidden;pointer-events:none}
#letter{position:absolute;left:0;right:0;top:0;height:138%;transform-origin:50% 100%;will-change:transform}
.paper{position:absolute;inset:0;background:linear-gradient(145deg,#fff9ec,#ecdec4);border:1px solid rgba(213,178,102,.78);box-shadow:0 24px 58px rgba(0,0,0,.38);overflow:hidden}
.invitation-paper:before{content:"";position:absolute;inset:0;opacity:.25;background-image:radial-gradient(rgba(95,70,35,.33) .65px,transparent .75px),repeating-linear-gradient(12deg,rgba(117,88,50,.045) 0 1px,transparent 1px 7px);background-size:6px 6px,auto}
.paper-border{position:absolute;z-index:2;inset:11px;border:1px solid rgba(184,145,68,.72);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px 16px;color:#24242d}
.paper-border:before,.paper-border:after{content:"✦";position:absolute;color:rgba(160,129,67,.7);font-size:.75rem}.paper-border:before{top:8px;left:10px}.paper-border:after{right:10px;bottom:8px}
.ornament{color:#a08143;font-size:1.1rem;margin-bottom:10px}.save{font-size:clamp(.7rem,2.5vw,.95rem);letter-spacing:.32em;color:#846b39}h1{font-weight:400;font-size:clamp(1.9rem,7vw,3rem);margin:22px 0 11px}.names{font-size:clamp(1.1rem,4vw,1.62rem);font-style:italic;color:#514a62}.divider{display:flex;width:72%;align-items:center;gap:10px;margin:21px 0 13px;color:#a08143}.divider span{height:1px;flex:1;background:linear-gradient(to right,transparent,#b8944e,transparent)}.follow{font-size:clamp(.7rem,2.5vw,.93rem);letter-spacing:.08em;color:#75694f}
#particles{position:absolute;inset:0;pointer-events:none}.particle{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--gold2);box-shadow:0 0 8px var(--gold)}.fragment{position:absolute;width:8px;height:7px;background:#7d2d42;clip-path:polygon(0 0,100% 12%,72% 100%,10% 82%)}
#sound,#replay{position:fixed;z-index:60;border:1px solid rgba(226,196,127,.58);color:var(--ivory);background:rgba(4,8,20,.46);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#sound{top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));width:44px;height:44px;border-radius:50%}
#replay{left:50%;bottom:max(22px,env(safe-area-inset-bottom));transform:translateX(-50%);border-radius:999px;padding:11px 20px;opacity:0;pointer-events:none}
@media(max-width:520px){#intro p{transform:translateY(-9vh)}#envelopeScene{width:min(92vw,420px)}#letterPocket{left:8%;right:8%;top:8%;height:84%}#letter{height:146%}.paper-border{inset:9px;padding:19px 11px}#seal{width:76px;height:76px}.seal-inner{font-size:1.15rem}}
@media(prefers-reduced-motion:reduce){#begin{animation:none}}