.envelope-intro[hidden]{display:none!important}
body.envelope-active{overflow:hidden}
.envelope-intro{position:fixed;inset:0;z-index:1000;background:#f4f0e8;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:30px 24px;overflow:hidden;isolation:isolate;transition:opacity .65s ease,visibility .65s}
.envelope-intro::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 15% 15%,#ddd8c388,transparent 45%),radial-gradient(ellipse at 90% 90%,#d9dfcb66,transparent 45%),repeating-linear-gradient(0deg,#60553702 0 1px,transparent 1px 3px);z-index:-1}
.envelope-heading{text-align:center;margin-bottom:75px;position:relative;z-index:2;transition:opacity .4s,transform .6s}
.envelope-heading>.eyebrow{font-size:11px;letter-spacing:2px;color:#7c826e}
.envelope-heading h2{font-family:'Cormorant Garamond',serif;font-size:clamp(42px,5vw,65px);font-weight:400;margin:20px 0 12px;line-height:1.05;color:#343f34}
.envelope-heading p{font-size:14px;color:#848474;margin:0}
.envelope-scene{position:relative;width:min(560px,85vw);aspect-ratio:1.5;perspective:1400px;flex:none;filter:drop-shadow(0 22px 25px #554a3425);transition:transform 1s cubic-bezier(.2,.7,.2,1),opacity .6s}
.envelope-back{position:absolute;inset:0;background:#dcd4c0;border:1px solid #cec2a9;border-radius:4px;z-index:0}
.envelope-letter{position:absolute;inset:7% 6% 3%;background:#fffcf6;z-index:1;padding:12% 8% 5%;text-align:center;box-shadow:0 0 0 1px #ded6c7,0 8px 25px #5e4a3022;transition:transform 1.1s cubic-bezier(.2,.7,.2,1) .8s}
.envelope-letter::before{content:'';position:absolute;inset:11px;border:1px solid #d9d6c7;pointer-events:none}
.envelope-letter .letter-small{display:block;font-size:9px;letter-spacing:2px;color:#969983;line-height:1.7}
.envelope-letter .letter-monogram{display:block;font-family:'Cormorant Garamond',serif;font-size:clamp(38px,6vw,62px);color:#5e6852;line-height:1.2;margin:10px 0}
.envelope-letter .letter-monogram i{font-size:.75em;font-weight:400;color:#a2aa8e}
.envelope-letter p{font-family:'Cormorant Garamond',serif;font-size:24px;color:#56604c;margin:10px 0}
.envelope-pocket{position:absolute;inset:0;background:linear-gradient(32deg,#e8dfce,#f3eadb 48%,#e7ddca);clip-path:polygon(0 0,50% 57%,100% 0,100% 100%,0 100%);z-index:3;border-radius:0 0 4px 4px}
.envelope-pocket::before{content:'';position:absolute;inset:0;background:linear-gradient(146deg,transparent 49.8%,#c7bba055 50%,transparent 50.3%),linear-gradient(34deg,transparent 49.8%,#c7bba055 50%,transparent 50.3%)}
.envelope-pocket::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,#94774e03 0 1px,transparent 1px 3px)}
.envelope-flap{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 58%);background:linear-gradient(180deg,#f6efdf,#e6dac3);transform-origin:50% 0;z-index:4;filter:drop-shadow(0 3px 2px #725e3525);transition:transform 1s cubic-bezier(.45,.05,.25,1) .22s;backface-visibility:hidden}
.envelope-flap::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(45deg,#6b563403 0 1px,transparent 1px 4px)}
.wax-seal{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);width:94px;height:94px;border:0;padding:0;z-index:5;background:radial-gradient(ellipse at 30% 22%,#d2636a 0%,#a72c3b 32%,#781327 75%,#a62b3e);border-radius:48% 52% 47% 53% / 53% 47% 53% 47%;box-shadow:inset 0 0 0 3px #ac3b48,inset 0 0 0 6px #77192a,inset 0 0 0 8px #c4545f,2px 5px 7px #32161a55;cursor:pointer;transition:transform .35s,opacity .35s,filter .35s;color:#de7b82;animation:seal-glow 3s ease-in-out infinite}
.wax-seal::before{content:'';position:absolute;inset:10px;border:1px solid #db6f7980;border-radius:50%;box-shadow:inset 2px 3px 4px #59102066,1px 1px 2px #e8868c66}
.wax-seal::after{content:'';position:absolute;inset:16px;border:1px solid #65132388;border-radius:50%}
.wax-seal svg{position:absolute;width:44px;height:44px;left:25px;top:15px;stroke:#db7b82;fill:none;stroke-width:1.5;filter:drop-shadow(1px 2px 0 #671023);z-index:1}
.wax-seal>span{position:absolute;left:0;right:0;bottom:15px;font-family:'Cormorant Garamond',serif;font-size:19px;line-height:1;text-shadow:1px 1px #671023;font-weight:500;z-index:1}
.wax-seal:hover{transform:translate(-50%,-50%) scale(1.07);filter:brightness(1.08)}
.wax-seal:focus-visible{outline:3px solid #536b43;outline-offset:8px}
.envelope-instruction{font-size:12px;letter-spacing:1.3px;color:#7d806e;margin:35px 0 0;text-align:center;transition:opacity .3s}
.skip-envelope{position:absolute;right:30px;bottom:25px;border:0;border-bottom:1px solid #acb09d;background:none;color:#727a63;padding:9px 0;font-size:12px;z-index:10}
.envelope-intro.is-opening .wax-seal{opacity:0;transform:translate(-50%,-30%) scale(.8) rotate(12deg);animation:none;pointer-events:none}
.envelope-intro.is-opening .envelope-flap{transform:rotateX(180deg)}
.envelope-intro.is-opening .envelope-letter{transform:translateY(-49%)}
.envelope-intro.is-opening .envelope-heading{opacity:0;transform:translateY(-20px)}
.envelope-intro.is-opening .envelope-instruction{opacity:0}
.envelope-intro.is-revealing{opacity:0;pointer-events:none;visibility:hidden}
.envelope-intro.is-revealing .envelope-scene{transform:translateY(40px) scale(1.06)}
@keyframes seal-glow{50%{box-shadow:inset 0 0 0 3px #ac3b48,inset 0 0 0 6px #77192a,inset 0 0 0 8px #c4545f,2px 5px 7px #32161a55,0 0 0 8px #a72c3b0c}}
@media(max-width:550px){.envelope-intro{padding:25px 15px 65px}.envelope-heading{margin-bottom:65px}.envelope-heading>.eyebrow{font-size:10px;letter-spacing:1.5px}.envelope-heading h2{font-size:44px}.envelope-heading p{font-size:13px}.envelope-scene{width:90vw;max-width:450px}.wax-seal{width:76px;height:76px}.wax-seal svg{width:35px;height:35px;left:20px;top:11px}.wax-seal>span{font-size:16px;bottom:11px}.wax-seal::before{inset:8px}.wax-seal::after{inset:13px}.envelope-letter{padding:7% 7% 4%}.envelope-letter .letter-small{font-size:7px;letter-spacing:1px}.envelope-letter .letter-monogram{font-size:39px;margin:8px 0}.envelope-letter p{font-size:19px;margin:6px 0}.envelope-instruction{font-size:11px;letter-spacing:.8px;margin-top:30px}.skip-envelope{right:20px;bottom:20px;font-size:12px}}
@media(max-height:620px) and (min-width:551px){.envelope-heading{margin-bottom:35px}.envelope-heading h2{font-size:38px;margin:12px 0}.envelope-scene{width:390px}.envelope-letter .letter-monogram{font-size:42px}.envelope-letter p{font-size:19px}.envelope-instruction{margin-top:20px}.wax-seal{width:80px;height:80px}.wax-seal svg{width:36px;height:36px;left:22px;top:12px}.wax-seal>span{bottom:11px;font-size:16px}}
@media(prefers-reduced-motion:reduce){.envelope-intro,.envelope-scene,.envelope-letter,.envelope-heading,.envelope-flap,.wax-seal{animation:none!important;transition:none!important}}