/* Invitation viewport, page, panel, gallery, and ornament layout. */


.floral-burgundy-border {
    position: absolute;
    left: 50%;
    width: min(100vw, 600px);
    height: clamp(112px, 22vh, 190px);
    opacity: 0;
    z-index: 5;
    background-repeat: no-repeat;
    background-size: 100% auto;
    pointer-events: none;
    filter: drop-shadow(0 10px 16px rgba(36, 8, 13, .26));
    will-change: transform, opacity;
}


.floral-burgundy-border.top {
    top: 0;
    background-image: url('../img/floral-burgundy-top.png');
    background-position: top center;
    transform: translate3d(-50%, -22px, 0) scale(1.02);
}


.floral-burgundy-border.bottom {
    bottom: 0;
    height: clamp(118px, 23vh, 205px);
    background-image: url('../img/floral-burgundy-bottom.png');
    background-position: bottom center;
    transform: translate3d(-50%, 24px, 0) scale(1.02);
}


body.is-paged .floral-burgundy-border.bottom {
    bottom: 74px;
}


body.theme-royal-gold #theme-ornaments.ornaments-enter .floral-burgundy-border.top {
    animation: floralBurgundyTopIn .9s cubic-bezier(.22, 1, .36, 1) both;
}


body.theme-royal-gold #theme-ornaments.ornaments-enter .floral-burgundy-border.bottom {
    animation: floralBurgundyBottomIn .9s .08s cubic-bezier(.22, 1, .36, 1) both;
}


body.theme-royal-gold #theme-ornaments.ornaments-enter .floral-burgundy-border {
    animation-composition: replace;
}


/* Full-screen paged scrolling, inspired by invitation slide previews */
body.is-paged .sticky-top.vh-100.d-none.d-sm-block {
    display: none !important;
}

body.is-paged main > .svg-wrapper {
    display: none !important;
}

body.is-paged main > section::-webkit-scrollbar {
    display: none;
}


/* Theme-specific moving background layers */
.gallery-thumbnails {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
}


.gallery-thumbnails > .col-6 {
    flex: 0 0 25% !important;
    max-width: 25% !important;
    scroll-snap-align: start;
}


.gallery-thumbnail-button {
    border-radius: .75rem;
}


.gallery-thumbnail-button:focus-visible {
    outline: 3px solid var(--theme);
    outline-offset: 2px;
}


#theme-ornaments::before,
#theme-ornaments::after {
    content: '';
    position: absolute;
    inset: -18%;
    z-index: 0;
    pointer-events: none;
    background-repeat: repeat;
    will-change: transform, opacity, background-position;
}


#theme-ornaments > * {
    z-index: 1;
}


/* Signature ornaments: one distinct visual motif per theme. */
.theme-signature {
    --signature-opacity: .28;
    position: absolute;
    top: clamp(4rem, 9vh, 6.75rem);
    left: 50%;
    width: clamp(96px, 17vw, 154px);
    height: clamp(96px, 17vw, 154px);
    opacity: 0;
    color: var(--theme-color, #7b6044);
    transform: translate3d(-50%, -22px, 0) scale(.9);
    transform-origin: center;
    pointer-events: none;
    filter: drop-shadow(0 14px 22px rgba(31, 21, 8, .18));
    will-change: transform, opacity, filter;
}


.theme-signature::before,
.theme-signature::after,
.theme-signature span,
.theme-signature span::before,
.theme-signature span::after {
    content: "";
    position: absolute;
    pointer-events: none;
}


.theme-signature span {
    inset: 0;
    transform-origin: center;
}


#theme-ornaments.ornaments-enter .theme-signature {
    animation: themeSignatureIn .9s .1s cubic-bezier(.22, 1, .36, 1) both;
}


#theme-ornaments.ornaments-enter .theme-signature span {
    animation: themeSignatureFloat 6s 1s ease-in-out infinite alternate;
}


body.is-paged #theme-ornaments:not([data-active-section="0"]) .theme-signature {
    top: clamp(1rem, 3.8vh, 2.6rem);
}


.signature-modern-minimalist {
    --signature-opacity: .2;
    color: #111827;
}


.signature-modern-minimalist::before {
    inset: 13%;
    border: 1px solid currentColor;
    border-radius: 50%;
    opacity: .32;
}


.signature-modern-minimalist::after {
    top: 6%;
    left: 50%;
    width: 1px;
    height: 88%;
    background: linear-gradient(transparent, currentColor, transparent);
    opacity: .32;
    transform: rotate(38deg);
}


