/* Four-flap ivory envelope, beige-lettered burgundy wax and the auto-playing letter. */
.cinematic-stage { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100svh - 185px); padding: 24px; overflow: hidden; isolation: isolate; }
.cinematic-stage[hidden] { display: none; }
/* Reserve the control width so event tabs do not jump when the letter opens. */
.masthead .close-card[hidden] { display: flex !important; visibility: hidden; pointer-events: none; }
.edition-caption { position: absolute; top: 30%; left: max(6vw, calc(50% - 490px)); width: 230px; text-align: left; transition: opacity .4s, transform .6s; }
body:not([data-state="closed"]) .edition-caption { opacity: 0; transform: translateX(-10px); }
.edition-kicker { font-size: 8px; letter-spacing: .22em; color: #89847b; }
.edition-title { margin: 24px 0 21px; font: 400 43px/1.15 var(--text-font); color: var(--ink); letter-spacing: -.035em; }
.edition-title em { font-weight: 400; }
.edition-description { margin: 0; font-size: 10px; line-height: 2.1; color: #89847c; }
.caption-rule { display: block; width: 35px; height: 1px; margin-top: 30px; background: #b4b0a783; }
.cinematic-scene { width: min(390px, calc((100svh - 280px) * .69)); min-width: 250px; aspect-ratio: .69; position: relative; margin: 2px auto 26px; container-type: inline-size; }
.edition-object { position: absolute; display: block; inset: 0; width: 100%; height: 100%; padding: 0; background: none; -webkit-tap-highlight-color: transparent; }
.edition-object:disabled { cursor: default; }

/* The envelope body carries the desk shadow; each flap is its own 3D leaf. */
/* Thin raised rim stays inside the envelope bounds; no projecting under-sheet. */
.ribbon-envelope { display: block; position: absolute; inset: 0; perspective: 1600px; isolation: isolate; border-radius: 1px; background: #ecebe5; box-shadow: .3px .6px .8px #3f423b2b, 1px 3px 5px -1px #3f423b1f, 4px 11px 18px -6px #3f423b33, 12px 26px 40px -16px #3f423b36; transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.ribbon-envelope::after { content: ''; position: absolute; z-index: 7; inset: 0; border: .65px solid #a5aa9b66; border-radius: 1px; pointer-events: none; background: none; box-shadow: inset .6px .6px .6px #ffffff99, inset -.65px -.7px .65px #747b6652; transition: opacity .3s; }
body[data-state="closed"] .edition-object:hover .ribbon-envelope { transform: translateY(-1.5px); box-shadow: .3px .7px 1px #3f423b26, 1.5px 4px 7px -2px #3f423b24, 5px 15px 22px -8px #3f423b36, 14px 30px 46px -19px #3f423b3b; }
body:is([data-state="opening-gates"], [data-state="story"], [data-state="entering"]) .ribbon-envelope::after { opacity: 0; }
.flap { position: absolute; inset: 0; display: block; transform-style: preserve-3d; pointer-events: none; transition: transform 1.05s cubic-bezier(.4,0,.2,1); }
.flap > * { position: absolute; inset: 0; display: block; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: opacity .3s; }
.flap svg { display: block; width: 100%; height: 100%; overflow: hidden; }
.flap-top { z-index: 1; transform-origin: 50% 0; }
.flap-bottom { z-index: 2; transform-origin: 50% 100%; }
.flap-left { z-index: 3; transform-origin: 0 50%; }
.flap-right { z-index: 4; transform-origin: 100% 50%; }
.flap-left .flap-back, .flap-right .flap-back { transform: rotateY(180deg); }
.flap-top .flap-back, .flap-bottom .flap-back { transform: rotateX(180deg); }
.flap-edge { fill: none; stroke: #fff; stroke-opacity: .95; stroke-width: 2.2; }
.flap-edge-roll { fill: none; stroke: #fff; stroke-opacity: .46; stroke-width: 20; filter: url(#edge-soften); }
.flap-edge-contact { fill: none; stroke: #555f4d; stroke-opacity: .4; stroke-width: 2.6; }
.flap-label { position: absolute; left: 25%; right: 25%; bottom: 3.5%; display: flex; flex-direction: column; align-items: center; gap: .8cqw; text-align: center; color: #8a857b; }
.flap-label > span:first-child { font-size: 2.2cqw; letter-spacing: .2em; text-transform: uppercase; }
.flap-label .guest-name { font: italic 5.6cqw/1.2 var(--text-font); color: #6f6a61; overflow-wrap: anywhere; }
.flap-date { font-size: 2.1cqw; letter-spacing: .22em; }

.wax-seal { position: absolute; z-index: 8; display: block; top: 50%; left: 50%; width: 24.8%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; filter: drop-shadow(0 2px 2px #3c0b1726); }
.wax-seal img { display: block; width: 100%; height: 100%; object-fit: contain; }
@keyframes release-wax { 0% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 45% { opacity: .95; transform: translate(-50%, -55%) scale(1.04); } 100% { opacity: 0; transform: translate(-50%, -68%) scale(1.1); } }
@keyframes reseal-wax { from { opacity: 0; transform: translate(-50%, -58%) scale(1.08); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.cinematic-stage.is-resealing .wax-seal { animation: reseal-wax .5s .8s cubic-bezier(.22,1,.36,1) both; }

/* One overlapping sequence: seal release, hinged leaves, letter lift, then copy. */
body:is([data-state="releasing-seal"], [data-state="opening-gates"], [data-state="story"], [data-state="entering"]) .wax-seal { animation: release-wax .42s cubic-bezier(.4,0,.2,1) forwards; }
body:is([data-state="opening-gates"], [data-state="story"], [data-state="entering"]) .flap { transition: transform 1.2s cubic-bezier(.4,0,.2,1); }
body:is([data-state="opening-gates"], [data-state="story"], [data-state="entering"]) .flap > * { opacity: 0; transition: opacity .1s 1.1s ease-out; }
body:is([data-state="opening-gates"], [data-state="story"], [data-state="entering"]) .flap-top, body:is([data-state="opening-gates"], [data-state="story"], [data-state="entering"]) .flap-bottom { transition-delay: .1s; }
body:is([data-state="opening-gates"], [data-state="story"], [data-state="entering"]) .flap-top > *, body:is([data-state="opening-gates"], [data-state="story"], [data-state="entering"]) .flap-bottom > * { transition-delay: 1.2s; }
body:is([data-state="opening-gates"], [data-state="story"], [data-state="entering"]) .flap-left { transform: rotateY(-172deg); }
body:is([data-state="opening-gates"], [data-state="story"], [data-state="entering"]) .flap-right { transform: rotateY(172deg); }
body:is([data-state="opening-gates"], [data-state="story"], [data-state="entering"]) .flap-top { transform: rotateX(172deg); }
body:is([data-state="opening-gates"], [data-state="story"], [data-state="entering"]) .flap-bottom { transform: rotateX(-172deg); }

/* The letter inside: cotton paper, soft window light, monogram in place of an ornament. */
/* Same paper as the card pages (#fafbf9 + shared grain), so the letter and the card match. */
.letter { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; overflow: hidden; background: #fafbf9; color: var(--body-ink); transform: translateY(.5cqw) scale(.988); transform-origin: center; transition: transform .65s cubic-bezier(.22,1,.36,1), box-shadow .65s; }
.cinematic-stage.is-letter-lifting .letter { transform: none; box-shadow: 0 3px 8px #36403212; }
.story-mark { width: 21%; height: auto; margin-top: 11%; opacity: 0; transform: translateY(6px); filter: drop-shadow(.6px 1px .6px #5d1a2a33); transition: opacity .55s .06s, transform .65s .06s var(--ease); }
.cinematic-stage.is-letter-lifting .story-mark { opacity: .9; transform: none; }
.story-scene { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 8% 13%; text-align: center; }
.story-scene.is-leaving { animation: scene-out .32s cubic-bezier(.4,0,.6,1) forwards; }
@keyframes scene-out { to { opacity: 0; transform: translateY(-4px); } }
.story-line { display: block; max-width: 100%; text-wrap: balance; opacity: 0; animation: story-line-in .52s cubic-bezier(.22,1,.36,1) both; animation-delay: var(--d, 0s); }
@keyframes story-line-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.s-kicker { font-size: 3.2cqw; letter-spacing: .26em; color: var(--ink); line-height: 1.9; }
.s-display { font-size: 8.4cqw; letter-spacing: .1em; color: #85837c; line-height: 1.3; margin: .4em 0 .25em; }
.s-script { font: italic 7.6cqw/1.3 var(--text-font); color: var(--ink); }
.s-large { font-size: 11cqw; line-height: 1.15; letter-spacing: -.01em; }
.s-indent { padding-left: 14%; }
.s-note { font-size: 3.3cqw; line-height: 1.8; color: #7f817c; margin-top: 1.1em; max-width: 86%; }
.s-gap { margin-top: 2.4em; }
.s-date { font-size: 6.2cqw; letter-spacing: .08em; color: #85837c; margin-top: .9em; }
.s-detail { font-size: 3cqw; letter-spacing: .2em; color: var(--ink); margin-top: 2.2em; }
.s-venue { font-size: 4.6cqw; color: var(--ink); margin-top: .5em; }
.s-venue + .s-note { margin-top: .2em; }
.s-names { display: block; width: 96%; height: auto; margin-top: 4cqw; opacity: 0; animation: ink-in .7s cubic-bezier(.22,1,.36,1) both; animation-delay: var(--d, 0s); }
@keyframes ink-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.s-faint { color: #8a8b85; font-size: 2.6cqw; }
.s-body { width: 94%; font: italic 4.5cqw/1.65 var(--text-font); color: #5d645e; max-width: 94%; text-align: justify; text-align-last: start; text-justify: inter-word; }
.s-para { font-size: 3.4cqw; line-height: 1.85; color: #5d645e; max-width: 92%; }
.s-long { font-size: 3.5cqw; line-height: 1.95; max-width: 98%; }
.s-gap { margin-top: 1.5em; }
.s-gap-small { margin-top: .9em; }
.s-bigdate { font-size: 17cqw; line-height: 1.05; letter-spacing: -.04em; color: var(--ink); margin-top: .1em; }
.s-bigdate + .s-date { margin-top: 0; font-size: 5.6cqw; letter-spacing: .12em; }
.s-bigdate ~ .s-kicker { margin-top: .9em; }
.s-bigdate ~ .s-detail { margin-top: .4em; }
.s-item { font-size: 4.6cqw; line-height: 1.35; color: var(--ink); margin-top: 1.05em; }
.s-kicker + .s-item { margin-top: .8em; }
.s-tight { margin-top: .1em; }
.s-script + .s-para { margin-top: .7em; }
.s-gap + .s-tight { margin-top: .6em; }
.s-sub { font-size: 3cqw; line-height: 1.7; color: #7b827b; }
.s-family { font-size: 3.4cqw; letter-spacing: .06em; line-height: 1.9; color: #5d645e; }
.s-sign { font-size: 6.4cqw; margin-top: .7em; }
.story-progress { position: absolute; bottom: 4.6%; left: 50%; display: flex; align-items: center; gap: 2.6cqw; white-space: nowrap; transform: translateX(-50%); opacity: 0; transition: opacity .6s .6s; }
.story-progress span { font-size: 2.4cqw; letter-spacing: .2em; text-transform: uppercase; color: #8c8d8752; transition: color .6s; }
.story-progress span + span::before { content: ''; display: inline-block; width: 3.2cqw; height: 1px; margin-right: 2.6cqw; vertical-align: middle; background: #8c8d8740; }
.story-progress span.is-current { color: var(--ink); }
body[data-state="story"] .story-progress { opacity: 1; }

.cinematic-controls { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; min-height: 77px; }
.cinematic-controls .opening-footnote { font-size: 16px; }
.edition-open-button { transition: opacity .3s; }
body:not([data-state="closed"]) .cinematic-controls .opening-footnote, body:not([data-state="closed"]) .edition-open-button { opacity: 0; pointer-events: none; }
#skip-animation { background: #f4f3eef2; color: #71665c; border: 1px solid #c9c8bd80; padding: 8px 14px; font-size: 10px; position: absolute; top: 4px; white-space: nowrap; transition: border-color .2s, color .2s; }
#skip-animation:hover { color: var(--ink); border-color: #78273855; }
#skip-animation > span { margin-left: 9px; }
.story-hint { position: absolute; top: 48px; margin: 0; white-space: nowrap; font: italic 13px var(--text-font); color: #978879; opacity: 0; pointer-events: none; transition: opacity .6s; }
body[data-state="story"] .story-hint { opacity: 1; transition-delay: 1.4s; }
.cinematic-stage.is-exiting { position: absolute; top: 0; left: 0; width: 100%; z-index: 3; pointer-events: none; will-change: opacity; }
.invitation.is-entering { position: relative; pointer-events: none; transform-origin: center 160px; will-change: opacity, transform; }
body[data-state="entering"] .close-card { pointer-events: none; }
@media (min-width: 1000px) and (max-height: 800px) {
 .cinematic-stage { min-height: calc(100svh - 150px); padding-block: 6px 9px; }
 .cinematic-scene { width: min(340px, calc((100svh - 240px) * .69)); min-width: 225px; margin-bottom: 18px; }
 .edition-caption { top: 27%; }
}
@media (max-width: 1000px) { .edition-caption { left: 5vw; width: 180px; } .edition-title { font-size: 34px; } .edition-description { font-size: 9px; } }
@media (max-width: 760px) {
 .cinematic-stage { padding: 10px 24px 24px; min-height: calc(100svh - 170px); }
 .edition-caption { position: static; width: auto; margin: 0 auto 23px; text-align: center; }
 .edition-kicker { font-size: 7px; letter-spacing: .23em; }
 .edition-title, .edition-description, .caption-rule { display: none; }
 .cinematic-scene { width: min(86vw, calc((100svh - 290px) * .69), 360px); min-width: 215px; margin-bottom: 24px; }
 .cinematic-controls .opening-footnote { font-size: 15px; }
 .story-hint { font-size: 12px; }
}
@media (max-width: 360px) { .cinematic-scene { min-width: 200px; } .edition-caption { margin-bottom: 17px; } }
@media (prefers-reduced-motion: reduce) { .story-line, .s-names { animation: none; opacity: 1; } }