:root{--c-bg:#fff0f8;--c-pink:#ff9ebc;--c-pink-light:#ffd6e8;--c-pink-deep:#e8639a;--c-lavender:#c9b8ff;--c-lavender-d:#8b6fd8;--c-peach:#ffd6a5;--c-peach-d:#f4a742;--c-text:#2d1240;--c-text-light:#5a2e70;--c-white:#fffbff;--c-gold:gold;--font-ui:"Quicksand", sans-serif;--font-poem:"Dancing Script", cursive;--radius-xl:2rem;--radius-pill:999px;--shadow-soft:0 8px 40px #c864b42e;--shadow-card:0 16px 56px #b450a038}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;font-size:16px}body{font-family:var(--font-ui);background:var(--c-bg);color:var(--c-text);-webkit-user-select:none;user-select:none;min-height:100dvh;overflow:hidden}#particles-layer{pointer-events:none;z-index:0;width:100%;height:100%;position:fixed;inset:0}#music-btn{z-index:100;border:2px solid var(--c-pink);background:var(--c-white);width:3rem;height:3rem;color:var(--c-pink-deep);cursor:pointer;box-shadow:var(--shadow-soft);opacity:0;border-radius:50%;justify-content:center;align-items:center;font-size:1.3rem;transition:transform .2s,box-shadow .2s;display:flex;position:fixed;bottom:1.5rem;right:1.5rem}#music-btn:hover{transform:scale(1.15);box-shadow:0 4px 20px #ff64b466}#music-btn.playing .music-icon{animation:2s linear infinite musicSpin}@keyframes musicSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.scene{z-index:10;opacity:0;pointer-events:none;justify-content:center;align-items:center;transition:opacity .5s;display:flex;position:fixed;inset:0}.scene.active{opacity:1;pointer-events:all}#intro-scene{background:linear-gradient(135deg,#fff0f8 0%,#f5e6ff 50%,#fff0f8 100%)}.intro-content{text-align:center;flex-direction:column;align-items:center;gap:clamp(1rem,3vw,2rem);width:100%;max-width:600px;padding:2rem 1.5rem;display:flex;position:relative}.floating-hearts{pointer-events:none;z-index:0;position:absolute;inset:-4rem}.fh{opacity:.7;font-size:clamp(1.2rem,3vw,2rem);animation:6s ease-in-out infinite floatUp;position:absolute}.fh1{animation-duration:5.5s;animation-delay:0s;top:20%;left:5%}.fh2{animation-duration:6.2s;animation-delay:.8s;top:15%;left:85%}.fh3{animation-duration:4.8s;animation-delay:1.6s;top:70%;left:15%}.fh4{animation-duration:7s;animation-delay:2.4s;top:65%;left:75%}.fh5{animation-duration:5.2s;animation-delay:.4s;top:5%;left:45%}.fh6{animation-duration:6.5s;animation-delay:3.2s;top:85%;left:55%}@keyframes floatUp{0%,to{opacity:.7;transform:translateY(0)rotate(0)}50%{opacity:1;transform:translateY(-20px)rotate(8deg)}}.intro-title-wrap{z-index:1;position:relative}.intro-sub{font-family:var(--font-ui);color:var(--c-text-light);letter-spacing:.02em;font-size:clamp(1rem,2.5vw,1.2rem);font-weight:600}.before-title{margin-bottom:.5rem}.after-title{margin-top:.75rem}.intro-title{flex-direction:column;align-items:center;gap:.1em;line-height:1;display:flex}.title-line{font-family:var(--font-ui);opacity:0;font-weight:700;display:block;transform:translateY(30px)}.tl1{color:var(--c-text);font-size:clamp(2.2rem,8vw,4.5rem);font-weight:800}.tl2{color:var(--c-pink-deep);font-size:clamp(2.8rem,10vw,5.5rem);font-weight:800}.tl3{font-size:clamp(3.5rem,13vw,7rem);font-family:var(--font-poem);font-weight:700}.tl4{font-size:clamp(2.5rem,8vw,4rem)}.name-glow{background:linear-gradient(135deg, var(--c-pink-deep) 0%, var(--c-lavender-d) 50%, var(--c-peach-d) 100%);-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 12px #e8639a73);-webkit-background-clip:text;background-clip:text}.cake-emoji{filter:none;-webkit-text-fill-color:initial}.cta-btn{border-radius:var(--radius-pill);background:linear-gradient(135deg, var(--c-pink) 0%, var(--c-lavender-d) 100%);color:#fff;font-family:var(--font-ui);cursor:pointer;opacity:0;z-index:1;border:none;align-items:center;gap:.5rem;padding:clamp(.75rem,2.5vw,1rem) clamp(1.75rem,5vw,2.5rem);font-size:clamp(1rem,2.5vw,1.2rem);font-weight:700;transition:transform .2s,box-shadow .2s;display:inline-flex;position:relative;transform:translateY(20px);box-shadow:0 6px 24px #c864b466}.cta-btn:hover{transform:translateY(-2px)scale(1.04);box-shadow:0 10px 32px #b450a080}.cta-btn:active{transform:scale(.97)}.btn-icon{font-size:1.2em}#envelope-scene{background:linear-gradient(160deg,#fee9f5 0%,#ede0ff 60%,#fff0f8 100%)}.envelope-wrap{flex-direction:column;align-items:center;gap:1.5rem;display:flex}.scene-hint{font-family:var(--font-ui);color:var(--c-text-light);opacity:0;font-size:clamp(1rem,2.5vw,1.15rem);font-weight:600;transition:opacity .4s}.scene-hint.visible{opacity:1}#envelope{cursor:pointer;perspective:1400px;width:clamp(260px,60vw,460px);height:clamp(190px,44vw,340px);transform-style:preserve-3d;outline:none;transition:transform .3s;position:relative}#envelope:hover{transform:scale(1.02)}#envelope:focus-visible{outline:3px dashed var(--c-pink);outline-offset:6px;border-radius:8px}.env-body{border:2.5px solid var(--c-pink-light);box-shadow:var(--shadow-card);z-index:1;background:linear-gradient(160deg,#fff5fa 0%,#fce8ff 100%);border-radius:.5rem;justify-content:center;align-items:center;display:flex;position:absolute;inset:0;overflow:hidden}.env-heart{font-size:clamp(2rem,7vw,3.5rem);animation:1.4s ease-in-out infinite heartbeat}@keyframes heartbeat{0%,to{transform:scale(1)}14%{transform:scale(1.15)}28%{transform:scale(1)}42%{transform:scale(1.1)}70%{transform:scale(1)}}.env-flap-top{clip-path:polygon(0 0,100% 0,50% 68%);z-index:4;transform-origin:top;backface-visibility:hidden;background:linear-gradient(175deg,#f9d5ea 0%,#e8b8f5 100%);border-radius:.5rem .5rem 0 0;height:55%;position:absolute;top:0;left:0;right:0;box-shadow:0 4px 12px #c864b426}.env-flap-left{clip-path:polygon(0 100%,100% 100%,0 0);z-index:2;background:linear-gradient(135deg,#f5c8e8 0%,#e0b4f5 100%);width:52%;height:55%;position:absolute;bottom:0;left:0}.env-flap-right{clip-path:polygon(100% 100%,0 100%,100% 0);z-index:2;background:linear-gradient(225deg,#f5c8e8 0%,#e0b4f5 100%);width:52%;height:55%;position:absolute;bottom:0;right:0}#envelope.opened .env-flap-top{animation:1s cubic-bezier(.4,0,.2,1) forwards openFlap}@keyframes openFlap{0%{opacity:1;transform:rotateX(0)}60%{opacity:.7;transform:rotateX(-90deg)}to{opacity:.3;transform:rotateX(-175deg)}}.env-letter-peek{z-index:3;opacity:0;pointer-events:none;background:linear-gradient(#fffcff 0%,#fff4fb 100%);border:1px solid #dca0dc40;border-radius:3px 3px 0 0;width:84%;height:55%;transition:transform 1s cubic-bezier(.25,.46,.45,.94) .9s,opacity .1s linear .9s;position:absolute;bottom:0;left:8%;transform:translateY(100%)}#envelope.opened .env-letter-peek{opacity:1;transform:translateY(20%)}#envelope.opened .letter{pointer-events:all}#letter-scene{background:linear-gradient(160deg,#fee9f5 0%,#ede0ff 60%,#fff0f8 100%);padding:1.5rem;overflow:hidden}.letter-paper{opacity:0;scrollbar-width:thin;scrollbar-color:var(--c-pink-light) transparent;background:repeating-linear-gradient(#0000 0 30px,#b482b41a 30px 31px),linear-gradient(#fffcff 0%,#fff8fd 100%);border-radius:3px;width:100%;max-width:680px;max-height:88dvh;position:relative;overflow-y:auto;transform:rotate(-.5deg)translateY(60px);box-shadow:0 20px 80px #00000040,0 4px 16px #0000001f,inset 0 0 0 1px #c88cc826}.letter-paper-inner{flex-direction:column;gap:.65rem;padding:clamp(1.75rem,5vw,3rem) clamp(1.75rem,5vw,3rem) clamp(1.5rem,4vw,2.5rem);display:flex}.letter-paper-inner:before{content:"";pointer-events:none;background:#ff8ca059;width:1.5px;position:absolute;top:0;bottom:0;left:clamp(3rem,8vw,5rem)}.letter-from{font-family:var(--font-poem);color:var(--c-text);margin-bottom:.25rem;font-size:clamp(1.2rem,3.2vw,1.5rem);font-weight:700}.env-seal{color:#ffffffe6;z-index:5;pointer-events:none;-webkit-user-select:none;user-select:none;background:radial-gradient(circle at 40% 38%,#f08,#c0376a);border-radius:50%;justify-content:center;align-items:center;width:clamp(2.2rem,6vw,3rem);height:clamp(2.2rem,6vw,3rem);font-size:clamp(.9rem,2.5vw,1.25rem);transition:opacity .4s,transform .4s;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-40%);box-shadow:0 2px 10px #c8327873,inset 0 1px 2px #ffc8dc66}#envelope.opened .env-seal{opacity:0;transform:translate(-50%,-40%)scale(.7)}.poem-lines{flex-direction:column;gap:.35rem;display:flex}.poem-line{font-family:var(--font-ui);color:var(--c-text);opacity:0;font-size:clamp(1rem,2.4vw,1.15rem);font-weight:600;line-height:1.7;transform:translateY(16px)}.poem-stanza-break{opacity:0;height:.65rem}.letter-sig{font-family:var(--font-poem);color:var(--c-text);opacity:0;margin-top:.75rem;font-size:clamp(1rem,2.4vw,1.2rem);font-weight:700;transform:translateY(10px)}.celebrate-cta{opacity:0;align-self:center;margin-top:.5rem;transform:translateY(15px)scale(.9)}#celebrate-scene{background:linear-gradient(135deg,#1a0530 0%,#2d0d5e 40%,#3d1060 100%)}.celebrate-content{text-align:center;flex-direction:column;align-items:center;gap:clamp(1rem,3vw,1.8rem);padding:2rem 1.5rem;display:flex;position:relative}.celebrate-emoji-ring{width:clamp(180px,45vw,280px);height:clamp(180px,45vw,280px);margin-bottom:.5rem;position:relative}.ce{opacity:0;font-size:clamp(1.5rem,4vw,2.2rem);position:absolute;transform:scale(0)}.ce1{top:0%;left:50%;transform:translate(-50%)scale(0)}.ce2{top:13%;left:85%;transform:translate(-50%,-50%)scale(0)}.ce3{top:50%;left:97%;transform:translate(-50%,-50%)scale(0)}.ce4{top:85%;left:85%;transform:translate(-50%,-50%)scale(0)}.ce5{top:100%;left:50%;transform:translate(-50%,-100%)scale(0)}.ce6{top:85%;left:15%;transform:translate(-50%,-50%)scale(0)}.ce7{top:50%;left:3%;transform:translate(-50%,-50%)scale(0)}.ce8{top:13%;left:15%;transform:translate(-50%,-50%)scale(0)}.celebrate-title{font-family:var(--font-ui);color:var(--c-white);opacity:0;text-shadow:0 2px 20px #ffb4dc66;font-size:clamp(2.4rem,8vw,5rem);font-weight:800;line-height:1.15;transform:scale(.7)}.celebrate-title .name-glow{filter:drop-shadow(0 0 16px #ffc850b3)}.celebrate-sub{font-family:var(--font-ui);color:#ffebf8f2;opacity:0;font-size:clamp(1rem,2.4vw,1.2rem);font-weight:600;line-height:1.75;transform:translateY(20px)}.replay-cta{opacity:0;background:linear-gradient(135deg,#ff9ebc 0%,#c9b8ff 100%);transform:translateY(20px)}@media (width<=480px){.floating-hearts{inset:-2rem}.fh{font-size:1rem}#envelope{width:min(90vw,340px);height:min(66vw,250px)}.letter-paper-inner{padding:1.25rem 1.25rem 1rem}#letter-scene{padding:1rem}.celebrate-emoji-ring{width:160px;height:160px}#music-btn{width:2.6rem;height:2.6rem;bottom:1rem;right:1rem}}@media (width>=1024px){.intro-content{max-width:720px}#envelope{width:500px;height:370px}.letter-paper{max-width:720px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}