.signature-modern-minimalist span {
    inset: 30%;
    border: 1px solid rgba(17, 24, 39, .4);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(17, 24, 39, .28) 0 5%, transparent 6%);
}


.signature-islami-elegan {
    --signature-opacity: .34;
    color: #0f6b4a;
}


.signature-islami-elegan::before {
    left: 23%;
    right: 23%;
    top: 13%;
    bottom: 13%;
    border: 2px solid currentColor;
    border-bottom-width: 1px;
    border-radius: 50% 50% 9px 9px;
    opacity: .48;
}


.signature-islami-elegan::after {
    top: 0;
    left: 50%;
    width: 34px;
    height: 34px;
    background: currentColor;
    opacity: .46;
    transform: translateX(-50%) rotate(22.5deg);
    clip-path: polygon(50% 0, 60% 32%, 94% 25%, 68% 50%, 94% 75%, 60% 68%, 50% 100%, 40% 68%, 6% 75%, 32% 50%, 6% 25%, 40% 32%);
}


.signature-islami-elegan span {
    inset: 28%;
    border: 1px solid currentColor;
    opacity: .42;
    transform: rotate(45deg);
}


.signature-elegant-luxury {
    --signature-opacity: .3;
    color: #f7d98f;
}


.signature-elegant-luxury::before {
    inset: 21%;
    border: 1px solid currentColor;
    transform: rotate(45deg);
    background: radial-gradient(circle, rgba(247, 217, 143, .16), transparent 62%);
}


.signature-elegant-luxury::after {
    top: 0;
    left: 50%;
    width: 1px;
    height: 42%;
    background: linear-gradient(currentColor, transparent);
    opacity: .52;
}


.signature-elegant-luxury span::before {
    left: 34%;
    right: 34%;
    bottom: 15%;
    height: 22%;
    border: 1px solid currentColor;
    border-top: 0;
    border-radius: 0 0 999px 999px;
    opacity: .5;
}


.signature-elegant-luxury span::after {
    left: 45%;
    bottom: 8%;
    width: 10%;
    height: 10%;
    border-radius: 50%;
    background: currentColor;
    opacity: .55;
}


.signature-zedlabs-editorial {
    --signature-opacity: .3;
    width: clamp(126px, 21vw, 190px);
    height: clamp(76px, 12vw, 110px);
    color: #e2e8f0;
}


.signature-zedlabs-editorial::before,
.signature-zedlabs-editorial::after {
    top: 18%;
    width: 28%;
    height: 64%;
    border-top: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    opacity: .5;
}


.signature-zedlabs-editorial::before { left: 6%; border-left: 1px solid currentColor; }

.signature-zedlabs-editorial::after { right: 6%; border-right: 1px solid currentColor; }


.signature-zedlabs-editorial span {
    left: 22%;
    right: 22%;
    top: 50%;
    height: 1px;
    background: currentColor;
    opacity: .46;
}


.signature-full-photo {
    --signature-opacity: .24;
    color: #ffffff;
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .32));
}


.signature-full-photo::before {
    inset: 19%;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 50%;
}


.signature-full-photo::after {
    inset: 32%;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 50%;
}


.signature-full-photo span {
    inset: 20%;
    background:
        conic-gradient(from 22deg, transparent 0 9%, rgba(255, 255, 255, .45) 10% 17%, transparent 18% 25%, rgba(255, 255, 255, .35) 26% 33%, transparent 34% 42%, rgba(255, 255, 255, .42) 43% 50%, transparent 51% 60%, rgba(255, 255, 255, .36) 61% 68%, transparent 69% 100%);
    border-radius: 50%;
}


/* Keep motion smooth on phones, low-power devices, and data-saver connections. */
html.page-hidden *,
html.page-hidden *::before,
html.page-hidden *::after {
    animation-play-state: paused !important;
}


html.performance-lite #theme-ornaments::before,
html.performance-lite #theme-ornaments::after {
    animation: none !important;
    will-change: auto;
}


html.performance-lite #theme-ornaments > * {
    animation-iteration-count: 1 !important;
    will-change: auto;
}


html.performance-lite .slide-desktop {
    animation: none !important;
    opacity: 0;
    transform: none;
}


html.performance-lite .slide-desktop:first-child {
    opacity: .34;
}


html.performance-lite .scroll-animation {
    animation: scrollDotLite 1.8s ease-in-out infinite !important;
}


html.performance-lite .animate-love {
    animation: loveFloatLite 4.8s ease-in-out infinite !important;
}


