/* Four full-height paper folds, timed against the supplied 5–7 second opening. */
.envelope-intro{padding:0;overflow:hidden;background:#fbf7ef}
.envelope-stage{width:100%;height:100dvh;max-width:640px;perspective:1800px}
.envelope{filter:none;isolation:isolate}
.envelope-back{border:0;background:radial-gradient(ellipse at center,#fffde8,#edce81 55%,#fcf4df)}
.envelope-letter{display:none}
.envelope-flap,.envelope-pocket,.envelope-wing{background-image:url('/assets/invitation/embossed-paper.svg'),var(--paper-grain),linear-gradient(125deg,#fffdf8,#f0e9df 65%,#fffaf4);background-size:100% 100%,auto,auto;backface-visibility:visible}
.envelope-flap{height:52%;clip-path:polygon(0 0,100% 0,50% 100%);z-index:5;filter:drop-shadow(0 3px 2px #89725155)}
.envelope-flap::before,.envelope-pocket::after{display:none}
.envelope-pocket{inset:48% 0 0;clip-path:polygon(50% 0,100% 100%,0 100%);z-index:4;transform-origin:center bottom;transform:rotate(180deg);background-position:center;rotate:180deg}
.envelope-pocket::before{display:none}
.envelope-wing{position:absolute;inset:0;z-index:3}
.envelope-wing-left{clip-path:polygon(0 0,51% 50%,0 100%);transform-origin:left center}
.envelope-wing-right{clip-path:polygon(100% 0,49% 50%,100% 100%);transform-origin:right center;background-position:right}
.wax-seal{top:51%;width:88px;height:86px;box-shadow:0 9px 9px #80674645,inset 0 3px 3px #fffdf9,inset 0 -4px 6px #ad956473;background:radial-gradient(ellipse at 35% 25%,#fffef8,#ede2cf 64%,#d2bc94);color:#ac8b50}
.intro-label{position:absolute;z-index:9;bottom:7%;margin:0;font-size:26px;text-shadow:0 1px white}
.intro-label span{font:12px/1.6 var(--serif);letter-spacing:.09em}
.intro-skip{right:20px;background:#fffaf2aa;border-radius:2px}
.envelope-light{position:absolute;inset:-20%;z-index:6;pointer-events:none;opacity:0;background:radial-gradient(ellipse at center,#fffef3 0,#fff2bbdd 5%,#edbf5260 17%,transparent 45%);mix-blend-mode:screen}
.envelope::after{inset:0;background:radial-gradient(ellipse at 50% 49%,#fff8c7,transparent 32%);animation:seal-shimmer 5s ease-in-out infinite;opacity:.12}
.envelope-intro.is-opening .envelope{animation:none}
.envelope-intro.is-opening .envelope-flap{animation:fold-top 2.25s .2s cubic-bezier(.45,0,.18,1) both}
.envelope-intro.is-opening .envelope-pocket{animation:fold-bottom 2.25s .2s cubic-bezier(.45,0,.18,1) both}
.envelope-intro.is-opening .envelope-wing-left{animation:fold-left 2.25s .2s cubic-bezier(.45,0,.18,1) both}
.envelope-intro.is-opening .envelope-wing-right{animation:fold-right 2.25s .2s cubic-bezier(.45,0,.18,1) both}
.envelope-intro.is-opening .wax-seal{animation:seal-lift 2.1s .1s ease-in-out both}
.envelope-intro.is-opening .envelope-light{animation:fold-light 2.6s ease-in-out both}
.envelope-intro.is-opening .envelope::after{animation:none;opacity:0}
.envelope-intro.is-opening{animation:paper-intro-fade .55s 2.2s ease both}
@keyframes fold-top{0%{transform:translateY(0)}45%{transform:translateY(-14%) rotateX(12deg)}100%{transform:translateY(-105%) rotateX(38deg)}}
@keyframes fold-bottom{0%{translate:0 0}45%{translate:0 14%}100%{translate:0 105%}}
@keyframes fold-left{0%{transform:translateX(0)}45%{transform:translateX(-12%) rotateY(-12deg)}100%{transform:translateX(-100%) rotateY(-35deg)}}
@keyframes fold-right{0%{transform:translateX(0)}45%{transform:translateX(12%) rotateY(12deg)}100%{transform:translateX(100%) rotateY(35deg)}}
@keyframes seal-lift{0%{transform:rotate(-7deg);opacity:1}45%{transform:translateY(-7dvh) rotate(-4deg);opacity:1}100%{transform:translateY(-56dvh) rotate(0);opacity:0}}
@keyframes fold-light{0%{opacity:0;scale:.4}40%{opacity:.9;scale:.8}75%{opacity:1;scale:1.6}100%{opacity:0;scale:2}}
@keyframes seal-shimmer{0%,100%{opacity:.03}50%{opacity:.35}}
@media(min-width:1024px){.envelope-stage{max-width:680px}.envelope-intro{background:radial-gradient(ellipse,#fffaf2,#eee4d5)}.envelope-stage{box-shadow:0 0 100px #ae967a22}.intro-skip{right:30px}}
@media(prefers-reduced-motion:reduce){.envelope-intro *,.envelope-intro *::after{animation:none!important}.envelope-intro.is-opening{animation:none}}
