:root{--ink:#110d1c;--cream:#fff8ee;--pink:#ff718e;--gold:#ffc77c;--violet:#9b86ff;--ease:cubic-bezier(.16,1,.3,1)}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;background:var(--ink);overflow:hidden}body{color:var(--cream);font-family:Vazirmatn,sans-serif}.viewer{position:relative;width:100%;height:100%;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 50% 105%,#51335b 0%,#261b3c 32%,#120d20 71%,#0a0811 100%)}.stars,.particles,.petals,.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}.stars i{position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:#fff;opacity:var(--o);box-shadow:0 0 calc(var(--s) * 3) #fff;animation:twinkle var(--d) ease-in-out infinite var(--delay)}.ambient{position:absolute;width:70vmax;height:70vmax;right:50%;bottom:-54vmax;transform:translateX(50%);border-radius:50%;background:radial-gradient(circle,rgba(255,172,205,.17),rgba(139,109,247,.08) 35%,transparent 68%);filter:blur(14px);animation:breathe 8s ease-in-out infinite}.topbar{position:absolute;z-index:8;top:0;left:0;width:100%;padding:22px clamp(20px,4vw,55px);display:flex;align-items:center;justify-content:space-between;opacity:0;transition:opacity .7s var(--ease)}.viewer.ready .topbar{opacity:1}.brand{display:flex;align-items:center;gap:9px;color:rgba(255,255,255,.72);font-family:'Space Grotesk';font-size:12px;letter-spacing:.04em}.brand b{display:grid;place-items:center;width:25px;height:25px;border-radius:8px;background:linear-gradient(135deg,var(--pink),var(--gold));color:#25111c;font-size:13px}.music{display:flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.07);backdrop-filter:blur(10px);padding:8px 12px;color:rgba(255,255,255,.75);font-size:10px}.music i{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold)}.music.playing i{animation:pulse .8s ease-in-out infinite}.stage{position:relative;z-index:2;width:100%;height:100%;display:grid;place-items:center;padding:90px 20px 40px}.intro{text-align:center;opacity:1;transform:translateY(0);transition:opacity .8s var(--ease),transform .8s var(--ease)}.intro.hidden{opacity:0;transform:translateY(-20px);pointer-events:none}.intro .eyebrow{display:inline-flex;align-items:center;gap:7px;color:rgba(255,255,255,.64);font-size:11px}.intro .eyebrow:before,.intro .eyebrow:after{content:'';width:25px;height:1px;background:rgba(255,255,255,.3)}.intro h1{max-width:390px;margin:17px auto 0;font-size:clamp(27px,4vw,44px);line-height:1.45;letter-spacing:-.045em}.intro p{margin-top:14px;color:rgba(255,255,255,.62);font-size:12px}.open-area{position:absolute;inset:0;z-index:3;display:grid;place-items:center;padding-top:105px;opacity:0;transform:translateY(25px) scale(.97);pointer-events:none;transition:opacity .9s var(--ease),transform .9s var(--ease)}.open-area.show{opacity:1;transform:none;pointer-events:auto}.envelope-wrap{position:relative;width:min(76vw,370px);height:min(55vw,250px);perspective:1100px;cursor:pointer;filter:drop-shadow(0 28px 31px rgba(0,0,0,.4));transition:transform .4s var(--ease)}.envelope-wrap:hover{transform:translateY(-8px) scale(1.025)}.envelope{position:absolute;inset:0;transform-style:preserve-3d}.env-back{position:absolute;inset:0;border-radius:10px 10px 24px 24px;background:linear-gradient(145deg,#f3a49f,#cc677d);overflow:hidden}.env-back:after{content:'';position:absolute;inset:0;background:linear-gradient(42deg,transparent 49.5%,rgba(117,42,69,.3) 50%,transparent 50.5%),linear-gradient(-42deg,transparent 49.5%,rgba(117,42,69,.3) 50%,transparent 50.5%)}.letter{position:absolute;z-index:1;left:8%;right:8%;bottom:7%;height:83%;padding:21px 17px;border-radius:6px;background:linear-gradient(145deg,#fffaf0,#f6e6db);color:#6b4660;transform:translateY(9%);transition:transform 1s .32s var(--ease);box-shadow:0 4px 10px rgba(82,30,55,.16);text-align:center}.letter i{display:block;color:#d97c91;font-size:15px;font-style:normal}.letter span{display:block;margin-top:12px;font-size:9px;line-height:2}.env-front{position:absolute;z-index:3;inset:0;border-radius:10px 10px 24px 24px;background:linear-gradient(145deg,#faaca4,#d87389);clip-path:polygon(0 0,50% 54%,100% 0,100% 100%,0 100%);box-shadow:inset 0 -10px 25px rgba(119,48,71,.12)}.env-flap{position:absolute;z-index:4;top:0;left:0;width:100%;height:61%;transform-origin:50% 0;transform-style:preserve-3d;transition:transform .95s var(--ease);filter:drop-shadow(0 1px 1px rgba(100,35,58,.17))}.env-flap:before,.env-flap:after{content:'';position:absolute;inset:0;backface-visibility:hidden;clip-path:polygon(0 0,100% 0,50% 100%);border-radius:9px 9px 0 0}.env-flap:before{background:linear-gradient(145deg,#ffc2b5,#e88898)}.env-flap:after{background:linear-gradient(145deg,#d8708c,#bd546f);transform:rotateX(180deg)}.seal{position:absolute;z-index:5;top:50%;left:50%;display:grid;place-items:center;width:43px;height:43px;border:2px solid rgba(255,238,211,.64);border-radius:50%;background:linear-gradient(135deg,#e65d7c,#bd3f65);color:#ffe1af;font-size:17px;transform:translate(-50%,-50%);box-shadow:0 5px 10px rgba(111,28,58,.24);transition:opacity .3s var(--ease)}.hint{position:absolute;top:calc(100% + 24px);left:50%;width:max-content;transform:translateX(-50%);color:rgba(255,255,255,.68);font-size:11px;animation:hint 2.3s ease-in-out infinite}.open-area.open .env-flap{transform:rotateX(178deg)}.open-area.open .letter{transform:translateY(-49%)}.open-area.open .seal{opacity:0}.message-scene{position:absolute;z-index:5;width:min(92vw,570px);text-align:center;opacity:0;transform:translateY(25px) scale(.96);pointer-events:none;transition:opacity 1s var(--ease),transform 1s var(--ease)}.message-scene.show{opacity:1;transform:none;pointer-events:auto}.message-card{position:relative;padding:clamp(30px,5vw,52px) clamp(22px,5vw,57px);overflow:hidden;border:1px solid rgba(255,255,255,.2);border-radius:27px;background:linear-gradient(145deg,rgba(255,255,255,.15),rgba(255,255,255,.045));box-shadow:0 34px 80px -36px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.2);backdrop-filter:blur(18px)}.message-card:before{content:'';position:absolute;width:180px;height:180px;top:-110px;right:-60px;border-radius:50%;background:rgba(255,190,204,.17);filter:blur(20px)}.ornament{position:relative;color:#ffd39a;font-size:20px}.from{position:relative;margin-top:20px;color:rgba(255,255,255,.65);font-size:11px}.typed{position:relative;min-height:104px;margin-top:15px;font-size:clamp(18px,2.6vw,25px);font-weight:700;line-height:2;letter-spacing:-.025em}.typed:after{content:'';display:inline-block;width:2px;height:1.1em;margin-right:5px;background:var(--gold);vertical-align:-.15em;animation:blink .8s step-end infinite}.typed.done:after{display:none}.signature{position:relative;margin-top:23px;color:#ffd49a;font-family:cursive;font-size:22px}.continue{position:relative;margin-top:27px;padding:10px 16px;border:1px solid rgba(255,255,255,.21);border-radius:999px;background:rgba(255,255,255,.07);color:#fff;font-size:10.5px;opacity:0;transform:translateY(8px);transition:.5s var(--ease)}.continue.show{opacity:1;transform:none}.ending{position:absolute;z-index:7;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 50%,rgba(104,63,120,.84),rgba(13,9,23,.96) 72%);opacity:0;pointer-events:none;transition:opacity 1s var(--ease)}.ending.show{opacity:1;pointer-events:auto}.ending-inner{text-align:center;transform:translateY(20px);transition:transform 1.1s var(--ease)}.ending.show .ending-inner{transform:none}.ending .big-heart{font-size:52px;animation:heart 1.6s ease-in-out infinite}.ending h2{margin-top:17px;font-size:31px;letter-spacing:-.04em}.ending p{margin-top:10px;color:rgba(255,255,255,.62);font-size:12px}.ending a{display:inline-flex;margin-top:27px;padding:10px 16px;border-radius:999px;background:var(--warm);color:#29111b;font-size:11px;font-weight:800}.loading{position:absolute;z-index:30;inset:0;display:grid;place-items:center;background:#0d0915;transition:opacity .8s var(--ease),visibility .8s}.loading.hide{opacity:0;visibility:hidden}.loader{text-align:center}.loader .mark{display:grid;place-items:center;width:52px;height:52px;margin:auto;border-radius:17px;background:var(--warm);color:#23111b;font-size:25px;animation:loader 1.5s ease-in-out infinite}.loader p{margin-top:18px;color:rgba(255,255,255,.68);font-size:11px}.loader .line{width:115px;height:2px;margin:13px auto 0;overflow:hidden;border-radius:9px;background:rgba(255,255,255,.1)}.loader .line:after{content:'';display:block;width:42%;height:100%;border-radius:inherit;background:var(--gold);animation:loading 1.8s ease-in-out infinite}.countdown{position:absolute;z-index:20;inset:0;display:grid;place-items:center;background:rgba(10,7,17,.75);backdrop-filter:blur(9px);opacity:0;visibility:hidden;transition:.4s var(--ease)}.countdown.show{opacity:1;visibility:visible}.countdown b{font-family:'Space Grotesk';font-size:clamp(90px,18vw,190px);line-height:1;background:var(--warm);color:transparent;background-clip:text;-webkit-background-clip:text;animation:count .85s var(--ease)}.heart-particle{position:absolute;color:#ff8fa6;font-size:var(--size);animation:rise var(--time) linear forwards}.petal{position:absolute;width:var(--w);height:calc(var(--w) * .72);border-radius:90% 0 90% 0;background:linear-gradient(135deg,#ffb4c5,#db5d7c);opacity:.9;animation:fall var(--time) linear forwards}.confetti i{position:absolute;width:var(--w);height:calc(var(--w) * 1.8);background:var(--c);transform:rotate(var(--r));animation:confetti var(--time) var(--ease) forwards}@keyframes twinkle{50%{opacity:calc(var(--o) * .25);transform:scale(.55)}}@keyframes breathe{50%{transform:translateX(50%) scale(1.12);opacity:.75}}@keyframes pulse{50%{transform:scale(1.65);opacity:.5}}@keyframes hint{50%{transform:translate(-50%,7px);opacity:.55}}@keyframes blink{50%{opacity:0}}@keyframes loader{50%{transform:scale(.89) rotate(-7deg)}}@keyframes loading{0%{transform:translateX(-120%)}100%{transform:translateX(290%)}}@keyframes count{from{transform:scale(1.35);opacity:0}to{transform:scale(1);opacity:1}}@keyframes rise{to{transform:translate(var(--x),-120vh) rotate(110deg);opacity:0}}@keyframes fall{to{transform:translate(var(--x),110vh) rotate(520deg);opacity:0}}@keyframes confetti{to{transform:translate(var(--x),var(--y)) rotate(calc(var(--r) + 650deg));opacity:0}}@keyframes heart{50%{transform:scale(1.16)}}@media(max-width:520px){.topbar{padding:17px}.brand{font-size:10px}.music{font-size:9px;padding:7px 10px}.envelope-wrap{width:84vw;height:56vw}.message-card{border-radius:22px}.typed{min-height:116px}.stage{padding-top:65px}}