html.performance-lite #button-open-invitation {
    animation: invitationButtonLite 3.6s ease-in-out infinite;
    will-change: transform;
}


html.performance-lite body *:not(.burgundy-guest-card) {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}


#welcome > .d-flex > .d-flex.flex-column > * {
    opacity: 0;
    animation: welcomeItemReveal 1s ease both;
}


#welcome > .d-flex > .d-flex.flex-column > :nth-child(1) { animation-delay: 60ms; }

#welcome > .d-flex > .d-flex.flex-column > :nth-child(2) { animation-delay: 140ms; }

#welcome > .d-flex > .d-flex.flex-column > :nth-child(3) { animation-delay: 220ms; }

#welcome > .d-flex > .d-flex.flex-column > :nth-child(4) { animation-delay: 300ms; }

#welcome > .d-flex > .d-flex.flex-column > :nth-child(5) { animation-delay: 380ms; }


#welcome > .d-flex > .d-flex.flex-column > #button-open-invitation {
    animation: welcomeItemReveal .95s .22s ease both, invitationButtonLite 5s 1.4s ease-in-out infinite;
}


html.performance-lite #welcome > .d-flex > .d-flex.flex-column > * {
    animation-duration: .82s;
}


html.performance-lite #welcome > .d-flex > .d-flex.flex-column > #button-open-invitation {
    animation: welcomeItemReveal .78s .22s ease both, invitationButtonLite 4.8s 1.2s ease-in-out infinite;
}


/* Universal page layering: background, ornaments, then invitation content. */
body.is-paged main > section > #theme-ornaments {
    z-index: 1 !important;
}


/* Lock each invitation page; only explicit inner panels may scroll. */
body.is-paged {
    height: 100vh;
    height: 100dvh;
    overflow: hidden !important;
    overscroll-behavior: none;
}


body.is-paged #root,
body.is-paged main,
body.is-paged main > section {
    max-height: 100vh;
    max-height: 100dvh;
    overflow: hidden !important;
    overscroll-behavior: none;
}


body.is-paged main > section .overflow-y-auto,
body.is-paged main > section .overflow-y-scroll,
body.is-paged main > section [data-inner-scroll] {
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}


body.is-paged main > section > [data-inner-scroll] {
    width: 100%;
    min-height: 0;
    max-height: 100%;
    flex: 0 1 auto;
    scrollbar-width: thin;
}

/* One viewport owns one invitation page. Only explicit inner panels scroll. */
body.is-paged main > section {
    isolation: isolate;
    padding-right: max(.5rem, var(--invitation-safe-right));
    padding-left: max(.5rem, var(--invitation-safe-left));
}

body.is-paged main > section > #theme-ornaments {
    pointer-events: none;
}

body.is-paged main > section > :not(#theme-ornaments) {
    min-width: 0;
}

body.is-paged main > section [data-inner-scroll],
body.is-paged main > section .overflow-y-auto,
body.is-paged main > section .overflow-y-scroll {
    min-height: 0;
    max-height: calc(100dvh - var(--invitation-nav-height) - var(--invitation-safe-top) - var(--invitation-safe-bottom) - 1rem);
    scrollbar-gutter: stable;
}

body.is-paged #home .home-scroll-hint {
    position: relative;
    bottom: .8rem;
    padding-bottom: 0 !important;
}

/* Shared selectors extracted from theme modules. */



html.performance-lite .petal,
html.performance-lite .leaf,
html.performance-lite .sparkle {
    display: none !important;
}



/* Keep every standard-theme cover balanced against the invitation pages. */
body:not(.theme-wayang-kencana) #welcome > .d-flex {
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden !important;
}



body:not(.theme-wayang-kencana) #welcome .d-flex.flex-column {
    box-sizing: border-box;
    width: min(100%, 30rem);
    min-height: 100vh;
    min-height: 100dvh;
    justify-content: center;
    align-items: center;
    padding: max(1.5rem, env(safe-area-inset-top)) 1rem max(1.5rem, env(safe-area-inset-bottom)) !important;
}



body:not(.theme-wayang-kencana) #welcome .welcome-eyebrow {
    margin: 0 0 clamp(.65rem, 2dvh, 1rem);
    font-size: clamp(1.8rem, 6vw, 2.35rem);
    line-height: 1;
}


/* Admin-adjustable cover title position. The viewport clamps keep text on-screen. */
#welcome .cover-positionable-text {
    position: relative;
    left: clamp(-20vw, var(--cover-text-offset-x, 0px), 20vw);
    top: clamp(-22dvh, var(--cover-text-offset-y, 0px), 22dvh);
    z-index: 2;
}

