* { box-sizing:border-box; }
:root { color-scheme:dark; --peach:#f2c8ad; --ivory:#fff0d9; }
html,body { margin:0; min-height:100%; }
body { overflow-x:hidden; background:radial-gradient(ellipse at 50% 37%,#9b614b,#573125 62%,#2e1a14); color:var(--ivory); }
.invitation { min-height:100svh; display:grid; justify-items:center; align-content:center; padding:max(14px,env(safe-area-inset-top)) 0 max(16px,env(safe-area-inset-bottom)); overflow:hidden; }
.scene { width:min(94vw,64svh,620px); aspect-ratio:1; position:relative; overflow:hidden; isolation:isolate; background:radial-gradient(ellipse at 35% 15%,#e5bd97,#bd8e6d 68%,#815442); box-shadow:0 20px 65px #190c0970; }
.poster { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; }
.seal { position:absolute; inset:0; width:100%; height:100%; border:0; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.seal:focus-visible { outline:2px solid var(--ivory); outline-offset:4px; }
.hint { text-align:center; margin:16px 14px 0; }
.hint a { color:inherit; }
.interior { position:absolute; inset:5.6% 5% 4.5% 4.4%; display:grid; place-items:center; background:linear-gradient(150deg,#f8dec5,#c89573); box-shadow:inset 0 0 26px #542612a0; }
.interior img { width:59%; height:91%; object-fit:contain; opacity:.98; filter:drop-shadow(0 7px 8px #55270d80); }
.fold { position:absolute; inset:0; transition:transform 1.55s cubic-bezier(.5,.02,.25,1), opacity .42s ease-in; }
.top { --shape:polygon(5.1% 7.1%,94.8% 7.3%,50.3% 51.2%); transform-origin:50% 7.2%; }
.right { --shape:polygon(94.8% 7.3%,94.6% 95.5%,50.3% 51.2%); transform-origin:94.7% 50%; }
.bottom { --shape:polygon(94.6% 95.5%,4.7% 95.5%,50.3% 51.2%); transform-origin:50% 95.5%; }
.left { --shape:polygon(4.7% 95.5%,5.1% 7.1%,50.3% 51.2%); transform-origin:4.9% 50%; }
.face { position:absolute; inset:0; clip-path:var(--shape); backface-visibility:hidden; background:radial-gradient(ellipse at 33% 17%,#fff0da,#dbb694 72%); }
.front::before { content:""; position:absolute; inset:0; background:url(drape-peche.jpg) center/100% 100%; mask-image:radial-gradient(circle closest-side at 50.3% 51.2%,transparent 0 22%,#000 28%); }
.back { display:none; }
.cracks,.wax { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; visibility:hidden; }
.cracks path { fill:none; stroke:#41200a; stroke-width:3.6; stroke-linejoin:round; filter:drop-shadow(1px 1px 0 #ffdf9c); stroke-dasharray:1; stroke-dashoffset:1; }
[data-state="cracking"] .cracks { visibility:visible; }
[data-state="cracking"] .cracks path { animation:fissure .44s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes fissure { to {stroke-dashoffset:0} }
.wax span { position:absolute; inset:0; background:url(drape-peche.jpg) center/100% 100%; mask-image:radial-gradient(circle closest-side at 50.3% 51.2%,black 0 21.2%,transparent 21.6%); clip-path:var(--piece); }
[data-state="opening"] .poster { opacity:0; transition:opacity .17s linear; }
[data-state="opening"] .wax { visibility:visible; }
[data-state="opening"] .wax span { animation:scatter .65s ease-out forwards; }
@keyframes scatter { to { transform:translate(calc(var(--dx) * .48),calc(var(--dy) * .48)) rotate(var(--turn)); opacity:0; } }
[data-state="opening"] .left,
[data-state="opening"] .right { transform:scaleX(.015); opacity:0; transition-delay:.05s,1.18s; }
[data-state="opening"] .top,
[data-state="opening"] .bottom { transform:scaleY(.015); opacity:0; transition-delay:.62s,1.75s; }
[data-state]:not([data-state="closed"]) .seal,[data-state]:not([data-state="closed"]) .hint { visibility:hidden; }
[data-state="revealed"] { background:#251710; padding:0; }
[data-state="revealed"] .scene,[data-state="revealed"] .hint { display:none; }
.reveal { width:100%; height:100svh; }
.reveal img { display:block; width:100%; height:100%; object-fit:contain; animation:arrive .65s ease-out both; }
@keyframes arrive { from {opacity:.55; transform:scale(.985)} to {opacity:1; transform:scale(1)} }
@media(prefers-reduced-motion:reduce) { .reveal img {animation:none} }

.hint { font:500 .71rem/1.6 system-ui,sans-serif; letter-spacing:.19em; text-transform:uppercase; color:var(--peach); }
[data-state="revealed"] .hint { display:none; }