/* A single photographed paper surface, aligned across the moving layers. */
.scene{filter:drop-shadow(0 18px 23px #00000025)}
.pocket{background:url('black-envelope-photo.webp') center/100% 100% no-repeat;clip-path:polygon(0 30%,50% 56%,100% 30%,100% 100%,0 100%);filter:none}
.pocket .left,.pocket .right,.pocket .bottom,.pocket .grain,.pocket .seams{display:none}
.flap{filter:drop-shadow(0 3px 2px #00000065)}
.flap-face:not(.reverse){background:url('black-envelope-photo.webp') center top/100% 178.5714% no-repeat;background-blend-mode:normal}
.flap-face:not(.reverse):after,.flap-face:not(.reverse) .grain{display:none}
.back{background:#171719;border-color:#171719;box-shadow:0 1px 1px #ffffff15 inset,0 3px 4px #0003}
.back>.grain,.flap-face.reverse>.grain{display:none}
.flap-face.reverse{background:#171719;background-image:none}
.inside-visible{filter:none}
.flap{height:54.5%}
.flap-face,.flap-face.reverse,.flap-face.reverse:before,.flap-face.reverse:after{clip-path:polygon(0 0,100% 0,100% 26.2%,50% 100%,0 26.2%)}
.flap-face:not(.reverse){background-size:100% 183.4862%}
.pocket{clip-path:polygon(0 14.3%,50% 54.5%,100% 14.3%,100% 100%,0 100%)}
.seal{top:54.5%}
/* Keep the liner concealed beneath the closed paper seam. */
.scene:not(:has(.inside-visible)) .back:before{visibility:hidden}
/* A soft crease at the hinge, visible only on the exposed gold lining. */
.back:before{box-shadow:inset 0 7px 8px -6px #25180322}
.flap-face.reverse:before{box-shadow:inset 0 4px 6px -4px #25180318}
/* Contact shadow from the pocket falls onto the card while it is still inside. */
.card-pocket-shadow{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;opacity:1;transition:none;overflow:hidden;clip-path:inset(0)}
.opened .card-pocket-shadow{visibility:hidden}
/* A tiny overlap at the hinge prevents subpixel background gaps. */
.scene:has(.inside-visible) .back:after{content:'';position:absolute;top:-2px;left:0;right:0;height:4px;z-index:1;pointer-events:none;background-color:#171719;background-image:linear-gradient(90deg,#91621e 0%,#c39343 11%,#f0d28b 23%,#fff0b7 29%,#d0a24e 37%,#a4772c 49%,#e3ba60 65%,#fff1b0 72%,#c4943c 83%,#8f611c 100%);background-size:calc(100% - var(--liner-edge) * 2) 100%;background-position:center;background-repeat:no-repeat}