.envelope-scene { width: min(620px, calc(100% - 32px), calc((100svh - 180px) * .803)); margin: 0 auto; perspective: 2200px; }
.envelope-space { padding-top: 0; transition: padding-top 800ms cubic-bezier(.35,0,.2,1); }
.envelope-turntable { position: relative; width: 100%; aspect-ratio: 1.43; transform-style: preserve-3d; transition: transform 850ms cubic-bezier(.35,0,.2,1); }
.envelope-scene.is-turned .envelope-turntable { transform: rotateY(180deg); }
.envelope-drawing, .envelope-reverse { position: absolute; inset: 0; backface-visibility: hidden; }
.envelope-drawing { padding: 0; border: 0; background: #d9c9ac; cursor: pointer; box-shadow: 0 8px 16px #42392b24; }
.envelope-drawing img { display: block; width: 100%; height: 100%; }
.envelope-reverse { visibility: hidden; transform: rotateY(180deg); transform-style: flat; background: #d9c9ac url('../assets/envelope/paper.webp'); box-shadow: 0 8px 16px #42392b24; }
.envelope-scene.is-turned .envelope-reverse { visibility: visible; }
/* Finish the turn on a flat surface so nested backs cannot bleed through. */
.envelope-scene.turn-complete .envelope-turntable { transform: none; transition: none; transform-style: flat; }
.envelope-scene.turn-complete .envelope-drawing { visibility: hidden; }
.envelope-scene.turn-complete .envelope-reverse { transform: none; isolation: isolate; }
.envelope-lining { z-index: 0; }
.envelope-interior { z-index: 2; }
.envelope-bottom { z-index: 3; }
.envelope-flap { z-index: 4; }
.envelope-seams { z-index: 5; }
.envelope-seams { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; fill: none; stroke: #806c4b65; stroke-width: .22; transition: opacity 400ms; }
.envelope-scene.is-opening .envelope-seams { opacity: 0; }
.envelope-lining { position: absolute; inset: 0; background: url('../assets/envelope/lining.webp') center top / 100% auto; }
.envelope-lining { opacity: 0; }
.envelope-interior { visibility: hidden; }
.envelope-scene.is-opening .envelope-lining { opacity: 1; }
.envelope-scene.is-opening .envelope-interior { visibility: visible; }
.envelope-interior { position: absolute; inset: 0; overflow: hidden; }
.stage.in-envelope { position: absolute; width: 156%; left: -28%; top: -13%; padding: 0; margin: 0 !important; transform: rotate(-90deg); }
.stage.in-envelope .folder.is-closed { transform: translateX(9%); }
.envelope-bottom { position: absolute; inset: 12% 0 0; background: #d9c9ac url('../assets/envelope/paper.webp'); clip-path: polygon(0 0,50% 64%,100% 0,100% 100%,0 100%); filter: drop-shadow(0 -1px 1px #806d4b40); }
.envelope-flap { position: absolute; inset: 0 0 auto; width: 100%; height: 78%; padding: 0; border: 0; background: transparent; transform-origin: center top; transform-style: preserve-3d; transition: transform 800ms cubic-bezier(.35,0,.2,1); cursor: pointer; }
.envelope-flap-paper, .envelope-flap-lining { position: absolute; inset: 0; backface-visibility: hidden; }
.envelope-flap-paper { background: #d9c9ac url('../assets/envelope/paper.webp'); clip-path: polygon(0 0,100% 0,100% 10%,98% 20%,50% 100%,2% 20%,0 10%); filter: drop-shadow(0 2px 2px #58492f40); }
.envelope-flap-lining { background: url('../assets/envelope/lining.webp') center bottom / 100% auto; transform: rotateX(180deg); clip-path: polygon(0 100%,100% 100%,100% 90%,98% 80%,50% 0,2% 80%,0 90%); }
.envelope-seal { position: absolute; width: 17%; height: auto; left: 41.5%; top: 78%; backface-visibility: hidden; filter: drop-shadow(1px 3px 2px #66462850); }
.envelope-scene.is-opening .envelope-space { padding-top: 54.5%; }
.envelope-scene.is-opening .envelope-flap { transform: rotateX(180deg); }
/* The opened flap lies behind the invitation, with its hinge at the mouth. */
.envelope-scene.is-open .envelope-flap { transform: translateY(-100%); transition: none; transform-style: flat; z-index: 1; }
.envelope-scene.is-open .envelope-flap-paper,
.envelope-scene.is-open .envelope-seal { visibility: hidden; }
.envelope-scene.is-open .envelope-flap-lining { transform: none; }
.extract-invitation { position: absolute; z-index: 4; left: 8%; top: 5%; width: 84%; height: 32%; background: transparent; border: 0; cursor: pointer; }
.extract-invitation[hidden] { display: none; }
.extract-invitation { min-height: 44px; touch-action: manipulation; }
.restart-envelope { display: block; margin: 8px auto 0; min-height: 44px; padding: 8px 12px; border: 0; border-bottom: 1px solid #727d7060; background: none; color: inherit; font: inherit; cursor: pointer; }
.restart-envelope[hidden] { display: none; }
.restart-envelope:focus-visible { outline: 2px solid #8d713e; outline-offset: 3px; }
.envelope-drawing:focus-visible, .extract-invitation:focus-visible, .envelope-flap:focus-visible { outline: 2px solid #8d713e; outline-offset: 4px; }
.stage.in-envelope.is-extracting-folder { transform: translateY(var(--envelope-lift)) rotate(-90deg); transition: transform 850ms cubic-bezier(.35,0,.2,1); }
.envelope-scene.is-extracting .envelope-interior { overflow: visible; }
.envelope-scene.is-leaving { opacity: 0; pointer-events: none; transition: opacity 800ms ease; }
.stage.folder-arriving { transition: transform 900ms cubic-bezier(.35,0,.2,1); }
.envelope-drawing, .envelope-reverse, .envelope-bottom, .envelope-flap-paper { background-color: #e4dbcb; background-image: url('../assets/envelope/paper.webp?v=2'); background-size: 256px 256px; }
.envelope-drawing { overflow: hidden; border-radius: 2px; }
@media (orientation: landscape) and (max-height: 600px) { .envelope-scene { width: min(60vw,calc((100svh - 104px) * .803)); } }
@media (prefers-reduced-motion: reduce) { .envelope-space, .envelope-turntable, .envelope-flap, .stage.in-envelope.is-extracting-folder, .envelope-scene.is-leaving, .stage.folder-arriving { transition: none; } }