.envelope-welcome{max-width:1250px;margin:0 auto;min-height:86vh;display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;gap:55px;padding:35px}.envelope-welcome h1{font-size:clamp(35px,4vw,60px);font-weight:400;line-height:1.12;color:#41392e;letter-spacing:-1.5px}.envelope-welcome>div:first-child>p{font-size:17px;line-height:1.7;max-width:320px;color:#706d6a}.envelope-stage{position:relative;min-height:670px;perspective:1400px;display:flex;align-items:center;justify-content:center}.envelope-object{position:absolute;width:95%;height:330px;transform-style:preserve-3d;z-index:3}.envelope-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:9px;border:1px solid #d9c7a4;box-shadow:0 26px 65px #5d503b22;background:#f1e7d4}.envelope-front{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;background:repeating-linear-gradient(0deg,#ffffff04 0px,#ffffff04 1px,transparent 1px,transparent 4px),linear-gradient(130deg,#fbf4e6,#eadeca)}.envelope-front:before{content:'';position:absolute;inset:16px;border:1px solid #c7b18585;border-radius:3px}.envelope-front small{color:#8a795c;font-size:11px;letter-spacing:2px;text-transform:uppercase}.envelope-front strong{font-family:Georgia,serif;font-size:29px;line-height:1.3;text-align:center;max-width:85%;font-weight:400;color:#49433b}.envelope-ornament{color:#a68c55;font-size:28px}.envelope-address{font-size:10px;letter-spacing:5px;color:#a08a60;margin-top:12px}.envelope-back{transform:rotateY(180deg);background:#e8ddc7}.envelope-folds{position:absolute;inset:0;background:linear-gradient(32deg,#f1e7d4 49.7%,#cebfa6 50%,transparent 50.3%),linear-gradient(-32deg,#eee2cb 49.7%,#d5c5a7 50%,transparent 50.3%);border-radius:8px}.envelope-flap{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 60%);background:linear-gradient(#faf3e4,#decbaa);transform-origin:top;z-index:2}.envelope-seal{position:absolute;left:calc(50% - 30px);top:calc(52% - 30px);width:60px;height:60px;display:grid;place-items:center;border-radius:48%;background:radial-gradient(circle at 35% 30%,#61594f,#3f372c);border:3px double #8a8278;box-shadow:0 3px 6px #35302945;z-index:4}.envelope-seal svg{width:32px;height:32px;color:#efe5ce;opacity:.95}.envelope-letter{position:relative;z-index:1;width:100%;max-width:540px;background:#fffdf8!important;border:1px solid #e6dcc8!important;border-radius:8px!important;padding:32px!important;box-shadow:0 18px 55px #3c373012;opacity:0;transform:translateY(110px) scale(.82);pointer-events:none}.envelope-letter h2{font:30px Georgia,serif;color:#41392e;margin-top:0}.envelope-letter p{font-size:14px;line-height:1.7}.envelope-letter .btn{margin-top:12px}.envelope-letter>.textbtn{margin-top:12px}.is-opening .envelope-object{animation:envelope-turn 5s forwards}.is-opening .envelope-seal{animation:seal-break 5s forwards}.is-opening .envelope-flap{animation:flap-open 5s forwards}.is-opening .envelope-letter{animation:letter-rise 5s forwards}@keyframes envelope-turn{0%,29.2%{transform:rotateY(0);visibility:visible}50.8%,74%{transform:rotateY(180deg);visibility:visible}100%{transform:rotateY(180deg) translateY(160px);visibility:hidden}}@keyframes seal-break{0%,57%{transform:scale(1);opacity:1}69%,100%{transform:translateY(28px) rotate(20deg) scale(.6);opacity:0}}@keyframes flap-open{0%,65%{transform:rotateX(0)}82%,100%{transform:rotateX(175deg)}}@keyframes letter-rise{0%,68%{opacity:0;transform:translateY(100px) scale(.82);z-index:1}81%{opacity:1;transform:translateY(-45px) scale(.9);z-index:4}100%{opacity:1;transform:translateY(0) scale(1);z-index:4;pointer-events:auto}}
/* Keep opacity off the 3-D parent: it flattens the faces and can expose the reverse seal/text. */
.is-opening .envelope-object{animation-timing-function:linear}.is-opening .envelope-front{animation:envelope-front-face 5s step-end forwards}.is-opening .envelope-back{animation:envelope-back-face 5s linear forwards}
@keyframes envelope-front-face{0%{visibility:visible}40%,100%{visibility:hidden}}@keyframes envelope-back-face{0%,39.99%{visibility:hidden;opacity:1}40%,82%{visibility:visible;opacity:1}100%{visibility:hidden;opacity:0}}
@media(prefers-reduced-motion:reduce){.is-opening .envelope-object{display:none;animation:none}.is-opening .envelope-letter{animation:none;opacity:1;transform:none;pointer-events:auto;z-index:4}}@media(max-width:800px){.envelope-welcome{display:block;padding:24px;min-height:0}.envelope-welcome h1{font-size:36px}.envelope-stage{margin-top:20px;min-height:720px}.envelope-letter{padding:25px!important}.envelope-object{height:290px}.envelope-front strong{font-size:25px}}
.envelope-seal:after{content:'';position:absolute;inset:-3px;background:#e8ddc7;clip-path:polygon(49% 0,55% 0,47% 30%,59% 44%,46% 65%,53% 100%,46% 100%,39% 64%,52% 44%,40% 29%);opacity:0}.is-opening .envelope-seal:after{animation:seal-crack 5s forwards}@keyframes seal-crack{0%,58%{opacity:0}63%,100%{opacity:1}}