body.envelope-active{overflow:hidden;overscroll-behavior:none}
body.envelope-active::before{display:none}
wedding-envelope{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;height:100vh;height:100dvh;overflow:hidden;isolation:isolate;-webkit-tap-highlight-color:transparent}
.envelope-backdrop{position:absolute;inset:0;background:radial-gradient(circle at 50% 20%,#fffdf8 0,#fbf5e9 58%,#eee1cd 100%);transition:opacity .4s 1.75s ease;z-index:-1}
.envelope-composition{width:min(88vw,34rem);text-align:center;color:#3c0008}
.envelope-title{margin:0 0 clamp(1.5rem,4vh,2.7rem);font:400 clamp(3rem,12vw,5.5rem)/.72 var(--serif);text-transform:uppercase;color:#3c0008;transition:opacity .4s ease}
.envelope-title span{display:block;margin-left:-.7em;font-family:var(--royal);font-style:italic;font-size:.82em;text-transform:none}
.envelope-scene{position:relative;width:100%}
.envelope-flower{position:absolute;z-index:4;width:38%;pointer-events:none;transition:opacity .4s ease}.envelope-flower-left{left:-12%;bottom:-15%;transform:rotate(205deg)}.envelope-flower-right{right:-12%;bottom:-15%;transform:rotate(-20deg) scaleX(-1)}
.envelope-trigger{display:block;position:relative;width:100%;aspect-ratio:3/2;padding:0;border:0;border-radius:2px;background:none;perspective:1400px;isolation:isolate;cursor:pointer;touch-action:manipulation;box-shadow:0 1.4rem 3rem #0005;transition:transform 1s .85s ease,opacity 1s .85s ease,box-shadow 1s .85s ease}
.envelope-trigger:focus-visible{outline:2px solid #ddc392;outline-offset:9px}
.envelope-trigger:disabled{cursor:default}
.envelope-pocket,.envelope-flap{position:absolute;inset:0;display:block;background:url('/assets/maroon-envelope.png') center/100% 100% no-repeat;pointer-events:none}
.envelope-pocket{clip-path:polygon(0 0,40% 48%,40% 66%,44% 74%,56% 74%,60% 66%,60% 48%,100% 0,100% 100%,0 100%)}
.envelope-flap{clip-path:polygon(0 0,100% 0,60% 48%,60% 66%,56% 74%,44% 74%,40% 66%,40% 48%);transform-origin:50% 0;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:transform 1.25s cubic-bezier(.32,.05,.22,1),filter 1.25s ease}
.envelope-seal{position:absolute;z-index:5;top:55%;left:50%;width:clamp(4.7rem,24%,7.3rem);height:auto;transform:translate(-50%,-50%);filter:drop-shadow(0 .45rem .55rem #26000670);pointer-events:none;transition:opacity .32s ease,transform .45s cubic-bezier(.22,.8,.28,1)}
.envelope-hint{margin:2rem 0 0;font-family:var(--serif);font-size:1rem;letter-spacing:.08em;color:#624b43;transition:opacity .4s ease}
wedding-envelope.is-opening .envelope-flap{transform:none}
/* Fade the complete sealed envelope together: the source artwork contains an old seal. */
wedding-envelope.is-opening .envelope-trigger{transform:translateY(2rem);opacity:0;box-shadow:0 0 0 transparent}
wedding-envelope.is-opening .envelope-backdrop{opacity:0}
wedding-envelope.is-opening .envelope-title,wedding-envelope.is-opening .envelope-hint,wedding-envelope.is-opening .envelope-flower{opacity:0}
@media(max-height:500px){.envelope-composition{width:min(64vw,24rem,62dvh)}.envelope-title{margin-bottom:1rem;font-size:2.4rem}.envelope-hint{margin-top:1rem}}
@media(prefers-reduced-motion:reduce){.envelope-flap{transition:none!important;transform:none!important;filter:none!important}.envelope-trigger,.envelope-backdrop,.envelope-title,.envelope-hint,.envelope-flower,.envelope-seal{transition:opacity .35s ease!important}.envelope-trigger{transform:none!important}.envelope-seal{transform:translate(-50%,-50%)!important}}

/* An opaque cover prevents the moving envelope from obscuring the card. */
wedding-envelope{background:transparent}
wedding-envelope .envelope-backdrop{z-index:0}
wedding-envelope .envelope-composition{position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){wedding-envelope .envelope-backdrop{transition:opacity .35s ease!important}}

/* Preserve the supplied transparent logo, with gold applied by the page. */
.envelope-logo{display:block;width:clamp(4.5rem,17vw,6rem);height:clamp(6.3rem,24vw,8.45rem);margin:0 auto 1.25rem;background:linear-gradient(120deg,#94703d 0%,#c09a59 28%,#e3ca91 48%,#b48a48 70%,#97723d 100%);-webkit-mask:url('/assets/invitation-logo.png') center/contain no-repeat;mask:url('/assets/invitation-logo.png') center/contain no-repeat;transition:opacity .4s ease}
wedding-envelope.is-opening .envelope-logo{opacity:0}
@media(max-height:600px){.envelope-logo{width:2.7rem;height:3.8rem;margin-bottom:.7rem}.envelope-composition{width:min(78vw,29rem,65dvh)}.envelope-title{font-size:2.6rem;margin-bottom:1.4rem}.envelope-hint{margin-top:1.2rem}}
@media(prefers-reduced-motion:reduce){.envelope-logo{transition:none}}