/* Theme-specific foreground motion; central text and portraits remain unobstructed. */
.bespoke-gate{opacity:.8}
.tier-premium .cover .cover-content:before{bottom:8px}
@media(max-width:600px){.tier-premium .cover .cover-content:before{left:8px;right:8px}}
/* Prevent auto margins on the ampersand from pushing names to opposite edges. */
.tier-premium .cover h1{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;width:fit-content;max-width:100%;margin-inline:auto}
.tier-premium .cover h1 .ampersand{margin:0 3px;flex:0 0 auto}
@media(max-width:600px){.tier-premium .cover .premium-cover-portrait{width:158px;height:196px;margin-bottom:14px}}
@media(max-width:600px) and (max-height:700px){.tier-premium .cover .premium-cover-portrait{width:144px;height:176px;margin-bottom:10px}}
@media(max-width:350px){.tier-premium .cover .premium-cover-portrait{width:132px;height:160px}}
/* Dates appear promptly on every cover, independent of entrance duration. */
.cover .cover-date{animation:entrance-letter .9s 1.1s cubic-bezier(.33,0,.2,1) both}
/* Stationary illustrated sets; movement belongs to independent foreground assets. */
.premium-still-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;pointer-events:none}
.tier-premium .inv-section .premium-still-backdrop{opacity:.16}
.tier-premium .theme-scene:has(.premium-still-backdrop) .grand-scenery{visibility:hidden}
.tier-premium .cover>.theme-scene,.tier-premium .theme-scene .grand-scenery,.tier-premium .theme-scene .java-landscape{animation:none!important;transform:none!important}
.art-eden .asset-track-1,.art-eden .asset-track-3{animation:premium-leaf-sway 12s ease-in-out infinite;transform-origin:30% 90%}
.art-eden .edge-right .asset-track-1,.art-eden .edge-right .asset-track-3{animation-delay:-6s}
.art-rosalia .asset-track-3{animation:premium-leaf-sway 16s -4s ease-in-out infinite;transform-origin:30% 90%}
@keyframes premium-leaf-sway{0%,100%{transform:rotate(-5deg) translateY(0)}50%{transform:rotate(5deg) translateY(-5px)}}
/* Each theme owns the color of its falling petals. */
.theme-botanical{--falling-petal:#fffef5}
.theme-ivory{--falling-petal:#e6d4ab}
.theme-blush{--falling-petal:#e8becd}
.theme-heritage{--falling-petal:#d6b16a}
.theme-midnight{--falling-petal:#e6cc90}
.theme-portrait{--falling-petal:#eee5d0}
.theme-scene .motion-garden{--petal:var(--falling-petal)}
.theme-scene .floating-petal,.theme-scene .rose-petal,.theme-scene .silk-petal{background:var(--falling-petal)}
.theme-midnight .theme-scene .floating-petal{box-shadow:0 0 7px #e6cc9080}
.theme-botanical .sage-white-petals span{background:linear-gradient(135deg,#fff,var(--falling-petal))}
@media(prefers-reduced-motion:reduce){.cover .cover-date,.art-eden .asset-track,.art-rosalia .asset-track{animation:none!important}}
.design-ivory .overture-ivory{padding:32px 28px 100px;min-height:calc(100svh - 48px);rotate:none;margin:0;box-shadow:none}
.design-ivory .overture-copy h2{font-size:clamp(30px,8vw,38px);line-height:1.2;margin:18px 0 22px}
.design-ivory .overture-ivory .letter-excerpt{font-size:18px;line-height:1.55;padding:12px 14px;margin-bottom:0}
.design-ivory .overture-ivory .letter-signature{font-size:32px;line-height:1.3;margin-top:20px}
.design-ivory .overture-ivory .overture-date{font-size:10px;letter-spacing:2px;margin:20px 0 16px}
.design-eden .cinematic-veil{background:linear-gradient(90deg,#dae7d5,#f1f6eae8);box-shadow:inset 0 0 35px #35544720}
.design-eden.entrance-running .veil-left{transform-origin:left center;animation:estate-left 6.4s cubic-bezier(.33,0,.2,1) both}
.design-eden.entrance-running .veil-right{transform-origin:right center;animation:estate-right 6.4s cubic-bezier(.33,0,.2,1) both}
.art-eden .asset-track-2{animation:eden-flight 16s ease-in-out infinite;width:55px;left:5px}
.art-eden .asset-butterfly{animation:eden-wings 1.8s ease-in-out infinite;transform-origin:center}
.art-aurelia .asset-track-1{left:-6px;width:78px;animation:crystal-swing 12s ease-in-out infinite;transform-origin:50% 0}
.art-aurelia .asset-crystal{animation:crystal-light 5s ease-in-out infinite}
.design-aurelia .cinematic-veil{background:linear-gradient(90deg,#e9dcc1,#fff7e7,#e4d0ad);box-shadow:inset 0 0 40px #a4814630}
.art-celestia .asset-track-1{width:78px;left:-12px;top:15px;animation:moon-orbit 22s ease-in-out infinite}
.art-celestia .asset-track-3{width:65px;left:-14px;animation:moon-orbit 26s -8s ease-in-out infinite reverse}
.design-celestia .cinematic-veil{background:radial-gradient(ellipse at 30% 25%,#3b496b,#101a30);color:#ecd69d}
.art-rosalia .asset-track-1{width:92px;left:-20px;top:0;transform-origin:top left;animation:silk-breathe 15s ease-in-out infinite}
.art-rosalia .asset-track-2{animation:rose-bloom 14s ease-in-out infinite;left:-30px;width:78px}
.design-rosalia .cinematic-veil{background:repeating-linear-gradient(90deg,#eed0d8,#fff0f2 24px,#ddb7c3 42px);border-radius:0 0 90px 0}
.design-rosalia.entrance-running .veil-left{animation:rose-curtain-left 6.4s cubic-bezier(.33,0,.2,1) both}
.design-rosalia.entrance-running .veil-right{animation:rose-curtain-right 6.4s cubic-bezier(.33,0,.2,1) both}
.inv-section .asset-butterfly{display:none}
@keyframes eden-flight{0%,100%{transform:translate3d(0,0,0) rotate(-10deg)}35%{transform:translate3d(12px,-42px,0) rotate(12deg)}70%{transform:translate3d(-5px,18px,0) rotate(-6deg)}}
@keyframes eden-wings{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.55)}}
@keyframes crystal-swing{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes crystal-light{0%,100%{opacity:.65;filter:drop-shadow(0 0 1px #ffeec0)}50%{opacity:1;filter:drop-shadow(0 0 7px #ffeec0)}}
@keyframes moon-orbit{0%,100%{transform:translateY(0) rotate(-7deg);opacity:.75}50%{transform:translateY(18px) rotate(8deg);opacity:1}}
@keyframes silk-breathe{0%,100%{transform:rotate(-3deg) scaleX(.97)}50%{transform:rotate(4deg) scaleX(1.04)}}
@keyframes rose-bloom{0%,100%{transform:rotate(-5deg) scale(.93)}50%{transform:rotate(5deg) scale(1.04)}}
@keyframes rose-curtain-left{0%,12%{transform:translateX(0)}100%{transform:translateX(-110%) skewY(-7deg)}}
@keyframes rose-curtain-right{0%,12%{transform:translateX(0)}100%{transform:translateX(110%) skewY(7deg)}}
.scene-asleep .premium-separated-art *,.page-asleep .premium-separated-art *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.premium-separated-art *{animation:none!important}}

.sage-white-petals{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:4}
.design-botanical .floating-petal{display:none!important}
.design-botanical .motion-garden{--petal:#fff;--foliage:#789984}
.sage-white-petals span{position:absolute;top:-22px;left:calc(3% + var(--n)*1.3%);width:12px;height:19px;background:linear-gradient(135deg,#fff,#f4f4e9);border-radius:80% 15% 75% 25%;box-shadow:0 1px 3px #536a4d26;animation:sage-petal-fall calc(16s + var(--n)*1s) linear infinite;animation-delay:calc(var(--n)*-2.7s)}
.sage-white-petals span:nth-child(even){left:auto;right:calc(3% + var(--n)*1.2%)}
@keyframes sage-petal-fall{0%{transform:translate3d(0,-30px,0) rotate(0);opacity:0}8%{opacity:.9}50%{transform:translate3d(13px,45vh,0) rotate(130deg)}92%{opacity:.8}100%{transform:translate3d(-5px,105vh,0) rotate(260deg);opacity:0}}
.scene-asleep .sage-white-petals span,.page-asleep .sage-white-petals span{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.sage-white-petals{display:none}}

.theme-botanical .overture-copy h2{font-family:'Great Vibes',cursive;font-size:clamp(30px,9vw,44px);font-weight:400;line-height:1.4;letter-spacing:0;text-align:center;margin:24px auto;overflow-wrap:normal}.theme-botanical .overture-copy h2 i{font-family:'Cormorant Garamond',serif;font-size:.65em;font-style:italic}.theme-botanical .overture-copy h2 span{display:inline}.theme-botanical .overture-copy h2 span:first-child{white-space:nowrap}.theme-botanical .overture-copy h2 span:last-child{white-space:nowrap}



.design-blush .theme-scene .upper-floral,.design-blush .theme-scene .extra-floral{display:none}


.design-heritage .cover .couple-monogram{display:flex;align-items:center;justify-content:center;gap:12px;width:auto;height:auto;min-height:68px;font:48px/1.3 'Cormorant Garamond',serif;margin:0 auto 20px}.design-heritage .cover .couple-monogram span{position:static;transform:none}.design-heritage .cover .couple-monogram i{display:block;font-size:22px}.design-heritage .theme-scene .upper-floral,.design-heritage .theme-scene .extra-floral{display:none}



.design-botanical .theme-scene .upper-floral,.design-botanical .theme-scene .extra-floral{display:none}


.design-ivory .theme-scene .upper-floral,.design-ivory .theme-scene .extra-floral{display:none}


/* Rosalia keeps only butterflies and falling petals as moving decoration. */
.design-rosalia .premium-separated-art,.design-rosalia .upper-floral,.design-rosalia .extra-floral,.design-rosalia .painted-floral,.design-rosalia .rose-vine,.design-rosalia .grand-bouquet,.design-rosalia .garden-sprig,.design-rosalia .bird-flight,.design-rosalia .garden-glow,.design-rosalia .rose-haze{display:none}
.design-rosalia .theme-scene .grand-scenery,.design-rosalia .theme-scene .premium-still-backdrop{animation:none!important}

.design-rosalia .theme-scene .motion-garden,.design-rosalia .theme-scene .rose-petal{display:none}


.design-aurelia .upper-floral,.design-aurelia .extra-floral,.design-aurelia .grand-bouquet,.design-aurelia .garden-sprig,.design-aurelia .bird-flight,.design-aurelia .champagne-ribbon{display:none}
.design-aurelia .theme-scene .motion-garden{display:none}
/* Center the Ivory letter panel with balanced space above and below. */
.design-ivory .overture-ivory{padding-block:32px;align-content:center;min-height:calc(100svh - 48px)}

/* Javanese monograms: separate calligraphic letters instead of overlapping glyphs. */
.theme-heritage .cover .couple-monogram,.theme-heritage .invitation-overture .woven-monogram{display:flex;align-items:center;justify-content:center;gap:18px;width:180px;max-width:100%;height:100px;min-height:0;margin:0 auto 22px;padding:12px 20px;border:1px solid color-mix(in srgb,var(--color) 35%,transparent);border-radius:52% 52% 16px 16px;background:color-mix(in srgb,var(--paper) 70%,transparent);font:52px/1.25 'Great Vibes',cursive;box-sizing:border-box;position:relative}
.theme-heritage .cover .couple-monogram span,.theme-heritage .invitation-overture .woven-monogram span{position:static;inset:auto;transform:none;flex:0 0 auto;display:block}
.theme-heritage .cover .couple-monogram i,.theme-heritage .invitation-overture .woven-monogram i{display:block;font:italic 22px/1 'Cormorant Garamond',serif;flex:0 0 auto;margin:0}
@media(max-width:480px){.theme-heritage .cover .couple-monogram,.theme-heritage .invitation-overture .woven-monogram{width:160px;height:88px;font-size:46px;gap:18px}}

.theme-heritage .cover .couple-monogram,.theme-heritage .invitation-overture .woven-monogram{border:0;background:transparent;box-shadow:none}

/* Equal letter columns keep the ampersand on the exact center axis. */
.theme-heritage .cover .couple-monogram,.theme-heritage .invitation-overture .woven-monogram{display:grid;grid-template-columns:64px 24px 64px;gap:8px;width:168px;padding:0;justify-content:center;text-align:center;margin-inline:auto}
.theme-heritage .cover .couple-monogram span,.theme-heritage .invitation-overture .woven-monogram span{width:64px;text-align:center}
.theme-heritage .cover .couple-monogram i,.theme-heritage .invitation-overture .woven-monogram i{width:24px;text-align:center}
@media(max-width:480px){.theme-heritage .cover .couple-monogram,.theme-heritage .invitation-overture .woven-monogram{width:168px;gap:8px}}

.theme-heritage .cover .couple-monogram,.theme-heritage .invitation-overture .woven-monogram{grid-template-columns:56px 20px 56px;gap:2px;width:136px}
.theme-heritage .cover .couple-monogram span,.theme-heritage .invitation-overture .woven-monogram span{width:56px}
.theme-heritage .cover .couple-monogram i,.theme-heritage .invitation-overture .woven-monogram i{width:20px}

.design-heritage .overture-heritage{min-height:calc(100svh - 58px);padding:32px 24px;display:grid;align-content:center;justify-items:center;box-sizing:border-box}
.design-heritage .overture-heritage .overture-copy{margin-block:0;padding-block:28px;align-self:center}

/* Clean Premium opening shapes without decorative outline lines. */
.tier-premium .cover .cover-content,.tier-premium .cover .cover-content:before{border:0;outline:0;box-shadow:none}
.tier-premium .cover .portrait-frame,.tier-premium .cover .portrait-frame:after{border:0;outline:0}

/* Heritage opening fills the visible viewport, including mobile browser chrome changes. */
.design-heritage .overture-heritage{min-height:100dvh}
.design-heritage:has(.demo-bar) .overture-heritage{min-height:100dvh}

/* Portrait couple profiles keep a compact rhythm on phones. */
@media(max-width:600px){
 .design-portrait .opening .couple-profiles{gap:10px}
 .design-portrait .opening .couple-profiles article{padding-block:14px;margin-block:0}
 .design-portrait .opening .couple-profiles .profile-groom{padding-top:10px}
 .design-portrait .opening .couple-profiles .profile-amp{margin:4px auto;font-size:34px;line-height:1.2}
}

/* Keep Portrait gallery rows aligned. */
.design-portrait .inv-gallery{align-items:start}
.design-portrait .inv-gallery img:nth-child(even){margin-top:0}

/* Center the Portrait opening frame within the viewport. */
.design-portrait .cover{align-items:center}
.design-portrait .cover .cover-content{margin:24px auto}

/* Balanced covers on phones and tablets. */
.design-botanical .cover{align-items:center}
.design-botanical .cover .cover-content{margin:24px auto}
@media(min-width:601px) and (max-width:1199px){
 .cover{height:100dvh;min-height:100dvh;max-height:none}
 body:has(.demo-bar) .cover{height:100dvh;min-height:100dvh}
}
/* Keep the opening initials centered in the same column as the scene. */
.entrance-transition{width:min(100%,640px);left:50%;right:auto;translate:-50% 0}
.entrance-transition>i{left:50%;right:auto;translate:none}
@media(min-width:1200px){
 .entrance-transition{width:520px;left:auto;right:0;translate:none}
 .entrance-transition .cinematic-stage{inset:0;width:100%}
 .entrance-transition>i{left:50%;right:auto;translate:none}
}

/* Size every opening frame from its contents with balanced inner spacing. */
body.tier-standard .cover,body.tier-premium .cover{align-items:center;height:auto;min-height:100dvh;max-height:none}
body.tier-standard:has(.demo-bar) .cover,body.tier-premium:has(.demo-bar) .cover{min-height:100dvh}
body.tier-standard .cover .cover-content{height:auto;min-height:0;margin:24px auto;padding:32px 18px}
body.tier-premium .cover .cover-content{height:auto;min-height:0;margin:24px auto;padding:24px 16px}
@media(max-height:740px){
 body.tier-standard .cover .cover-content{margin:18px auto;padding-block:24px}
 body.tier-premium .cover .cover-content{margin:18px auto;padding-block:18px}
}

/* The first chapter must fill the viewport after opening every invitation. */
body.tier-standard .invitation-overture,body.tier-premium .invitation-overture{min-height:100dvh}

body.tier-standard .invitation-overture,body.tier-premium .invitation-overture{display:grid;place-items:center;align-content:center;padding-block:32px}
body.tier-standard .invitation-overture .overture-copy,body.tier-premium .invitation-overture .overture-copy{margin-block:0;align-self:center;justify-self:center}

/* Optical centering: leave slightly more room above each opening panel. */
body.tier-standard .cover .cover-content,body.tier-premium .cover .cover-content{position:relative;top:40px}
body.tier-standard .invitation-overture .overture-copy,body.tier-premium .invitation-overture .overture-copy{position:relative;top:40px}
@media(max-height:740px){body.tier-standard .cover .cover-content,body.tier-premium .cover .cover-content,body.tier-standard .invitation-overture .overture-copy,body.tier-premium .invitation-overture .overture-copy{top:24px}}
