:root{--bg-1: #fff3f8;--bg-2: #ffe3bd;--bg-3: #ead7ff;--ink: #5b3444;--accent: #ff6b9a;--accent-dark: #d94874;--paper: #fffaf0;--paper-shadow: rgba(97, 54, 68, .22);--envelope: #ffd1dc;--envelope-dark: #f29ab4;--envelope-light: #ffe9ef}*{box-sizing:border-box}body{margin:0;min-height:100vh;overflow:hidden;color:var(--ink);font-family:"Baloo 2",system-ui,sans-serif;background:radial-gradient(circle at 12% 18%,rgba(255,255,255,.92),transparent 21%),radial-gradient(circle at 86% 16%,rgba(255,210,125,.45),transparent 24%),radial-gradient(circle at 18% 82%,rgba(196,157,255,.34),transparent 26%),radial-gradient(circle at 82% 76%,rgba(255,118,164,.28),transparent 24%),linear-gradient(135deg,var(--bg-1),var(--bg-2) 58%,var(--bg-3))}.scene{position:relative;display:grid;min-height:100vh;place-items:center;padding:clamp(16px,4vw,40px);isolation:isolate}.background-glow,.bokeh,.sparkles,.falling-decor{position:absolute;pointer-events:none}.background-glow{width:min(86vw,860px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,107,154,.2),transparent 66%);filter:blur(14px);animation:glow 5s ease-in-out infinite alternate}.bokeh{border-radius:50%;filter:blur(8px);opacity:.7;animation:drift 8s ease-in-out infinite alternate}.bokeh-one{left:7vw;top:12vh;width:150px;height:150px;background:#ffc64f52}.bokeh-two{right:8vw;bottom:13vh;width:210px;height:210px;background:#c997ff4d;animation-delay:-2s}.bokeh-three{right:16vw;top:8vh;width:110px;height:110px;background:#ff76a447;animation-delay:-4s}.sparkles{top:0;right:0;bottom:0;left:0;z-index:1}.sparkles span{position:absolute;width:clamp(18px,3vw,34px);aspect-ratio:1;background:#fff6a5;clip-path:polygon(50% 0,61% 36%,100% 50%,61% 64%,50% 100%,39% 64%,0 50%,39% 36%);filter:drop-shadow(0 0 14px rgba(255,255,255,.9));animation:twinkle 2.2s ease-in-out infinite}.sparkles span:nth-child(1){left:8%;top:9%}.sparkles span:nth-child(2){right:11%;top:13%;animation-delay:-.7s;background:#ffd166}.sparkles span:nth-child(3){left:10%;bottom:14%;animation-delay:-1.2s;background:#ffb3ca}.sparkles span:nth-child(4){right:9%;bottom:9%;animation-delay:-1.7s;background:#e0c3ff}.falling-decor{top:-10vh;right:0;bottom:0;left:0;z-index:1;overflow:hidden}.falling-decor span{position:absolute;top:-10vh;width:clamp(10px,1.5vw,18px);aspect-ratio:1;border-radius:999px 999px 999px 0;background:#d948746b;animation:fall linear infinite}.falling-decor span:nth-child(1){left:6%;animation-duration:11s}.falling-decor span:nth-child(2){left:18%;animation-duration:13s;animation-delay:-5s;background:#ffb86c7a}.falling-decor span:nth-child(3){left:31%;animation-duration:10s;animation-delay:-2s;background:#cdb4db8c}.falling-decor span:nth-child(4){left:45%;animation-duration:14s;animation-delay:-8s}.falling-decor span:nth-child(5){left:59%;animation-duration:12s;animation-delay:-4s;background:#ffb86c7a}.falling-decor span:nth-child(6){left:72%;animation-duration:15s;animation-delay:-7s;background:#cdb4db8c}.falling-decor span:nth-child(7){left:84%;animation-duration:10s;animation-delay:-3s}.falling-decor span:nth-child(8){left:94%;animation-duration:13s;animation-delay:-9s;background:#ffb86c7a}.confetti{position:fixed;top:0;right:0;bottom:0;left:0;z-index:5;pointer-events:none}.card-stage{position:relative;z-index:2;display:grid;width:min(98vw,980px);min-height:min(780px,94vh);place-items:center;perspective:1400px}.card-stage:after{position:absolute;top:-4vh;right:-4vw;bottom:-4vh;left:-4vw;content:"";z-index:-1;border-radius:46px;opacity:0;background:radial-gradient(circle,rgba(91,52,68,.1),transparent 66%);transition:opacity .35s ease;pointer-events:none}.thought-popup{position:absolute;z-index:4;max-width:min(82vw,330px);padding:16px 20px;border:2px solid rgba(217,72,116,.24);border-radius:34px 34px 34px 12px;color:#9d2d58;font-size:clamp(1rem,2.1vw,1.25rem);font-weight:700;line-height:1.35;text-align:center;background:radial-gradient(circle at 18% 22%,rgba(255,255,255,.95),transparent 34%),linear-gradient(145deg,#ffffffeb,#ffeaf2e6);box-shadow:0 18px 40px #d948742e;filter:drop-shadow(0 8px 14px rgba(91,52,68,.12));pointer-events:none;opacity:0;animation:thoughtBlink 6s ease-in-out infinite;transition:opacity .35s ease,transform .35s ease}.thought-popup:before,.thought-popup:after{position:absolute;content:"";border-radius:50%;background:#ffffffeb;border:2px solid rgba(217,72,116,.2);box-shadow:0 8px 18px #d948741f}.thought-popup:before{right:34px;bottom:-22px;width:22px;height:22px}.thought-popup:after{right:14px;bottom:-42px;width:13px;height:13px}.thought-popup-one{left:clamp(18px,8vw,122px);top:clamp(72px,12vh,118px);animation-duration:4s}.thought-popup-two{right:clamp(-138px,-7vw,-46px);bottom:clamp(52px,8vh,90px);max-width:min(82vw,360px);border-radius:34px 34px 12px;animation-duration:6s;animation-delay:-1s;rotate:4deg}.thought-popup-two:before{left:36px;right:auto}.thought-popup-two:after{left:16px;right:auto}.thought-popup-three,.thought-popup-four{max-width:145px;padding:12px 18px;border-radius:999px 999px 999px 18px;color:#c73668;font-size:clamp(1.05rem,2.3vw,1.34rem);animation-duration:4.8s}.thought-popup-three{left:clamp(28px,12vw,150px);bottom:clamp(80px,14vh,132px);rotate:-7deg;animation-delay:-2.2s}.thought-popup-four{right:clamp(56px,16vw,190px);top:clamp(142px,24vh,218px);border-radius:999px 999px 18px;rotate:7deg;animation-duration:5.4s;animation-delay:-3.1s}.thought-popup-four:before{left:34px;right:auto}.thought-popup-four:after{left:14px;right:auto}.envelope-button{position:absolute;inset:auto;display:grid;place-items:center;width:min(640px,88vw);border:0;background:transparent;cursor:pointer;animation:floatEnvelope 3s ease-in-out infinite;transition:transform .8s cubic-bezier(.4,0,.2,1),filter .7s ease,opacity .6s ease;z-index:2}.envelope-button:hover .envelope,.envelope-button:focus-visible .envelope{filter:drop-shadow(0 34px 44px rgba(91,52,68,.27)) saturate(1.05);transform:translateY(-4px) scale(1.015)}.envelope-button:focus-visible{outline:3px solid rgba(217,72,116,.36);outline-offset:10px;border-radius:32px}.pre-hint{display:inline-flex;align-items:center;justify-content:center;gap:10px;color:#a72d58;font-size:clamp(1.05rem,3.2vw,1.45rem);font-weight:700;text-align:center;text-shadow:0 2px 12px rgba(255,255,255,.9)}.mini-mail{width:42px;height:auto;flex:0 0 auto;filter:drop-shadow(0 8px 12px rgba(217,72,116,.16))}.hint{display:inline-grid;gap:2px;place-items:center;padding:10px 22px 8px;border:1px solid rgba(255,107,154,.32);border-radius:999px;color:var(--accent-dark);font-weight:700;background:#ffffffc7;box-shadow:0 14px 34px #d9487429;animation:pulseHint 1.8s ease-in-out infinite}.hint-arrow{display:block;width:12px;height:12px;border-right:3px solid currentColor;border-bottom:3px solid currentColor;transform:rotate(45deg);animation:arrowBounce .9s ease-in-out infinite}.envelope{position:relative;display:block;width:100%;aspect-ratio:1;transform-style:preserve-3d;filter:drop-shadow(0 24px 34px rgba(91,52,68,.22));transition:transform .35s ease,filter .35s ease}.envelope-icon{display:block;width:100%;height:100%;overflow:visible}.envelope-icon .paper-letter{transform-box:fill-box;transform-origin:center bottom;transform:translateY(38px) scale(.9) rotate(-1deg);opacity:0;transition:transform 1.1s cubic-bezier(.18,.9,.18,1.05) .15s,opacity .4s ease .15s}.envelope-icon .closed-flap{transform-box:fill-box;transform-origin:center top;transition:transform .6s cubic-bezier(.4,0,.2,1),opacity .3s ease .25s}.envelope-icon .open-flap{opacity:0;transform:translateY(48px) scaleY(.08) rotateX(72deg);transform-box:fill-box;transform-origin:center bottom;transition:opacity .3s ease,transform .7s cubic-bezier(.16,1,.3,1)}.envelope-icon .seal{transform-box:fill-box;transform-origin:center;animation:pulseSvgSeal 1.35s ease-in-out infinite;transition:opacity .4s ease,transform .5s cubic-bezier(.4,0,.2,1)}.memory-photos{position:absolute;top:0;right:0;bottom:0;left:0;z-index:6;pointer-events:none}.memory-photo{position:absolute;width:clamp(190px,28vw,330px);aspect-ratio:2 / 3;object-fit:cover;border:8px solid rgba(255,250,240,.94);border-bottom-width:22px;border-radius:18px;opacity:0;box-shadow:0 24px 42px #5b34443d;filter:saturate(1.04) brightness(1.03);transition:opacity .75s ease,transform .95s cubic-bezier(.18,.9,.18,1.05)}.photo-one{left:clamp(-154px,-12vw,-82px);top:clamp(120px,18vh,178px);transform:translate(-42px,34px) rotate(-15deg) scale(.78)}.photo-two{right:clamp(-154px,-12vw,-82px);top:clamp(136px,20vh,196px);transform:translate(42px,34px) rotate(14deg) scale(.78)}.card-stage.opened .memory-photo{opacity:1}.card-stage.opened .photo-one{transform:translate(-34px) rotate(-9deg) scale(1);animation:photoFloatLeft 4.8s ease-in-out 1s infinite}.card-stage.opened .photo-two{transform:translate(34px) rotate(10deg) scale(1);animation:photoFloatRight 5.2s ease-in-out 1.2s infinite}.letter{position:absolute;z-index:3;width:min(96vw,760px);min-height:0;padding:clamp(24px,3.4vw,38px);border:1px solid rgba(255,189,130,.55);border-radius:32px;opacity:0;overflow:hidden;text-align:center;transform:translateY(115px) scale(.58) rotateX(10deg);transform-origin:center bottom;pointer-events:none;background:radial-gradient(circle at 18px 18px,rgba(217,72,116,.055) 1.7px,transparent 2px) 0 0 / 34px 34px,linear-gradient(90deg,rgba(255,214,155,.16) 1px,transparent 1px) 34px 0 / 36px 36px,linear-gradient(180deg,rgba(255,255,255,.55),transparent 22%),linear-gradient(180deg,var(--paper),#fff2db);box-shadow:0 34px 72px var(--paper-shadow);transition:opacity .7s ease,transform 1s cubic-bezier(.18,.9,.18,1.05)}.letter:before,.letter:after{position:absolute;content:""}.letter:before{border-radius:50%;background:#ff6b9a29}.letter:after{width:42%;height:160%;left:-62%;top:-30%;border-radius:999px;background:linear-gradient(105deg,transparent,rgba(255,255,255,.72) 45%,transparent 70%);opacity:0;transform:rotate(16deg);pointer-events:none}.letter:before{width:122px;height:122px;right:-34px;top:-35px}.letter-ribbon{position:relative;z-index:1;width:min(100%,320px);margin:-6px auto 8px}.letter-ribbon svg{display:block;width:100%;height:auto;filter:drop-shadow(0 10px 14px rgba(217,72,116,.16))}.letter-visual{position:relative;z-index:1;width:clamp(86px,17vw,124px);margin:0 auto 2px;filter:drop-shadow(0 10px 14px rgba(217,72,116,.18))}.letter-visual svg{display:block;width:100%;height:auto}.letter-kicker{position:relative;z-index:1;margin:0 0 4px;color:var(--accent-dark);font-size:clamp(.9rem,2vw,1rem);font-weight:700;letter-spacing:.04em;text-transform:uppercase}h1{position:relative;z-index:1;margin:0 0 18px;color:#c73668;font-family:Pacifico,cursive;font-size:clamp(2.15rem,5.8vw,3.75rem);line-height:1.08}.typewriter,.signature{position:relative;z-index:1;font-size:clamp(1.04rem,2.2vw,1.28rem);line-height:1.5}.typewriter{min-height:96px;margin:8px auto 0;max-width:540px;white-space:pre-wrap}.typewriter:after{content:"";display:inline-block;width:3px;height:1.1em;margin-left:4px;vertical-align:-.18em;border-radius:999px;background:var(--accent-dark);animation:caret .75s step-end infinite}.final-wish{position:relative;z-index:1;margin:14px auto 0;max-width:540px;color:#c73668;font-size:clamp(1rem,2.2vw,1.22rem);font-weight:700;line-height:1.35;opacity:0;transform:translateY(12px) scale(.96);transition:opacity .8s ease,transform .8s ease}.signature{margin:18px auto 0;max-width:540px;color:#9d2d58;font-family:Pacifico,cursive;font-size:clamp(1.25rem,3.2vw,1.75rem);line-height:1.28;opacity:0;transform:translateY(12px);transition:opacity .8s ease,transform .8s ease}.signature span{color:#c73668;font-family:Pacifico,cursive;font-size:1.2em}.letter-aura,.final-sparkles{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;opacity:0}.letter-aura span{position:absolute;width:clamp(10px,1.8vw,18px);aspect-ratio:1;border-radius:999px 999px 999px 0;background:#ff6b9a75;filter:drop-shadow(0 0 12px rgba(255,107,154,.52));transform:rotate(-45deg)}.letter-aura span:nth-child(1){left:9%;top:38%}.letter-aura span:nth-child(2){right:10%;top:42%;background:#ffd16699}.letter-aura span:nth-child(3){left:18%;bottom:20%;background:#e0c3ff94}.letter-aura span:nth-child(4){right:18%;bottom:24%}.letter-aura span:nth-child(5){left:50%;top:16%;background:#fff6a5ad}.final-sparkles{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;opacity:0}.final-sparkles span{position:absolute;width:clamp(12px,2vw,22px);aspect-ratio:1;background:#ffd166;clip-path:polygon(50% 0,61% 36%,100% 50%,61% 64%,50% 100%,39% 64%,0 50%,39% 36%);filter:drop-shadow(0 0 12px rgba(255,214,102,.9));transform:scale(0)}.final-sparkles span:nth-child(1){left:14%;top:24%;background:#ffb3ca}.final-sparkles span:nth-child(2){right:13%;top:28%;background:#fff6a5}.final-sparkles span:nth-child(3){left:20%;bottom:16%;background:#e0c3ff}.final-sparkles span:nth-child(4){right:21%;bottom:18%;background:#ffd166}.card-stage.opened:hover:after{opacity:1}.card-stage.opened .envelope-button{z-index:1;transform:translateY(252px) rotate(-10deg) scale(.56);pointer-events:none;animation:none;opacity:.95;filter:drop-shadow(0 14px 24px rgba(91,52,68,.16))}.card-stage.opened .thought-popup,.card-stage.opened .pre-hint,.card-stage.opened .hint{opacity:0;visibility:hidden;animation:none;transform:translateY(-10px) scale(.96);transition:opacity .35s ease,visibility 0s linear .35s,transform .35s ease}.card-stage.opened .envelope{filter:drop-shadow(0 12px 20px rgba(91,52,68,.15));animation:envelopeBreath 2.8s ease-in-out infinite}.card-stage.opened .closed-flap{transform:rotateX(180deg);opacity:0}.card-stage.opened .open-flap{opacity:1;transform:translateY(-8px) scaleY(1.08) rotateX(0)}.card-stage.opened .paper-letter{transform:translateY(-70px) scale(.86) rotate(2deg);opacity:.58}.card-stage.opened .seal{opacity:0;transform:scale(0) rotate(-45deg)}.card-stage.opened .letter{z-index:5;opacity:1;transform:translateY(-68px) scale(.9) rotateX(0);pointer-events:auto;transition-delay:.35s}.card-stage.opened .letter:after{animation:letterShine 4.8s ease-in-out 1.1s infinite}.card-stage.opened .letter-aura{opacity:1}.card-stage.opened .letter-aura span{animation:auraFloat 4.2s ease-in-out infinite}.card-stage.opened .letter-aura span:nth-child(2){animation-delay:-1.1s}.card-stage.opened .letter-aura span:nth-child(3){animation-delay:-2s}.card-stage.opened .letter-aura span:nth-child(4){animation-delay:-2.8s}.card-stage.opened .letter-aura span:nth-child(5){animation-delay:-3.4s}.card-stage.message-done .final-wish,.card-stage.message-done .signature{opacity:1;transform:translateY(0) scale(1)}.card-stage.message-done .signature span{animation:signatureGlow 1.8s ease-in-out infinite alternate}.card-stage.message-done .final-sparkles{opacity:1}.card-stage.message-done .final-sparkles span{animation:finalSparklePop 1.4s ease-out both}.card-stage.message-done .final-sparkles span:nth-child(2){animation-delay:.14s}.card-stage.message-done .final-sparkles span:nth-child(3){animation-delay:.26s}.card-stage.message-done .final-sparkles span:nth-child(4){animation-delay:.38s}.card-stage.message-done .typewriter:after{opacity:0}@keyframes floatEnvelope{0%,to{transform:translateY(0)}50%{transform:translateY(-14px)}}@keyframes thoughtBlink{0%,32%{opacity:0;transform:translateY(10px) scale(.96) rotate(-2deg)}42%,68%{opacity:1;transform:translateY(0) scale(1) rotate(1deg)}78%,to{opacity:0;transform:translateY(-8px) scale(.97) rotate(-1deg)}}@keyframes pulseSvgSeal{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}@keyframes envelopeBreath{0%,to{filter:drop-shadow(0 12px 20px rgba(91,52,68,.15)) drop-shadow(0 0 0 rgba(255,107,154,0))}50%{filter:drop-shadow(0 14px 24px rgba(91,52,68,.18)) drop-shadow(0 0 22px rgba(255,107,154,.24))}}@keyframes letterShine{0%,42%{left:-62%;opacity:0}52%{opacity:.85}68%,to{left:124%;opacity:0}}@keyframes auraFloat{0%,to{transform:translateY(0) rotate(-45deg) scale(.8);opacity:.34}50%{transform:translateY(-18px) rotate(-35deg) scale(1.08);opacity:.82}}@keyframes photoFloatLeft{0%,to{transform:translate(-34px) rotate(-9deg) scale(1)}50%{transform:translate(-40px,-12px) rotate(-12deg) scale(1.03)}}@keyframes photoFloatRight{0%,to{transform:translate(34px) rotate(10deg) scale(1)}50%{transform:translate(42px,-10px) rotate(13deg) scale(1.03)}}@keyframes signatureGlow{0%{text-shadow:0 0 0 rgba(255,107,154,0)}to{text-shadow:0 0 18px rgba(255,107,154,.55),0 0 34px rgba(255,209,102,.32)}}@keyframes finalSparklePop{0%{transform:translateY(12px) scale(0) rotate(0);opacity:0}38%{transform:translateY(0) scale(1.22) rotate(12deg);opacity:1}to{transform:translateY(-10px) scale(.84) rotate(28deg);opacity:0}}@keyframes pulseHint{0%,to{transform:scale(1)}50%{transform:scale(1.04)}}@keyframes arrowBounce{0%,to{transform:translateY(0) rotate(45deg);opacity:.75}50%{transform:translateY(5px) rotate(45deg);opacity:1}}@keyframes glow{0%{transform:scale(.94);opacity:.75}to{transform:scale(1.05);opacity:1}}@keyframes drift{0%{transform:translateZ(0) scale(.96)}to{transform:translate3d(18px,-22px,0) scale(1.08)}}@keyframes twinkle{0%,to{transform:scale(.85) rotate(0);opacity:.48}50%{transform:scale(1.16) rotate(8deg);opacity:1}}@keyframes fall{to{transform:translate3d(28px,118vh,0) rotate(240deg)}}@keyframes caret{50%{opacity:0}}@media(max-width:680px){body{overflow-y:auto}.scene{min-height:100svh;padding:18px 12px}.card-stage{min-height:690px}.envelope-button{width:min(520px,92vw)}.thought-popup{max-width:min(58vw,300px)}.thought-popup-one{left:4vw;right:auto;top:26px}.thought-popup-two{left:auto;right:-16vw;top:auto;bottom:18px}.thought-popup-three{left:3vw;bottom:118px}.thought-popup-four{right:6vw;top:168px}.thought-popup:before{right:72px;left:auto}.thought-popup:after{right:52px;left:auto}.letter{width:min(98vw,650px);padding:24px 20px;border-radius:26px}.typewriter{min-height:150px}.letter-ribbon{width:min(100%,280px)}.letter-visual{width:clamp(78px,21vw,112px)}.bokeh-one,.bokeh-two{opacity:.45}.memory-photo{width:clamp(128px,34vw,190px);border-width:6px;border-bottom-width:18px;border-radius:14px}.photo-one{left:-22vw;top:136px}.photo-two{right:-22vw;top:156px}.card-stage.opened .envelope-button{transform:translateY(230px) rotate(-10deg) scale(.48)}.card-stage.opened .letter{transform:translateY(-66px) scale(.92) rotateX(0)}}@media(max-width:420px){.card-stage{min-height:610px}.envelope-button{width:min(420px,94vw)}.thought-popup{padding:12px 14px;font-size:.9rem}.thought-popup-one{left:3vw;right:auto;top:20px}.thought-popup-two{left:auto;right:-22vw;bottom:14px}.thought-popup-three{left:1vw;bottom:112px}.thought-popup-four{right:4vw;top:146px}.pre-hint{max-width:320px}.mini-mail{width:34px}.typewriter{min-height:172px;font-size:1rem}.signature{font-size:1.18rem}.memory-photo{width:clamp(108px,37vw,148px);border-width:5px;border-bottom-width:15px}.photo-one{left:-28vw;top:142px}.photo-two{right:-28vw;top:168px}.card-stage.opened .envelope-button{transform:translateY(228px) rotate(-10deg) scale(.42)}.card-stage.opened .letter{transform:translateY(-62px) scale(.94) rotateX(0)}}