@import "https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Noto+Serif+SC:wght@400;700&display=swap";:root{--font-serif:"Noto Serif SC", "STSong", serif;--font-cursive:"Dancing Script", cursive;--env-top:#d8e1ea;--env-bottom:#c4d0dc;--env-side:#b8c5d3}*{box-sizing:border-box;-webkit-user-select:none;user-select:none;margin:0;padding:0}body{font-family:var(--font-serif);background-color:#121a26;overflow:hidden}#app{justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:relative}.bg-initial,.bg-finale{z-index:-1;background-position:50%;background-size:cover;width:100%;height:100%;position:absolute;top:0;left:0}.bg-initial{opacity:.8;background-color:#1a2436;background-image:url(../bg-start.webp)}.bg-finale{opacity:0;background-color:#0a0a0a;background-image:url(../bg-end.png)}.audio-btn{z-index:999;color:#7ca1d8;cursor:pointer;opacity:.6;background:0 0;border:1px solid #7ca1d8;border-radius:50%;width:40px;height:40px;position:absolute;top:20px;right:20px}#envelope-stage{perspective:1200px;z-index:10;flex-direction:column;align-items:center;display:flex}.envelope{width:340px;height:230px;transform-style:preserve-3d;filter:drop-shadow(0 20px 30px #00000080);animation:6s ease-in-out infinite float;position:relative}.flap{backface-visibility:hidden;width:100%;height:100%;transition:transform 1.5s cubic-bezier(.4,0,.2,1);position:absolute}.bg-envelope-top{background:var(--env-top);clip-path:polygon(0 0,100% 0,50% 55%);transform-origin:top;z-index:4}.bg-envelope-bottom{background:var(--env-bottom);clip-path:polygon(0 100%,100% 100%,50% 45%,0 45%);transform-origin:bottom;z-index:3}.bg-envelope-side{background:var(--env-side)}.flap-left{clip-path:polygon(0 0,55% 50%,0 100%);transform-origin:0;z-index:2}.flap-right{clip-path:polygon(100% 0,45% 50%,100% 100%);transform-origin:100%;z-index:2}.wax-seal{z-index:5;cursor:pointer;background:radial-gradient(circle at 30% 30%,#d4af37,#aa8222,#6b5010);border-radius:50%;justify-content:center;align-items:center;width:50px;height:50px;transition:transform .3s;display:flex;position:absolute;top:52%;left:50%;transform:translate(-50%,-50%);box-shadow:0 4px 10px #0006,inset 0 0 5px #ffffff4d}.wax-seal:hover{transform:translate(-50%,-50%)scale(1.1)}.seal-text{font-family:var(--font-serif);color:#4a3500;text-shadow:0 1px 1px #ffffff4d;font-size:24px;font-style:italic}.hint-text{color:#c7d82b;letter-spacing:2px;margin-top:40px;font-size:18px;transition:opacity .5s}#parchment-stage{z-index:15;opacity:0;pointer-events:none;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute}.parchment-content{color:#333;background:#f4eedc;border-radius:4px;width:85%;max-width:440px;height:60%;padding:40px;box-shadow:0 20px 50px #000c}.greeting{margin-bottom:30px;font-size:18px;font-weight:700}.message{text-align:center;margin-bottom:50px;font-size:22px;line-height:2}.signature{text-align:right;opacity:.8;margin-top:10px;font-family:Dancing Script,Brush Script MT,cursive;font-size:18px}#scratch-canvas{pointer-events:auto;z-index:20;width:100%;height:100%;position:absolute;top:0;left:0}#particle-canvas{pointer-events:none;z-index:8;width:100%;height:100%;position:absolute;top:0;left:0}#finale-stage{text-align:center;z-index:30;pointer-events:none;flex-direction:column;align-items:center;width:100%;display:flex;position:absolute}.cursive-title{font-family:var(--font-cursive);background:linear-gradient(#ffeaa7,#fdcb6e,#e1b12c);-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 15px #fdcb6e99)drop-shadow(0 4px 5px #000c);-webkit-background-clip:text;margin-bottom:20px;font-size:65px}.main-title{font-family:var(--font-serif);color:#f0f4f8;text-shadow:0 0 20px #7ca1d899,0 4px 10px #00000080;letter-spacing:12px;margin-bottom:30px;font-size:45px;font-weight:700}.sub-title{color:#f4eedc;letter-spacing:4px;text-shadow:0 2px 5px #000c;font-size:18px}.divider{background:linear-gradient(90deg,#0000,#d4af37cc,#0000);width:80%;max-width:300px;height:1px;margin:20px 0}.hidden{display:none!important}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}