body.invitation-closed{overflow:hidden}
.invitation-closed:not(.scene-clock-started) .hero .name-composition,.invitation-closed:not(.scene-clock-started) #parents-copy,.invitation-closed:not(.scene-clock-started) #invitation-copy{animation:none!important;opacity:0!important}
.invitation-closed:not(.scene-clock-started) .dancing-rings{opacity:0!important}
.invitation-cover{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse at 45% 30%,#f3f8fb,#d7e6ef);color:#36566d;perspective:1400px}
.envelope-stage{width:min(570px,82vw);height:clamp(230px,49vw,350px);position:relative;perspective:1400px;animation:envelope-arrive 1.5s cubic-bezier(.2,.7,.2,1) both}
.envelope{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:none;color:inherit;cursor:pointer;transform-style:preserve-3d;transform:rotateX(25deg) rotateZ(-7deg);transition:transform 1.15s cubic-bezier(.4,0,.2,1);font:inherit}
.envelope:focus-visible{outline:2px solid #a68c58;outline-offset:15px}
.envelope-face{position:absolute;inset:0;border-radius:3px;backface-visibility:hidden;background:repeating-linear-gradient(25deg,#ac987006 0 1px,transparent 1px 4px),linear-gradient(130deg,#fffefb,#f2eee6);box-shadow:0 28px 35px #45627b25,0 2px 4px #63554020;border:1px solid #d9d5cb}
.envelope-front{display:flex;align-items:center;justify-content:center;flex-direction:column;transform:translateZ(2px)}
.envelope-address{display:block;width:85%;font:clamp(30px,5.5vw,47px)/1.35 'Pinyon Script',cursive;color:#355970;overflow-wrap:anywhere}
.envelope-address small{display:block;font-size:.65em;margin-bottom:10px}
.envelope-front .sender{position:absolute;bottom:26px;font:12px Georgia,serif;letter-spacing:.2em;color:#ae945d}
.envelope-back{transform:rotateY(180deg);transform-style:preserve-3d;background:#e8e0d2}
.envelope-pocket{position:absolute;inset:0;transform:translateZ(3px);background:linear-gradient(32deg,#f4eee4,#fffef9);clip-path:polygon(0 0,50% 49%,100% 0,100% 100%,0 100%)}
.envelope-fold{position:absolute;inset:0;transform:translateZ(4px);background:linear-gradient(145deg,#f6f1e8,#fffdf8);clip-path:polygon(0 100%,50% 42%,100% 100%)}
.envelope-flap{position:absolute;inset:0 0 auto;height:57%;background:linear-gradient(170deg,#fffefb,#eae1d3);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;transform:translateZ(6px);transition:transform .85s ease 1.05s;backface-visibility:visible}
.envelope-seal{position:absolute;left:50%;top:43%;width:48px;height:48px;display:grid;place-items:center;transform:translate(-50%,-50%) translateZ(8px);border-radius:50%;background:radial-gradient(circle at 35% 25%,#e5c782,#b99a55 70%);border:3px double #e6ca87;box-shadow:0 2px 4px #705a3940;font:12px Georgia,serif;color:#775d2c;transition:opacity .25s .9s}
.envelope-card{position:absolute;inset:6% 5%;background:repeating-linear-gradient(25deg,#ac987006 0 1px,transparent 1px 4px),#fffdf8;border:1px solid #ece5d9;transform:translateZ(1px);box-shadow:0 1px 6px #58442d18}
.envelope-hint{position:absolute;top:calc(100% + 45px);width:100%;text-align:center;font:10px Georgia,serif;letter-spacing:.2em;text-transform:uppercase;color:#668095;transition:opacity .3s}
.cover-mist{position:absolute;inset:0;background:radial-gradient(ellipse at 35% 40%,#fffdf8,#f4f8fb);opacity:0;pointer-events:none;z-index:4}
.is-opening .envelope{transform:rotateX(0deg) rotateZ(0deg) rotateY(180deg)}
.is-opening .envelope-flap{transform:translateZ(6px) rotateX(180deg)}
.is-opening .envelope-seal,.is-opening .envelope-hint{opacity:0}
.is-opening .envelope-card{animation:card-approach 1.9s cubic-bezier(.45,0,.2,1) 1.7s forwards}
.is-opening .cover-mist{animation:paper-to-mist 1s ease 2.75s forwards}
.invitation-cover.is-revealing{background:transparent;transition:opacity 1.15s ease;opacity:0;pointer-events:none}
.is-revealing .envelope-stage{visibility:hidden}
@keyframes envelope-arrive{from{opacity:0;transform:translateY(-100px) rotate(-6deg)}to{opacity:1;transform:translateY(0) rotate(0)}}
@keyframes card-approach{0%{transform:translateZ(1px)}40%{transform:translateY(-75%) translateZ(15px)}100%{transform:translateY(-15%) translateZ(650px) scale(3.5)}}
@keyframes paper-to-mist{to{opacity:1}}
@media(prefers-reduced-motion:reduce){.envelope-stage{animation:none}.envelope{transition:none}}
/* Sunlit marble opening: the background is a clean photographic plate. */
.invitation-cover[hidden]{display:none!important}
.invitation-cover{background:#eee9e0 url('assets/envelope-pale-oak-background.png') center/cover no-repeat}
.envelope-stage{width:min(calc(var(--env-width,740)*1px),80vw,110vh);height:auto;aspect-ratio:1.68;animation-duration:calc(var(--env-arrival,1.4)*1s)}
.envelope{transform:rotateX(calc(var(--env-tilt,18)*1deg)) rotateZ(calc(var(--env-angle,-10)*1deg));transition-duration:calc(var(--env-flip,1.2)*1s)}
.envelope-face{background-color:var(--env-paper,#fffdf7);background-image:url('assets/envelope-paper-grain.svg'),linear-gradient(130deg,#ffffff65,#9d8b6615);box-shadow:0 12px 18px #49392329,0 2px 3px #4939233b,inset 0 -3px 2px #aa977d20}
.envelope-front:after{content:'';position:absolute;inset:16px;border:1px solid #a58c5b25;box-shadow:0 1px 0 #fff,inset 0 1px 0 #fff;pointer-events:none}
.envelope-address{font-family:var(--env-font);font-size:min(calc(var(--env-fontSize,46)*1px),6vw);line-height:var(--env-lineHeight,1.4);color:var(--env-ink,#355970);width:83%}
.envelope-address small{font-size:min(calc(var(--env-greetingSize,28)*1px),4vw)}
.envelope-front .sender{font-size:calc(var(--env-monogramSize,15)*1px);bottom:10%}
.envelope-hint{font-size:calc(var(--env-hintSize,11)*1px);color:#615744;text-shadow:0 1px 3px white}
.envelope-flap{transition-duration:calc(var(--env-flap,.85)*1s);transition-delay:var(--env-flap-delay)}
.envelope-seal{transition-delay:calc(var(--env-flip,1.2)*.75s)}
.is-opening .envelope{transform:translateY(-25px) rotateX(0deg) rotateZ(0deg) rotateY(180deg)}
.is-opening .envelope-card{animation-duration:calc(var(--env-card,1.8)*1s);animation-delay:var(--env-card-delay)}
.is-opening .cover-mist{animation-duration:calc(var(--env-card,1.8)*.35s);animation-delay:var(--env-mist-delay)}
.invitation-cover.is-revealing{transition-duration:calc(var(--env-mist,1.1)*1s)}
@keyframes envelope-arrive{from{opacity:0;transform:translateY(calc(var(--env-arrivalDistance,75)*-1px)) rotate(-4deg)}to{opacity:1;transform:translateY(0) rotate(0)}}
@media(hover:hover){.allow-hover:not(.is-opening) .envelope:hover{transform:translateY(calc(var(--env-hoverLift,8)*-1px)) rotateX(calc(var(--env-tilt,18)*1deg - 2deg)) rotateZ(calc(var(--env-angle,-10)*1deg));transition-duration:.35s}}
.invitation-cover.no-motion *, .invitation-cover.no-motion{animation:none!important;transition:none!important}
body.invitation-closed #design-panel{z-index:10030;inset-block:16px;max-height:calc(100dvh - 32px)}
body.invitation-closed #design-toggle{z-index:10020}
.envelope-control-group{padding:12px 0;border-top:1px solid #e0e5e9}
.envelope-control-group summary{cursor:pointer;font-size:14px;margin-bottom:15px}
#envelope-settings select,#envelope-settings input[type=text]{width:100%;grid-column:1/-1;padding:9px;border:1px solid #cbd6df;border-radius:6px;background:white}
#envelope-settings .cloud-actions{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
@media(max-width:600px){.envelope-front:after{inset:9px}.envelope-hint{top:calc(100% + 32px)}.envelope-front .sender{font-size:min(calc(var(--env-monogramSize)*1px),3vw)}}
/* Floating envelope study on pure black. */
.invitation-cover{background:#000}
.envelope-stage{width:min(calc(var(--env-width,740)*1px),78vw,100vh);margin-top:-40px}
.envelope-float{position:absolute;inset:0;transform-style:preserve-3d;animation:envelope-hovering calc(var(--env-floatTime,6)*1s) ease-in-out infinite}
.envelope-face{box-shadow:inset 0 -3px 1px #ac9a7b55,inset 2px 2px 1px #fff,0 2px 1px #cabda5;}
.envelope-front{background-image:url('assets/envelope-paper-grain.svg'),radial-gradient(ellipse at 20% 0%,#ffffffaa,transparent 70%),linear-gradient(140deg,#ffffff30,#79684c20);}
.invitation-cover:not(.is-opening) .envelope{transform:rotateX(calc(var(--env-tilt,18)*1deg + var(--pointer-y,0deg))) rotateY(var(--pointer-x,0deg)) rotateZ(calc(var(--env-angle,-10)*1deg));transition:transform .45s ease}
.envelope-hint{display:block;position:absolute;top:calc(100% + 58px);left:50%;width:auto;max-width:90vw;transform:translateX(-50%);white-space:nowrap;padding:14px 28px;border:1px solid #b69a6077;border-radius:30px;background:#ffffff09;color:#ead8ae;text-shadow:none;cursor:pointer;letter-spacing:.13em;font-family:Georgia,serif;transition:background .25s,opacity .3s}
.envelope-hint:hover{background:#b69a6028;border-color:#d9bd7e}
.envelope-hint:focus-visible{outline:2px solid #d9bd7e;outline-offset:5px}
.is-opening .envelope-float{animation-play-state:paused}
.is-opening .envelope-hint{pointer-events:none}
.no-motion .envelope-float{animation:none}
@keyframes envelope-hovering{0%,100%{transform:translateY(calc(var(--env-floatAmount,12)*-.5px)) rotateZ(-.12deg)}50%{transform:translateY(calc(var(--env-floatAmount,12)*.5px)) rotateZ(.12deg)}}
@media(max-width:600px){.envelope-stage{width:84vw;margin-top:-20px}.envelope-hint{top:calc(100% + 48px);padding:13px 23px}}
/* Real geometry replaces the layered-paper fallback when WebGL is available. */
.envelope-3d{position:absolute;width:130%;height:175%;left:-15%;top:-37.5%;pointer-events:none}
.has-envelope-3d .envelope-float{animation:none!important;transform:none!important}
.has-envelope-3d .envelope{transform:none!important;transition:none!important;opacity:0}
.has-envelope-3d .envelope-stage{overflow:visible}
.has-envelope-3d.is-opening .envelope-3d{pointer-events:none}

/* Settings belong to the screen currently being edited. */
body.invitation-closed #design-panel .ds-content > :not(#envelope-settings):not([aria-label="Design history"]){display:none!important}
body:not(.invitation-closed) #envelope-settings{display:none!important}
@media(max-width:600px){.envelope-stage{width:min(calc(var(--env-width,560)*1px),84vw)}}

.envelope-address,.envelope-address small{font-weight:var(--env-fontWeight,700)}

/* Photographic setting only: envelope geometry and motion stay unchanged. */
.invitation-cover{background:#a18a70 url('assets/envelope-pale-oak-background.png') center/cover no-repeat}
.invitation-cover::before{content:'';position:absolute;left:50%;top:81%;width:min(calc(var(--env-width,560)*.78px),65vw);height:5.5%;transform:translateX(-50%);background:radial-gradient(ellipse,#39281833 0%,#39281818 40%,transparent 72%);filter:blur(12px);pointer-events:none;transition:opacity .5s}
.invitation-cover .envelope-stage{z-index:1}
.invitation-cover.is-opening::before,.invitation-cover.is-revealing::before{opacity:0}
.invitation-cover .envelope-hint{background:#382a20d9;color:#fff1d5;border-color:#d4bb8e88;box-shadow:0 3px 16px #39281818}
.invitation-cover .envelope-hint:hover{background:#493629}

.has-envelope-3d.invitation-cover::before{display:none}
.envelope-table-shadow{position:absolute;width:130%;height:175%;left:-15%;top:-37.5%;pointer-events:none;filter:blur(14px)}

.invitation-cover .envelope-hint{margin-left:calc(var(--env-buttonX,0)*1px);margin-top:calc(var(--env-buttonY,40)*1px)}
/* Crop past the foreground table edge, as though seated farther into the table. */
.invitation-cover{background-size:max(110vw,195.5vh) auto;background-position:center top}

/* Keep the receiving surface registered to the photo, independent of letter size. */
.invitation-cover>.envelope-table-shadow{inset:0;width:100%;height:100%;z-index:0}

/* Reveal only the finished model, saved layout and loaded lettering. */
.envelope-loading .envelope-stage,.envelope-loading .envelope-table-shadow{visibility:hidden;animation:none!important}

/* Settle upward at the saved size, then invite the guest to open it. */
@keyframes envelope-arrive{from{opacity:0;transform:translateY(calc(var(--env-arrivalDistance,18)*1px))}to{opacity:1;transform:translateY(0)}}
.envelope-stage{animation:envelope-arrive calc(var(--env-arrival,1.5)*1s) cubic-bezier(.22,.61,.36,1) both}
.envelope-hint{animation:envelope-button-arrive calc(var(--env-buttonFade,1)*1s) ease calc((var(--env-arrival,1.5) + var(--env-buttonDelay,.4))*1s) both}
.envelope-table-shadow{animation:envelope-shadow-arrive calc(var(--env-arrival,1.5)*1s) ease both}
@keyframes envelope-button-arrive{from{opacity:0;visibility:hidden}to{opacity:1;visibility:visible}}
@keyframes envelope-shadow-arrive{from{opacity:0}to{opacity:1}}
.entrance-restart .envelope-stage,.entrance-restart .envelope-hint,.entrance-restart .envelope-table-shadow{animation:none!important}
.envelope-loading .envelope-hint{animation:none!important;visibility:hidden}
.is-opening .envelope-hint{animation:none!important;opacity:0;visibility:hidden}
.no-motion:not(.is-opening) .envelope-hint{opacity:1;visibility:visible}
@media(prefers-reduced-motion:reduce){.envelope-stage,.envelope-hint,.envelope-table-shadow{animation:none!important}.invitation-cover:not(.is-opening) .envelope-hint{opacity:1;visibility:visible}}

/* Inspect the open flap before allowing the card and invitation transition. */
.invitation-cover.inspection-enabled .cover-mist{animation:none!important;opacity:0}
.invitation-cover.opening-held .cover-mist{animation:none;opacity:0}
.envelope-inspection-actions{display:none;position:absolute;bottom:32px;left:50%;transform:translateX(-50%);gap:12px;z-index:6}
.opening-held .envelope-inspection-actions{display:flex}
.envelope-inspection-actions button{border:1px solid #d4bb8e88;border-radius:24px;background:#382a20e8;color:#fff1d5;padding:12px 20px;font:13px Georgia,serif;cursor:pointer}
.skip-entrance .envelope-stage,.skip-entrance .envelope-table-shadow{animation:none!important}
@media(max-width:600px){.envelope-inspection-actions{bottom:70px;white-space:nowrap;gap:6px}.envelope-inspection-actions button{padding:10px 12px}}

/* Give the raised flap room without scaling the envelope itself. */
.envelope-3d{height:260%;top:-80%}

/* Inspection controls have their own timing, independent of the entrance hint. */
.opening-held .envelope-inspection-actions{animation:envelope-button-arrive calc(var(--env-inspectionFade,.8)*1s) ease calc(var(--env-inspectionDelay,.4)*1s) both}

/* Start the wait on the letter's actual arrival event, not a second CSS timeline. */
.invitation-cover .envelope-hint{animation:none!important;opacity:0;visibility:hidden;pointer-events:none;transition:none}
.invitation-cover.open-button-ready:not(.is-opening):not(.envelope-loading) .envelope-hint{opacity:1;visibility:visible;pointer-events:auto;transition:opacity calc(var(--env-buttonFade,1)*1s) ease}

/* The paper fills the view before the whole cover dissolves into the scenery. */
.invitation-cover .cover-mist{animation:none!important;opacity:0!important}
.invitation-cover.is-revealing{background:#b7a28c url('assets/envelope-pale-oak-background.png') center top/max(110vw,195.5vh) auto no-repeat;transition:opacity calc(var(--env-mist,1.1)*1s) ease-in-out}
.invitation-cover.is-revealing .envelope-stage{visibility:visible}

.card-scene-window{position:absolute;z-index:3;overflow:hidden;pointer-events:none;isolation:isolate;background:#f8f4ec;box-shadow:0 1px 5px #42372318}
.card-scene-window[hidden]{display:none}
.card-scene-view.hero{position:absolute;left:0;top:0;margin:0;max-width:none;min-height:0;transform-origin:0 0;pointer-events:none}
.invitation-cover.is-revealing .card-scene-window{box-shadow:none}

.invitation-cover.is-inspecting .envelope-hint{opacity:0!important;visibility:hidden!important;pointer-events:none}

/* A fine-art print opens into the live scene through its inset picture area. */
.card-scene-aperture{position:absolute;overflow:hidden;isolation:isolate}
.card-print-mist{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(to right,#f8f4ec,transparent var(--print-mist-width)),linear-gradient(to left,#f8f4ec,transparent var(--print-mist-width)),linear-gradient(to bottom,#f8f4ec,transparent var(--print-mist-width)),linear-gradient(to top,#f8f4ec,transparent var(--print-mist-width))}


/* Keep the actual printed picture still until the entire view is inside it. */
.card-scene-window,.card-scene-aperture{position:absolute;inset:0;width:100%;height:100%;background:transparent;box-shadow:none}
.card-scene-aperture canvas{display:block;width:100%;height:100%}
.envelope-scene-backdrop{display:none;position:absolute;inset:0;background:#a18a70 url('assets/envelope-pale-oak-background.png') center top/max(110vw,195.5vh) auto no-repeat;pointer-events:none}
.invitation-cover.scene-transition-active{background:transparent}
.scene-transition-active .envelope-scene-backdrop{display:block}
main .hero .distant-flock,main .hero .rose-petal-layer{opacity:var(--scene-extra-opacity,1)}
.postcard-player{display:none;position:absolute;z-index:8;bottom:18px;left:50%;transform:translateX(-50%);width:min(600px,calc(100vw - 100px));padding:12px 16px;border:1px solid #ffffff66;border-radius:14px;background:#f8f7f0ed;box-shadow:0 3px 20px #293d4b22;color:#355970;font:12px/1.4 system-ui,sans-serif;backdrop-filter:blur(12px)}
.sequence-preview .postcard-player{display:block}
.postcard-player output{display:block;text-align:center;font-variant-numeric:tabular-nums}
.postcard-player input[type=range]{width:100%;padding:10px 0;accent-color:#b69a60;cursor:pointer}
.postcard-player-buttons{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.postcard-player button{padding:7px 11px;border:1px solid #9b895f55;border-radius:7px;background:#fff9;color:#355970;font:inherit;cursor:pointer}
.postcard-player button:hover{background:#fff}
@media(max-width:600px){.postcard-player{width:calc(100vw - 24px);bottom:60px;padding:10px}.postcard-player button{font-size:10px;padding:7px}}

/* Hidden oversized 3D canvases must not scroll the fixed preview when focused. */
.invitation-cover{overflow:clip}

/* Reserve the same page width before and after the cover unlocks scrolling. */
html{scrollbar-gutter:stable}

.postcard-transition-shortcut{padding:12px 0 16px}
.postcard-transition-shortcut>button{width:100%;padding:13px 12px;border:1px solid #b69a60;border-radius:8px;background:#f6f0e5;color:#493b25;font:600 14px/1.4 system-ui;cursor:pointer}
.postcard-transition-shortcut>button:hover{background:#eee3cd}
.postcard-transition-shortcut>button:focus-visible{outline:2px solid #31556c;outline-offset:3px}
.postcard-transition-shortcut .ds-note{margin:9px 0 0}
#postcard-sequence-settings{scroll-margin-top:70px}

/* Arrival uses animation-fill-mode:both, which wins over inline opacity.
   Retire the entire envelope layer once the postcard covers the screen. */
.invitation-cover.scene-transition-active .envelope-stage,
.invitation-cover.scene-transition-active .envelope-table-shadow,
.invitation-cover.scene-transition-active .envelope-scene-backdrop{visibility:hidden!important}
/* This heading receives focus after opening for assistive navigation. */
#names[tabindex="-1"]:focus{outline:none}

/* Keep the settings launcher above the envelope overlay. */
body.invitation-closed .variant-tools{z-index:10020;bottom:76px}
body.invitation-closed .variant-tools nav{display:none}

/* Phone composition leaves room for the flap and the emerging postcard. */
@media(max-width:700px){
 .invitation-cover .envelope-stage{width:min(calc(var(--env-width,560)*1px),88vw,110svh);margin-top:-6svh}
 body.invitation-closed .variant-tools{bottom:max(76px,calc(env(safe-area-inset-bottom) + 64px));right:12px}
 .invitation-cover .envelope-address{font-size:clamp(24px,7vw,34px)}
 .invitation-cover .envelope-address small{font-size:clamp(18px,5vw,24px)}
}