/* Admin-adjustable Salam copy position. Photos and theme ornaments stay fixed. */
#salam .salam-positionable-text {
    position: relative;
    left: clamp(-20vw, var(--salam-text-offset-x, 0px), 20vw);
    top: clamp(-22dvh, var(--salam-text-offset-y, 0px), 22dvh);
    z-index: 2;
}



body:not(.theme-wayang-kencana) #welcome .welcome-photo {
    width: clamp(6.75rem, 24dvh, 10.5rem) !important;
    height: clamp(6.75rem, 24dvh, 10.5rem) !important;
    margin-bottom: clamp(.65rem, 2dvh, 1rem);
}



body:not(.theme-wayang-kencana) #welcome .welcome-couple-name {
    max-width: 100%;
    margin: 0;
    font-size: clamp(2rem, 7.4vw, 2.7rem);
    line-height: 1.02;
    letter-spacing: 0;
    overflow-wrap: anywhere;
    text-wrap: balance;
}



body:not(.theme-wayang-kencana) #welcome .welcome-date {
    margin: clamp(.4rem, 1.35dvh, .7rem) 0 clamp(.55rem, 1.7dvh, .85rem);
    font-size: clamp(.76rem, 2.8vw, .92rem);
    line-height: 1.2;
    letter-spacing: 0;
}



body:not(.theme-wayang-kencana) #welcome .welcome-guest {
    max-width: 100%;
    font-size: clamp(.82rem, 3.1vw, .95rem);
    line-height: 1.32;
    overflow-wrap: anywhere;
}



body:not(.theme-wayang-kencana) #welcome .welcome-guest strong {
    font-size: clamp(1rem, 3.8vw, 1.18rem);
}



body:not(.theme-wayang-kencana) #welcome #button-open-invitation {
    min-height: 44px;
    max-width: 100%;
    padding: .55rem 1.15rem;
    white-space: normal;
}



body:not(.theme-wayang-kencana) #theme-ornaments.ornaments-enter {
    animation: themeOrnamentsSoftIn 1.8s ease both;
}



html.performance-lite body:not(.theme-wayang-kencana) #theme-ornaments.ornaments-enter {
    animation-duration: 1.35s;
}



body.is-paged main > section > .burgundy-opening-photo,
body.is-paged main > section > .burgundy-salam-photo,
body.is-paged main > section > .burgundy-salam-shade,
body.is-paged main > section > .bg-cover-home {
    z-index: 0 !important;
}



/* =========================================
   DISTINCT THEME IDENTITY PASS
   ========================================= */

body:not(.theme-full-photo) main > section {
    background-blend-mode: normal;
}



body:not(.theme-full-photo) .bg-theme-auto,
body:not(.theme-full-photo) .border.rounded-5.shadow,
body:not(.theme-full-photo) .border.rounded-pill.shadow {
    position: relative;
}

body.is-paged {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
    scroll-snap-type: none;
}

body.is-paged #root {
    position: fixed;
    inset: 0;
    z-index: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    opacity: 1;
    pointer-events: auto;
    justify-content: center;
}

body.is-paged #navbar-menu {
    position: fixed;
    left: 50%;
    right: auto;
    bottom: 0;
    width: 100%;
    max-width: 600px;
    z-index: 1040;
    transform: translateX(-50%);
    margin-left: auto;
    margin-right: auto;
    border-radius: 1rem 1rem 0 0;
}

body.is-paged .col-sm-7,
body.is-paged .col-md-6,
body.is-paged .col-lg-5,
body.is-paged .col-xl-4,
body.is-paged .col-xxl-3 {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    position: relative;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

body.is-paged main {
    width: min(100%, 600px);
    max-width: 600px;
    margin: 0 auto;
    height: 100vh;
    height: 100dvh;
    position: relative;
    overflow: visible;
    transform: translate3d(0, var(--invitation-offset, 0px), 0);
    transition: transform .78s cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
}

body.is-paged main > section {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    padding-top: 2rem !important;
    padding-bottom: 70px !important;
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
    box-sizing: border-box;
    overscroll-behavior: contain;
    overflow-x: hidden;
    overflow-y: auto;
    opacity: 1;
    transform: none;
    transition: none;
    scrollbar-width: none;
}

body.is-paged main > section > .container {
    width: 100%;
    max-width: min(100%, 560px);
}

body.is-paged #home > .bg-overlay-auto {
    min-height: 0;
}

