.envelope-cover{position:fixed;inset:0;z-index:30;background:radial-gradient(ellipse at 50% 35%,#fcf8ef,#e8dfd0);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:35px 24px;overflow:hidden;transition:opacity .65s ease,visibility .65s;perspective:1400px}.envelope-cover[hidden]{display:none}.envelope-kicker{font-size:11px;color:#967746;letter-spacing:2px;margin:0 0 14px}.envelope-title{font:400 clamp(36px,6vw,52px)/1.6 'Aref Ruqaa',serif;color:#5b202d;margin:0 0 64px}.envelope-button{position:relative;display:block;width:min(440px,86vw);aspect-ratio:1.55;border:0;padding:0;background:transparent;cursor:pointer;perspective:1200px;-webkit-tap-highlight-color:transparent;color:inherit;flex-shrink:0}.envelope-button:focus-visible{outline:2px solid #5b202d;outline-offset:20px}.envelope-back{position:absolute;inset:0;background:#cbb791;border-radius:4px;box-shadow:0 24px 45px #624c3430,0 3px 8px #624c3420}.envelope-letter{position:absolute;inset:9% 6% 6%;background:#fffaf0;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid #cbb791;transition:transform .9s .45s ease;box-shadow:0 0 0 7px #fffaf0,0 0 0 8px #bda77c;z-index:1}.envelope-letter small{font:11px 'Noto Sans Arabic',sans-serif;color:#92744b}.envelope-letter strong{font:400 clamp(32px,6vw,48px) 'Aref Ruqaa',serif;color:#5b202d;margin:12px 0}.envelope-letter i{color:#a58754;font-style:normal}.envelope-pocket{position:absolute;inset:0;z-index:3;border-radius:3px;overflow:hidden;filter:drop-shadow(0 -1px 1px #8f754426)}.envelope-pocket:before{content:'';position:absolute;inset:0;background:linear-gradient(115deg,#e2d3b7,#eee3ce);clip-path:polygon(0 0,50% 53%,100% 0,100% 100%,0 100%)}.envelope-pocket:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#e8d9bc,#f2e7d0);clip-path:polygon(0 100%,50% 48%,100% 100%)}.envelope-flap{position:absolute;inset:0;z-index:4;transform-origin:top;transition:transform .8s ease,z-index 0s .4s;backface-visibility:hidden;filter:drop-shadow(0 3px 2px #806b3e25)}.envelope-flap:before{content:'';position:absolute;inset:0;background:linear-gradient(175deg,#f4e9d4,#dac59f);clip-path:polygon(0 0,100% 0,50% 58%)}.wax-seal{position:absolute;z-index:5;top:47%;left:50%;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:46% 51% 45% 49%;background:radial-gradient(circle at 30% 22%,#a14858,#66202f 65%,#481723);box-shadow:0 4px 7px #3c172843,inset 0 0 0 3px #b7636350,inset 0 0 0 7px #4e192333;border:1px solid #a6575c;display:grid;place-items:center;font:28px 'Aref Ruqaa',serif;color:#e8c798;text-shadow:0 1px #35121c;transition:opacity .3s,transform .4s}.envelope-hint{font-size:13px;color:#5b202d;margin:38px 0 8px}.envelope-subhint{font-size:10px;color:#8b7b69;margin:0}.envelope-cover.opening .wax-seal{opacity:0;transform:translate(-50%,-50%) scale(1.2)}.envelope-cover.opening .envelope-flap{transform:rotateX(180deg);z-index:0}.envelope-cover.opening .envelope-letter{transform:translateY(-42%)}.envelope-cover.leaving{opacity:0;visibility:hidden;pointer-events:none}body.envelope-locked{overflow:hidden}@media(max-height:600px){.envelope-title{margin-bottom:30px;font-size:32px}.envelope-button{width:min(330px,75vw)}.envelope-hint{margin-top:20px}}@media(prefers-reduced-motion:reduce){.envelope-cover,.envelope-letter,.envelope-flap,.wax-seal{transition:none}}

.names:focus{outline:none}