:root{font-family:Vazirmatn,Tahoma,sans-serif;color:#714d57;background:#fff8f6;font-synthesis:none}
*{box-sizing:border-box}
body{min-height:100svh;margin:0;padding:22px 14px 28px;display:grid;place-items:center;overflow-x:hidden;background:radial-gradient(ellipse at 10% 12%,#ffe4e9 0,transparent 38%),radial-gradient(ellipse at 90% 84%,#f9e5e5 0,transparent 38%),linear-gradient(145deg,#fffaf8,#fff2f1)}
.page{width:min(100%,650px);text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 15px;border:1px solid #f1d6d7;border-radius:999px;background:#ffffffb8;color:#a87980;font-size:12px}
h1{font-size:clamp(24px,5vw,35px);font-weight:600;color:#865b66;margin:14px 0 5px}
.intro{margin:0;color:#a18489;font-size:14px;line-height:1.9}
.scene{position:relative;width:min(94vw,610px);aspect-ratio:1/1;margin:8px auto 0;isolation:isolate;overflow:visible}
.glow{position:absolute;inset:10%;z-index:-1;border-radius:50%;background:radial-gradient(ellipse,#f5dfe1 0,transparent 69%);filter:blur(8px)}
.envelope-base,.bouquet,.envelope-front,.envelope-closed{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
.envelope-base{z-index:1;opacity:0;transition:opacity .55s ease}
.bouquet{z-index:2;transform:translateY(35%) scale(.72);transform-origin:50% 90%;opacity:0;transition:transform 1.15s cubic-bezier(.16,1,.3,1),opacity .65s ease}
.envelope-front{z-index:4;clip-path:polygon(0 43%,50% 73%,100% 43%,100% 100%,0 100%);pointer-events:none}
.envelope-closed{z-index:5;opacity:1;transition:opacity .55s ease;pointer-events:none}
.scene.open .envelope-base{opacity:1}
.scene.open .envelope-closed{opacity:0}
.scene.open .bouquet{transform:translateY(-1%) scale(1);opacity:1}
.rose-hit{position:absolute;z-index:6;width:17%;height:20%;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .4s,transform .25s}
.scene.open .rose-hit{opacity:1;pointer-events:auto}
.rose-hit:hover,.rose-hit:focus-visible{outline:2px solid #ffffffd9;outline-offset:1px;box-shadow:0 0 0 6px #e8a1ad55;transform:scale(1.06)}
.hit-1{left:7%;top:22%}.hit-2{left:29%;top:20%}.hit-3{right:29%;top:21%}.hit-4{right:7%;top:22%}
.seal{position:absolute;z-index:8;left:50%;top:63%;transform:translate(-50%,-50%);width:66px;height:66px;border:1px solid #fff1e9;border-radius:50%;background:radial-gradient(circle at 32% 24%,#fff0d9,#d78a82 68%,#b96a68);color:#fff9ec;box-shadow:0 5px 12px #a55d5a55,inset 0 0 0 4px #ffffff28;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;transition:top .6s,transform .3s,filter .3s}
.seal:hover{filter:brightness(1.08);transform:translate(-50%,-50%) scale(1.05)}
.seal-heart{font:28px Georgia,serif;line-height:1}
.seal-label{font-size:10px;line-height:1.4}
.scene.open .seal{top:76%;width:57px;height:57px}
.letter{position:absolute;left:50%;top:2%;z-index:10;width:min(380px,88vw);min-height:158px;padding:17px 21px 19px;border:1px solid #f0dadd;border-radius:26px 26px 26px 10px;background:linear-gradient(150deg,#fffefe,#fff0f2);box-shadow:0 16px 36px #88535b30;transform:translate(-50%,-20px) scale(.86) rotate(-1deg);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s,transform .5s cubic-bezier(.16,1,.3,1),visibility .35s}
.letter.show{transform:translate(-50%,0) scale(1) rotate(0);opacity:1;visibility:visible}
.letter:after{content:"";position:absolute;left:var(--pointer-x,50%);bottom:-14px;transform:translateX(-50%);border-width:15px 14px 0;border-style:solid;border-color:#fff0f2 transparent transparent;filter:drop-shadow(0 2px 1px #dcaeb3)}
.letter-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #f1dfe1;padding-bottom:9px;color:#a56d78;font-size:13px;font-weight:600}
.letter-close{width:28px;height:28px;border:0;border-radius:50%;background:#f7e5e7;color:#946a70;font-size:18px;line-height:1;cursor:pointer;pointer-events:auto}
.letter p{margin:13px auto 0;color:#704d57;font-size:16px;line-height:2.05;font-weight:500}
.hint{margin:0;color:#aa8a8d;font-size:12px;line-height:1.9}
.footer{margin:10px 0 0;color:#bc9a9a;font-size:11px}
@media(max-width:480px){body{padding-top:14px}.scene{width:min(98vw,480px)}.seal{width:58px;height:58px}.scene.open .seal{width:51px;height:51px}.letter{top:1%;width:min(370px,91vw);min-height:146px;padding:14px 17px}.letter p{font-size:15px}.hint{font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:.01ms!important;scroll-behavior:auto!important}}