body.is-paged .invitation-reveal-item {
    --item-reveal-x: 0px;
    --item-reveal-y: 28px;
    --item-reveal-scale: .985;
    opacity: 0;
    filter: none;
    transform: translate3d(var(--item-reveal-x), var(--item-reveal-y), 0) scale(var(--item-reveal-scale));
}

body.is-paged .invitation-reveal-item.reveal-from-top {
    --item-reveal-y: -26px;
    --item-reveal-scale: .99;
}

body.is-paged .invitation-reveal-item.reveal-zoom {
    --item-reveal-y: 0px;
    --item-reveal-scale: .95;
}

body.is-paged main > section.is-active-section .invitation-reveal-item {
    animation: invitationRevealIn .72s cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: var(--reveal-delay, 0ms);
}

body.is-paged main > section.is-leaving-section .invitation-reveal-item {
    opacity: 1;
    filter: none;
    transform: none;
}/* Mempelai page should fit one full-screen slide without inner scrolling */
body.is-paged #bride,
body.theme-full-photo.is-paged #bride {
    overflow: hidden !important;
}

body.is-paged #bride > .overflow-x-hidden {
    width: 100%;
    overflow: hidden !important;
}/* Gallery page should also be one full-screen slide without inner scrolling */
body.is-paged #gallery,
body.theme-full-photo.is-paged #gallery {
    overflow: hidden !important;
}

body.is-paged #gallery > .container {
    width: 100%;
    min-height: 0;
    max-height: 100%;
}

body.is-paged #gallery .border.rounded-5.shadow {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: calc(100vh - 96px);
    max-height: calc(100dvh - 96px);
    overflow: hidden !important;
}

body.is-paged #gallery h2 {
    flex: 0 0 auto;
}

body.is-paged #carousel-gallery {
    flex: 1 1 auto;
    min-height: 0;
    margin-top: .8rem !important;
}

body.is-paged #gallery .carousel-inner,
body.is-paged #gallery .carousel-item {
    height: 100%;
}

body.is-paged #gallery .carousel .gallery-photo {
    width: 100%;
    height: min(48vh, 430px);
    height: min(48dvh, 430px);
    aspect-ratio: auto;
    object-fit: cover;
}

body.is-paged #gallery .row.g-2.mt-3 {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    margin-top: .65rem !important;
}

body.is-paged #gallery .row.g-2.mt-3 > .col-6 {
    flex: 0 0 25%;
    max-width: 25%;
}

body.is-paged #gallery .row.g-2.mt-3 .gallery-photo {
    height: clamp(52px, 16vw, 82px);
    aspect-ratio: auto;
}/* Cross-theme responsive polish */
body.is-paged main,
body.theme-full-photo.is-paged main {
    width: min(100vw, 600px);
}

body.is-paged main img {
    max-width: 100%;
}

body.is-paged main .btn {
    max-width: 100%;
    white-space: normal;
}

body.is-paged main .border,
body.is-paged main .bg-theme-auto {
    min-width: 0;
}/* Each invitation section behaves as its own slide,
matching the reference flow. */
body.is-paged main,
body.theme-full-photo.is-paged main {
    overflow: hidden;
    transform: none;
    transition: none;
    will-change: auto;
}

body.is-paged main > section {
    position: absolute !important;
    inset: 0 !important;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
}

body.is-paged main > section.is-active-section {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
    animation: invitationPageIn .3s ease-out both;
}

body.is-paged main > section.is-leaving-section {
    visibility: visible;
    pointer-events: none;
    z-index: 1;
    animation: invitationPageOut .22s ease-in both;
}



html.performance-lite .theme-signature span,
html.performance-lite body.theme-full-photo .full-photo-bg-layer {
    animation: none !important;
}

html.performance-lite body.is-paged main {
    transition: none;
}

html.performance-lite body.is-paged .invitation-reveal-item {
    --item-reveal-y: 20px;
    --item-reveal-scale: .99;
    filter: none;
    transform: translate3d(var(--item-reveal-x), var(--item-reveal-y), 0) scale(var(--item-reveal-scale));
}

html.performance-lite body.is-paged .invitation-reveal-item.reveal-from-top {
    --item-reveal-y: -18px;
    --item-reveal-scale: .995;
}

html.performance-lite body.is-paged .invitation-reveal-item.reveal-zoom {
    --item-reveal-y: 0px;
    --item-reveal-scale: .965;
}

html.performance-lite body.is-paged main > section.is-active-section .invitation-reveal-item {
    animation: invitationRevealLite .62s cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: var(--reveal-delay-lite, 40ms);
}