/* Theme palettes and ornaments share the same reversible scroll choreography. */
.signature-envelope-opening .invitation-position>.scene-couple,.signature-envelope-opening .invitation-position>.signature-photo-frame{display:none!important}
.signature-envelope{position:absolute;top:53%;left:50%;width:min(76%,320px);aspect-ratio:1.55;transform:translate(-50%,-9%);padding:0;border:0;background:none;color:var(--env-ink);font:inherit;cursor:pointer;perspective:1000px;isolation:isolate;-webkit-tap-highlight-color:transparent}
.signature-envelope:focus-visible{outline:2px solid var(--env-metal);outline-offset:18px;border-radius:12px}
.signature-envelope>span{position:absolute;display:block;box-sizing:border-box;pointer-events:none}
.envelope-shadow{inset:65% 5% -12%;background:radial-gradient(ellipse,#5b402b38,transparent 70%);filter:blur(12px);z-index:0}
.envelope-back{inset:0;background:linear-gradient(150deg,var(--env-base),var(--env-paper) 50%,var(--env-deep));border:1px solid var(--env-deep);border-radius:5px 5px 10px 10px;box-shadow:0 8px 22px #6e512521;z-index:1}
.envelope-flap{inset:0 0 auto;height:53%;clip-path:polygon(0 0,100% 0,50% 100%);background:linear-gradient(165deg,var(--env-deep),var(--env-base) 65%,var(--env-highlight));transform:rotateX(var(--envelope-flap-angle,-125deg));transform-origin:50% 0;z-index:2;backface-visibility:visible;filter:drop-shadow(0 1px 1px #97733c30)}
.envelope-letter{left:8%;bottom:12%;width:84%;height:103%;background:repeating-linear-gradient(0deg,#ffffff0a 0 1px,transparent 1px 3px),linear-gradient(125deg,var(--env-paper),color-mix(in srgb,var(--env-paper) 90%,var(--env-base)));border:1px solid var(--env-metal);border-radius:3px;box-shadow:0 -3px 14px #6b4e2410;transform:translateY(var(--envelope-card-rise,-35px));z-index:3;overflow:hidden}
.letter-border{position:absolute;inset:9px;border:1px solid color-mix(in srgb,var(--env-metal) 55%,transparent);box-shadow:inset 0 0 0 3px var(--env-paper),inset 0 0 0 4px color-mix(in srgb,var(--env-metal) 27%,transparent)}
.letter-flourish{position:absolute;top:10%;left:25%;width:50%;height:25px;stroke:var(--env-metal);stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.envelope-letter .letter-monogram{position:absolute;inset:29% 5% auto;display:flex;align-items:center;justify-content:center;gap:8px;font:clamp(40px,10vw,58px)/1.2 'Great Vibes',cursive;letter-spacing:0;color:var(--env-ink)}
.letter-monogram i{font-size:.45em;font-weight:400}
.letter-rule{position:absolute;left:38%;right:38%;height:1px;top:68%;background:color-mix(in srgb,var(--env-metal) 45%,transparent)}
.letter-caption{position:absolute;top:76%;left:0;right:0;font:10px/1.4 'Cormorant Garamond',serif;letter-spacing:1px}
.envelope-fold{inset:0;z-index:4;border-radius:4px 4px 9px 9px}
.envelope-fold-left{clip-path:polygon(0 0,57% 58%,0 100%);background:linear-gradient(115deg,color-mix(in srgb,var(--env-base) 88%,var(--env-paper)),var(--env-base))}
.envelope-fold-right{clip-path:polygon(100% 0,43% 58%,100% 100%);background:linear-gradient(245deg,var(--env-base),color-mix(in srgb,var(--env-base) 75%,var(--env-deep)))}
.envelope-front{inset:0;clip-path:polygon(0 100%,0 91%,50% 40%,100% 91%,100% 100%);background:linear-gradient(180deg,color-mix(in srgb,var(--env-base) 90%,var(--env-paper)),var(--env-base));border-bottom:1px solid var(--env-deep);border-radius:0 0 9px 9px;z-index:5;filter:drop-shadow(0 -1px 1px #ad884b24)}
.envelope-seal{left:calc(50% - 21px);top:42%;width:42px;height:42px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--env-highlight),var(--env-metal) 70%,color-mix(in srgb,var(--env-metal) 80%,var(--env-deep)));border:1px solid var(--env-metal);box-shadow:inset 0 0 0 3px var(--env-highlight),inset 0 0 0 4px color-mix(in srgb,var(--env-deep) 35%,transparent),0 3px 5px #6e512520;z-index:6}
.envelope-seal svg{width:30px;height:30px;margin:5px;stroke:color-mix(in srgb,var(--env-deep) 65%,#302719);stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.envelope-open-label{bottom:9%;left:0;right:0;z-index:6;font:10px/1.4 'Lato',sans-serif;letter-spacing:1.2px;text-transform:uppercase;color:var(--env-front-ink)}
@media(max-height:680px){.signature-envelope{width:min(65%,265px);top:55%}}
@media(prefers-reduced-motion:reduce){.envelope-flap{transform:rotateX(-165deg)}.envelope-letter{transform:translateY(-55px)}}
.signature-envelope{pointer-events:auto;scroll-margin-top:120px}.signature-envelope-opening .depth-scene{pointer-events:none}

/* Fine paper grain is static: only the separate ornaments animate. */
.envelope-letter::after,.envelope-front::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23857560' opacity='.2' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E");opacity:.48;mix-blend-mode:multiply}
.letter-watermark{position:absolute;right:-12%;bottom:-18%;width:72%;height:115%;object-fit:contain;opacity:.15;filter:saturate(.6);pointer-events:none}
.envelope-letter .letter-border{inset:9px;border-radius:2px}
.envelope-engraving{position:absolute;left:20%;bottom:27%;width:60%;height:26px;stroke:var(--env-front-ink);stroke-width:.6;opacity:.28}
/* Elysian: hinged illustrated wings, separate from the travelling body. */
.variant-garden .flying-butterfly{width:38px;height:38px;opacity:.95;perspective:160px}
.variant-garden .butterfly-1{width:31px;height:31px}
.variant-garden .butterfly-2{width:25px;height:25px}
.variant-garden .wing-left{animation:elysian-wing-left .24s ease-in-out infinite alternate;transform-origin:50% 52%}
.variant-garden .wing-right{animation:elysian-wing-right .24s ease-in-out infinite alternate;transform-origin:50% 52%}
.variant-garden .butterfly-1 .wing{animation-duration:.29s}
.variant-garden .butterfly-2 .wing{animation-duration:.21s}
@keyframes elysian-wing-left{from{transform:rotateY(-9deg)}to{transform:rotateY(-78deg)}}
@keyframes elysian-wing-right{from{transform:rotateY(9deg)}to{transform:rotateY(78deg)}}
@media(prefers-reduced-motion:reduce){.variant-garden .wing{animation:none!important}}

/* Bali material study: scoped until the design is approved. */
.design-bali-swarnadipa .signature-envelope{top:49%;--env-base:#e7d3a6;--env-paper:#fffaf0;--env-deep:#ba995e}
.design-bali-swarnadipa .envelope-letter{background-color:#fffaf0;background-image:repeating-linear-gradient(92deg,#ad906109 0 1px,transparent 1px 4px),linear-gradient(125deg,#fffdf7,#f5ecd9);box-shadow:0 -2px 3px #ffffffad,0 7px 15px #5d43252b,inset 0 0 25px #e5d3ac35;border-color:#c7aa72}
.design-bali-swarnadipa .letter-watermark{opacity:.085;right:-18%;bottom:-24%;filter:sepia(.4) saturate(.65)}
.design-bali-swarnadipa .letter-border{border-color:#c1a16c99;box-shadow:inset 0 0 0 3px #fffcf4,inset 0 0 0 4px #c5a56345}
.design-bali-swarnadipa .envelope-back{box-shadow:0 15px 24px #5b42252b,0 2px 3px #67482320}
.design-bali-swarnadipa .envelope-fold-left{background:linear-gradient(36deg,transparent 49.5%,#b393594d 49.8%,#fff5dacc 50.1%,transparent 50.5%),linear-gradient(115deg,#f6e9cd,#e2c995)}
.design-bali-swarnadipa .envelope-fold-right{background:linear-gradient(-36deg,transparent 49.5%,#b393594d 49.8%,#fff5dacc 50.1%,transparent 50.5%),linear-gradient(245deg,#efdfbc,#d8bc83)}
.design-bali-swarnadipa .envelope-front{background:linear-gradient(180deg,#f8edcf,#e4cfa0);filter:drop-shadow(0 -2px 2px #795a3224);border-bottom-color:#b3955e}
.design-bali-swarnadipa .envelope-front::before{content:"";position:absolute;inset:0;background:#c2a16a99;clip-path:polygon(0 90%,50% 39%,100% 90%,100% 90.7%,50% 39.7%,0 90.7%)}
.design-bali-swarnadipa .envelope-seal{width:46px;height:45px;left:calc(50% - 23px);border-radius:48% 52% 47% 53% / 51% 46% 54% 49%;background:radial-gradient(ellipse at 30% 20%,#f8e5ad,#c9a153 52%,#a37b36 83%,#e7cc8b);border:1px solid #b48a42;box-shadow:inset 1px 2px 2px #fff0bc,inset -2px -3px 4px #81591d66,0 4px 5px #62461e40}
.design-bali-swarnadipa .envelope-seal::before{content:"";position:absolute;inset:5px;border:1px solid #987337;border-radius:50%;box-shadow:0 1px 0 #ffedb5,inset 0 1px 2px #76531a33}
.design-bali-swarnadipa .envelope-seal svg{margin:6px 7px;stroke:#846026;filter:drop-shadow(0 1px 0 #f5dc9b)}
@media(max-height:680px){.design-bali-swarnadipa .signature-envelope{top:51%}}

/* Bali atmosphere stays behind the invitation, separate from scroll transforms. */
.signature-envelope-opening .cloud-planes{display:block!important;position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden;opacity:.65}
.signature-envelope-opening .cloud-planes i{position:absolute;display:block;width:145%;height:29%;left:-25%;top:17%;border-radius:50%;background:radial-gradient(ellipse at 24% 58%,#fffaf0a6 0,transparent 37%),radial-gradient(ellipse at 53% 48%,#fff9e9b3 0,transparent 43%),radial-gradient(ellipse at 78% 64%,#f3e5c780 0,transparent 34%);filter:blur(15px);animation:bali-cloud-drift 43s ease-in-out infinite alternate}
.signature-envelope-opening .cloud-planes i:nth-child(2){top:54%;left:-10%;height:23%;opacity:.65;animation-duration:57s;animation-delay:-21s;animation-direction:alternate-reverse}
.signature-envelope-opening .cloud-planes i:nth-child(3){top:4%;height:18%;opacity:.45;animation-duration:64s;animation-delay:-35s}
@keyframes bali-cloud-drift{from{transform:translate3d(-9%,0,0)}to{transform:translate3d(12%,-7px,0)}}
.signature-envelope-opening .scene-asleep .cloud-planes i{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.signature-envelope-opening .cloud-planes i{animation:none!important}}

/* Visible cloud silhouettes above the landscape, below all invitation content. */
.signature-envelope-opening .cloud-planes{z-index:0;opacity:1;transform:none}
.signature-envelope-opening .cloud-planes i{background:url('/static/assets/signature/bali-swarnadipa-v1/cloud-bank-v1.svg?v=white-2') center/100% 100% no-repeat;box-shadow:none;filter:none;border-radius:0;opacity:.8;scale:1;width:155%;height:24%;top:25%;left:-40%;right:auto;animation-duration:28s}
.signature-envelope-opening .cloud-planes i:nth-child(2){top:64%;height:25%;left:-10%;opacity:.6;scale:1;animation-duration:38s}
.signature-envelope-opening .cloud-planes i:nth-child(3){top:-3%;height:20%;left:-25%;opacity:.65;scale:1;animation-duration:45s}
@keyframes bali-cloud-drift{from{transform:translate3d(-12%,0,0)}to{transform:translate3d(22%,-9px,0)}}

/* Small white clouds remain in the upper sky only. */
.signature-envelope-opening .cloud-planes{bottom:auto;height:24%;overflow:hidden}
.signature-envelope-opening .cloud-planes i{width:66%;height:52%;top:4%;left:-14%;opacity:.85;animation-duration:32s}
.signature-envelope-opening .cloud-planes i:nth-child(2){width:49%;height:40%;top:28%;left:60%;opacity:.7;animation-duration:42s}
.signature-envelope-opening .cloud-planes i:nth-child(3){display:none}

/* Lower the small cloud band while keeping it in the upper sky. */
.signature-envelope-opening .cloud-planes{top:7%}

.signature-envelope-opening .cloud-planes{top:var(--signature-cloud-top,29%);height:15%}
/* Ulos: reveal the existing Toba landscape and woven foreground. */
.signature-envelope-opening.design-batak-ulos .scene-background{opacity:1;filter:saturate(.88) brightness(1.01);background-position:center 82%;transform-origin:50% 82%}
.design-batak-ulos .sunlight{opacity:.4}
.design-batak-ulos .signature-stage::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:repeating-linear-gradient(0deg,#783d3010 0 1px,transparent 1px 4px);mask-image:linear-gradient(90deg,#0006,transparent 12%,transparent 88%,#0006)}

/* Show the complete Ulos landscape width before the scroll zoom begins. */
@media(max-aspect-ratio:2/3){
.signature-envelope-opening.design-batak-ulos .scene-background{background-size:100% auto;background-position:center bottom;background-color:#f5e9dc;transform-origin:50% 84%}
}

.signature-envelope-opening.design-batak-ulos .depth-scene{inset:0}
.signature-envelope-opening.design-batak-ulos .scene-background{inset:0}

/* Generated fabric cutouts retain soft folds and visible fringe at the edges. */
body.signature-envelope-opening.design-batak-ulos .flowers-back,body.signature-envelope-opening.design-batak-ulos .flowers-front{width:125px;height:255px!important;top:-15px!important}
body.signature-envelope-opening.design-batak-ulos .flowers-back{left:-34px!important}
body.signature-envelope-opening.design-batak-ulos .flowers-front{right:-34px!important}

body.signature-envelope-opening:is(.variant-java,.variant-minang,.variant-bali,.variant-sunda,.variant-madura,.variant-betawi,.variant-bugis,.variant-melayu,.variant-palembang) .flowers-back,body.signature-envelope-opening:is(.variant-java,.variant-minang,.variant-bali,.variant-sunda,.variant-madura,.variant-betawi,.variant-bugis,.variant-melayu,.variant-palembang) .flowers-front{width:125px;height:255px!important;top:-15px!important}
body.signature-envelope-opening:is(.variant-java,.variant-minang,.variant-bali,.variant-sunda,.variant-madura,.variant-betawi,.variant-bugis,.variant-melayu,.variant-palembang) .flowers-back{left:-34px!important}
body.signature-envelope-opening:is(.variant-java,.variant-minang,.variant-bali,.variant-sunda,.variant-madura,.variant-betawi,.variant-bugis,.variant-melayu,.variant-palembang) .flowers-front{right:-34px!important}

/* A modest clarity increase keeps the illustration visible behind the text. */
body.signature-envelope-opening .scene-background{opacity:.88;filter:saturate(.8) brightness(1.03)}
body.signature-envelope-opening.variant-night .scene-background{opacity:.92;filter:none}
body.signature-envelope-opening.variant-ocean .scene-background{opacity:.88;filter:saturate(.8) brightness(1.05)}
body.signature-envelope-opening.design-batak-ulos .scene-background{opacity:1;filter:saturate(.88) brightness(1.01)}

/* Closing uses each world's scenery, softened behind the thank-you text. */
body.signature-envelope-opening .signature-closing{isolation:isolate;background:var(--signature-paper,#faf7ee)}
body.signature-envelope-opening .signature-closing::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background-image:var(--signature-depth-background,url('/static/assets/signature/elysian-garden-v1/background.webp'));background-size:cover;background-position:center bottom;opacity:.8}
body.signature-envelope-opening .signature-closing::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,color-mix(in srgb,var(--signature-paper,#faf7ee) 80%,transparent),color-mix(in srgb,var(--signature-paper,#faf7ee) 72%,transparent) 58%,color-mix(in srgb,var(--signature-paper,#faf7ee) 12%,transparent))}

body.signature-envelope-opening .signature-closing>.prototype-note{width:fit-content;max-width:100%;padding:6px 12px;border-radius:20px;background:color-mix(in srgb,var(--signature-paper,#faf7ee) 88%,transparent);color:var(--signature-ink,#65472b);opacity:1}

/* Cloud travel is driven by journey scroll progress, not an idle loop. */
.signature-envelope-opening .cloud-planes i{animation:none!important;transform:translate3d(var(--signature-cloud-travel,0px),0,0);will-change:transform}
.signature-envelope-opening .cloud-planes i:nth-child(2){transform:translate3d(calc(var(--signature-cloud-travel,0px) * -.65),0,0)}
@media(prefers-reduced-motion:reduce){.signature-envelope-opening .cloud-planes i{transform:none!important;will-change:auto}}

/* Betawi's kebaya lace and warm veranda share a champagne/peach palette. */
body.signature-envelope-opening.design-betawi-kebaya{--signature-ink:#805540!important;--signature-paper:#fcf0e3!important;--signature-soft:#fff8ed!important;color:#805540}
body.signature-envelope-opening.design-betawi-kebaya .scene-title{color:#805540;text-shadow:0 1px 12px #fff8ed}
body.signature-envelope-opening.design-betawi-kebaya .signature-envelope{color:#805540}
body.signature-envelope-opening.design-betawi-kebaya .envelope-open-label{font-weight:600;letter-spacing:1.1px}

/* A complete final screen; music attribution shares the scenic background. */
body.signature-envelope-opening .signature-closing{min-height:calc(100svh - var(--signature-nav-height,0px));box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:40px 24px 28px}
body.signature-envelope-opening .signature-closing>img{width:110px;height:130px;flex-shrink:0}
body.signature-envelope-opening .signature-closing>:is(h2,h3,p){margin:0}
body.signature-envelope-opening .signature-closing>.signature-music-credit{font-size:10px;line-height:1.6;padding:8px 12px;background:color-mix(in srgb,var(--signature-paper,#faf7ee) 85%,transparent);border-radius:14px;margin-top:8px;max-width:calc(100% - 42px)}
body.signature-envelope-opening .signature-closing>.prototype-note{font-size:10px}
@media(max-height:700px){body.signature-envelope-opening .signature-closing{padding:24px 20px;gap:12px}body.signature-envelope-opening .signature-closing>img{height:105px}}

.closing-wildlife{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.closing-flight{position:absolute;left:-65px;top:13%;width:48px;height:64px;animation:closing-fly-across 24s -7s linear infinite;opacity:0}
.closing-flight-1{top:83%;width:36px;height:48px;animation-duration:31s;animation-delay:-19s;animation-direction:reverse}
.closing-wingbeat{display:block;width:100%;height:100%;background-image:var(--wildlife-image);background-size:400% 100%;background-repeat:no-repeat;animation:closing-wing-flap .72s steps(1,end) infinite}
.wildlife-butterfly .closing-flight{width:38px;height:51px}
.wildlife-butterfly .closing-flight-1{width:30px;height:40px}
.wildlife-butterfly .closing-wingbeat{animation-duration:.55s}
@keyframes closing-wing-flap{0%,100%{background-position:0 50%}25%{background-position:33.333333% 50%}50%{background-position:66.666667% 50%}75%{background-position:100% 50%}}
@keyframes closing-fly-across{0%{transform:translate3d(0,12px,0) rotate(-8deg);opacity:0}8%{opacity:.9}32%{transform:translate3d(34vw,-15px,0) rotate(5deg)}65%{transform:translate3d(72vw,8px,0) rotate(-4deg)}90%{opacity:.9}100%{transform:translate3d(calc(100vw + 100px),-12px,0) rotate(6deg);opacity:0}}
.postlude-asleep .closing-wildlife *,body.page-asleep .closing-wildlife *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.closing-wildlife{display:none}}

/* PNG wildlife is visible from the opening and throughout the scenic journey. */
.signature-stage>.closing-wildlife{z-index:5}
.signature-stage>.closing-wildlife .closing-flight{top:35%}
.signature-stage>.closing-wildlife .closing-flight-1{top:86%}
.signature-stage .signature-butterflies{display:none}
.scene-asleep>.closing-wildlife *,body.page-asleep .closing-wildlife *{animation-play-state:paused!important}

/* Opening wildlife flies in the same sky band as the clouds below the date. */
.signature-stage>.closing-wildlife .closing-flight{top:calc(var(--signature-cloud-top,29%) + 8px)}
.signature-stage>.closing-wildlife .closing-flight-1{top:calc(var(--signature-cloud-top,29%) + 36px)}

/* Soft arcs and depth changes replace the straight, sliding flight. */
.signature-envelope-opening .closing-flight{animation-name:signature-flight-near;animation-duration:27s;animation-timing-function:linear;animation-direction:normal;transform-origin:center;will-change:transform,opacity}
.signature-envelope-opening .closing-flight-1{animation-name:signature-flight-far;animation-duration:34s;animation-delay:-17s;animation-direction:normal}
.signature-envelope-opening .closing-flight-1 .closing-wingbeat{scale:-1 1}
.signature-envelope-opening .closing-wingbeat{animation-duration:.9s}
.signature-envelope-opening .wildlife-butterfly .closing-wingbeat{animation-duration:.68s}
@keyframes signature-flight-near{
0%{transform:translate3d(-30px,8px,0) scale(.72) rotate(-5deg);opacity:0}
8%{opacity:.85}
25%{transform:translate3d(23vw,-7px,0) scale(.95) rotate(2deg)}
50%{transform:translate3d(50vw,-19px,0) scale(.6) rotate(-2deg);opacity:.55}
75%{transform:translate3d(78vw,-6px,0) scale(.78) rotate(3deg);opacity:.8}
92%{opacity:.7}
100%{transform:translate3d(calc(100vw + 110px),6px,0) scale(.58) rotate(-3deg);opacity:0}}
@keyframes signature-flight-far{
0%{transform:translate3d(calc(100vw + 110px),0,0) scale(.58) rotate(3deg);opacity:0}
8%{opacity:.65}
25%{transform:translate3d(77vw,-10px,0) scale(.75) rotate(-3deg)}
50%{transform:translate3d(49vw,-23px,0) scale(.44) rotate(2deg);opacity:.42}
75%{transform:translate3d(22vw,-8px,0) scale(.65) rotate(-2deg);opacity:.7}
92%{opacity:.6}
100%{transform:translate3d(-35px,2px,0) scale(.5) rotate(3deg);opacity:0}}

/* Butterflies stay low below the envelope; birds retain the sky corridor. */
.signature-stage>.closing-wildlife.wildlife-butterfly .closing-flight{top:82%}
.signature-stage>.closing-wildlife.wildlife-butterfly .closing-flight-1{top:88%}

/* Golden Orchard opens with one botanical cluster anchored to the right corner. */
body.design-golden-orchard .signature-stage .flowers-back{left:auto!important;right:-14px;bottom:-12px!important;top:auto;width:clamp(140px,37vw,210px);height:auto!important;z-index:3;transform:none;opacity:var(--opening-ornaments-opacity,1);transform-origin:right bottom}
body.design-golden-orchard .signature-stage .flowers-back img{object-position:right bottom;transform-origin:85% 100%}
body.design-golden-orchard .signature-stage .flowers-front,body.design-golden-orchard .signature-stage .botanical-planes{display:none}

/* Birds stay high on both opening and closing screens; butterflies remain low. */
.signature-closing>.closing-wildlife.wildlife-dove .closing-flight{top:10%}
.signature-closing>.closing-wildlife.wildlife-dove .closing-flight-1{top:17%}
.signature-stage>.closing-wildlife.wildlife-dove .closing-flight{top:calc(var(--signature-cloud-top,29%) + 2px)}
.signature-stage>.closing-wildlife.wildlife-dove .closing-flight-1{top:calc(var(--signature-cloud-top,29%) + 24px)}

body.signature-envelope-opening.design-palembang-songket{--signature-ink:#7b482e!important;--signature-paper:#fbefdd!important;--signature-soft:#fff7e8!important;color:#7b482e}
body.signature-envelope-opening.design-palembang-songket .scene-title{color:#7b482e;text-shadow:0 1px 12px #fff7e8}
body.signature-envelope-opening.design-palembang-songket .envelope-open-label{font-weight:600}

/* Scenic artwork remains crisp; text has its own local readability treatment. */
body.signature-envelope-opening .scene-background{opacity:1;filter:saturate(.96) brightness(1.01)}
body.signature-envelope-opening.variant-night .scene-background{opacity:1;filter:none}
body.signature-envelope-opening.variant-ocean .scene-background{opacity:1;filter:saturate(.92) brightness(1.02)}
body.signature-envelope-opening.design-batak-ulos .scene-background{opacity:1;filter:saturate(.96) brightness(1.01)}
body.signature-envelope-opening .signature-closing::before{opacity:1}
body.signature-envelope-opening .signature-closing::after{background:linear-gradient(to bottom,color-mix(in srgb,var(--signature-paper,#faf7ee) 70%,transparent),color-mix(in srgb,var(--signature-paper,#faf7ee) 58%,transparent) 58%,color-mix(in srgb,var(--signature-paper,#faf7ee) 7%,transparent))}

body.signature-envelope-opening.design-palembang-songket .depth-scene{inset:0}
body.signature-envelope-opening.design-palembang-songket .scene-background{inset:0;background-position:center bottom;transform-origin:50% 78%}

/* Balance scenic detail with readable text. */
body.signature-envelope-opening .scene-background{opacity:.91;filter:saturate(.86) brightness(1.03)}
body.signature-envelope-opening.variant-night .scene-background{opacity:.94;filter:none}
body.signature-envelope-opening.variant-ocean .scene-background{opacity:.91;filter:saturate(.86) brightness(1.04)}
body.signature-envelope-opening.design-batak-ulos .scene-background{opacity:.94;filter:saturate(.88) brightness(1.02)}
body.signature-envelope-opening .signature-closing::before{opacity:.92}
body.signature-envelope-opening.design-palembang-songket .scene-background{background-position:50% 50%;transform-origin:50% 74%}

/* Align the house itself (~62% down the artwork) to the viewport center. */
body.signature-envelope-opening.design-palembang-songket .scene-background{background-size:auto 130%;background-position:51% 100%;transform-origin:50% 50%}

/* Real botanical PNG cutouts replace the synthetic teardrop petals. */
body.signature-envelope-opening.variant-rose .falling-leaves{display:block}
body.signature-envelope-opening.variant-rose .falling-leaves img{object-fit:contain}
@media(prefers-reduced-motion:reduce){body.signature-envelope-opening.variant-rose .falling-leaves{display:none!important}}

/* Nocturne has celestial life instead of daytime wildlife and clouds. */
body.design-velvet-nocturne .cloud-planes{display:none!important}
.nocturne-sky-life{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:4}
.nocturne-twinkle{position:absolute;left:var(--star-x);top:var(--star-y);width:3px;height:3px;border-radius:50%;background:#f2f5ff;box-shadow:0 0 5px 1px #d6e6ff80;animation:nocturne-twinkle var(--star-duration) var(--star-delay) ease-in-out infinite}
.nocturne-twinkle:nth-child(3n){width:2px;height:2px}
.nocturne-meteor{position:absolute;left:85%;top:11%;width:84px;height:1px;background:linear-gradient(90deg,transparent,#c4d9f4 85%,#fff);filter:drop-shadow(0 0 3px #d1e6ff);opacity:0;animation:nocturne-meteor 23s 5s linear infinite}
@keyframes nocturne-twinkle{0%,100%{opacity:.18;transform:scale(.7)}45%{opacity:.95;transform:scale(1.15)}70%{opacity:.35;transform:scale(.85)}}
@keyframes nocturne-meteor{0%,83%{opacity:0;transform:translate3d(0,0,0) rotate(-27deg)}84%{opacity:.85}89%{opacity:0;transform:translate3d(-75vw,24vh,0) rotate(-27deg)}100%{opacity:0;transform:translate3d(-75vw,24vh,0) rotate(-27deg)}}
.scene-asleep>.nocturne-sky-life *,.postlude-asleep .nocturne-sky-life *,body.page-asleep .nocturne-sky-life *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.nocturne-twinkle{animation:none;opacity:.5}.nocturne-meteor{display:none}}

/* Actual folded-paper PNGs glide; they never use the animal wingbeat. */
.closing-paper-plane{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 2px #6c53352b)}
.wildlife-plane .closing-flight{width:66px;height:66px;animation-duration:26s}
.wildlife-plane .closing-flight-1{width:50px;height:50px;animation-duration:35s}
.wildlife-plane .closing-flight-1 .closing-paper-plane{scale:-1 1}
.signature-closing>.wildlife-plane .closing-flight{top:12%}
.signature-closing>.wildlife-plane .closing-flight-1{top:20%}

/* Muted mauve silk, pearl paper and champagne trim for Bugis Sutra. */
body.signature-envelope-opening.design-bugis-sutra{--signature-ink:#654c70!important;--signature-paper:#f8f1ec!important;--signature-soft:#fff9f2!important;color:#654c70}
body.signature-envelope-opening.design-bugis-sutra .scene-title{color:#654c70;text-shadow:0 1px 12px #fff9f2}
body.signature-envelope-opening.design-bugis-sutra .envelope-open-label{font-weight:600}

body.signature-envelope-opening.design-bugis-sutra .depth-scene{inset:0}
body.signature-envelope-opening.design-bugis-sutra .scene-background{inset:0;background-position:center bottom;transform-origin:50% 70%}

/* Nocturne: one coherent moonlit world rather than stacked graphic ornaments. */
body.design-velvet-nocturne .signature-stage>.variant-ornaments,body.design-velvet-nocturne .signature-stage>.flower-layer,body.design-velvet-nocturne .signature-stage>.botanical-planes,body.design-velvet-nocturne .chapter-edge,body.design-velvet-nocturne .chapter-medallion,body.design-velvet-nocturne .signature-closing>img,body.design-velvet-nocturne .letter-watermark{display:none!important}
body.signature-envelope-opening.design-velvet-nocturne .depth-scene{inset:0}
body.signature-envelope-opening.design-velvet-nocturne .scene-background{inset:0;background-position:center bottom;transform-origin:50% 60%;opacity:.94}
body.design-velvet-nocturne .night-sky-stars{opacity:.65}
body.design-velvet-nocturne .scene-title h1{text-transform:none;letter-spacing:.3px;font-size:clamp(34px,8.5vw,48px);line-height:1.2}
body.design-velvet-nocturne .signature-envelope{filter:drop-shadow(0 10px 18px #02071260)}
body.design-velvet-nocturne .envelope-back{border-color:#91a5c1;box-shadow:0 1px 0 #d9e5f044,0 12px 28px #02071355}
body.design-velvet-nocturne .envelope-front{border-bottom-color:#7d93b4}
body.design-velvet-nocturne .scene-caption{color:#dce6f5;text-shadow:0 1px 6px #061025}

body.signature-envelope-opening.design-velvet-nocturne .scene-background,body.signature-envelope-opening.design-velvet-nocturne .signature-closing::before{background-position:right bottom}

/* A meteor has a bright leading point and a thin, fading tail. */
body.design-velvet-nocturne .nocturne-meteor{left:92%;top:7%;width:110px;height:1px;transform-origin:0 50%;background:linear-gradient(90deg,#eaf4ff 0%,#bdd8f3a6 14%,#97bce344 45%,transparent 100%);filter:none;animation:nocturne-meteor-natural 24s -6s linear infinite;will-change:transform,opacity}
body.design-velvet-nocturne .nocturne-meteor::before{content:"";position:absolute;left:-1px;top:-1px;width:3px;height:3px;border-radius:50%;background:#f4f9ff;box-shadow:0 0 4px 1px #c4e0ff88}
@keyframes nocturne-meteor-natural{
0%,62%{opacity:0;transform:translate3d(0,0,0) rotate(-29deg) scaleX(.35)}
62.2%{opacity:.35;transform:translate3d(-2vw,1.1vw,0) rotate(-29deg) scaleX(.65)}
62.7%{opacity:.9;transform:translate3d(-14vw,7.8vw,0) rotate(-29deg) scaleX(1)}
64.3%{opacity:.7;transform:translate3d(-54vw,30vw,0) rotate(-29deg) scaleX(.9)}
65.2%{opacity:0;transform:translate3d(-74vw,41vw,0) rotate(-29deg) scaleX(.4)}
100%{opacity:0;transform:translate3d(-74vw,41vw,0) rotate(-29deg) scaleX(.4)}}
@media(prefers-reduced-motion:reduce){body.design-velvet-nocturne .nocturne-meteor{display:none}}

/* Nocturne event stationery matches the navy/silver envelope and night sky. */
body.design-velvet-nocturne .signature-stage .scene-events .event-detail{background:linear-gradient(145deg,#293e5ee8,#13233de8)!important;border:1px solid #b1c7e45e!important;border-radius:22px;padding:24px 20px;box-shadow:inset 0 1px 0 #e8f1ff24,0 12px 30px #01091a40;color:#e9f0fc;backdrop-filter:blur(8px)}
body.design-velvet-nocturne .scene-events .event-place{border-color:#bacde333}
body.design-velvet-nocturne .scene-events .location-link{background:linear-gradient(135deg,#d0dded,#a7bdd8);color:#17283f;border-color:#e4eeff99;box-shadow:0 3px 10px #02091826}
body.design-velvet-nocturne .nocturne-twinkle{width:4px;height:4px;animation:nocturne-twinkle var(--star-duration) var(--star-delay) ease-in-out infinite,nocturne-stardrift 12s var(--star-delay) ease-in-out infinite alternate}
body.design-velvet-nocturne .nocturne-twinkle:nth-child(3n){width:2px;height:2px}
@keyframes nocturne-stardrift{from{translate:-3px 4px}to{translate:5px -9px}}
body.design-velvet-nocturne .nocturne-meteor{animation-duration:18s;animation-delay:-10s}
@media(prefers-reduced-motion:reduce){body.design-velvet-nocturne .nocturne-twinkle{animation:none}}
/* Rose Atelier botanical cluster stays anchored to the lower-right corner. */
body.design-rose-atelier .signature-stage .flowers-back{left:auto!important;right:-14px;bottom:-12px!important;top:auto;width:clamp(140px,37vw,210px);height:auto!important;z-index:3;transform:none;opacity:var(--opening-ornaments-opacity,1);transform-origin:right bottom}
body.design-rose-atelier .signature-stage .flowers-back img{object-position:right bottom;transform-origin:85% 100%}
body.design-rose-atelier .signature-stage .flowers-front,body.design-rose-atelier .signature-stage .botanical-planes{display:none}

/* Warm PNG sky lanterns rise at the edges in staggered depth layers. */
.nocturne-lanterns{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:3}
.nocturne-lantern{position:absolute;left:var(--lantern-x);top:100%;width:var(--lantern-size);height:calc(var(--lantern-size) * 1.5);animation:nocturne-lantern-rise var(--lantern-duration) var(--lantern-delay) linear infinite;will-change:transform,opacity;opacity:0}
.nocturne-lantern img{display:block;width:100%;height:100%;object-fit:contain;animation:nocturne-lantern-sway 6s var(--lantern-delay) ease-in-out infinite alternate;filter:drop-shadow(0 0 5px #efb76555)}
@keyframes nocturne-lantern-rise{0%{transform:translate3d(0,60px,0) scale(1);opacity:0}8%{opacity:.85}45%{transform:translate3d(9px,-48svh,0) scale(.85);opacity:.85}85%{opacity:.55}100%{transform:translate3d(-5px,calc(-100svh - 120px),0) scale(.6);opacity:0}}
@keyframes nocturne-lantern-sway{from{rotate:-4deg}to{rotate:4deg}}
.scene-asleep>.nocturne-lanterns *,.postlude-asleep .nocturne-lanterns *,body.page-asleep .nocturne-lanterns *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.nocturne-lanterns{display:none}}

/* Distant lanterns: smaller silhouettes, softer glow and slower ascent. */
body.design-velvet-nocturne .nocturne-lanterns{opacity:.66}
body.design-velvet-nocturne .nocturne-lantern img{filter:drop-shadow(0 0 2px #efb76533);opacity:.9}

/* Independent foreground ridge occludes the lanterns until they rise above it. */
.nocturne-landscape-life{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.nocturne-landscape-life .nocturne-lanterns{z-index:1;bottom:15%}
.nocturne-mountain-ridge{position:absolute;left:-10%;bottom:15%;width:120%;height:42%;object-fit:fill;z-index:2;pointer-events:none;mask-image:linear-gradient(to bottom,#000 0%,#000 86%,transparent 100%)}
.signature-closing>.nocturne-landscape-life{z-index:-1}
.scene-asleep>.nocturne-landscape-life *,.postlude-asleep .nocturne-landscape-life *,body.page-asleep .nocturne-landscape-life *{animation-play-state:paused!important}

/* The foreground ridge follows the same camera zoom as the Nocturne scene. */
.signature-stage>.nocturne-landscape-life{transform:scale(var(--bg-scale,1));transform-origin:50% 60%;will-change:transform}
body.design-velvet-nocturne .nocturne-lanterns{opacity:.72}
@media(prefers-reduced-motion:reduce){.signature-stage>.nocturne-landscape-life{transform:none;will-change:auto}}

/* Clip the sky layer to the actual PNG ridge: no lantern pixels over water. */
.nocturne-landscape-life .nocturne-lanterns{clip-path:polygon(0% 0%,100% 0%,100% 79.825%,98% 80.818%,96% 81.869%,94% 82.862%,92% 83.913%,90% 84.264%,88% 83.797%,86% 83.680%,84% 82.687%,82% 81.285%,80% 82.161%,78% 82.220%,76% 81.110%,74% 81.811%,72% 81.344%,70% 80.468%,68% 79.358%,66% 80.000%,64% 79.007%,62% 78.832%,60% 77.898%,58% 76.554%,56% 77.372%,54% 78.073%,52% 79.416%,50% 79.942%,48% 80.818%,46% 80.760%,44% 80.059%,42% 81.402%,40% 82.512%,38% 82.570%,36% 81.986%,34% 82.220%,32% 81.811%,30% 80.526%,28% 81.052%,26% 80.993%,24% 81.519%,22% 81.168%,20% 80.876%,18% 81.460%,16% 81.752%,14% 81.694%,12% 80.876%,10% 81.110%,8% 79.591%,6% 78.715%,4% 77.255%,2% 77.489%,0% 78.540%)}

/* Rose Atelier keeps its painted landscape without ribbon or foreground bouquet. */
body.design-rose-atelier .signature-stage>.flower-layer,body.design-rose-atelier .signature-stage>.botanical-planes{display:none!important}

body.signature-envelope-opening.design-rose-atelier .depth-scene{inset:0}
body.signature-envelope-opening.design-rose-atelier .scene-background{inset:0;opacity:.96;filter:saturate(.92) brightness(1.01);background-position:center bottom;transform-origin:50% 70%}

/* Lower the rose garden so the opening keeps a quiet sky band for clouds. */
body.signature-envelope-opening.design-rose-atelier .scene-background{background-size:auto 85%;background-position:center bottom;background-color:#f8e9e3;background-repeat:no-repeat}
body.signature-envelope-opening.design-rose-atelier .scene-background::after{content:"";position:absolute;inset:0 0 auto;height:33%;background:linear-gradient(#f8e9e3 0%,#f8e9e3 36%,transparent 100%);pointer-events:none}

body.signature-envelope-opening.design-ocean-serenade .depth-scene{inset:0}
body.signature-envelope-opening.design-ocean-serenade .scene-background{inset:0;opacity:.94;filter:saturate(.88) brightness(1.02);background-position:center bottom;transform-origin:50% 65%}

body.signature-envelope-opening .signature-closing{min-height:calc(100dvh - var(--signature-nav-height,0px))}
/* Closing credits sit near the lower edge as plain text across all Signature designs. */
body.signature-envelope-opening .signature-closing{position:relative;padding-bottom:130px}
body.signature-envelope-opening .signature-closing>.prototype-note,
body.signature-envelope-opening .signature-closing>.signature-music-credit{position:absolute;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important;padding:0!important;margin:0!important;font-size:9px;line-height:1.6;z-index:4}
body.signature-envelope-opening .signature-closing>.prototype-note{left:24px;right:24px;width:auto;max-width:none;bottom:calc(28px + env(safe-area-inset-bottom,0px));text-align:center;font-size:12px;font-weight:500;color:var(--signature-ink,#65472b);opacity:1}
body.signature-envelope-opening .signature-closing:has(>.signature-music-credit:not([hidden]))>.prototype-note{bottom:calc(80px + env(safe-area-inset-bottom,0px))}
body.signature-envelope-opening .signature-closing>.signature-music-credit{left:64px;right:64px;width:auto;max-width:none;bottom:calc(20px + env(safe-area-inset-bottom,0px));text-align:center;font-size:11px;color:var(--signature-ink,#65472b);opacity:1}
body.signature-envelope-opening .signature-closing>.signature-music-credit a{color:inherit;text-underline-offset:3px;white-space:nowrap}
body.signature-envelope-opening .signature-closing::after{background:linear-gradient(to bottom,color-mix(in srgb,var(--signature-paper,#faf7ee) 80%,transparent),color-mix(in srgb,var(--signature-paper,#faf7ee) 72%,transparent) 58%,color-mix(in srgb,var(--signature-paper,#faf7ee) 18%,transparent) 74%,color-mix(in srgb,var(--signature-paper,#faf7ee) 96%,transparent) 94%)}
/* Closed cover, hinged flap, then the letter emerges; progress follows scroll both ways. */
body.signature-envelope-opening .envelope-flap{transform:rotateX(var(--envelope-flap-angle,0deg));z-index:var(--envelope-flap-layer,7)}
body.signature-envelope-opening .envelope-letter{transform:translateY(calc((1 - var(--envelope-letter-out,0))*15% - var(--envelope-letter-out,0)*55px));opacity:1}
body.signature-envelope-opening .envelope-seal{z-index:8}
@media(prefers-reduced-motion:reduce){body.signature-envelope-opening .envelope-flap{transform:none}body.signature-envelope-opening .envelope-letter{opacity:0}}

/* The pocket masks the bottom edge while the opaque letter slides out. */
body.signature-envelope-opening .envelope-letter-pocket{inset:-100% 0 0;overflow:hidden;z-index:3;pointer-events:none}
body.signature-envelope-opening .envelope-letter-pocket .envelope-letter{position:absolute;display:block;box-sizing:border-box;bottom:6%;height:51.5%}

/* Fine embossed paper fibres on the hinged lid, inheriting each theme palette. */
body.signature-envelope-opening .envelope-flap::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(96deg,transparent 0 2px,#fff9e838 2px 3px,transparent 3px 7px),repeating-linear-gradient(4deg,transparent 0 4px,#392c2114 4px 5px,transparent 5px 9px),radial-gradient(ellipse at 35% 20%,#fffdf738,transparent 68%);mix-blend-mode:soft-light;opacity:.8}

/* Golden Orchard: flowers frame the page; the reading area stays clear. */
body.design-golden-orchard .chapter-medallion{display:none}
body.design-golden-orchard .chapter-edge{width:19%;height:36%;overflow:hidden;transform:none!important;scale:none;pointer-events:none}
body.design-golden-orchard .chapter-edge-left{left:0;bottom:0;top:auto;transform-origin:left bottom}
body.design-golden-orchard .chapter-edge-right{right:0;top:0;bottom:auto;transform-origin:right top}
body.design-golden-orchard .chapter-edge img{width:clamp(120px,24vw,190px);max-width:none;position:absolute;bottom:-14px;left:-30px;opacity:.65}
body.design-golden-orchard .signature-closing>img{position:absolute;right:-18px;bottom:95px;width:clamp(120px,27vw,190px);height:auto;max-height:250px;object-position:right bottom;pointer-events:none;opacity:.8}

/* All Signature closing ornaments sit at the edge instead of above the message. */
body.signature-envelope-opening .signature-closing>img{position:absolute;right:-18px;bottom:110px;width:clamp(90px,24vw,150px);height:auto;max-height:220px;object-position:right bottom;pointer-events:none;opacity:.75}
body.design-golden-orchard .signature-stage .flowers-back{right:-32px;width:clamp(90px,28vw,150px)}
/* Keep chapter artwork in edge masks, including while the chapter zooms. */
body.signature-envelope-opening .chapter-edge{width:19%;height:36%;overflow:hidden;transform:none!important;scale:none;pointer-events:none}
body.signature-envelope-opening .chapter-edge-left{left:0;bottom:0;top:auto}
body.signature-envelope-opening .chapter-edge-right{right:0;top:0;bottom:auto}
body.signature-envelope-opening .chapter-edge img{position:absolute;bottom:-14px;left:-30px;width:clamp(120px,24vw,190px);max-width:none}
body.signature-envelope-opening .chapter-edge{height:100%}
/* Golden Orchard uses one floral corner: bottom right, never the left column. */
body.design-golden-orchard .chapter-edge-left{display:none}
body.design-golden-orchard .chapter-edge-right{right:0;top:auto;bottom:0;rotate:0deg;width:28%;height:100%;transform-origin:right bottom}
body.design-golden-orchard .chapter-edge-right img{left:auto;right:-32px;bottom:-14px;width:clamp(90px,28vw,150px);transform-origin:right bottom}
body.design-golden-orchard .signature-postlude-art .postlude-heritage{left:auto;right:-12px;top:auto;bottom:0;transform-origin:right bottom}
body.design-golden-orchard .signature-postlude-art .postlude-left{display:none}

/* Translate the edge masks outward without rotating their travel direction. */
body.signature-envelope-opening .chapter-edge-left{translate:calc(-1 * var(--edge-outward,var(--chapter-edge-outward,0px))) 0}
body.signature-envelope-opening .chapter-edge-right{translate:var(--edge-outward,var(--chapter-edge-outward,0px)) 0}
body.design-golden-orchard .signature-stage .flowers-back{translate:calc((1 - var(--opening-ornaments-opacity,1))*180px) 0}
@media(prefers-reduced-motion:reduce){body.signature-envelope-opening .chapter-edge{translate:none}body.design-golden-orchard .signature-stage .flowers-back{translate:none}}
/* Lift the opening envelope slightly while retaining each theme's placement. */
body.signature-envelope-opening .signature-envelope{transform:translate(-50%,calc(-9% - clamp(16px,2.5svh,24px)))}

/* Golden Orchard: retain landscape depth with a lighter reading veil. */
body.signature-envelope-opening.design-golden-orchard .scene-background{inset:0;opacity:.96;filter:saturate(.92) brightness(1.01);background-position:center bottom;transform-origin:50% 68%}
body.signature-envelope-opening.design-golden-orchard .depth-scene::after{background:radial-gradient(ellipse at 50% 38%,color-mix(in srgb,var(--signature-paper) 44%,transparent),color-mix(in srgb,var(--signature-paper) 28%,transparent) 45%,transparent 80%)}
body.signature-envelope-opening.design-golden-orchard .signature-closing::before{opacity:.96}
body.signature-envelope-opening.design-golden-orchard .signature-closing::after{background:linear-gradient(to bottom,color-mix(in srgb,var(--signature-paper) 58%,transparent),color-mix(in srgb,var(--signature-paper) 38%,transparent) 55%,transparent 80%,color-mix(in srgb,var(--signature-paper) 90%,transparent) 98%)}
body.signature-envelope-opening.design-golden-orchard .scene-caption{color:#fff9ed;text-shadow:0 1px 4px #34240f,0 0 12px #34240f99;opacity:1}