/* A photographed paper asset is divided along its real creases. All folds
   share a single 9:16 canvas, so the closed envelope has no visible seams. */
.opening{position:fixed;inset:0;z-index:30;width:min(100%,680px);height:100svh;margin:auto;background:var(--burgundy);overflow:clip;isolation:isolate;opacity:1;visibility:visible;transition:opacity 1s ease,visibility 1s;box-shadow:0 0 80px #2c081a40}
.opening.finished{opacity:0;visibility:hidden;pointer-events:none}
.opening-stage{position:absolute;inset:0;overflow:hidden;container-type:inline-size;perspective:1600px}
.opening-destination{position:absolute;inset:0;background:url('/assets/wedding-v2/palace-hero.webp') center/cover;transform:scale(1.055)}
.envelope-scene{position:absolute;left:50%;top:50%;width:max(100cqw,56.25svh);height:max(100svh,177.778cqw);transform:translate(-50%,-50%);perspective:1800px;isolation:isolate}
.envelope-fold{position:absolute;inset:0;background:url('/assets/wedding-v2/embossed-envelope.webp') center/100% 100% no-repeat;backface-visibility:hidden;will-change:transform}
.envelope-left{clip-path:polygon(0 10.8%,50.3% 49.4%,0 84.5%);transform-origin:0 50%;z-index:2}
.envelope-right{clip-path:polygon(100% 10.8%,49.7% 49.4%,100% 84.5%);transform-origin:100% 50%;z-index:2}
.envelope-bottom{clip-path:polygon(0 84%,50% 49.1%,100% 84%,100% 100%,0 100%);transform-origin:50% 100%;z-index:3}
.envelope-upper{position:absolute;inset:0;transform-origin:50% 0;z-index:4;transform-style:preserve-3d;will-change:transform}
.envelope-top{clip-path:polygon(0 0,100% 0,100% 11.5%,50% 49.5%,0 11.5%)}
.seal-button{position:absolute;left:50%;top:49.3%;width:32%;aspect-ratio:1;transform:translate(-50%,-50%);padding:0;border:0;background:transparent;filter:drop-shadow(0 9px 7px #25071170);border-radius:50%;backface-visibility:hidden}
.seal-button img{display:block;width:100%;height:100%;object-fit:contain;transition:filter .3s}
.seal-button:hover img{filter:brightness(1.12)}
.seal-button:focus-visible{outline:none}.seal-button:disabled{pointer-events:none}
.cover-lettering{position:absolute;top:70%;left:12%;width:76%;z-index:5;text-align:center;color:#f8e3be;pointer-events:none;text-shadow:0 2px 10px #320b1b;transition:opacity .4s}
.cover-lettering p{font:400 clamp(35px,8.5cqw,55px)/1.25 var(--script)}
.cover-lettering svg{display:block;width:38%;max-width:150px;margin:9px auto 0;fill:none;stroke:#e0bc7d;stroke-width:.9;stroke-linecap:round}
.cover-hint{position:absolute;width:100%;bottom:max(45px,env(safe-area-inset-bottom));z-index:5;text-align:center;color:#ffe8bf;pointer-events:none;text-shadow:0 1px 8px #320b1b;transition:opacity .35s}
.cover-hint p{font:9px/1.8 var(--serif);letter-spacing:3px}.cover-hint span{display:block;width:1px;height:25px;margin:15px auto 0;background:linear-gradient(#e3c18b,transparent)}
.opening.playing .cover-lettering,.opening.playing .cover-hint{opacity:0}
.opening-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.hero{min-height:0;max-height:none}
@media(max-width:760px){.opening{width:100%}}
@media(prefers-reduced-motion:reduce){.opening{transition-duration:.1s}.envelope-fold,.envelope-upper{will-change:auto}}