html {
    scroll-behavior: smooth;
    scrollbar-width: none;
}

body {
    width: 100%;
    overflow-x: hidden;
    font-family: "Josefin Sans", sans-serif;
    background: #111;
}

.font-esthetic {
    font-family: "Sacramento", cursive;
}

.font-arabic {
    font-family: "Noto Naskh Arabic", serif;
}

.bg-light-dark {
    background-color: var(--bs-light);
}

.bg-white-black {
    background-color: var(--bs-white);
}

.bg-theme-auto {
    background-color: var(--bs-gray-100);
}

.bg-overlay-auto {
    background-color: rgba(255, 255, 255, .55);
    backdrop-filter: blur(.35rem);
}

.text-theme-auto {
    color: var(--bs-dark);
}

.btn-outline-auto {
    --bs-btn-color: var(--bs-dark);
    --bs-btn-border-color: var(--bs-dark);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--bs-dark);
    --bs-btn-hover-border-color: var(--bs-dark);
    --bs-btn-focus-shadow-rgb: var(--bs-dark-rgb);
}

.btn-primary {
    --bs-btn-bg: var(--theme);
    --bs-btn-border-color: var(--theme);
    --bs-btn-hover-bg: #111;
    --bs-btn-hover-border-color: #111;
}

.loading-page {
    position: fixed;
    inset: 0;
    z-index: 1056;
    width: 100%;
    height: 100%;
}

.img-center-crop {
    width: 13rem;
    height: 13rem;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    aspect-ratio: 1 / 1;
}

.gallery-photo,
.gallery-placeholder {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.gallery-placeholder {
    display: grid;
    place-items: center;
    color: var(--bs-secondary-color);
    border: 1px dashed var(--bs-border-color);
    background: var(--bs-gray-100);
}

.bg-cover-home {
    width: 100%;
    height: 100%;
    object-fit: cover;
    mask-image: linear-gradient(.5turn, transparent, black 40%, black 60%, transparent);
}

.slide-desktop {
    animation: desktopFade 18s linear infinite;
}

.slide-desktop:nth-child(2) {
    animation-delay: 6s;
}

.slide-desktop:nth-child(3) {
    animation-delay: 12s;
}

@keyframes desktopFade {
    0%, 28% {
        opacity: .34;
        transform: scale(1);
    }
    33%, 100% {
        opacity: 0;
        transform: scale(1.05);
    }
}

.color-theme-svg {
    color: rgb(255, 255, 255);
    background-color: var(--bs-light);
}

.svg-wrapper {
    overflow: hidden;
    transform: translateZ(0);
}

.no-gap-bottom {
    margin-bottom: -.75rem;
}

.closing-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    --closing-accent: var(--theme);
    --closing-accent: color-mix(in srgb, var(--theme), var(--bs-dark) 52%);
    --closing-ink: var(--bs-dark);
    --closing-soft: rgba(0, 0, 0, .08);
}

.closing-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .075;
    background-image:
        linear-gradient(45deg, currentColor 1px, transparent 1px),
        linear-gradient(-45deg, currentColor 1px, transparent 1px);
    background-size: 30px 30px;
    background-position: center;
}

.closing-family-panel {
    position: relative;
    width: min(100%, 34rem);
    margin: 0 auto;
    padding: clamp(1rem, 3.6vw, 1.45rem) .35rem .7rem;
}

.closing-family-panel::before,
.closing-family-panel::after {
    content: "";
    display: block;
    width: min(8rem, 34vw);
    height: 1px;
    margin: 0 auto 1rem;
    background: linear-gradient(90deg, transparent, currentColor, transparent);
    opacity: .28;
}

.closing-family-panel::after {
    margin: 1rem auto 0;
}

.closing-honor,
.closing-section > .container > p {
    max-width: 35rem;
    margin: 0 auto;
    font-size: clamp(.82rem, 3.2vw, .96rem) !important;
    line-height: 1.62;
}

.closing-honor {
    color: var(--closing-ink);
    opacity: .82;
}

.closing-respect-title {
    margin: .9rem auto .35rem;
    color: var(--closing-accent);
    font-size: clamp(1.65rem, 8.2vw, 2.35rem);
    line-height: 1.2;
    font-weight: 500;
    text-wrap: balance;
}

.closing-happy {
    margin: 0;
    color: var(--closing-ink);
    font-size: clamp(.8rem, 2.9vw, .92rem);
    font-weight: 600;
    letter-spacing: .02em;
    opacity: .8;
}

.closing-couple-name {
    margin: .2rem 0 .85rem;
    color: var(--closing-accent);
    font-size: clamp(1.8rem, 8.8vw, 2.65rem);
    line-height: 1;
}

.closing-family-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    align-items: start;
}

.closing-family-item {
    min-width: 0;
    color: var(--closing-ink);
    padding: .6rem .35rem .2rem;
    border-top: 1px solid var(--closing-soft);
}

.closing-family-item span {
    display: inline-block;
    color: var(--closing-accent);
    font-size: clamp(.62rem, 2.35vw, .72rem);
    line-height: 1.15;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.closing-family-item p {
    margin: .25rem auto 0;
    max-width: 13rem;
    font-size: clamp(.67rem, 2.55vw, .8rem);
    line-height: 1.32;
    opacity: .82;
    overflow-wrap: anywhere;
}

.closing-section > .container > p {
    padding-top: .55rem !important;
    padding-bottom: .55rem !important;
    color: var(--closing-ink);
    opacity: .82;
}

.closing-section > .container > .font-esthetic {
    margin: 0;
    color: var(--closing-accent);
    font-size: clamp(1.55rem, 7.2vw, 2.08rem) !important;
    line-height: 1.2;
    text-wrap: balance;
}

.closing-section > .container > .closing-wassalam {
    position: relative;
    z-index: 1;
    color: var(--closing-accent);
    text-shadow: none;
}

.closing-section > .container > .font-arabic {
    padding-top: .82rem !important;
    margin: 0;
    color: var(--closing-ink);
    font-size: clamp(1.55rem, 6.7vw, 2.08rem) !important;
    line-height: 1.35;
}

.closing-section > .container > hr {
    margin: 1rem 0 .85rem;
    border-color: currentColor;
    opacity: .55;
}

.closing-section > .container > small {
    display: block;
    padding-bottom: 1.1rem;
    font-size: clamp(.78rem, 2.9vw, .92rem);
}

body.theme-full-photo .closing-section::before {
    opacity: .08;
}

body.theme-full-photo .closing-honor,
body.theme-full-photo .closing-happy,
body.theme-full-photo .closing-couple-name,
body.theme-full-photo .closing-family-item,
body.theme-full-photo .closing-family-item span,
body.theme-full-photo .closing-respect-title {
    color: rgba(255, 255, 255, .88);
}

body.theme-full-photo .closing-family-item {
    border-top-color: rgba(255, 255, 255, .18);
}

body.theme-full-photo .closing-section > .container > .closing-wassalam {
    color: rgba(255, 255, 255, .92);
    text-shadow: 0 1px 4px rgba(0, 0, 0, .34);
}

@media (max-width: 360px) {
    .closing-family-grid {
        gap: .55rem;
    }

    .closing-family-panel {
        padding-top: .9rem;
    }
}

svg {
    display: block;
    line-height: 0;
    shape-rendering: geometricPrecision;
}

.navbar {
    background-color: rgba(248, 249, 250, .82);
    backdrop-filter: blur(.5rem);
}

.navbar .nav-link {
    color: rgba(0, 0, 0, .56);
    position: relative;
    transition: color 0.3s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: var(--theme);
}

.navbar .nav-link::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 60%;
    height: 3px;
    background: var(--theme);
    border-radius: 0 0 4px 4px;
    transition: transform 0.3s ease;
}

.navbar .nav-link.active::before {
    transform: translateX(-50%) scaleX(1);
}

.cursor-pointer {
    cursor: pointer;
}

.mouse-animation {
    height: 2rem;
}

.scroll-animation {
    width: .4rem;
    height: .4rem;
    animation: scrollDot 1.2s ease-in-out infinite;
}

@keyframes scrollDot {
    0% {
        transform: translateY(0);
        opacity: .4;
    }
    70% {
        transform: translateY(.8rem);
        opacity: 1;
    }
    100% {
        transform: translateY(0);
        opacity: .4;
    }
}

.animate-love {
    animation: loveFloat 3s ease-in-out infinite;
}

@keyframes loveFloat {
    0%, 100% {
        transform: translateY(0) rotate(-6deg);
    }
    50% {
        transform: translateY(-12px) rotate(6deg);
    }
}

.width-loading {
    width: 25%;
}

.with-scrollbar {
    scrollbar-width: auto;
}

.audio-float {
    bottom: 10vh;
    right: 2vh;
    z-index: 1030;
}

.btn-transparent {
    background-color: rgba(248, 249, 250, .74);
    backdrop-filter: blur(.5rem);
}

.theme-line {
    width: 4rem;
    height: .12rem;
    margin: .5rem auto 1rem;
    background: var(--theme);
    border-radius: 999px;
}

.progress-bar {
    background-color: var(--theme);
}

@media screen and (max-width: 992px) {
    .width-loading {
        width: 50%;
    }
}

@media screen and (max-width: 576px) {
    .width-loading {
        width: 75%;
    }
}

/* Mobile-friendly foundation shared by every theme */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    max-width: 100%;
}

img,
video,
canvas,
svg {
    max-width: 100%;
}

main,
section,
.container,
.row,
[class*="col-"] {
    min-width: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
small,
a,
button,
label,
strong {
    overflow-wrap: break-word;
}

.btn,
.form-control,
.form-select,
textarea {
    max-width: 100%;
}

.btn {
    white-space: normal;
}

@media (max-width: 575.98px) {
    body {
        min-width: 0;
        min-height: 100dvh;
    }

    #root {
        width: 100%;
        max-width: 100%;
        margin: 0 !important;
    }

    #root > .col-sm-7,
    #root > .col-md-6,
    #root > .col-lg-5,
    #root > .col-xl-4,
    #root > .col-xxl-3 {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    main {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    main > section {
        width: 100%;
        overflow-x: hidden;
    }

    main section .container {
        width: 100%;
        max-width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    #home > .bg-overlay-auto {
        width: 100%;
        min-height: 100vh;
        min-height: 100dvh;
        padding-left: 1rem;
        padding-right: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .loading-page > .d-flex {
        padding: 1rem;
    }

    .loading-page .d-flex.flex-column {
        width: min(100%, 24rem);
        margin: 0 auto;
    }

    .img-center-crop {
        width: clamp(7.5rem, 42vw, 10.5rem);
        height: clamp(7.5rem, 42vw, 10.5rem);
    }

    #home .img-center-crop,
    .loading-page .img-center-crop {
        width: clamp(8.25rem, 48vw, 11.25rem);
        height: clamp(8.25rem, 48vw, 11.25rem);
    }

    main .font-esthetic {
        line-height: 1.05;
    }

    main p,
    main small,
    main label,
    main .btn,
    main .form-control,
    main .form-select {
        font-size: clamp(.82rem, 3.6vw, .95rem);
    }

    main .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .35rem;
        line-height: 1.2;
    }

    main .btn i {
        flex: 0 0 auto;
    }

    .bg-theme-auto,
    .bg-overlay-auto,
    main .border.rounded-5.shadow,
    main .border.rounded-pill.shadow {
        min-width: 0;
    }

    main .rounded-5 {
        border-radius: 1rem !important;
    }

    main .rounded-pill[data-countdown-target],
    main [data-countdown-target] {
        border-radius: 1rem !important;
        padding-left: .75rem !important;
        padding-right: .75rem !important;
    }

    [data-countdown-target] .row {
        row-gap: .25rem;
    }

    [data-countdown-target] .col-3 {
        padding: .25rem !important;
    }

    [data-countdown-target] p,
    [data-countdown-target] small {
        display: block !important;
        margin: 0 !important;
        line-height: 1.1;
    }

    [data-countdown-target] p {
        font-size: clamp(.95rem, 4.6vw, 1.1rem) !important;
    }

    [data-countdown-target] small {
        font-size: clamp(.58rem, 2.9vw, .68rem);
    }

    #gallery .carousel .gallery-photo {
        aspect-ratio: 4 / 5;
        max-height: 52dvh;
    }

    #gallery .row.g-2.mt-3 {
        margin-left: 0;
        margin-right: 0;
    }

    #gallery .row.g-2.mt-3 > .col-6 {
        min-width: 0;
    }

    .overflow-y-scroll.with-scrollbar {
        height: min(15rem, 48dvh) !important;
    }

    .bg-theme-auto .d-flex.justify-content-between.align-items-center,
    main .border.rounded-5.shadow .d-flex.justify-content-between.align-items-center {
        flex-wrap: wrap;
        gap: .5rem;
    }

    .bg-theme-auto .d-flex.justify-content-between.align-items-center > p,
    main .border.rounded-5.shadow .d-flex.justify-content-between.align-items-center > p {
        min-width: 0;
        flex: 1 1 10rem;
        overflow-wrap: anywhere;
    }

    .form-control,
    .form-select,
    textarea {
        font-size: 16px;
    }

    .navbar#navbar-menu {
        width: 100%;
        max-width: 100%;
        border-radius: 0 !important;
    }

    #navbar-menu .navbar-nav {
        width: 100%;
        min-width: 0;
    }

    #navbar-menu .nav-item {
        min-width: 0;
    }

    #navbar-menu .nav-link {
        min-height: 3.65rem;
        padding: .48rem .12rem .42rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .16rem;
        line-height: 1.05;
        text-align: center;
    }

    #navbar-menu .nav-link i {
        font-size: 1rem;
        line-height: 1;
    }

    #navbar-menu .nav-link span {
        width: 100%;
        max-width: 100%;
        font-size: clamp(.56rem, 2.65vw, .68rem) !important;
        line-height: 1.05;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #navbar-menu .nav-link::before {
        top: 0;
        width: 46%;
    }

    .audio-float {
        right: .75rem;
        bottom: 4.8rem;
    }

    body.is-paged .audio-float {
        bottom: 4.7rem;
    }

    #theme-ornaments {
        overflow: hidden;
    }

    body.is-paged #theme-ornaments {
        z-index: 1;
    }

    .ornament-jawa-rama-sinta {
        height: 155px;
        max-width: 100%;
    }

    .petal,
    .leaf {
        transform: scale(.82);
    }

    .lantern {
        font-size: 2.4rem;
    }

    .lantern.left {
        left: 7%;
    }

    .lantern.right {
        left: auto;
        right: 7%;
        font-size: 3rem;
    }

    .royal-frame {
        inset: 10px;
        padding-top: 28px;
        border-width: 2px;
    }

    .royal-crown {
        font-size: 2.7rem;
    }

    .minimalist-circle {
        width: 80vw;
        height: 80vw;
        left: -42vw;
    }

    .vintage-flourish {
        height: 90px;
    }
}

/* 1. Modern Minimalist (Default) */
/* No overrides needed, uses standard Bootstrap light/white variables */

/* 2. Adat Jawa */
.theme-adat-jawa {
    --bs-light: #f4ecd8;
    --bs-white: #fdfaf3;
    --bs-dark: #4b3621;
    --bs-gray-100: #e8dfc7;
    color: var(--bs-dark);
}
.theme-adat-jawa .bg-cover-home { filter: sepia(0.4); }

/* 3. Elegant Luxury */
.theme-elegant-luxury {
    --bs-light: #1c1c1e;
    --bs-white: #000000;
    --bs-dark: #f0e6d2;
    --bs-gray-100: #2c2c2e;
    --bs-body-bg: #000;
    color: var(--bs-dark);
}
.theme-elegant-luxury .bg-cover-home { filter: brightness(0.8) contrast(1.1); }
.theme-elegant-luxury .navbar .nav-link { color: rgba(255, 255, 255, .6); }

/* 4. Royal Gold */
.theme-royal-gold {
    --bs-light: #fffdf5;
    --bs-white: #ffffff;
    --bs-dark: #634b00;
    --bs-gray-100: #fff9e6;
    color: var(--bs-dark);
}

/* 5. Vintage Classic */
.theme-vintage-classic {
    --bs-light: #e6dfd1;
    --bs-white: #f5f0e6;
    --bs-dark: #3e3223;
    --bs-gray-100: #d6caba;
    color: var(--bs-dark);
    font-family: "Georgia", serif;
}
.theme-vintage-classic .bg-cover-home { filter: grayscale(0.5) sepia(0.5); }

/* 7. Dark Premium */
.theme-dark-premium {
    --bs-light: #1a1a1a;
    --bs-white: #0a0a0a;
    --bs-dark: #f5f5f5;
    --bs-gray-100: #222222;
    --bs-body-bg: #0a0a0a;
    color: var(--bs-dark);
}
.theme-dark-premium .navbar .nav-link { color: rgba(255, 255, 255, .6); }
.theme-dark-premium .bg-cover-home { filter: brightness(0.6); }

/* 8. Sakura Jepang */
.theme-sakura-jepang {
    --bs-light: #fff5f8;
    --bs-white: #ffffff;
    --bs-dark: #4a2f38;
    --bs-gray-100: #ffe8f0;
    color: var(--bs-dark);
}

/* 9. Islami Elegan */
.theme-islami-elegan {
    --bs-light: #f0f7f4;
    --bs-white: #ffffff;
    --bs-dark: #123524;
    --bs-gray-100: #e2efea;
    color: var(--bs-dark);
}

/* 10. Batik Nusantara */
.theme-batik-nusantara {
    --bs-light: #f0e8dc;
    --bs-white: #faf6ef;
    --bs-dark: #362204;
    --bs-gray-100: #e3d5c1;
    color: var(--bs-dark);
}

/* 11. Garden Party */
.theme-garden-party {
    --bs-light: #f4f9f4;
    --bs-white: #ffffff;
    --bs-dark: #1b4332;
    --bs-gray-100: #e8f3e8;
    color: var(--bs-dark);
}

/* 12. Ana Danu (Soft Pink & Navy) */
.theme-ana-danu {
    --bs-light: #ffeef2;
    --bs-white: #ffe8e8;
    --bs-dark: #203244;
    --bs-gray-100: #f5d6d6;
    color: var(--bs-dark);
}
.theme-ana-danu .font-esthetic {
    font-family: "Dancing Script", cursive;
}
.theme-ana-danu h1, .theme-ana-danu h2, .theme-ana-danu h3, .theme-ana-danu h4, .theme-ana-danu h5, .theme-ana-danu h6 {
    font-family: "Vidaloka", serif;
}

/* =========================================
   THEME ORNAMENTS & ANIMATIONS (ENHANCED)
   ========================================= */

#theme-ornaments {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1057; /* Di atas loading-page (1056) agar tampil di landing page */
    overflow: hidden;
}

/* 1. Adat Jawa: Wayang Rama & Sinta (Swaying Animation) */
.ornament-jawa-rama-sinta {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 600px;
    height: 250px;
    background: url('../img/wayang_rama_sinta.png') no-repeat bottom center;
    background-size: contain;
    transform-origin: bottom center;
    animation: swayWayangCenter 6s ease-in-out infinite alternate, fadeInWayang 2s ease-out forwards;
    opacity: 0;
    mix-blend-mode: multiply;
}
@keyframes swayWayangCenter { 
    0% { transform: translateX(-50%) rotate(-2deg); } 
    100% { transform: translateX(-50%) rotate(2deg); } 
}
@keyframes fadeInWayang { to { opacity: 0.08; } }

/* 2. Sakura Jepang: Vibrant Petals */
.petal {
    position: absolute;
    width: 18px;
    height: 18px;
    background: linear-gradient(135deg, rgba(255, 183, 197, 0.8), rgba(255, 105, 135, 0.6));
    border-radius: 15px 0 15px 0;
    top: -20px;
    box-shadow: 0 0 10px rgba(255, 183, 197, 0.5);
    animation: fallSakura linear infinite;
}
.petal.petal-odd { background: linear-gradient(135deg, rgba(255, 145, 164, 0.8), rgba(255, 99, 132, 0.6)); animation-duration: 6s; }
.petal.petal-even { animation-duration: 8s; }
.petal.petal-1 { left: 10%; animation-delay: 0s; }
.petal.petal-2 { left: 20%; animation-delay: 2s; }
.petal.petal-3 { left: 30%; animation-delay: 4s; }
.petal.petal-4 { left: 40%; animation-delay: 1s; }
.petal.petal-5 { left: 50%; animation-delay: 3s; }
.petal.petal-6 { left: 60%; animation-delay: 5s; }
.petal.petal-7 { left: 70%; animation-delay: 0.5s; }
.petal.petal-8 { left: 80%; animation-delay: 2.5s; }
.petal.petal-9 { left: 90%; animation-delay: 4.5s; }
.petal.petal-10 { left: 15%; animation-delay: 1.5s; }
.petal.petal-11 { left: 35%; animation-delay: 3.5s; }
.petal.petal-12 { left: 55%; animation-delay: 0.2s; }
.petal.petal-13 { left: 75%; animation-delay: 2.2s; }
.petal.petal-14 { left: 95%; animation-delay: 4.2s; }
.petal.petal-15 { left: 5%; animation-delay: 1.8s; }
@keyframes fallSakura {
    0% { transform: translateY(-20px) rotate(0deg) translateX(0); opacity: 0; }
    10% { opacity: 1; }
    50% { transform: translateY(50vh) rotate(180deg) translateX(80px); }
    90% { opacity: 1; }
    100% { transform: translateY(100vh) rotate(360deg) translateX(-80px); opacity: 0; }
}

/* 4. Islami Elegan: Swinging Lanterns & Moon */
.lantern {
    position: absolute;
    top: -30px;
    font-size: 4rem;
    color: rgba(18, 53, 36, 0.4);
    transform-origin: top center;
    animation: swingLantern 3.5s infinite ease-in-out alternate;
}
.lantern.left { left: 15%; animation-delay: 0s; }
.lantern.right { right: 15%; animation-delay: -1.5s; font-size: 5rem; }
.lantern::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 60vh;
    background: linear-gradient(to bottom, rgba(18, 53, 36, 0.3), transparent);
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
}
@keyframes swingLantern { 0% { transform: rotate(-15deg); } 100% { transform: rotate(15deg); } }

/* 5. Royal Gold: Glowing Crown */
.royal-frame {
    position: absolute;
    inset: 20px;
    border: 3px solid rgba(212, 175, 55, 0.3);
    border-radius: 15px;
    display: flex;
    justify-content: center;
    padding-top: 40px;
    box-shadow: inset 0 0 50px rgba(212, 175, 55, 0.1);
    animation: framePulse 4s infinite alternate;
}
.royal-crown {
    font-size: 4rem;
    color: rgba(212, 175, 55, 0.9);
    filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.8));
    animation: pulseCrown 3s infinite ease-in-out;
}
@keyframes framePulse { 0% { border-color: rgba(212, 175, 55, 0.2); } 100% { border-color: rgba(212, 175, 55, 0.5); } }
@keyframes pulseCrown { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.15); opacity: 1; filter: drop-shadow(0 0 25px rgba(212, 175, 55, 1)); } }

/* 6. Garden Party: Floating Leaves */
.leaf {
    position: absolute;
    font-size: 2rem;
    color: rgba(45, 106, 79, 0.5);
    top: -40px;
    animation: fallSakura linear infinite;
}
.leaf.leaf-odd { color: rgba(27, 67, 50, 0.6); animation-duration: 9s; font-size: 1.5rem; }
.leaf.leaf-even { animation-duration: 12s; }
.leaf.leaf-1 { left: 10%; animation-delay: 0s; }
.leaf.leaf-2 { left: 30%; animation-delay: 2s; }
.leaf.leaf-3 { left: 50%; animation-delay: 4s; }
.leaf.leaf-4 { left: 70%; animation-delay: 1s; }
.leaf.leaf-5 { left: 90%; animation-delay: 3s; }
.leaf.leaf-6 { left: 20%; animation-delay: 5s; }
.leaf.leaf-7 { left: 40%; animation-delay: 0.5s; }
.leaf.leaf-8 { left: 60%; animation-delay: 2.5s; }
.leaf.leaf-9 { left: 80%; animation-delay: 4.5s; }
.leaf.leaf-10 { left: 15%; animation-delay: 1.5s; }
.leaf.leaf-11 { left: 85%; animation-delay: 3.5s; }
.leaf.leaf-12 { left: 55%; animation-delay: 0.2s; }

/* 7. Elegant Luxury: Twinkling Diamonds */
.sparkle {
    position: absolute;
    font-size: 1rem;
    color: rgba(255, 215, 0, 0.8);
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 1));
    animation: twinkle 4s infinite ease-in-out;
}
.sparkle.sparkle-odd { font-size: 0.6rem; animation-duration: 2s; }
.sparkle.sparkle-1 { top: 10%; left: 20%; animation-delay: 0s; }
.sparkle.sparkle-2 { top: 30%; left: 80%; animation-delay: 0.5s; }
.sparkle.sparkle-3 { top: 60%; left: 15%; animation-delay: 1s; }
.sparkle.sparkle-4 { top: 80%; left: 70%; animation-delay: 1.5s; }
.sparkle.sparkle-5 { top: 40%; left: 40%; animation-delay: 2s; }
.sparkle.sparkle-6 { top: 15%; left: 60%; animation-delay: 0.2s; }
.sparkle.sparkle-7 { top: 85%; left: 25%; animation-delay: 0.7s; }
.sparkle.sparkle-8 { top: 50%; left: 85%; animation-delay: 1.2s; }
.sparkle.sparkle-9 { top: 70%; left: 10%; animation-delay: 1.7s; }
.sparkle.sparkle-10 { top: 25%; left: 90%; animation-delay: 2.2s; }
.sparkle.sparkle-11 { top: 5%; left: 40%; animation-delay: 0.3s; }
.sparkle.sparkle-12 { top: 95%; left: 50%; animation-delay: 0.8s; }
.sparkle.sparkle-13 { top: 45%; left: 5%; animation-delay: 1.3s; }
.sparkle.sparkle-14 { top: 65%; left: 95%; animation-delay: 1.8s; }
.sparkle.sparkle-15 { top: 35%; left: 25%; animation-delay: 2.3s; }
.sparkle.sparkle-16 { top: 55%; left: 65%; animation-delay: 0.4s; }
.sparkle.sparkle-17 { top: 75%; left: 45%; animation-delay: 0.9s; }
.sparkle.sparkle-18 { top: 20%; left: 10%; animation-delay: 1.4s; }
.sparkle.sparkle-19 { top: 90%; left: 80%; animation-delay: 1.9s; }
.sparkle.sparkle-20 { top: 10%; left: 95%; animation-delay: 2.4s; }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); } 50% { opacity: 1; transform: scale(1.5) rotate(180deg); } }

/* 8. Dark Premium: Neon Grid & Shooting Stars */
.neon-grid {
    position: absolute;
    inset: 0;
    background: 
        linear-gradient(rgba(0, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    transform: perspective(600px) rotateX(60deg) translateY(-100px) translateZ(-200px);
    animation: moveGrid 10s linear infinite;
}
@keyframes moveGrid { 0% { background-position: 0 0; } 100% { background-position: 0 500px; } }
.shooting-star {
    position: absolute;
    width: 3px;
    height: 80px;
    background: linear-gradient(to bottom, rgba(255,255,255,1), transparent);
    top: -100px;
    transform: rotate(45deg);
    animation: shoot 3s infinite;
    filter: drop-shadow(0 0 10px white);
}
.shooting-star.shooting-star-1 { left: 20%; animation-delay: 1s; }
.shooting-star.shooting-star-2 { left: 50%; animation-delay: 2.5s; }
.shooting-star.shooting-star-3 { left: 80%; animation-delay: 0.5s; }
.shooting-star.shooting-star-4 { left: 90%; animation-delay: 3s; }
.shooting-star.shooting-star-5 { left: 10%; animation-delay: 1.5s; }
@keyframes shoot { 0% { transform: rotate(45deg) translateY(-100px); opacity: 1; } 100% { transform: rotate(45deg) translateY(2500px); opacity: 0; } }

/* 9. Vintage Classic: Flourish Dividers */
.vintage-flourish {
    position: absolute;
    width: 100%;
    height: 150px;
    background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg"><path d="M20 50 Q 100 0, 200 50 T 380 50" fill="none" stroke="rgba(62, 50, 35, 0.3)" stroke-width="3"/><circle cx="200" cy="50" r="10" fill="none" stroke="rgba(62, 50, 35, 0.3)" stroke-width="2"/></svg>') no-repeat center;
    background-size: 90%;
    animation: expandFlourish 4s ease-out forwards;
}
.vintage-flourish.top { top: 30px; }
.vintage-flourish.bottom { bottom: 30px; transform: rotate(180deg); }
@keyframes expandFlourish { 0% { transform: scaleX(0); opacity: 0; } 100% { transform: scaleX(1); opacity: 1; } }

/* 10. Batik Nusantara: Scrolling Pattern */
.batik-pattern {
    position: absolute;
    inset: -50%;
    background: url('data:image/svg+xml;utf8,<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"><circle cx="30" cy="30" r="15" fill="none" stroke="rgba(54, 34, 4, 0.08)" stroke-width="3"/><path d="M30 0 L60 30 L30 60 L0 30 Z" fill="none" stroke="rgba(54, 34, 4, 0.08)" stroke-width="2"/></svg>') repeat;
    animation: panBatik 30s linear infinite;
}
@keyframes panBatik { 0% { transform: translate(0, 0); } 100% { transform: translate(60px, 60px); } }

/* 11. Modern Minimalist: Rotating Shapes */
.minimalist-circle {
    position: absolute;
    width: 60vh;
    height: 60vh;
    border: 2px solid rgba(0, 0, 0, 0.04);
    border-radius: 50%;
    top: 20%;
    left: -30vh;
    animation: rotateCircle 25s linear infinite;
}
.minimalist-circle::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 50%;
    top: 0;
    left: 50%;
}
.minimalist-line {
    position: absolute;
    width: 2px;
    height: 100vh;
    background: rgba(0, 0, 0, 0.04);
    right: 20%;
    top: 0;
}
@keyframes rotateCircle { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* 12. Ana Danu: Original Template Graphics */
.theme-ana-danu.bg-theme-ana-danu-paper {
    background: url('../img/ana-danu-paper.jpg') repeat center;
    background-size: cover;
}

/* Terapkan gambar latar belakang ke halaman depan dan loading-page */
.theme-ana-danu .loading-page,
.theme-ana-danu #home {
    background: url('../img/ana-danu-bg.jpg') no-repeat bottom center !important;
    background-size: cover !important;
}

.theme-ana-danu .bg-light-dark {
    background: url('../img/ana-danu-paper.jpg') repeat center !important;
    background-size: cover !important;
}

/* Pastikan ornamen tidak menghalangi jika masih terender di DOM */
.ana-danu-floral {
    display: none;
}

/* =========================================
   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;
}

.theme-modern-minimalist .bg-light-dark,
.theme-modern-minimalist .bg-white-black {
    background-image:
        linear-gradient(90deg, rgba(15, 23, 42, .035) 1px, transparent 1px),
        linear-gradient(rgba(15, 23, 42, .03) 1px, transparent 1px);
    background-size: 44px 44px;
}

.theme-modern-minimalist .bg-theme-auto,
.theme-modern-minimalist .border.rounded-5.shadow,
.theme-modern-minimalist .border.rounded-pill.shadow {
    border-color: rgba(15, 23, 42, .12) !important;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .08) !important;
}

.theme-modern-minimalist .font-esthetic {
    color: color-mix(in srgb, var(--theme), #111827 36%);
}

.minimalist-dotfield {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(15, 23, 42, .08) 1px, transparent 1px);
    background-size: 26px 26px;
    mask-image: linear-gradient(90deg, #000, transparent 72%);
    opacity: .5;
    animation: motifDrift 24s linear infinite;
}

.theme-adat-jawa .bg-light-dark,
.theme-adat-jawa .bg-white-black {
    background-image:
        radial-gradient(circle at 50% 0, rgba(122, 69, 24, .12), transparent 28rem),
        repeating-linear-gradient(45deg, rgba(99, 54, 10, .055) 0 2px, transparent 2px 18px),
        repeating-linear-gradient(-45deg, rgba(99, 54, 10, .045) 0 2px, transparent 2px 18px);
}

.theme-adat-jawa .bg-theme-auto,
.theme-adat-jawa .border.rounded-5.shadow,
.theme-adat-jawa .border.rounded-pill.shadow {
    background:
        linear-gradient(180deg, rgba(253, 250, 243, .92), rgba(232, 223, 199, .88)) !important;
    border-color: rgba(93, 56, 20, .3) !important;
    box-shadow: 0 16px 38px rgba(75, 54, 33, .13), inset 0 0 0 1px rgba(255, 255, 255, .55) !important;
}

.theme-adat-jawa .font-esthetic {
    color: #7b461d;
    text-shadow: 0 1px 0 rgba(255, 250, 235, .9);
}

.theme-adat-jawa .img-center-crop {
    border-color: #8a5b2b !important;
    box-shadow: 0 0 0 7px rgba(168, 126, 60, .18), 0 18px 42px rgba(75, 54, 33, .22) !important;
}

.jawa-pattern {
    position: absolute;
    left: 0;
    width: 100%;
    height: 74px;
    opacity: .18;
    background:
        repeating-linear-gradient(90deg, transparent 0 24px, rgba(83, 44, 8, .36) 24px 26px),
        radial-gradient(circle at 24px 36px, transparent 0 12px, rgba(83, 44, 8, .26) 13px 15px, transparent 16px);
    background-size: 48px 74px;
    animation: motifSlideX 36s linear infinite;
}

.jawa-pattern.top { top: 0; }
.jawa-pattern.bottom { bottom: 0; transform: rotate(180deg); }

.jawa-gunungan {
    position: absolute;
    bottom: 5rem;
    width: clamp(116px, 18vw, 154px);
    height: clamp(160px, 25vw, 214px);
    opacity: 0;
    filter: drop-shadow(0 14px 18px rgba(75, 42, 15, .24));
    will-change: transform, opacity;
}

.jawa-gunungan::before,
.jawa-gunungan::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.jawa-gunungan::before {
    inset: 0 9% 12%;
    clip-path: polygon(50% 0, 82% 25%, 94% 66%, 68% 100%, 32% 100%, 6% 66%, 18% 25%);
    background:
        radial-gradient(ellipse at 50% 38%, rgba(255, 229, 151, .38) 0 7%, transparent 8%),
        radial-gradient(ellipse at 50% 44%, transparent 0 25%, rgba(245, 188, 84, .42) 26% 27%, transparent 28%),
        radial-gradient(ellipse at 50% 58%, transparent 0 35%, rgba(245, 188, 84, .32) 36% 37%, transparent 38%),
        repeating-radial-gradient(ellipse at 50% 42%, rgba(255, 220, 130, .34) 0 2px, transparent 3px 13px),
        linear-gradient(145deg, rgba(74, 32, 9, .88), rgba(139, 70, 22, .72) 50%, rgba(205, 129, 42, .52));
    box-shadow: inset 0 0 0 3px rgba(231, 164, 61, .55), inset 0 0 22px rgba(47, 18, 4, .28);
}

.jawa-gunungan::after {
    left: 9%;
    right: 9%;
    bottom: 0;
    height: 28%;
    background:
        radial-gradient(ellipse at 12% 74%, rgba(255, 248, 218, .82) 0 14%, transparent 15%),
        radial-gradient(ellipse at 25% 60%, rgba(255, 248, 218, .82) 0 15%, transparent 16%),
        radial-gradient(ellipse at 38% 76%, rgba(255, 248, 218, .76) 0 12%, transparent 13%),
        radial-gradient(ellipse at 62% 76%, rgba(255, 248, 218, .76) 0 12%, transparent 13%),
        radial-gradient(ellipse at 75% 60%, rgba(255, 248, 218, .82) 0 15%, transparent 16%),
        radial-gradient(ellipse at 88% 74%, rgba(255, 248, 218, .82) 0 14%, transparent 15%),
        linear-gradient(90deg, transparent 0 41%, rgba(92, 43, 12, .72) 42% 58%, transparent 59%);
    filter: drop-shadow(0 4px 5px rgba(73, 40, 14, .18));
}

.jawa-gunungan.left { left: max(12px, calc(50vw - 370px)); transform: rotate(-8deg); }
.jawa-gunungan.right { right: max(12px, calc(50vw - 370px)); transform: scaleX(-1) rotate(-8deg); }

body.theme-adat-jawa #theme-ornaments {
    --javanese-edge: max(0px, calc(50vw - 300px));
    --javanese-side-width: clamp(46px, 14vw, 78px);
    --javanese-ink: rgba(70, 36, 11, .62);
    --javanese-gold: rgba(201, 148, 61, .4);
}

.javanese-cover-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    width: min(38vw, 168px);
    opacity: .44;
    background:
        radial-gradient(circle at 50% 11%, transparent 0 16px, rgba(71, 38, 12, .46) 17px 19px, transparent 20px),
        radial-gradient(circle at 50% 47%, rgba(201, 148, 61, .3) 0 5px, transparent 6px),
        linear-gradient(90deg, rgba(65, 34, 11, .34), rgba(223, 186, 116, .1));
    background-size: 58px 72px, 58px 72px, auto;
    filter: drop-shadow(0 18px 28px rgba(75, 54, 33, .24));
}

.javanese-cover-panel.left {
    left: 0;
    border-right: 1px solid rgba(92, 56, 20, .28);
}

.javanese-cover-panel.right {
    right: 0;
    transform: scaleX(-1);
    border-right: 1px solid rgba(92, 56, 20, .28);
}

body.theme-adat-jawa.is-open .javanese-cover-panel.left {
    animation: javaneseCoverOutLeft 1.05s cubic-bezier(.22, 1, .36, 1) both;
}

body.theme-adat-jawa.is-open .javanese-cover-panel.right {
    animation: javaneseCoverOutRight 1.05s cubic-bezier(.22, 1, .36, 1) both;
}

.javanese-side-border {
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--javanese-side-width);
    opacity: 0;
    background:
        radial-gradient(ellipse at 50% 30px, transparent 0 15px, var(--javanese-ink) 16px 18px, transparent 19px),
        radial-gradient(circle at 50% 30px, var(--javanese-gold) 0 4px, transparent 5px),
        linear-gradient(90deg, transparent, rgba(92, 56, 20, .34) 46%, rgba(255, 233, 186, .22) 50%, rgba(92, 56, 20, .34) 54%, transparent);
    background-size: 54px 82px, 54px 82px, auto;
    mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
    filter: drop-shadow(0 10px 16px rgba(75, 54, 33, .2));
}

.javanese-side-border::before,
.javanese-side-border::after {
    content: "";
    position: absolute;
    top: 8vh;
    bottom: 8vh;
    width: 1px;
    background: linear-gradient(transparent, rgba(80, 46, 17, .64), transparent);
}

.javanese-side-border::before { left: 12px; }
.javanese-side-border::after { right: 12px; }

.javanese-side-border.left {
    left: var(--javanese-edge);
}

.javanese-side-border.right {
    right: var(--javanese-edge);
    transform: scaleX(-1);
}

.javanese-frame-corner {
    position: absolute;
    width: clamp(70px, 22vw, 118px);
    height: clamp(70px, 22vw, 118px);
    opacity: 0;
    border-color: rgba(86, 49, 18, .48);
    filter: drop-shadow(0 12px 16px rgba(75, 54, 33, .2));
}

.javanese-frame-corner::before,
.javanese-frame-corner::after {
    content: "";
    position: absolute;
    inset: 14px;
    background:
        radial-gradient(circle at 50% 50%, rgba(201, 148, 61, .35) 0 5px, transparent 6px),
        conic-gradient(from 45deg, transparent 0 18%, rgba(86, 49, 18, .38) 18% 22%, transparent 22% 50%, rgba(86, 49, 18, .3) 50% 54%, transparent 54%);
}

.javanese-frame-corner::after {
    inset: 28px;
    border: 1px solid rgba(86, 49, 18, .28);
    transform: rotate(45deg);
    background: transparent;
}

.javanese-frame-corner.top-left {
    top: 18px;
    left: calc(var(--javanese-edge) + 10px);
    border-top: 2px solid;
    border-left: 2px solid;
}

.javanese-frame-corner.top-right {
    top: 18px;
    right: calc(var(--javanese-edge) + 10px);
    border-top: 2px solid;
    border-right: 2px solid;
}

.javanese-frame-corner.bottom-left {
    bottom: 78px;
    left: calc(var(--javanese-edge) + 10px);
    border-bottom: 2px solid;
    border-left: 2px solid;
}

.javanese-frame-corner.bottom-right {
    bottom: 78px;
    right: calc(var(--javanese-edge) + 10px);
    border-bottom: 2px solid;
    border-right: 2px solid;
}

body.theme-adat-jawa #theme-ornaments.ornaments-enter .javanese-side-border.left {
    animation: javaneseSideInLeft .92s cubic-bezier(.22, 1, .36, 1) both, javaneseOrnamentGlow 5.5s .95s ease-in-out infinite alternate;
}

body.theme-adat-jawa #theme-ornaments.ornaments-enter .javanese-side-border.right {
    animation: javaneseSideInRight .92s cubic-bezier(.22, 1, .36, 1) both, javaneseOrnamentGlow 5.5s .95s ease-in-out infinite alternate;
}

body.theme-adat-jawa #theme-ornaments.ornaments-enter .javanese-frame-corner.top-left {
    animation: javaneseCornerTopLeft .82s .08s cubic-bezier(.22, 1, .36, 1) both;
}

body.theme-adat-jawa #theme-ornaments.ornaments-enter .javanese-frame-corner.top-right {
    animation: javaneseCornerTopRight .82s .12s cubic-bezier(.22, 1, .36, 1) both;
}

body.theme-adat-jawa #theme-ornaments.ornaments-enter .javanese-frame-corner.bottom-left {
    animation: javaneseCornerBottomLeft .82s .16s cubic-bezier(.22, 1, .36, 1) both;
}

body.theme-adat-jawa #theme-ornaments.ornaments-enter .javanese-frame-corner.bottom-right {
    animation: javaneseCornerBottomRight .82s .2s cubic-bezier(.22, 1, .36, 1) both;
}

body.theme-adat-jawa #theme-ornaments.ornaments-enter .jawa-gunungan.left {
    animation: javaneseGununganLeft .95s .18s cubic-bezier(.22, 1, .36, 1) both;
}

body.theme-adat-jawa #theme-ornaments.ornaments-enter .jawa-gunungan.right {
    animation: javaneseGununganRight .95s .18s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes javaneseCoverOutLeft {
    from { opacity: .44; transform: translateX(0); }
    to { opacity: 0; transform: translateX(-110%); }
}

@keyframes javaneseCoverOutRight {
    from { opacity: .44; transform: scaleX(-1) translateX(0); }
    to { opacity: 0; transform: scaleX(-1) translateX(-110%); }
}

@keyframes javaneseSideInLeft {
    from { opacity: 0; transform: translateX(-42px) scale(.98); }
    to { opacity: .36; transform: translateX(0) scale(1); }
}

@keyframes javaneseSideInRight {
    from { opacity: 0; transform: translateX(42px) scaleX(-1) scale(.98); }
    to { opacity: .36; transform: translateX(0) scaleX(-1) scale(1); }
}

@keyframes javaneseOrnamentGlow {
    from { filter: drop-shadow(0 10px 16px rgba(75, 54, 33, .16)); }
    to { filter: drop-shadow(0 16px 24px rgba(75, 54, 33, .27)); }
}

@keyframes javaneseCornerTopLeft {
    from { opacity: 0; transform: translate(-24px, -24px) scale(.94); }
    to { opacity: .46; transform: translate(0, 0) scale(1); }
}

@keyframes javaneseCornerTopRight {
    from { opacity: 0; transform: translate(24px, -24px) scale(.94); }
    to { opacity: .46; transform: translate(0, 0) scale(1); }
}

@keyframes javaneseCornerBottomLeft {
    from { opacity: 0; transform: translate(-24px, 24px) scale(.94); }
    to { opacity: .38; transform: translate(0, 0) scale(1); }
}

@keyframes javaneseCornerBottomRight {
    from { opacity: 0; transform: translate(24px, 24px) scale(.94); }
    to { opacity: .38; transform: translate(0, 0) scale(1); }
}

@keyframes javaneseGununganLeft {
    from { opacity: 0; transform: translate(-28px, 18px) rotate(-14deg) scale(.92); }
    to { opacity: .14; transform: translate(0, 0) rotate(-8deg) scale(1); }
}

@keyframes javaneseGununganRight {
    from { opacity: 0; transform: translate(28px, 18px) scaleX(-1) rotate(-14deg) scale(.92); }
    to { opacity: .14; transform: translate(0, 0) scaleX(-1) rotate(-8deg) scale(1); }
}

@media (max-width: 575.98px) {
    body.theme-adat-jawa #theme-ornaments {
        --javanese-side-width: clamp(42px, 13vw, 58px);
    }

    .javanese-side-border::before { left: 8px; }
    .javanese-side-border::after { right: 8px; }

    .javanese-frame-corner {
        width: 74px;
        height: 74px;
    }

    .javanese-frame-corner.top-left,
    .javanese-frame-corner.top-right {
        top: 12px;
    }

    .javanese-frame-corner.bottom-left,
    .javanese-frame-corner.bottom-right {
        bottom: 66px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.theme-adat-jawa #theme-ornaments.ornaments-enter .javanese-side-border,
    body.theme-adat-jawa #theme-ornaments.ornaments-enter .javanese-frame-corner,
    body.theme-adat-jawa #theme-ornaments.ornaments-enter .jawa-gunungan,
    body.theme-adat-jawa.is-open .javanese-cover-panel {
        animation: none !important;
    }

    body.theme-adat-jawa #theme-ornaments.ornaments-enter .javanese-side-border {
        opacity: .58;
    }

    body.theme-adat-jawa #theme-ornaments.ornaments-enter .javanese-frame-corner {
        opacity: .58;
    }

    body.theme-adat-jawa.is-open .javanese-cover-panel {
        opacity: 0;
    }
}

/* Adat Jawa premium refinement */
body.theme-adat-jawa {
    background:
        radial-gradient(circle at 50% -18%, rgba(173, 119, 48, .26), transparent 25rem),
        linear-gradient(180deg, #221509, #0f0904);
}

.theme-adat-jawa .bg-light-dark,
.theme-adat-jawa .bg-white-black {
    background-color: #f8f0dd !important;
    background-image:
        radial-gradient(circle at 50% -10%, rgba(148, 84, 27, .16), transparent 17rem),
        linear-gradient(135deg, rgba(121, 69, 23, .035) 25%, transparent 25%),
        linear-gradient(225deg, rgba(121, 69, 23, .03) 25%, transparent 25%),
        linear-gradient(45deg, rgba(190, 145, 71, .035) 25%, transparent 25%),
        linear-gradient(315deg, rgba(190, 145, 71, .03) 25%, transparent 25%) !important;
    background-size: auto, 34px 34px, 34px 34px, 34px 34px, 34px 34px !important;
}

.theme-adat-jawa .bg-white-black {
    background-color: #fff9eb !important;
}

.theme-adat-jawa .bg-overlay-auto {
    background:
        linear-gradient(180deg, rgba(255, 248, 231, .38), rgba(255, 248, 231, .18)) !important;
    -webkit-backdrop-filter: blur(.48rem) saturate(1.04);
    backdrop-filter: blur(.48rem) saturate(1.04);
}

.theme-adat-jawa .bg-theme-auto,
.theme-adat-jawa .border.rounded-5.shadow,
.theme-adat-jawa .border.rounded-pill.shadow {
    background:
        linear-gradient(180deg, rgba(255, 250, 236, .94), rgba(241, 226, 191, .88)) !important;
    border-color: rgba(103, 56, 17, .22) !important;
    box-shadow: 0 18px 38px rgba(73, 39, 12, .11), inset 0 0 0 1px rgba(255, 255, 255, .62) !important;
}

.theme-adat-jawa .font-esthetic,
.theme-adat-jawa .text-theme-auto {
    color: #784016 !important;
    text-shadow: 0 1px 0 rgba(255, 247, 221, .72);
}

.theme-adat-jawa .theme-line {
    background: linear-gradient(90deg, transparent, rgba(111, 60, 18, .52), transparent);
}

body.theme-adat-jawa #theme-ornaments {
    --javanese-edge: max(0px, calc(50vw - 300px));
    --javanese-side-width: clamp(30px, 8vw, 54px);
    --javanese-ink: rgba(86, 44, 12, .42);
    --javanese-gold: rgba(211, 158, 73, .36);
}

body.theme-adat-jawa.is-paged main > section {
    border-left: 1px solid rgba(106, 58, 18, .1);
    border-right: 1px solid rgba(106, 58, 18, .1);
}

body.theme-adat-jawa.is-paged main > section::before,
body.theme-adat-jawa.is-paged main > section::after {
    content: "";
    position: absolute;
    left: 1.15rem;
    right: 1.15rem;
    height: 1px;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent, rgba(106, 58, 18, .28) 18%, rgba(211, 158, 73, .42) 50%, rgba(106, 58, 18, .28) 82%, transparent);
    opacity: .48;
}

body.theme-adat-jawa.is-paged main > section::before {
    top: 1rem;
}

body.theme-adat-jawa.is-paged main > section::after {
    bottom: 4.6rem;
}

body.theme-adat-jawa .jawa-pattern {
    height: clamp(44px, 8vh, 68px);
    opacity: .1;
    background:
        repeating-linear-gradient(90deg, transparent 0 28px, rgba(83, 44, 8, .28) 28px 29px),
        radial-gradient(circle at 24px 34px, transparent 0 14px, rgba(83, 44, 8, .22) 15px 16px, transparent 17px);
    background-size: 58px 68px;
}

body.theme-adat-jawa .javanese-cover-panel {
    opacity: .26;
    background:
        radial-gradient(circle at 50% 12%, transparent 0 18px, rgba(71, 38, 12, .28) 19px 20px, transparent 21px),
        radial-gradient(circle at 50% 48%, rgba(217, 166, 82, .18) 0 5px, transparent 6px),
        linear-gradient(90deg, rgba(65, 34, 11, .24), rgba(238, 205, 147, .08));
    background-size: 64px 78px, 64px 78px, auto;
}

body.theme-adat-jawa .javanese-side-border {
    opacity: 0;
    background:
        radial-gradient(ellipse at 50% 30px, transparent 0 15px, var(--javanese-ink) 16px 17px, transparent 18px),
        radial-gradient(circle at 50% 30px, var(--javanese-gold) 0 3px, transparent 4px),
        linear-gradient(90deg, transparent, rgba(92, 56, 20, .2) 46%, rgba(255, 233, 186, .18) 50%, rgba(92, 56, 20, .2) 54%, transparent);
    background-size: 54px 84px, 54px 84px, auto;
}

body.theme-adat-jawa .javanese-side-border::before,
body.theme-adat-jawa .javanese-side-border::after {
    background: linear-gradient(transparent, rgba(80, 46, 17, .34), transparent);
}

body.theme-adat-jawa .javanese-frame-corner {
    width: clamp(56px, 16vw, 96px);
    height: clamp(56px, 16vw, 96px);
    border-color: rgba(86, 49, 18, .28);
    filter: drop-shadow(0 10px 14px rgba(75, 54, 33, .13));
}

body.theme-adat-jawa .javanese-frame-corner::before {
    opacity: .55;
}

body.theme-adat-jawa .jawa-gunungan {
    bottom: 4.4rem;
    width: clamp(78px, 12vw, 116px);
    height: clamp(108px, 17vw, 160px);
    filter: drop-shadow(0 10px 16px rgba(75, 42, 15, .18));
}

body.theme-adat-jawa .jawa-gunungan.left {
    left: max(6px, calc(50vw - 298px));
}

body.theme-adat-jawa .jawa-gunungan.right {
    right: max(6px, calc(50vw - 298px));
}

body.theme-adat-jawa .ornament-jawa-rama-sinta {
    max-width: min(100%, 520px);
    height: clamp(118px, 21vh, 210px);
    opacity: 0;
    mix-blend-mode: multiply;
}

body.theme-adat-jawa .signature-adat-jawa {
    --signature-opacity: .24;
    top: clamp(2.75rem, 6.5vh, 4.8rem);
    width: clamp(84px, 13vw, 124px);
    height: clamp(116px, 18vw, 172px);
}

body.theme-adat-jawa #theme-ornaments.ornaments-enter .javanese-side-border.left {
    animation: javaneseSideInLeft .92s cubic-bezier(.22, 1, .36, 1) both, javaneseOrnamentGlow 6s .95s ease-in-out infinite alternate;
}

body.theme-adat-jawa #theme-ornaments.ornaments-enter .javanese-side-border.right {
    animation: javaneseSideInRight .92s cubic-bezier(.22, 1, .36, 1) both, javaneseOrnamentGlow 6s .95s ease-in-out infinite alternate;
}

@media (max-width: 575.98px) {
    body.theme-adat-jawa #theme-ornaments {
        --javanese-side-width: clamp(22px, 7vw, 34px);
    }

    body.theme-adat-jawa.is-paged main > section::before,
    body.theme-adat-jawa.is-paged main > section::after {
        left: .85rem;
        right: .85rem;
    }

    body.theme-adat-jawa .javanese-side-border::before,
    body.theme-adat-jawa .javanese-side-border::after {
        display: none;
    }

    body.theme-adat-jawa .javanese-frame-corner {
        width: 54px;
        height: 54px;
    }

    body.theme-adat-jawa .jawa-gunungan {
        bottom: 4.25rem;
        width: clamp(58px, 18vw, 74px);
        height: clamp(82px, 25vw, 104px);
    }

    body.theme-adat-jawa .ornament-jawa-rama-sinta {
        height: 118px !important;
        opacity: .08;
    }

    body.theme-adat-jawa .signature-adat-jawa {
        --signature-opacity: .2;
        top: clamp(2rem, 5.2vh, 3.1rem) !important;
        width: clamp(68px, 21vw, 90px) !important;
        height: clamp(94px, 29vw, 124px) !important;
    }
}

/* Wayang Kencana */
.theme-wayang-kencana {
    --bs-light: #455c5f;
    --bs-white: #455c5f;
    --bs-dark: #fff4cf;
    --bs-gray-100: rgba(24, 32, 33, .72);
    --theme-wayang-bg: #455c5f;
    --theme-wayang-bg-dark: #2d3d40;
    --theme-wayang-gold: #ffce43;
    --theme-wayang-cream: #fff4cf;
    color: var(--theme-wayang-cream);
    font-family: "Josefin Sans", sans-serif;
}

body.theme-wayang-kencana {
    background:
        linear-gradient(90deg, rgba(255, 206, 67, .08) 1px, transparent 1px),
        linear-gradient(rgba(255, 206, 67, .055) 1px, transparent 1px),
        radial-gradient(circle at 50% -12%, rgba(255, 206, 67, .14), transparent 24rem),
        linear-gradient(180deg, #172426, #0f1718);
    background-size: 54px 54px, 54px 54px, auto, auto;
}

body.theme-wayang-kencana #root {
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    background:
        linear-gradient(90deg, rgba(255, 206, 67, .08) 1px, transparent 1px),
        linear-gradient(rgba(255, 206, 67, .055) 1px, transparent 1px),
        radial-gradient(circle at 50% 18%, rgba(255, 206, 67, .08), transparent 28rem),
        var(--theme-wayang-bg);
    background-size: 54px 54px, 54px 54px, auto, auto;
}

body.theme-wayang-kencana .sticky-top.vh-100.d-none.d-sm-block {
    display: none !important;
}

body.theme-wayang-kencana #root > .col-sm-7,
body.theme-wayang-kencana #root > .col-md-6,
body.theme-wayang-kencana #root > .col-lg-5,
body.theme-wayang-kencana #root > .col-xl-4,
body.theme-wayang-kencana #root > .col-xxl-3 {
    flex: 0 0 auto !important;
    width: min(100%, 720px) !important;
    max-width: 720px !important;
    background: var(--theme-wayang-bg) !important;
}

body.theme-wayang-kencana main {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    overflow: hidden;
    background: var(--theme-wayang-bg);
    box-shadow: 0 0 0 2px rgba(19, 16, 13, .54), 0 28px 70px rgba(0, 0, 0, .34);
}

body.theme-wayang-kencana main > section {
    position: relative !important;
    isolation: isolate;
    min-height: 100vh;
    min-height: 100dvh;
    color: var(--theme-wayang-cream);
    background-color: var(--theme-wayang-bg) !important;
    background-image:
        radial-gradient(circle at 50% -20%, rgba(255, 206, 67, .12), transparent 18rem),
        linear-gradient(120deg, rgba(255, 206, 67, .035) 1px, transparent 1px),
        linear-gradient(60deg, rgba(255, 206, 67, .03) 1px, transparent 1px) !important;
    background-size: auto, 44px 44px, 44px 44px !important;
}

body.theme-wayang-kencana .svg-wrapper {
    display: none !important;
}

.theme-wayang-kencana .bg-light-dark,
.theme-wayang-kencana .bg-white-black {
    background-color: var(--theme-wayang-bg) !important;
}

.theme-wayang-kencana .bg-cover-home {
    display: none !important;
}

.theme-wayang-kencana .bg-overlay-auto {
    color: var(--theme-wayang-cream);
    background: transparent !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.theme-wayang-kencana .bg-theme-auto,
.theme-wayang-kencana .border.rounded-5.shadow,
.theme-wayang-kencana .border.rounded-pill.shadow {
    color: var(--theme-wayang-cream);
    background:
        linear-gradient(180deg, rgba(31, 43, 45, .9), rgba(18, 25, 26, .8)) !important;
    border-color: rgba(255, 206, 67, .34) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .24), inset 0 0 0 1px rgba(255, 244, 207, .08) !important;
}

.theme-wayang-kencana .text-theme-auto,
.theme-wayang-kencana .font-esthetic {
    color: var(--theme-wayang-gold) !important;
}

.theme-wayang-kencana .text-secondary,
.theme-wayang-kencana .text-muted,
.theme-wayang-kencana small {
    color: rgba(255, 244, 207, .74) !important;
}

.theme-wayang-kencana h1,
.theme-wayang-kencana h2,
.theme-wayang-kencana h3,
.theme-wayang-kencana h4,
.theme-wayang-kencana h5,
.theme-wayang-kencana h6 {
    color: var(--theme-wayang-gold);
}

.theme-wayang-kencana .font-esthetic {
    font-family: "Great Vibes", cursive;
    text-shadow: 0 2px 0 rgba(36, 25, 4, .18), 0 12px 22px rgba(0, 0, 0, .22);
}

.theme-wayang-kencana .font-arabic {
    color: var(--theme-wayang-cream);
}

.theme-wayang-kencana .theme-line {
    background: linear-gradient(90deg, transparent, var(--theme-wayang-gold), transparent);
    opacity: .8;
}

.theme-wayang-kencana .img-center-crop {
    border-color: rgba(255, 206, 67, .74) !important;
    box-shadow: 0 0 0 7px rgba(255, 206, 67, .12), 0 18px 38px rgba(0, 0, 0, .28) !important;
}

body.theme-wayang-kencana #home > .bg-overlay-auto {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: clamp(3rem, 10vh, 6rem) 1.4rem clamp(12rem, 25vh, 17rem);
}

.wayang-home-title,
.wayang-welcome-title {
    position: relative;
    z-index: 2;
    width: min(100%, 42rem);
    margin: 0 auto;
    display: grid;
    justify-items: center;
    text-align: center;
}

.wayang-title-ornament {
    display: block;
    width: min(100%, clamp(18rem, 72vw, 34rem));
    height: clamp(3.4rem, 10vw, 5.2rem);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: drop-shadow(0 9px 10px rgba(0, 0, 0, .18));
}

.wayang-title-ornament.top {
    background-image: url('../img/wayang-kencana-ornament-top.png');
    margin-bottom: .35rem;
}

.wayang-title-ornament.bottom {
    background-image: url('../img/wayang-kencana-ornament-bottom.png');
    margin-top: .15rem;
}

.wayang-title-small {
    display: block;
    color: var(--theme-wayang-gold);
    font-family: "Cinzel", serif;
    font-size: clamp(.92rem, 3.7vw, 1.85rem);
    font-weight: 500;
    letter-spacing: .24em;
    line-height: 1.1;
    padding-left: .24em;
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow: 0 2px 0 rgba(43, 34, 8, .18), 0 10px 18px rgba(0, 0, 0, .16);
}

.wayang-title-name {
    display: block;
    color: var(--theme-wayang-gold);
    font-family: "Great Vibes", cursive;
    font-size: clamp(3.9rem, 14vw, 6.2rem);
    line-height: .96;
    padding: .2rem .15rem .1rem;
    text-shadow: 0 2px 0 rgba(43, 34, 8, .18), 0 16px 28px rgba(0, 0, 0, .22);
    text-wrap: balance;
}

.wayang-date {
    position: relative;
    z-index: 2;
    margin: clamp(1.25rem, 4vh, 2.1rem) 0 .8rem;
    color: var(--theme-wayang-cream);
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.1rem, 4.2vw, 1.55rem);
    font-weight: 600;
    letter-spacing: .06em;
}

body.theme-wayang-kencana #welcome {
    color: var(--theme-wayang-cream);
    background:
        linear-gradient(90deg, rgba(255, 206, 67, .08) 1px, transparent 1px),
        linear-gradient(rgba(255, 206, 67, .055) 1px, transparent 1px),
        radial-gradient(circle at 50% -12%, rgba(255, 206, 67, .14), transparent 24rem),
        linear-gradient(180deg, #172426, #0f1718) !important;
    background-size: 54px 54px, 54px 54px, auto, auto !important;
}

body.theme-wayang-kencana #welcome > .d-flex {
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden !important;
}

body.theme-wayang-kencana #welcome .d-flex.flex-column {
    position: relative;
    z-index: 2;
    width: min(100%, 42rem);
    min-height: 100vh;
    min-height: 100dvh;
    justify-content: flex-start;
    align-items: center;
    padding: clamp(5.5rem, 12.5vh, 7.5rem) 0 calc(66px + 1rem) !important;
}

.wayang-guest-box {
    position: relative;
    z-index: 2;
    margin-top: clamp(1.5rem, 4vh, 2.25rem);
    color: var(--theme-wayang-cream);
    font-size: clamp(1rem, 2vw, 1.35rem);
    line-height: 1.24;
    text-shadow: 0 8px 20px rgba(0, 0, 0, .22);
}

.wayang-guest-box strong {
    color: #ffffff;
    font-weight: 600;
    font-size: 1.08em;
}

body.theme-wayang-kencana #button-open-invitation,
.theme-wayang-kencana .btn-outline-auto {
    --bs-btn-color: var(--theme-wayang-gold);
    --bs-btn-border-color: rgba(255, 206, 67, .78);
    --bs-btn-hover-color: #2a1d05;
    --bs-btn-hover-bg: var(--theme-wayang-gold);
    --bs-btn-hover-border-color: var(--theme-wayang-gold);
    color: var(--theme-wayang-gold);
    border: 1px solid rgba(255, 206, 67, .72);
    background: rgba(17, 23, 24, .34);
    -webkit-backdrop-filter: blur(.35rem);
    backdrop-filter: blur(.35rem);
}

body.theme-wayang-kencana #button-open-invitation {
    position: relative;
    z-index: 2;
    padding: .55rem 1.35rem;
    font-weight: 600;
}

body.theme-wayang-kencana #button-open-invitation:hover,
.theme-wayang-kencana .btn-outline-auto:hover {
    color: #2a1d05;
    background: var(--theme-wayang-gold);
}

body.theme-wayang-kencana .navbar {
    max-width: 720px;
    margin: 0 auto;
    color: var(--theme-wayang-cream);
    background: rgba(18, 25, 26, .84);
    border-color: rgba(255, 206, 67, .28) !important;
    -webkit-backdrop-filter: blur(.75rem);
    backdrop-filter: blur(.75rem);
}

body.theme-wayang-kencana .navbar .nav-link {
    color: rgba(255, 244, 207, .64);
}

body.theme-wayang-kencana .navbar .nav-link.active,
body.theme-wayang-kencana .navbar .nav-link:hover {
    color: var(--theme-wayang-gold);
}

body.theme-wayang-kencana .navbar .nav-link::before {
    background: var(--theme-wayang-gold);
}

body.theme-wayang-kencana .audio-float {
    right: max(.8rem, calc(50vw - 342px));
}

body.theme-wayang-kencana #theme-ornaments {
    --wayang-edge: max(0px, calc(50vw - 360px));
    --wayang-gold: #ffce43;
    --wayang-puppet-height: clamp(300px, 38vh, 410px);
    z-index: 1057;
}

body.theme-wayang-kencana #theme-ornaments::before {
    inset: -12%;
    opacity: .22;
    background:
        radial-gradient(circle at 50% 50%, transparent 0 16%, rgba(255, 206, 67, .12) 17% 18%, transparent 19%),
        repeating-linear-gradient(120deg, rgba(255, 206, 67, .08) 0 1px, transparent 1px 32px);
    background-size: 230px 230px, 150px 150px;
    animation: wayangPatternDrift 34s linear infinite;
}

body.theme-wayang-kencana #theme-ornaments::after {
    inset: -10%;
    opacity: .18;
    background:
        radial-gradient(ellipse at 18% 30%, rgba(255, 206, 67, .16) 0 7%, transparent 8%),
        radial-gradient(ellipse at 78% 74%, rgba(255, 206, 67, .12) 0 9%, transparent 10%),
        linear-gradient(90deg, transparent 0 48%, rgba(255, 206, 67, .08) 49%, transparent 50%);
    background-size: 360px 260px, 420px 300px, 220px 220px;
    animation: wayangMistFloat 24s ease-in-out infinite alternate;
}

.signature-wayang-kencana {
    --signature-opacity: .18;
    top: clamp(.85rem, 2.8vh, 1.8rem);
    width: clamp(54px, 8vw, 78px);
    height: clamp(64px, 9vw, 92px);
    color: var(--theme-wayang-gold);
    filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .28));
}

.signature-wayang-kencana::before {
    inset: 0 18% 12%;
    clip-path: polygon(50% 0, 86% 32%, 100% 70%, 72% 100%, 28% 100%, 0 70%, 14% 32%);
    background:
        repeating-radial-gradient(ellipse at 50% 44%, rgba(255, 244, 207, .34) 0 2px, transparent 3px 11px),
        linear-gradient(160deg, rgba(255, 206, 67, .95), rgba(198, 122, 24, .68));
    box-shadow: inset 0 0 0 2px rgba(255, 244, 207, .28);
}

.signature-wayang-kencana::after {
    left: 26%;
    right: 26%;
    bottom: 0;
    height: 28%;
    background: linear-gradient(90deg, transparent 0 34%, currentColor 35% 65%, transparent 66%);
}

.wayang-corner,
.wayang-puppet,
.wayang-ornament-line {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    background-repeat: no-repeat;
    background-size: contain;
    filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .22));
    will-change: transform, opacity, filter;
}

.wayang-corner {
    top: clamp(1rem, 3vh, 1.9rem);
    width: clamp(126px, 22vw, 190px);
    height: clamp(126px, 22vw, 190px);
    background-image: url('../img/wayang-kencana-corner.png');
    z-index: 2;
}

.wayang-corner.top-left {
    left: calc(var(--wayang-edge) + clamp(.8rem, 2.4vw, 1.7rem));
}

.wayang-corner.top-right {
    right: calc(var(--wayang-edge) + clamp(.8rem, 2.4vw, 1.7rem));
    transform: scaleX(-1);
}

body.theme-wayang-kencana:not(.is-paged) .wayang-corner {
    display: block;
}

.wayang-ornament-line {
    left: 50%;
    width: min(calc(100vw - 2rem), 34rem);
    height: clamp(3rem, 9vw, 5rem);
    transform: translate3d(-50%, 0, 0);
    z-index: 2;
}

.wayang-ornament-line.top {
    top: clamp(7rem, 19vh, 10rem);
    background-image: url('../img/wayang-kencana-ornament-top.png');
    background-position: center top;
}

.wayang-ornament-line.bottom {
    top: clamp(18rem, 39vh, 24rem);
    background-image: url('../img/wayang-kencana-ornament-bottom.png');
    background-position: center bottom;
}

body.theme-wayang-kencana #theme-ornaments:not([data-active-section="0"]) .wayang-ornament-line {
    display: none;
}

.wayang-puppet {
    bottom: calc(66px + max(.35rem, env(safe-area-inset-bottom)));
    width: calc(var(--wayang-puppet-height) * .52);
    height: var(--wayang-puppet-height);
    z-index: 1;
}

body.theme-wayang-kencana:not(.is-paged) #theme-ornaments {
    --wayang-puppet-height: clamp(300px, 38vh, 410px);
}

body.theme-wayang-kencana:not(.is-paged) .wayang-puppet {
    bottom: calc(66px + max(.35rem, env(safe-area-inset-bottom)));
}

.wayang-puppet.wayang-sinta {
    width: calc(var(--wayang-puppet-height) * .48);
    left: calc(var(--wayang-edge) + clamp(.15rem, 1.2vw, 1.1rem));
    background-image: url('../img/wayang-kencana-sinta.png');
    background-position: left bottom;
}

.wayang-puppet.wayang-rama {
    width: calc(var(--wayang-puppet-height) * .55);
    right: calc(var(--wayang-edge) + clamp(.15rem, 1.2vw, 1.1rem));
    background-image: url('../img/wayang-kencana-rama.png');
    background-position: right bottom;
}

body.theme-wayang-kencana #theme-ornaments.ornaments-enter .wayang-corner.top-left {
    animation: wayangCornerLeftIn 2s ease both;
}

body.theme-wayang-kencana #theme-ornaments.ornaments-enter .wayang-corner.top-right {
    animation: wayangCornerRightIn 2s .05s ease both;
}

body.theme-wayang-kencana #theme-ornaments.ornaments-enter .wayang-ornament-line.top {
    animation: wayangLineTopIn 2s .08s ease both;
}

body.theme-wayang-kencana #theme-ornaments.ornaments-enter .wayang-ornament-line.bottom {
    animation: wayangLineBottomIn 2s .12s ease both;
}

body.theme-wayang-kencana #theme-ornaments.ornaments-enter .wayang-puppet.wayang-sinta {
    animation: wayangPuppetLeftIn 2.8s ease both, wayangGoldGlow 9s 2.9s ease-in-out infinite alternate;
}

body.theme-wayang-kencana #theme-ornaments.ornaments-enter .wayang-puppet.wayang-rama {
    animation: wayangPuppetRightIn 2.8s .05s ease both, wayangGoldGlow 9.4s 2.95s ease-in-out infinite alternate;
}

body.theme-wayang-kencana.is-paged #theme-ornaments:not([data-active-section="0"]) .wayang-puppet {
    height: var(--wayang-puppet-height);
}

body.theme-wayang-kencana.is-paged #theme-ornaments.ornaments-enter:not([data-active-section="0"]) .wayang-puppet.wayang-sinta {
    animation: wayangPuppetLeftSubtleIn 2.2s ease both;
}

body.theme-wayang-kencana.is-paged #theme-ornaments.ornaments-enter:not([data-active-section="0"]) .wayang-puppet.wayang-rama {
    animation: wayangPuppetRightSubtleIn 2.2s .05s ease both;
}

body.theme-wayang-kencana main > section > .container,
body.theme-wayang-kencana #home > .bg-overlay-auto,
body.theme-wayang-kencana #bride > * {
    position: relative;
    z-index: 2;
}

body.theme-wayang-kencana #bride,
body.theme-wayang-kencana #gallery {
    overflow: hidden !important;
}

body.theme-wayang-kencana .closing-section > .container > .closing-wassalam {
    color: var(--theme-wayang-gold);
    text-shadow: 0 2px 0 rgba(40, 25, 5, .18), 0 10px 22px rgba(0, 0, 0, .32);
}

@keyframes wayangPatternDrift {
    to { background-position: 230px 230px, -150px 150px; }
}

@keyframes wayangMistFloat {
    to { transform: translate3d(28px, -24px, 0) scale(1.03); }
}

@keyframes wayangCornerLeftIn {
    from { opacity: 0; transform: translate3d(-20px, -16px, 0) scale(.96); }
    to { opacity: .92; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes wayangCornerRightIn {
    from { opacity: 0; transform: translate3d(20px, -16px, 0) scaleX(-1) scale(.96); }
    to { opacity: .92; transform: translate3d(0, 0, 0) scaleX(-1) scale(1); }
}

@keyframes wayangLineTopIn {
    from { opacity: 0; transform: translate3d(-50%, -12px, 0) scale(.98); }
    to { opacity: .92; transform: translate3d(-50%, 0, 0) scale(1); }
}

@keyframes wayangLineBottomIn {
    from { opacity: 0; transform: translate3d(-50%, 12px, 0) scale(.98); }
    to { opacity: .92; transform: translate3d(-50%, 0, 0) scale(1); }
}

@keyframes wayangPuppetLeftIn {
    from { opacity: 0; transform: translate3d(-24px, 24px, 0) rotate(-2.5deg) scale(.97); }
    to { opacity: 1; transform: translate3d(0, 0, 0) rotate(0) scale(1); }
}

@keyframes wayangPuppetRightIn {
    from { opacity: 0; transform: translate3d(24px, 24px, 0) rotate(2.5deg) scale(.97); }
    to { opacity: 1; transform: translate3d(0, 0, 0) rotate(0) scale(1); }
}

@keyframes wayangPuppetLeftSubtleIn {
    from { opacity: 0; transform: translate3d(-16px, 16px, 0) rotate(-1.5deg) scale(.975); }
    to { opacity: 1; transform: translate3d(0, 0, 0) rotate(0) scale(1); }
}

@keyframes wayangPuppetRightSubtleIn {
    from { opacity: 0; transform: translate3d(16px, 16px, 0) rotate(1.5deg) scale(.975); }
    to { opacity: 1; transform: translate3d(0, 0, 0) rotate(0) scale(1); }
}

@keyframes wayangGoldGlow {
    from { filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .2)); }
    to { filter: drop-shadow(0 18px 24px rgba(255, 206, 67, .18)); }
}

@media (max-width: 575.98px) {
    body.theme-wayang-kencana #root > .col-sm-7,
    body.theme-wayang-kencana #root > .col-md-6,
    body.theme-wayang-kencana #root > .col-lg-5,
    body.theme-wayang-kencana #root > .col-xl-4,
    body.theme-wayang-kencana #root > .col-xxl-3,
    body.theme-wayang-kencana main,
    body.theme-wayang-kencana .navbar {
        width: 100% !important;
        max-width: 100% !important;
    }

    body.theme-wayang-kencana #home > .bg-overlay-auto {
        padding: clamp(3rem, 10vh, 4.8rem) .9rem clamp(11rem, 28vh, 15rem);
    }

    body.theme-wayang-kencana #welcome .d-flex.flex-column {
        padding-top: clamp(7rem, 17dvh, 9rem) !important;
        padding-right: .9rem !important;
        padding-bottom: calc(61px + 1rem) !important;
        padding-left: .9rem !important;
    }

    .wayang-title-ornament {
        width: min(100%, 21rem);
        height: clamp(2.9rem, 13vw, 4.2rem);
    }

    .wayang-title-small {
        font-size: clamp(.82rem, 3.75vw, 1.08rem);
        letter-spacing: .2em;
        padding-left: .2em;
    }

    .wayang-title-name {
        font-size: clamp(3.35rem, 17vw, 5.1rem);
    }

    .wayang-welcome-title .wayang-title-name {
        max-width: 100%;
        font-size: clamp(3rem, 15.5vw, 4.75rem);
        line-height: 1;
        overflow-wrap: normal;
        white-space: nowrap;
    }

    .wayang-guest-box {
        margin-top: clamp(1.4rem, 4dvh, 2rem);
        font-size: clamp(1rem, 4.6vw, 1.25rem);
    }

    .wayang-corner {
        top: .85rem;
        width: clamp(112px, 34vw, 150px);
        height: clamp(112px, 34vw, 150px);
    }

    .wayang-corner.top-left {
        left: .75rem;
    }

    .wayang-corner.top-right {
        right: .75rem;
    }

    .wayang-ornament-line.top {
        top: clamp(5.6rem, 16vh, 7.4rem);
    }

    .wayang-ornament-line.bottom {
        top: clamp(15.3rem, 35vh, 18rem);
    }

    .wayang-puppet {
        bottom: calc(61px + max(.35rem, env(safe-area-inset-bottom)));
    }

    body.theme-wayang-kencana #theme-ornaments {
        --wayang-puppet-height: clamp(225px, 31vh, 290px);
    }

    body.theme-wayang-kencana:not(.is-paged) #theme-ornaments {
        --wayang-puppet-height: clamp(225px, 31dvh, 290px);
    }

    body.theme-wayang-kencana:not(.is-paged) .wayang-puppet {
        bottom: calc(61px + max(.35rem, env(safe-area-inset-bottom)));
    }

    .wayang-puppet.wayang-sinta {
        left: -.15rem;
    }

    .wayang-puppet.wayang-rama {
        right: -.15rem;
    }
}

@media (max-height: 720px) {
    body.theme-wayang-kencana #welcome .d-flex.flex-column {
        justify-content: flex-start;
        padding-top: clamp(5rem, 12.5dvh, 5.75rem) !important;
        padding-bottom: calc(66px + .75rem) !important;
    }

    .wayang-title-ornament {
        height: 2.85rem;
    }

    .wayang-title-small {
        font-size: clamp(.86rem, 4.5vw, 1.16rem);
    }

    .wayang-title-name {
        font-size: clamp(2.9rem, 14vw, 4.25rem);
    }

    .wayang-guest-box {
        margin-top: clamp(1.15rem, 3.5dvh, 1.6rem);
        font-size: clamp(.95rem, 2.2vw, 1.2rem);
    }

    body.theme-wayang-kencana #button-open-invitation {
        padding: .45rem 1.05rem;
    }

    body.theme-wayang-kencana:not(.is-paged) #theme-ornaments {
        --wayang-puppet-height: clamp(260px, 36vh, 320px);
    }
}

@media (max-width: 575.98px) and (max-height: 720px) {
    body.theme-wayang-kencana #welcome .d-flex.flex-column {
        padding-top: clamp(4.5rem, 12dvh, 5.75rem) !important;
        padding-bottom: calc(61px + .5rem) !important;
    }

    .wayang-welcome-title .wayang-title-name {
        font-size: clamp(2.65rem, 14vw, 3.65rem);
    }

    .wayang-guest-box {
        margin-top: clamp(.85rem, 2.8dvh, 1.25rem);
    }

    body.theme-wayang-kencana:not(.is-paged) #theme-ornaments {
        --wayang-puppet-height: clamp(190px, 31dvh, 225px);
    }
}

@media (min-width: 768px) and (max-height: 840px) {
    body.theme-wayang-kencana #home > .bg-overlay-auto {
        justify-content: flex-start;
        padding-top: clamp(3.2rem, 8vh, 4.4rem);
        padding-bottom: 9rem;
    }

    .wayang-title-ornament {
        width: min(100%, 31rem);
        height: 3.25rem;
    }

    .wayang-title-small {
        font-size: clamp(1rem, 1.6vw, 1.28rem);
        letter-spacing: .24em;
    }

    .wayang-title-name {
        font-size: clamp(4.2rem, 7.6vw, 5.65rem);
        line-height: .9;
    }

    .wayang-date {
        margin-top: 1rem;
        font-size: 1.2rem;
    }

    .wayang-corner {
        width: clamp(128px, 13vw, 160px);
        height: clamp(128px, 13vw, 160px);
    }

    body.theme-wayang-kencana #theme-ornaments {
        --wayang-puppet-height: clamp(260px, 36vh, 320px);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.theme-wayang-kencana #theme-ornaments::before,
    body.theme-wayang-kencana #theme-ornaments::after,
    body.theme-wayang-kencana #theme-ornaments.ornaments-enter .wayang-corner,
    body.theme-wayang-kencana #theme-ornaments.ornaments-enter .wayang-ornament-line,
    body.theme-wayang-kencana #theme-ornaments.ornaments-enter .wayang-puppet {
        animation: none !important;
    }

    body.theme-wayang-kencana #theme-ornaments.ornaments-enter .wayang-corner,
    body.theme-wayang-kencana #theme-ornaments.ornaments-enter .wayang-ornament-line,
    body.theme-wayang-kencana #theme-ornaments.ornaments-enter .wayang-puppet {
        opacity: 1;
    }
}

.theme-elegant-luxury .bg-light-dark,
.theme-elegant-luxury .bg-white-black {
    background-image:
        radial-gradient(circle at 50% 0, rgba(212, 175, 55, .16), transparent 30rem),
        linear-gradient(135deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 48px),
        linear-gradient(45deg, rgba(212, 175, 55, .055) 0 1px, transparent 1px 56px);
}

.theme-elegant-luxury .bg-theme-auto,
.theme-elegant-luxury .border.rounded-5.shadow,
.theme-elegant-luxury .border.rounded-pill.shadow {
    background: linear-gradient(180deg, rgba(31, 28, 25, .9), rgba(8, 8, 9, .84)) !important;
    border-color: rgba(212, 175, 55, .34) !important;
    box-shadow: 0 24px 52px rgba(0, 0, 0, .38), inset 0 0 0 1px rgba(255, 235, 180, .12) !important;
}

.theme-elegant-luxury .font-esthetic,
.theme-elegant-luxury .text-theme-auto {
    color: #f7d98f !important;
}

.luxury-diamond-frame {
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(212, 175, 55, .22);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}

.luxury-diamond-frame::before,
.luxury-diamond-frame::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 54px;
    height: 54px;
    border: 1px solid rgba(212, 175, 55, .35);
    transform: translateX(-50%) rotate(45deg);
    background: rgba(0, 0, 0, .16);
}

.luxury-diamond-frame::before { top: -28px; }
.luxury-diamond-frame::after { bottom: -28px; }

.luxury-chandelier {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 38vh;
    background: linear-gradient(rgba(212, 175, 55, .45), transparent);
}

.luxury-chandelier::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: -32px;
    width: 64px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid rgba(212, 175, 55, .36);
}

.theme-royal-gold .bg-light-dark,
.theme-royal-gold .bg-white-black {
    background-image:
        radial-gradient(circle at 50% -8%, rgba(197, 150, 24, .24), transparent 20rem),
        repeating-radial-gradient(circle at 50% 50%, rgba(197, 150, 24, .055) 0 2px, transparent 2px 23px);
}

.theme-royal-gold .bg-theme-auto,
.theme-royal-gold .border.rounded-5.shadow,
.theme-royal-gold .border.rounded-pill.shadow {
    background: linear-gradient(180deg, rgba(255, 253, 245, .96), rgba(255, 247, 220, .92)) !important;
    border: 1px solid rgba(162, 116, 13, .32) !important;
    box-shadow: 0 18px 46px rgba(99, 75, 0, .16), inset 0 0 0 1px rgba(255, 255, 255, .72) !important;
}

.theme-royal-gold .font-esthetic,
.theme-royal-gold .text-theme-auto {
    color: #9f7308 !important;
}

.royal-corner {
    position: absolute;
    width: 118px;
    height: 118px;
    border-color: rgba(188, 136, 12, .42);
    opacity: .75;
}

.royal-corner.top-left { top: 28px; left: 28px; border-top: 2px solid; border-left: 2px solid; }
.royal-corner.top-right { top: 28px; right: 28px; border-top: 2px solid; border-right: 2px solid; }
.royal-corner.bottom-left { bottom: 28px; left: 28px; border-bottom: 2px solid; border-left: 2px solid; }
.royal-corner.bottom-right { bottom: 28px; right: 28px; border-bottom: 2px solid; border-right: 2px solid; }

.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;
}

@keyframes floralBurgundyTopIn {
    from {
        opacity: 0;
        transform: translate3d(-50%, -58px, 0) scale(1.05);
    }
    to {
        opacity: .96;
        transform: translate3d(-50%, -4px, 0) scale(1);
    }
}

@keyframes floralBurgundyBottomIn {
    from {
        opacity: 0;
        transform: translate3d(-50%, 58px, 0) scale(1.05);
    }
    to {
        opacity: .96;
        transform: translate3d(-50%, 6px, 0) scale(1);
    }
}

.theme-vintage-classic .bg-light-dark,
.theme-vintage-classic .bg-white-black {
    background-image:
        radial-gradient(circle at 50% 12%, rgba(86, 65, 36, .1), transparent 26rem),
        linear-gradient(rgba(84, 66, 42, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(84, 66, 42, .035) 1px, transparent 1px);
    background-size: auto, 28px 28px, 28px 28px;
}

.theme-vintage-classic .bg-theme-auto,
.theme-vintage-classic .border.rounded-5.shadow,
.theme-vintage-classic .border.rounded-pill.shadow {
    background: rgba(250, 245, 233, .9) !important;
    border: 1px solid rgba(62, 50, 35, .22) !important;
    box-shadow: 0 20px 44px rgba(62, 50, 35, .15), inset 0 0 22px rgba(107, 82, 48, .08) !important;
}

.vintage-paper-grain {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 12% 18%, rgba(62, 50, 35, .16) 0 1px, transparent 1px),
        radial-gradient(circle at 76% 42%, rgba(62, 50, 35, .12) 0 1px, transparent 1px),
        radial-gradient(circle at 36% 80%, rgba(62, 50, 35, .1) 0 1px, transparent 1px);
    background-size: 34px 34px, 55px 55px, 71px 71px;
    opacity: .28;
}

.theme-dark-premium .bg-light-dark,
.theme-dark-premium .bg-white-black {
    background-image:
        radial-gradient(circle at 50% -20%, rgba(0, 209, 255, .16), transparent 28rem),
        linear-gradient(135deg, rgba(0, 255, 255, .06) 1px, transparent 1px),
        linear-gradient(45deg, rgba(255, 0, 153, .05) 1px, transparent 1px);
    background-size: auto, 54px 54px, 68px 68px;
}

.theme-dark-premium .bg-theme-auto,
.theme-dark-premium .border.rounded-5.shadow,
.theme-dark-premium .border.rounded-pill.shadow {
    background: rgba(10, 10, 10, .76) !important;
    border: 1px solid rgba(0, 209, 255, .28) !important;
    box-shadow: 0 0 30px rgba(0, 209, 255, .08), inset 0 0 0 1px rgba(255, 0, 153, .08) !important;
}

.theme-dark-premium .font-esthetic,
.theme-dark-premium .text-theme-auto {
    color: #8be9ff !important;
    text-shadow: 0 0 14px rgba(0, 209, 255, .28);
}

.neon-halo {
    position: absolute;
    inset: 16%;
    border-radius: 50%;
    border: 1px solid rgba(0, 209, 255, .16);
    box-shadow: 0 0 70px rgba(0, 209, 255, .16);
    animation: pulseHalo 5s ease-in-out infinite;
}

.theme-sakura-jepang .bg-light-dark,
.theme-sakura-jepang .bg-white-black {
    background-image:
        radial-gradient(circle at 84% 12%, rgba(255, 155, 176, .28), transparent 7.5rem),
        radial-gradient(circle at 16% 84%, rgba(255, 204, 214, .22), transparent 9rem),
        linear-gradient(135deg, rgba(255, 184, 200, .08) 25%, transparent 25%),
        linear-gradient(225deg, rgba(255, 184, 200, .08) 25%, transparent 25%);
    background-size: auto, auto, 42px 42px, 42px 42px;
}

.theme-sakura-jepang .bg-theme-auto,
.theme-sakura-jepang .border.rounded-5.shadow,
.theme-sakura-jepang .border.rounded-pill.shadow {
    background: rgba(255, 255, 255, .86) !important;
    border-color: rgba(221, 103, 139, .24) !important;
    box-shadow: 0 18px 42px rgba(149, 55, 84, .12) !important;
}

.theme-sakura-jepang .font-esthetic,
.theme-sakura-jepang .text-theme-auto {
    color: #c64f77 !important;
}

.sakura-sun {
    position: absolute;
    top: 8%;
    right: max(1rem, calc(50vw - 290px));
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 147, 163, .28), rgba(255, 147, 163, .06) 62%, transparent 64%);
    animation: pulseHalo 8s ease-in-out infinite;
}

.sakura-branch {
    position: absolute;
    top: 9%;
    width: 210px;
    height: 2px;
    background: rgba(112, 60, 70, .28);
}

.sakura-branch::before,
.sakura-branch::after {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 80% 0 80% 0;
    background: rgba(255, 137, 161, .46);
}

.sakura-branch::before { left: 36%; top: -19px; transform: rotate(18deg); }
.sakura-branch::after { left: 62%; top: 3px; transform: rotate(54deg); }
.sakura-branch.branch-left { left: -36px; transform: rotate(24deg); }
.sakura-branch.branch-right { right: -36px; transform: scaleX(-1) rotate(24deg); }

.theme-islami-elegan .bg-light-dark,
.theme-islami-elegan .bg-white-black {
    background-image:
        radial-gradient(circle at 50% 0, rgba(12, 112, 78, .14), transparent 21rem),
        linear-gradient(135deg, rgba(18, 53, 36, .055) 25%, transparent 25%),
        linear-gradient(225deg, rgba(18, 53, 36, .045) 25%, transparent 25%),
        linear-gradient(45deg, rgba(18, 53, 36, .04) 25%, transparent 25%),
        linear-gradient(315deg, rgba(18, 53, 36, .04) 25%, transparent 25%);
    background-size: auto, 34px 34px, 34px 34px, 34px 34px, 34px 34px;
}

.theme-islami-elegan .bg-theme-auto,
.theme-islami-elegan .border.rounded-5.shadow,
.theme-islami-elegan .border.rounded-pill.shadow {
    background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(240, 247, 244, .86)) !important;
    border-color: rgba(18, 83, 58, .25) !important;
    box-shadow: 0 18px 42px rgba(18, 53, 36, .12) !important;
}

.theme-islami-elegan .font-esthetic,
.theme-islami-elegan .text-theme-auto {
    color: #0f6b4a !important;
}

.islamic-arch-pattern {
    position: absolute;
    inset: 0;
    opacity: .12;
    background:
        radial-gradient(ellipse at 50% 100%, transparent 0 44%, rgba(18, 83, 58, .65) 45% 47%, transparent 48%) 0 0 / 96px 120px;
    animation: motifSlideX 48s linear infinite;
}

.islamic-star-ring {
    position: absolute;
    top: 12%;
    left: 50%;
    width: 150px;
    height: 150px;
    border: 1px solid rgba(18, 83, 58, .18);
    transform: translateX(-50%) rotate(45deg);
    animation: rotateCircle 34s linear infinite;
}

.islamic-star-ring::after {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(18, 83, 58, .18);
}

.theme-batik-nusantara .bg-light-dark,
.theme-batik-nusantara .bg-white-black {
    background-image:
        radial-gradient(circle at 24px 24px, rgba(112, 58, 8, .16) 0 8px, transparent 9px),
        radial-gradient(circle at 48px 48px, rgba(153, 82, 17, .12) 0 10px, transparent 11px),
        repeating-linear-gradient(45deg, rgba(54, 34, 4, .06) 0 2px, transparent 2px 20px);
    background-size: 96px 96px, 96px 96px, 42px 42px;
}

.theme-batik-nusantara .bg-theme-auto,
.theme-batik-nusantara .border.rounded-5.shadow,
.theme-batik-nusantara .border.rounded-pill.shadow {
    background: rgba(250, 246, 239, .9) !important;
    border: 1px solid rgba(113, 65, 12, .28) !important;
    box-shadow: 0 18px 38px rgba(54, 34, 4, .15), inset 0 0 0 1px rgba(255, 235, 198, .55) !important;
}

.theme-batik-nusantara .font-esthetic,
.theme-batik-nusantara .text-theme-auto {
    color: #8f4f10 !important;
}

.batik-corner {
    position: absolute;
    top: 50%;
    width: 130px;
    height: 70vh;
    opacity: .12;
    background:
        radial-gradient(circle at 50% 16px, transparent 0 12px, rgba(54, 34, 4, .75) 13px 15px, transparent 16px),
        linear-gradient(90deg, rgba(54, 34, 4, .6), transparent 2px);
    background-size: 52px 52px;
}

.batik-corner.left { left: 0; transform: translateY(-50%); }
.batik-corner.right { right: 0; transform: translateY(-50%) scaleX(-1); }

.theme-garden-party .bg-light-dark,
.theme-garden-party .bg-white-black {
    background-image:
        radial-gradient(circle at 20% 12%, rgba(105, 170, 115, .18), transparent 12rem),
        radial-gradient(circle at 82% 86%, rgba(245, 182, 195, .16), transparent 13rem),
        linear-gradient(135deg, rgba(45, 106, 79, .045) 25%, transparent 25%);
    background-size: auto, auto, 42px 42px;
}

.theme-garden-party .bg-theme-auto,
.theme-garden-party .border.rounded-5.shadow,
.theme-garden-party .border.rounded-pill.shadow {
    background: rgba(255, 255, 255, .84) !important;
    border-color: rgba(45, 106, 79, .22) !important;
    box-shadow: 0 18px 40px rgba(27, 67, 50, .12) !important;
}

.theme-garden-party .font-esthetic,
.theme-garden-party .text-theme-auto {
    color: #2d6a4f !important;
}

.garden-vine {
    position: absolute;
    left: 0;
    width: 100%;
    height: 90px;
    opacity: .2;
    background:
        radial-gradient(ellipse at 18px 34px, rgba(45, 106, 79, .7) 0 7px, transparent 8px),
        radial-gradient(ellipse at 42px 54px, rgba(245, 159, 177, .52) 0 6px, transparent 7px),
        linear-gradient(100deg, transparent 0 42%, rgba(45, 106, 79, .55) 43% 45%, transparent 46%);
    background-size: 70px 90px;
    animation: motifSlideX 42s linear infinite;
}

.garden-vine.top { top: 0; }
.garden-vine.bottom { bottom: 0; transform: rotate(180deg); }

.theme-ana-danu .bg-white-black {
    background:
        linear-gradient(rgba(255, 248, 250, .68), rgba(255, 248, 250, .68)),
        url('../img/ana-danu-paper.jpg') repeat center !important;
    background-size: cover !important;
}

.theme-ana-danu .bg-theme-auto,
.theme-ana-danu .border.rounded-5.shadow,
.theme-ana-danu .border.rounded-pill.shadow {
    background: rgba(255, 248, 250, .76) !important;
    border-color: rgba(32, 50, 68, .18) !important;
    box-shadow: 0 18px 42px rgba(32, 50, 68, .12) !important;
}

.theme-ana-danu .font-esthetic,
.theme-ana-danu .text-theme-auto {
    color: #31516d !important;
}

.ana-danu-lace {
    position: absolute;
    left: 0;
    width: 100%;
    height: 78px;
    opacity: .18;
    background:
        radial-gradient(circle at 18px 42px, transparent 0 16px, rgba(32, 50, 68, .42) 17px 19px, transparent 20px),
        radial-gradient(circle at 54px 42px, transparent 0 16px, rgba(226, 143, 160, .5) 17px 19px, transparent 20px);
    background-size: 72px 78px;
}

.ana-danu-lace.top { top: 0; }
.ana-danu-lace.bottom { bottom: 0; transform: rotate(180deg); }

.theme-zedlabs-editorial .bg-light-dark,
.theme-zedlabs-editorial .bg-white-black {
    background-image:
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        radial-gradient(circle at 50% 8%, rgba(148, 163, 184, .12), transparent 22rem);
    background-size: 88px 88px, 88px 88px, auto;
}

.theme-zedlabs-editorial .font-esthetic,
.theme-zedlabs-editorial .text-theme-auto {
    color: #e2e8f0 !important;
}

.editorial-rule {
    position: absolute;
    top: 9vh;
    bottom: 9vh;
    width: 1px;
    background: linear-gradient(transparent, rgba(226, 232, 240, .28), transparent);
}

.editorial-rule.left { left: max(18px, calc(50vw - 320px)); }
.editorial-rule.right { right: max(18px, calc(50vw - 320px)); }

@keyframes motifSlideX {
    0% { background-position: 0 0; }
    100% { background-position: 220px 0; }
}

@keyframes motifDrift {
    0% { background-position: 0 0; }
    100% { background-position: 180px 140px; }
}

@keyframes pulseHalo {
    0%, 100% { opacity: .42; transform: scale(1); }
    50% { opacity: .82; transform: scale(1.05); }
}

/* =========================================
   THEME TYPOGRAPHY
   ========================================= */

/* 1. Modern Minimalist */
.theme-modern-minimalist { font-family: "Inter", sans-serif; }
.theme-modern-minimalist h1, .theme-modern-minimalist h2, .theme-modern-minimalist h3, .theme-modern-minimalist h4, .theme-modern-minimalist h5, .theme-modern-minimalist h6 { font-family: "Playfair Display", serif; }
.theme-modern-minimalist .font-esthetic { font-family: "Sacramento", cursive; }

/* 2. Adat Jawa */
.theme-adat-jawa { font-family: "Lora", serif; }
.theme-adat-jawa h1, .theme-adat-jawa h2, .theme-adat-jawa h3, .theme-adat-jawa h4, .theme-adat-jawa h5, .theme-adat-jawa h6 { font-family: "Cinzel", serif; }
.theme-adat-jawa .font-esthetic { font-family: "Tangerine", cursive; }

/* 3. Elegant Luxury */
.theme-elegant-luxury { font-family: "Cormorant Garamond", serif; }
.theme-elegant-luxury h1, .theme-elegant-luxury h2, .theme-elegant-luxury h3, .theme-elegant-luxury h4, .theme-elegant-luxury h5, .theme-elegant-luxury h6 { font-family: "Cinzel Decorative", serif; }
.theme-elegant-luxury .font-esthetic { font-family: "Pinyon Script", cursive; }

/* 4. Royal Gold */
.theme-royal-gold { font-family: "Playfair Display", serif; }
.theme-royal-gold h1, .theme-royal-gold h2, .theme-royal-gold h3, .theme-royal-gold h4, .theme-royal-gold h5, .theme-royal-gold h6 { font-family: "Prata", serif; }
.theme-royal-gold .font-esthetic { font-family: "Allura", cursive; }

/* 5. Vintage Classic */
.theme-vintage-classic { font-family: "Merriweather", serif; }
.theme-vintage-classic h1, .theme-vintage-classic h2, .theme-vintage-classic h3, .theme-vintage-classic h4, .theme-vintage-classic h5, .theme-vintage-classic h6 { font-family: "Abril Fatface", serif; }
.theme-vintage-classic .font-esthetic { font-family: "Parisienne", cursive; }

/* 7. Dark Premium */
.theme-dark-premium { font-family: "Roboto", sans-serif; }
.theme-dark-premium h1, .theme-dark-premium h2, .theme-dark-premium h3, .theme-dark-premium h4, .theme-dark-premium h5, .theme-dark-premium h6 { font-family: "Oswald", sans-serif; }
.theme-dark-premium .font-esthetic { font-family: "Mr De Haviland", cursive; }

/* 8. Sakura Jepang */
.theme-sakura-jepang { font-family: "Noto Sans JP", sans-serif; }
.theme-sakura-jepang h1, .theme-sakura-jepang h2, .theme-sakura-jepang h3, .theme-sakura-jepang h4, .theme-sakura-jepang h5, .theme-sakura-jepang h6 { font-family: "M PLUS Rounded 1c", sans-serif; }
.theme-sakura-jepang .font-esthetic { font-family: "Yesteryear", cursive; }

/* 9. Islami Elegan */
.theme-islami-elegan { font-family: "Amiri", serif; }
.theme-islami-elegan h1, .theme-islami-elegan h2, .theme-islami-elegan h3, .theme-islami-elegan h4, .theme-islami-elegan h5, .theme-islami-elegan h6 { font-family: "Aref Ruqaa", serif; }
.theme-islami-elegan .font-esthetic { font-family: "Great Vibes", cursive; }

/* 10. Batik Nusantara */
.theme-batik-nusantara { font-family: "Asap", sans-serif; }
.theme-batik-nusantara h1, .theme-batik-nusantara h2, .theme-batik-nusantara h3, .theme-batik-nusantara h4, .theme-batik-nusantara h5, .theme-batik-nusantara h6 { font-family: "Vast Shadow", serif; }
.theme-batik-nusantara .font-esthetic { font-family: "Berkshire Swash", cursive; }

/* 11. Garden Party */
.theme-garden-party { font-family: "Nunito", sans-serif; }
.theme-garden-party h1, .theme-garden-party h2, .theme-garden-party h3, .theme-garden-party h4, .theme-garden-party h5, .theme-garden-party h6 { font-family: "Amatic SC", cursive; }
.theme-garden-party .font-esthetic { font-family: "Clicker Script", cursive; }

/* 13. Editorial Slate (ZEDLABS) */
.theme-zedlabs-editorial { font-family: "Outfit", sans-serif; }
.theme-zedlabs-editorial h1, .theme-zedlabs-editorial h2, .theme-zedlabs-editorial h3, .theme-zedlabs-editorial h4, .theme-zedlabs-editorial h5, .theme-zedlabs-editorial h6 { font-family: "Cormorant Garamond", serif; }
.theme-zedlabs-editorial .font-esthetic { font-family: "Sacramento", cursive; }

.theme-zedlabs-editorial {
    --bs-light: #020617; /* Slate 950 - Main BG */
    --bs-white: #0f172a; /* Slate 900 - Surface */
    --bs-dark: #fafaf9;  /* Stone 50 - Text */
    --bs-gray-100: #1e293b; /* Slate 800 - Borders */
    color: var(--bs-dark);
}

.theme-zedlabs-editorial .grain {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image:
        radial-gradient(circle at 18% 24%, rgba(255, 255, 255, .18) 0 1px, transparent 1px),
        radial-gradient(circle at 76% 12%, rgba(255, 255, 255, .12) 0 1px, transparent 1px),
        radial-gradient(circle at 42% 72%, rgba(255, 255, 255, .1) 0 1px, transparent 1px),
        radial-gradient(circle at 90% 64%, rgba(255, 255, 255, .14) 0 1px, transparent 1px);
    background-size: 34px 34px, 46px 46px, 58px 58px, 71px 71px;
    opacity: 0.04;
    pointer-events: none;
    z-index: 9999;
}

.theme-zedlabs-editorial .bg-overlay-auto,
.theme-zedlabs-editorial .panel,
.theme-zedlabs-editorial .modal-content {
    background: rgba(15, 23, 42, 0.7) !important; /* Slate 900 */
    backdrop-filter: blur(20px) saturate(160%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
    border-radius: 4px !important;
    color: var(--bs-dark) !important;
}

.theme-zedlabs-editorial .btn-outline-auto,
.theme-zedlabs-editorial .btn-primary {
    border-radius: 2px !important;
    letter-spacing: 0.1em;
}

@keyframes floatPetal {
    0% { transform: translateY(-10px) rotate(0deg); opacity: 0; }
    50% { opacity: 0.7; }
    100% { transform: translateY(100vh) rotate(360deg); opacity: 0; }
}

.theme-zedlabs-editorial .petals-container {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 1000;
    overflow: hidden;
}

.theme-zedlabs-editorial .petal {
    position: absolute;
    width: 15px; height: 15px;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.8), rgba(255,255,255,0.3));
    border-radius: 50% 0 50% 50%;
    animation: floatPetal 15s linear infinite;
    top: -20px;
}
.theme-zedlabs-editorial .petal.petal-1 { left: 10%; animation-duration: 12s; animation-delay: 0s; }
.theme-zedlabs-editorial .petal.petal-2 { left: 30%; animation-duration: 15s; animation-delay: 2s; }
.theme-zedlabs-editorial .petal.petal-3 { left: 50%; animation-duration: 18s; animation-delay: 4s; }
.theme-zedlabs-editorial .petal.petal-4 { left: 70%; animation-duration: 14s; animation-delay: 1s; }
.theme-zedlabs-editorial .petal.petal-5 { left: 90%; animation-duration: 16s; animation-delay: 3s; }
.theme-zedlabs-editorial .petal.petal-6 { left: 20%; animation-duration: 13s; animation-delay: 5s; }
.theme-zedlabs-editorial .petal.petal-7 { left: 40%; animation-duration: 17s; animation-delay: 2s; }
.theme-zedlabs-editorial .petal.petal-8 { left: 60%; animation-duration: 11s; animation-delay: 4s; }
/* 14. Full Photo */
.theme-full-photo {
    --bs-light: rgba(0, 0, 0, 0.5);
    --bs-white: rgba(0, 0, 0, 0.35);
    --bs-dark: #ffffff;
    --bs-gray-100: rgba(0, 0, 0, 0.45);
    --bs-body-bg: transparent;
    color: var(--bs-dark);
}
.theme-full-photo .font-esthetic { font-family: "Great Vibes", cursive; }
.theme-full-photo h1, .theme-full-photo h2, .theme-full-photo h3, .theme-full-photo h4, .theme-full-photo h5, .theme-full-photo h6 { font-family: "Playfair Display", serif; }
.theme-full-photo { font-family: "Montserrat", sans-serif; }

/* Bug #1 & #2: Lock scroll before invitation is opened */
body.theme-full-photo:not(.is-open) { overflow: hidden !important; }
body.theme-full-photo:not(.is-open) #root {
    opacity: 0;
    pointer-events: none;
    height: 100vh;
    overflow: hidden;
}
body.theme-full-photo.is-open #root {
    opacity: 1;
    pointer-events: auto;
    height: auto;
    overflow: visible;
    transition: opacity 1s ease-in-out;
}
body.is-paged,
body.theme-full-photo.is-paged {
    height: 100vh;
    height: 100dvh;
    overflow: hidden !important;
    overscroll-behavior: none;
    scroll-snap-type: none;
}
body.is-paged #root,
body.theme-full-photo.is-paged #root {
    position: fixed;
    inset: 0;
    z-index: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    opacity: 1;
    pointer-events: auto;
    justify-content: center !important;
}

/* Bug #3: Make all section backgrounds transparent so photo shows through */
body.theme-full-photo,
body.theme-full-photo section,
body.theme-full-photo .col-sm-7,
body.theme-full-photo .bg-light-dark,
body.theme-full-photo .bg-white-black {
    background-color: transparent !important;
}

/* Translucent panels keep text readable over full-photo backgrounds. */
body.theme-full-photo .bg-theme-auto,
body.theme-full-photo .panel,
body.theme-full-photo .modal-content,
body.theme-full-photo .border.rounded-5.shadow,
body.theme-full-photo .border.rounded-pill.shadow {
    background-color: rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* Bug #4: Hide SVG wave separators completely */
body.theme-full-photo .svg-wrapper { display: none !important; }

/* Scroll-reveal animation for each section */
body.theme-full-photo main > section,
body.theme-full-photo main > .svg-wrapper + section {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
body.theme-full-photo main > section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Blur effect on the first page (#home) after open invitation */
body.theme-full-photo #home {
    position: relative;
    isolation: isolate;
    background: transparent !important;
}
body.theme-full-photo #home::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.18) 0%,
        rgba(0, 0, 0, 0.18) 42%,
        rgba(0, 0, 0, 0.62) 100%
    );
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
body.theme-full-photo #home > .bg-overlay-auto {
    z-index: 1;
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.theme-full-photo .color-theme-svg {
    background-color: transparent !important;
    color: rgba(0, 0, 0, 0.4) !important;
}
body.theme-full-photo .svg-wrapper:nth-of-type(even) .color-theme-svg {
    color: rgba(0, 0, 0, 0.3) !important;
}

/* Bug #5: Hide desktop left panel, make content full-width but centered */
body.theme-full-photo .sticky-top.vh-100.d-none.d-sm-block { display: none !important; }
body.theme-full-photo .col-sm-7,
body.theme-full-photo .col-md-6,
body.theme-full-photo .col-lg-5,
body.theme-full-photo .col-xl-4,
body.theme-full-photo .col-xxl-3 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

/* Responsive content centering */
body.theme-full-photo main {
    max-width: 600px;
    margin: 0 auto;
}
body.theme-full-photo #root {
    justify-content: center !important;
}

/* Navbar follows content width */
body.theme-full-photo #navbar-menu {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 1rem 1rem 0 0 !important;
}
body.is-paged #navbar-menu,
body.theme-full-photo.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 !important;
}

/* Audio float repositioned for full-photo centered layout */
body.theme-full-photo .audio-float {
    /* Position relative to centered content, not viewport edge */
    right: auto;
    left: 50%;
    transform: translateX(280px); /* half of max-width (600/2) minus small offset */
}

/* Full-photo can use photo-friendly decorative ornaments. */
body.theme-full-photo #theme-ornaments {
    display: block !important;
}

/* 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 .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,
body.theme-full-photo.is-paged .col-sm-7,
body.theme-full-photo.is-paged .col-md-6,
body.theme-full-photo.is-paged .col-lg-5,
body.theme-full-photo.is-paged .col-xl-4,
body.theme-full-photo.is-paged .col-xxl-3 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    position: relative;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}
body.is-paged main,
body.theme-full-photo.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.theme-wayang-kencana.is-paged main {
    width: min(100%, 720px);
    max-width: 720px;
}

body.theme-wayang-kencana.is-paged #theme-ornaments {
    z-index: 1;
}

body.theme-wayang-kencana.is-paged #root {
    z-index: 2;
    background: transparent !important;
}

body.theme-wayang-kencana.is-paged #root > .col-sm-7,
body.theme-wayang-kencana.is-paged #root > .col-md-6,
body.theme-wayang-kencana.is-paged #root > .col-lg-5,
body.theme-wayang-kencana.is-paged #root > .col-xl-4,
body.theme-wayang-kencana.is-paged #root > .col-xxl-3,
body.theme-wayang-kencana.is-paged main,
body.theme-wayang-kencana.is-paged main > section {
    background-color: transparent !important;
}

body.theme-wayang-kencana.is-paged main > section {
    background-image: none !important;
}

body.is-paged main > section,
body.theme-full-photo.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,
body.theme-full-photo.is-paged main > section > .container {
    width: 100%;
    max-width: min(100%, 560px);
}
body.is-paged main > section::-webkit-scrollbar {
    display: none;
}
body.is-paged #home > .bg-overlay-auto,
body.theme-full-photo.is-paged #home > .bg-overlay-auto {
    min-height: 0;
}
body.is-paged .invitation-reveal-item,
body.theme-full-photo.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,
body.theme-full-photo.is-paged .invitation-reveal-item.reveal-from-top {
    --item-reveal-y: -26px;
    --item-reveal-scale: .99;
}
body.is-paged .invitation-reveal-item.reveal-zoom,
body.theme-full-photo.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,
body.theme-full-photo.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,
body.theme-full-photo.is-paged main > section.is-leaving-section .invitation-reveal-item {
    opacity: 1;
    filter: none;
    transform: none;
}
@keyframes invitationRevealIn {
    0% {
        opacity: 0;
        transform: translate3d(var(--item-reveal-x), var(--item-reveal-y), 0) scale(var(--item-reveal-scale));
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.is-paged main,
    body.is-paged main > section.is-active-section .invitation-reveal-item,
    body.theme-full-photo.is-paged main,
    body.theme-full-photo.is-paged main > section.is-active-section .invitation-reveal-item {
        transition: none !important;
        animation: none !important;
    }
    body.is-paged .invitation-reveal-item,
    body.theme-full-photo.is-paged .invitation-reveal-item {
        opacity: 1;
        filter: none;
        transform: none;
    }
}

@media (max-width: 575.98px) {
    body.is-paged main,
    body.theme-full-photo.is-paged main {
        max-width: 100%;
    }
    body.is-paged #navbar-menu,
    body.theme-full-photo.is-paged #navbar-menu {
        max-width: 100%;
        border-radius: 0 !important;
    }
    body.is-paged main section .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    body.is-paged main > section,
    body.theme-full-photo.is-paged main > section {
        padding-top: 1.5rem !important;
        padding-bottom: 60px !important;
    }
}

/* Full-screen sections with centered content */
body.theme-full-photo main > section {
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height for mobile browsers */
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    padding-top: 2rem !important;
    padding-bottom: 70px !important; /* Clearance for sticky navbar */
    box-sizing: border-box;
}

/* Scroll snap for page-by-page scrolling */
body.theme-full-photo {
    scroll-snap-type: y proximity;
}
body.theme-full-photo main > section {
    scroll-snap-align: start;
}

/* Keep dense sections close to one viewport in the full-photo story flow */
body.theme-full-photo #bride {
    gap: .75rem;
}
body.theme-full-photo #bride .font-arabic,
body.theme-full-photo #bride > .font-esthetic {
    padding-top: .75rem !important;
    padding-bottom: .75rem !important;
    line-height: 1.35;
}
body.theme-full-photo #bride > p {
    padding-bottom: .75rem !important;
}
body.theme-full-photo #bride .img-center-crop {
    width: 10rem;
    height: 10rem;
    margin-top: .75rem !important;
    margin-bottom: .75rem !important;
}
body.theme-full-photo #bride .overflow-x-hidden {
    width: 100%;
}
body.theme-full-photo #bride .overflow-x-hidden > .font-esthetic {
    font-size: 3rem !important;
    line-height: 1;
    margin-top: .75rem !important;
    margin-bottom: .25rem !important;
}
body.theme-full-photo #gallery .carousel .gallery-photo {
    height: min(54vh, 560px);
    aspect-ratio: auto;
}
body.theme-full-photo #gallery .row.g-2.mt-3 {
    flex-wrap: nowrap;
}
body.theme-full-photo #gallery .row.g-2.mt-3 > .col-6 {
    flex: 0 0 25%;
    max-width: 25%;
}
body.theme-full-photo #gallery .row.g-2.mt-3 .gallery-photo {
    height: clamp(64px, 18vw, 120px);
    aspect-ratio: auto;
}

/* Mobile (< 576px) */
@media (max-width: 575.98px) {
    body.theme-full-photo main { max-width: 100%; }
    body.theme-full-photo #navbar-menu { max-width: 100%; border-radius: 0 !important; }
    body.theme-full-photo main section .container { padding-left: 1rem; padding-right: 1rem; }
    body.theme-full-photo main > section {
        padding-top: 1.5rem !important;
        padding-bottom: 60px !important;
    }
    body.theme-full-photo #bride {
        gap: .5rem;
    }
    body.theme-full-photo #bride .font-arabic,
    body.theme-full-photo #bride > .font-esthetic {
        font-size: 1.6rem !important;
        padding-top: .5rem !important;
        padding-bottom: .5rem !important;
    }
    body.theme-full-photo #bride > p,
    body.theme-full-photo #bride .pb-1,
    body.theme-full-photo #bride .overflow-x-hidden {
        padding-bottom: .25rem !important;
    }
    body.theme-full-photo #bride .img-center-crop {
        width: 7.8rem;
        height: 7.8rem;
        margin-top: .5rem !important;
        margin-bottom: .5rem !important;
    }
    body.theme-full-photo #bride .overflow-x-hidden > .font-esthetic {
        font-size: 2.45rem !important;
        margin-top: .35rem !important;
        margin-bottom: 0 !important;
    }
    body.theme-full-photo #bride h2[style*="2.125rem"] {
        font-size: 1.8rem !important;
    }
    body.theme-full-photo #bride p {
        font-size: .86rem !important;
        line-height: 1.35;
    }
    body.theme-full-photo #gallery .carousel .gallery-photo {
        height: min(42vh, 360px);
    }
    body.theme-full-photo #gallery .row.g-2.mt-3 .gallery-photo {
        height: clamp(58px, 18vw, 76px);
    }
    body.theme-full-photo .audio-float {
        left: auto;
        right: 2vh;
        transform: none;
    }
}

/* Tablet (576px - 991px) */
@media (min-width: 576px) and (max-width: 991.98px) {
    body.theme-full-photo main { max-width: 550px; }
    body.theme-full-photo #navbar-menu { max-width: 550px; }
    body.theme-full-photo #bride .overflow-x-hidden {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
        gap: .75rem;
    }
    body.theme-full-photo #bride .img-center-crop {
        width: 8.5rem;
        height: 8.5rem;
    }
    body.theme-full-photo .audio-float {
        transform: translateX(255px); /* 550/2 minus offset */
    }
}

/* Desktop (>= 992px) */
@media (min-width: 992px) {
    body.theme-full-photo main { max-width: 650px; }
    body.theme-full-photo #navbar-menu { max-width: 650px; }
    body.theme-full-photo #bride .overflow-x-hidden {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
        gap: 1rem;
    }
    body.theme-full-photo .audio-float {
        transform: translateX(305px); /* 650/2 minus offset */
    }
}

/* Large Desktop (>= 1200px) */
@media (min-width: 1200px) {
    body.theme-full-photo main { max-width: 700px; }
    body.theme-full-photo #navbar-menu { max-width: 700px; }
    body.theme-full-photo .audio-float {
        transform: translateX(330px); /* 700/2 minus offset */
    }
}

/* Bug #6: Navbar semi-transparent with blur */
body.theme-full-photo .navbar {
    background-color: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-color: rgba(255, 255, 255, 0.1) !important;
}
body.theme-full-photo .navbar .nav-link { color: rgba(255, 255, 255, 0.6); }
body.theme-full-photo .navbar .nav-link.active, body.theme-full-photo .navbar .nav-link:hover { color: #ffffff; }

/* Welcome page: hide circle photo, sharp bg, readable text */
body.theme-full-photo .loading-page {
    background: transparent !important;
}
body.theme-full-photo .loading-page .img-center-crop {
    display: none !important;
}
body.theme-full-photo .loading-page h2,
body.theme-full-photo .loading-page small,
body.theme-full-photo .loading-page strong,
body.theme-full-photo .loading-page div {
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8), 0 0 40px rgba(0, 0, 0, 0.5);
}
body.theme-full-photo .loading-page small {
    color: rgba(255, 255, 255, 0.85) !important;
}
body.theme-full-photo .loading-page strong {
    color: #ffffff !important;
    font-size: 1.15rem;
}
body.theme-full-photo .loading-page #button-open-invitation {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Text & UI colors */
body.theme-full-photo .text-theme-auto { color: #ffffff !important; }
body.theme-full-photo .text-secondary, body.theme-full-photo .text-muted { color: rgba(255, 255, 255, 0.7) !important; }
body.theme-full-photo .btn-outline-auto {
    --bs-btn-color: #ffffff;
    --bs-btn-border-color: #ffffff;
    --bs-btn-hover-color: #000000;
    --bs-btn-hover-bg: #ffffff;
    --bs-btn-hover-border-color: #ffffff;
}
body.theme-full-photo main > section:not(#home) {
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.72);
}
body.theme-full-photo main > section:not(#home) .btn,
body.theme-full-photo main > section:not(#home) .form-control,
body.theme-full-photo main > section:not(#home) .form-select,
body.theme-full-photo main > section:not(#home) textarea {
    text-shadow: none;
}
body.theme-full-photo .form-control, body.theme-full-photo .form-select {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
}
body.theme-full-photo .form-control::placeholder { color: rgba(255, 255, 255, 0.5); }
body.theme-full-photo #home img.bg-cover-home { display: none !important; }
body.theme-full-photo .bg-overlay-auto {
    background-color: rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(4px);
}
body.theme-full-photo .bg-white-black.border {
    background-color: rgba(0, 0, 0, 0.35) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Final mobile guard for theme-specific ornaments declared later in the file */
@media (max-width: 575.98px) {
    .ornament-jawa-rama-sinta {
        height: 155px !important;
        max-width: 100% !important;
    }

    .petal,
    .theme-zedlabs-editorial .petal {
        width: 14px !important;
        height: 14px !important;
    }

    .leaf {
        font-size: 1.35rem !important;
    }

    .lantern {
        font-size: 2.4rem !important;
    }

    .lantern.left {
        left: 7% !important;
    }

    .lantern.right {
        left: auto !important;
        right: 7% !important;
        font-size: 3rem !important;
    }

    .royal-frame {
        inset: 10px !important;
        padding-top: 28px !important;
        border-width: 2px !important;
    }

    .royal-crown {
        font-size: 2.7rem !important;
    }

    .minimalist-circle {
        width: 80vw !important;
        height: 80vw !important;
        left: -42vw !important;
    }

    .vintage-flourish {
        height: 90px !important;
    }

    .theme-signature {
        top: clamp(2.6rem, 6.8vh, 4.25rem) !important;
        width: clamp(78px, 24vw, 112px) !important;
        height: clamp(78px, 24vw, 112px) !important;
        filter: drop-shadow(0 10px 14px rgba(31, 21, 8, .14)) !important;
    }

    .signature-adat-jawa {
        top: clamp(2.1rem, 5.8vh, 3.65rem) !important;
        width: clamp(82px, 25vw, 108px) !important;
        height: clamp(112px, 33vw, 148px) !important;
    }

    .signature-sakura-jepang,
    .signature-vintage-classic,
    .signature-zedlabs-editorial {
        width: clamp(108px, 34vw, 146px) !important;
        height: clamp(62px, 19vw, 86px) !important;
    }

    body.is-paged #theme-ornaments:not([data-active-section="0"]) .theme-signature {
        top: .8rem !important;
    }

    .neon-grid {
        background-size: 36px 36px !important;
        transform: perspective(500px) rotateX(60deg) translateY(-90px) translateZ(-160px) !important;
    }

    .shooting-star {
        height: 58px !important;
    }
}

/* 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,
body.theme-full-photo.is-paged #bride > .overflow-x-hidden {
    width: 100%;
    overflow: hidden !important;
}

@media (min-width: 576px) {
    body.is-paged #bride,
    body.theme-full-photo.is-paged #bride {
        gap: .65rem;
    }

    body.is-paged #bride .font-arabic,
    body.theme-full-photo.is-paged #bride .font-arabic,
    body.is-paged #bride > .font-esthetic,
    body.theme-full-photo.is-paged #bride > .font-esthetic {
        padding-top: .5rem !important;
        padding-bottom: .5rem !important;
        line-height: 1.2;
    }

    body.is-paged #bride > p,
    body.theme-full-photo.is-paged #bride > p {
        padding-bottom: .4rem !important;
    }

    body.is-paged #bride > .overflow-x-hidden,
    body.theme-full-photo.is-paged #bride > .overflow-x-hidden {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
        gap: .85rem;
        padding-bottom: .25rem !important;
    }

    body.is-paged #bride .img-center-crop,
    body.theme-full-photo.is-paged #bride .img-center-crop {
        width: clamp(7rem, 17vh, 9rem) !important;
        height: clamp(7rem, 17vh, 9rem) !important;
        margin-top: .7rem !important;
        margin-bottom: .7rem !important;
    }

    body.is-paged #bride .overflow-x-hidden > .font-esthetic,
    body.theme-full-photo.is-paged #bride .overflow-x-hidden > .font-esthetic {
        font-size: clamp(2.4rem, 7vh, 3.5rem) !important;
        line-height: .9;
        margin: 0 !important;
    }
}

@media (max-width: 575.98px) {
    body.is-paged #bride,
    body.theme-full-photo.is-paged #bride {
        justify-content: center;
        gap: .12rem !important;
        padding-top: .5rem !important;
        padding-bottom: 3.75rem !important;
    }

    body.is-paged #bride .font-arabic,
    body.theme-full-photo.is-paged #bride .font-arabic {
        width: min(100%, 18rem);
        max-width: calc(100% - 1rem);
        align-self: center;
        font-size: clamp(1.04rem, 4.9vw, 1.32rem) !important;
        line-height: 1.2 !important;
        padding-top: 0 !important;
        padding-bottom: .18rem !important;
        white-space: normal;
        text-wrap: balance;
    }

    body.is-paged #bride > .font-esthetic,
    body.theme-full-photo.is-paged #bride > .font-esthetic {
        width: min(100%, 18rem);
        max-width: calc(100% - 1rem);
        align-self: center;
        font-size: clamp(1.02rem, 4.95vw, 1.36rem) !important;
        line-height: 1.05 !important;
        padding-top: .05rem !important;
        padding-bottom: .18rem !important;
        margin: 0 !important;
        white-space: normal;
        text-wrap: balance;
    }

    body.is-paged #bride > p,
    body.theme-full-photo.is-paged #bride > p {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        font-size: clamp(.68rem, 2.95vw, .78rem) !important;
        line-height: 1.26 !important;
        margin: 0 !important;
        padding: 0 .7rem .15rem !important;
    }

    body.is-paged #bride > .overflow-x-hidden,
    body.theme-full-photo.is-paged #bride > .overflow-x-hidden {
        padding-bottom: 0 !important;
    }

    body.is-paged #bride .overflow-x-hidden > .position-relative,
    body.theme-full-photo.is-paged #bride .overflow-x-hidden > .position-relative {
        margin: 0 !important;
    }

    body.is-paged #bride .pb-1,
    body.theme-full-photo.is-paged #bride .pb-1 {
        padding-bottom: 0 !important;
    }

    body.is-paged #bride .img-center-crop,
    body.theme-full-photo.is-paged #bride .img-center-crop {
        width: clamp(6rem, 32vw, 7.25rem) !important;
        height: clamp(6rem, 32vw, 7.25rem) !important;
        margin-top: .18rem !important;
        margin-bottom: .2rem !important;
    }

    body.is-paged #bride h2[style*="2.125rem"],
    body.theme-full-photo.is-paged #bride h2[style*="2.125rem"] {
        font-size: clamp(1.35rem, 6.6vw, 1.75rem) !important;
        line-height: 1.02 !important;
        margin: 0 !important;
    }

    body.is-paged #bride .overflow-x-hidden > .font-esthetic,
    body.theme-full-photo.is-paged #bride .overflow-x-hidden > .font-esthetic {
        font-size: clamp(2.25rem, 10vw, 3rem) !important;
        line-height: .78 !important;
        margin-top: .02rem !important;
        margin-bottom: .02rem !important;
    }

    body.is-paged #bride .overflow-x-hidden p,
    body.theme-full-photo.is-paged #bride .overflow-x-hidden p {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        font-size: clamp(.62rem, 2.7vw, .72rem) !important;
        line-height: 1.18 !important;
        margin-top: .16rem !important;
        margin-bottom: 0 !important;
        padding-left: .5rem !important;
        padding-right: .5rem !important;
    }

    body.is-paged #bride .animate-love,
    body.theme-full-photo.is-paged #bride .animate-love {
        font-size: 1.28rem !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,
body.theme-full-photo.is-paged #gallery > .container {
    width: 100%;
    min-height: 0;
    max-height: 100%;
}

body.is-paged #gallery .border.rounded-5.shadow,
body.theme-full-photo.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,
body.theme-full-photo.is-paged #gallery h2 {
    flex: 0 0 auto;
}

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

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

body.is-paged #gallery .carousel .gallery-photo,
body.theme-full-photo.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,
body.theme-full-photo.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,
body.theme-full-photo.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,
body.theme-full-photo.is-paged #gallery .row.g-2.mt-3 .gallery-photo {
    height: clamp(52px, 16vw, 82px);
    aspect-ratio: auto;
}

@media (max-width: 575.98px) {
    body.is-paged #gallery,
    body.theme-full-photo.is-paged #gallery {
        padding-top: .75rem !important;
        padding-bottom: 3.75rem !important;
    }

    body.is-paged #gallery .border.rounded-5.shadow,
    body.theme-full-photo.is-paged #gallery .border.rounded-5.shadow {
        max-height: calc(100vh - 86px);
        max-height: calc(100dvh - 86px);
        padding: .75rem !important;
        border-radius: 1rem !important;
    }

    body.is-paged #gallery h2,
    body.theme-full-photo.is-paged #gallery h2 {
        font-size: clamp(1.55rem, 7.2vw, 2rem) !important;
        line-height: 1;
        padding-top: .1rem !important;
        padding-bottom: .1rem !important;
    }

    body.is-paged #carousel-gallery,
    body.theme-full-photo.is-paged #carousel-gallery {
        margin-top: .55rem !important;
    }

    body.is-paged #gallery .carousel .gallery-photo,
    body.theme-full-photo.is-paged #gallery .carousel .gallery-photo {
        height: min(48vh, 360px);
        height: min(48dvh, 360px);
    }

    body.is-paged #gallery .carousel-indicators {
        margin-bottom: .2rem;
    }

    body.is-paged #gallery .row.g-2.mt-3,
    body.theme-full-photo.is-paged #gallery .row.g-2.mt-3 {
        --bs-gutter-x: .4rem;
        margin-top: .45rem !important;
    }

    body.is-paged #gallery .row.g-2.mt-3 .gallery-photo,
    body.theme-full-photo.is-paged #gallery .row.g-2.mt-3 .gallery-photo {
        height: clamp(48px, 15vw, 64px);
        border-radius: .65rem !important;
    }
}

/* Theme-specific moving background layers */
#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-adat-jawa {
    --signature-opacity: .38;
    top: clamp(3.2rem, 7.5vh, 5.25rem);
    width: clamp(98px, 16vw, 142px);
    height: clamp(132px, 22vw, 196px);
    color: #7b3f16;
    filter: drop-shadow(0 16px 20px rgba(65, 31, 8, .24));
}

.signature-adat-jawa::before {
    inset: 0 12% 21%;
    clip-path: polygon(50% 0, 83% 26%, 95% 66%, 68% 100%, 32% 100%, 5% 66%, 17% 26%);
    background:
        radial-gradient(ellipse at 50% 38%, rgba(255, 225, 143, .5) 0 7%, transparent 8%),
        repeating-radial-gradient(ellipse at 50% 42%, rgba(255, 214, 120, .36) 0 2px, transparent 3px 13px),
        linear-gradient(145deg, rgba(72, 30, 8, .96), rgba(139, 67, 20, .82) 50%, rgba(207, 133, 42, .62));
    box-shadow: inset 0 0 0 3px rgba(231, 164, 61, .56), inset 0 0 24px rgba(42, 14, 2, .28);
}

.signature-adat-jawa::after {
    left: 4%;
    right: 4%;
    bottom: 0;
    height: 30%;
    background:
        radial-gradient(ellipse at 12% 72%, rgba(255, 250, 220, .92) 0 12%, transparent 13%),
        radial-gradient(ellipse at 25% 56%, rgba(255, 250, 220, .88) 0 13%, transparent 14%),
        radial-gradient(ellipse at 40% 76%, rgba(255, 250, 220, .8) 0 11%, transparent 12%),
        radial-gradient(ellipse at 60% 76%, rgba(255, 250, 220, .8) 0 11%, transparent 12%),
        radial-gradient(ellipse at 75% 56%, rgba(255, 250, 220, .88) 0 13%, transparent 14%),
        radial-gradient(ellipse at 88% 72%, rgba(255, 250, 220, .92) 0 12%, transparent 13%),
        linear-gradient(90deg, transparent 0 42%, rgba(85, 38, 9, .78) 43% 57%, transparent 58%);
}

.signature-adat-jawa span::before,
.signature-adat-jawa span::after {
    top: 14%;
    width: 30%;
    height: 54%;
    clip-path: polygon(50% 0, 98% 30%, 78% 100%, 18% 78%, 0 28%);
    background:
        repeating-linear-gradient(115deg, rgba(255, 208, 111, .42) 0 2px, transparent 3px 11px),
        linear-gradient(150deg, rgba(116, 51, 14, .78), rgba(190, 111, 34, .52));
    box-shadow: inset 0 0 0 2px rgba(231, 164, 61, .38);
}

.signature-adat-jawa span::before { left: 4%; transform: rotate(-10deg); }
.signature-adat-jawa span::after { right: 4%; transform: scaleX(-1) rotate(-10deg); }

.signature-sakura-jepang {
    --signature-opacity: .34;
    width: clamp(122px, 21vw, 190px);
    height: clamp(76px, 12vw, 112px);
    color: #c64f77;
}

.signature-sakura-jepang::before {
    left: 7%;
    right: 7%;
    top: 52%;
    height: 2px;
    background: rgba(112, 60, 70, .45);
    border-radius: 999px;
    transform: rotate(-8deg);
}

.signature-sakura-jepang::after {
    top: 8%;
    right: 13%;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 151, 167, .58), rgba(255, 151, 167, .08) 66%, transparent 68%);
}

.signature-sakura-jepang span {
    background:
        radial-gradient(ellipse at 24% 42%, rgba(255, 137, 161, .78) 0 8%, transparent 9%),
        radial-gradient(ellipse at 38% 28%, rgba(255, 188, 202, .8) 0 7%, transparent 8%),
        radial-gradient(ellipse at 55% 56%, rgba(255, 137, 161, .72) 0 7%, transparent 8%),
        radial-gradient(ellipse at 72% 40%, rgba(255, 188, 202, .72) 0 6%, transparent 7%);
}

.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-royal-gold {
    --signature-opacity: .22;
    top: clamp(4.6rem, 10vh, 7.2rem);
    color: #b98a12;
}

.signature-royal-gold::before {
    left: 26%;
    right: 26%;
    top: 12%;
    height: 34%;
    background: linear-gradient(180deg, rgba(246, 205, 82, .92), rgba(180, 126, 13, .72));
    clip-path: polygon(0 100%, 0 42%, 22% 62%, 34% 0, 50% 58%, 66% 0, 78% 62%, 100% 42%, 100% 100%);
}

.signature-royal-gold::after {
    left: 17%;
    right: 17%;
    top: 42%;
    bottom: 16%;
    border: 1px solid rgba(185, 138, 18, .52);
    border-top: 0;
    border-radius: 0 0 48% 48%;
}

.signature-royal-gold span::before,
.signature-royal-gold span::after {
    top: 38%;
    width: 26%;
    height: 40%;
    border-top: 1px solid rgba(185, 138, 18, .52);
    border-radius: 50%;
}

.signature-royal-gold span::before { left: 10%; transform: rotate(-28deg); }
.signature-royal-gold span::after { right: 10%; transform: rotate(28deg); }

.signature-garden-party {
    --signature-opacity: .34;
    color: #2d6a4f;
}

.signature-garden-party::before,
.signature-garden-party::after {
    top: 13%;
    width: 39%;
    height: 74%;
    border: 2px solid currentColor;
    border-right: 0;
    border-bottom: 0;
    border-radius: 70% 0 0 0;
    opacity: .4;
}

.signature-garden-party::before { left: 12%; transform: rotate(-18deg); }
.signature-garden-party::after { right: 12%; transform: scaleX(-1) rotate(-18deg); }

.signature-garden-party span {
    background:
        radial-gradient(ellipse at 33% 44%, rgba(45, 106, 79, .7) 0 8%, transparent 9%),
        radial-gradient(ellipse at 44% 32%, rgba(245, 159, 177, .64) 0 7%, transparent 8%),
        radial-gradient(ellipse at 58% 48%, rgba(45, 106, 79, .62) 0 8%, transparent 9%),
        radial-gradient(ellipse at 68% 36%, rgba(245, 159, 177, .55) 0 6%, transparent 7%);
}

.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-dark-premium {
    --signature-opacity: .4;
    color: #8be9ff;
    filter: drop-shadow(0 0 18px rgba(0, 209, 255, .34));
}

.signature-dark-premium::before {
    inset: 17%;
    border: 1px solid currentColor;
    clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0 50%);
    box-shadow: inset 0 0 22px rgba(0, 209, 255, .18);
}

.signature-dark-premium::after {
    left: 22%;
    right: 22%;
    top: 50%;
    height: 1px;
    background: linear-gradient(90deg, transparent, currentColor, transparent);
    box-shadow: 0 0 18px currentColor;
}

.signature-dark-premium span {
    inset: 34%;
    border: 1px solid rgba(255, 0, 153, .62);
    transform: rotate(45deg);
}

.signature-vintage-classic {
    --signature-opacity: .28;
    width: clamp(146px, 26vw, 230px);
    height: clamp(74px, 13vw, 112px);
    color: #564124;
}

.signature-vintage-classic::before,
.signature-vintage-classic::after {
    top: 50%;
    width: 47%;
    height: 36%;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    opacity: .45;
}

.signature-vintage-classic::before { left: 0; transform: rotate(-8deg); }
.signature-vintage-classic::after { right: 0; transform: scaleX(-1) rotate(-8deg); }

.signature-vintage-classic span {
    left: 45%;
    top: 38%;
    width: 10%;
    height: 24%;
    border: 1px solid currentColor;
    border-radius: 50%;
    opacity: .44;
}

.signature-batik-nusantara {
    --signature-opacity: .34;
    color: #8f4f10;
}

.signature-batik-nusantara::before {
    inset: 14%;
    background:
        radial-gradient(ellipse at 50% 24%, transparent 0 21%, currentColor 22% 24%, transparent 25%),
        radial-gradient(ellipse at 50% 76%, transparent 0 21%, currentColor 22% 24%, transparent 25%),
        radial-gradient(ellipse at 24% 50%, transparent 0 21%, currentColor 22% 24%, transparent 25%),
        radial-gradient(ellipse at 76% 50%, transparent 0 21%, currentColor 22% 24%, transparent 25%);
    opacity: .45;
}

.signature-batik-nusantara::after {
    inset: 22%;
    border: 1px solid currentColor;
    opacity: .36;
    transform: rotate(45deg);
}

.signature-batik-nusantara span {
    inset: 33%;
    border-radius: 50%;
    background: currentColor;
    opacity: .28;
}

.signature-ana-danu {
    --signature-opacity: .28;
    color: #31516d;
}

.signature-ana-danu::before {
    inset: 18% 12% 22%;
    background:
        radial-gradient(ellipse at 50% 100%, transparent 0 28%, rgba(49, 81, 109, .36) 29% 30%, transparent 31%),
        radial-gradient(ellipse at 50% 100%, transparent 0 48%, rgba(226, 143, 160, .36) 49% 50%, transparent 51%);
}

.signature-ana-danu::after {
    left: 32%;
    right: 32%;
    bottom: 18%;
    height: 28%;
    background:
        radial-gradient(ellipse at 22% 52%, rgba(226, 143, 160, .68) 0 20%, transparent 21%),
        radial-gradient(ellipse at 50% 34%, rgba(255, 248, 250, .82) 0 22%, transparent 23%),
        radial-gradient(ellipse at 78% 52%, rgba(226, 143, 160, .68) 0 20%, transparent 21%);
}

.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%;
}

@keyframes themeSignatureIn {
    from {
        opacity: 0;
        transform: translate3d(-50%, -22px, 0) scale(.9);
    }
    to {
        opacity: var(--signature-opacity);
        transform: translate3d(-50%, 0, 0) scale(1);
    }
}

@keyframes themeSignatureFloat {
    from { transform: translate3d(0, 0, 0) rotate(-.8deg); }
    to { transform: translate3d(0, 7px, 0) rotate(.8deg); }
}

body.theme-modern-minimalist #theme-ornaments::before {
    opacity: .42;
    background:
        linear-gradient(115deg, transparent 0 44%, rgba(0, 0, 0, .045) 44% 45%, transparent 45% 100%),
        linear-gradient(90deg, rgba(0, 0, 0, .03) 1px, transparent 1px);
    background-size: 180px 180px, 56px 56px;
    animation: minimalLinesDrift 24s linear infinite;
}

body.theme-modern-minimalist #theme-ornaments::after {
    opacity: .28;
    background:
        radial-gradient(circle at 22% 32%, transparent 0 52px, rgba(0, 0, 0, .055) 53px 55px, transparent 56px),
        radial-gradient(circle at 72% 68%, transparent 0 92px, rgba(0, 0, 0, .04) 93px 95px, transparent 96px);
    background-size: 340px 340px, 520px 520px;
    animation: softRotateField 38s linear infinite;
}

body.theme-adat-jawa #theme-ornaments::before {
    opacity: .2;
    background:
        repeating-linear-gradient(135deg, rgba(75, 54, 33, .12) 0 3px, transparent 3px 18px),
        repeating-linear-gradient(45deg, rgba(127, 84, 45, .12) 0 2px, transparent 2px 22px);
    background-size: 150px 150px;
    animation: batikParangDrift 32s linear infinite;
}

body.theme-adat-jawa #theme-ornaments::after {
    opacity: .16;
    background:
        radial-gradient(circle at 25% 25%, rgba(75, 54, 33, .18) 0 3px, transparent 4px),
        radial-gradient(circle at 75% 75%, rgba(127, 84, 45, .16) 0 4px, transparent 5px);
    background-size: 74px 74px;
    animation: batikDotsFloat 22s ease-in-out infinite alternate;
}

body.theme-elegant-luxury #theme-ornaments::before {
    opacity: .26;
    background:
        linear-gradient(120deg, transparent 0 44%, rgba(240, 230, 210, .18) 48%, transparent 52% 100%),
        repeating-linear-gradient(90deg, rgba(240, 230, 210, .055) 0 1px, transparent 1px 68px);
    background-size: 360px 100%, 136px 136px;
    animation: luxurySheenSweep 8s ease-in-out infinite;
}

body.theme-elegant-luxury #theme-ornaments::after {
    opacity: .22;
    background:
        linear-gradient(45deg, transparent 47%, rgba(212, 175, 55, .16) 49%, transparent 51%),
        linear-gradient(-45deg, transparent 47%, rgba(212, 175, 55, .12) 49%, transparent 51%);
    background-size: 120px 120px;
    animation: diamondLatticeGlide 28s linear infinite;
}

body.theme-royal-gold #theme-ornaments::before {
    opacity: .26;
    background:
        conic-gradient(from 0deg at 50% 12%, rgba(212, 175, 55, .22), transparent 18%, rgba(212, 175, 55, .12) 24%, transparent 38%, rgba(212, 175, 55, .2), transparent 64%, rgba(212, 175, 55, .16), transparent);
    animation: royalRaysTurn 24s linear infinite;
}

body.theme-royal-gold #theme-ornaments::after {
    opacity: .2;
    background:
        repeating-linear-gradient(90deg, rgba(99, 75, 0, .08) 0 1px, transparent 1px 34px),
        repeating-linear-gradient(0deg, rgba(212, 175, 55, .08) 0 1px, transparent 1px 34px);
    background-size: 68px 68px;
    animation: goldPatternRise 26s linear infinite;
}

body.theme-vintage-classic #theme-ornaments::before {
    opacity: .28;
    background:
        repeating-linear-gradient(0deg, rgba(62, 50, 35, .05) 0 2px, transparent 2px 8px),
        repeating-linear-gradient(90deg, rgba(62, 50, 35, .035) 0 1px, transparent 1px 14px);
    background-size: 220px 220px;
    animation: parchmentGrainMove 20s steps(10) infinite;
}

body.theme-vintage-classic #theme-ornaments::after {
    opacity: .18;
    background:
        radial-gradient(ellipse at 50% 50%, transparent 0 34%, rgba(62, 50, 35, .16) 35% 36%, transparent 37%),
        radial-gradient(ellipse at 50% 50%, transparent 0 58%, rgba(62, 50, 35, .1) 59% 60%, transparent 61%);
    background-size: 260px 170px;
    animation: vintagePatternSway 30s ease-in-out infinite alternate;
}

body.theme-dark-premium #theme-ornaments::before {
    opacity: .42;
    background:
        linear-gradient(180deg, transparent 0 42%, rgba(0, 255, 255, .12) 50%, transparent 58% 100%),
        repeating-linear-gradient(90deg, rgba(0, 255, 255, .06) 0 1px, transparent 1px 48px);
    background-size: 100% 280px, 96px 96px;
    animation: neonScanMove 7s linear infinite;
}

body.theme-dark-premium #theme-ornaments::after {
    opacity: .24;
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .08) 0 1px, transparent 1px 11px);
    background-size: 100% 100%;
    animation: premiumRainFall 14s linear infinite;
}

body.theme-sakura-jepang #theme-ornaments::before {
    opacity: .28;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(255, 183, 197, .28) 0 10%, transparent 11%),
        radial-gradient(ellipse at 76% 65%, rgba(255, 105, 135, .18) 0 8%, transparent 9%),
        linear-gradient(120deg, transparent 0 46%, rgba(255, 183, 197, .14) 48%, transparent 50% 100%);
    background-size: 280px 220px, 360px 260px, 260px 260px;
    animation: sakuraWindField 26s ease-in-out infinite alternate;
}

body.theme-sakura-jepang #theme-ornaments::after {
    opacity: .18;
    background:
        repeating-linear-gradient(115deg, rgba(255, 145, 164, .12) 0 2px, transparent 2px 40px);
    background-size: 180px 180px;
    animation: sakuraMistDrift 22s linear infinite;
}

body.theme-islami-elegan #theme-ornaments::before {
    opacity: .24;
    background:
        linear-gradient(45deg, transparent 46%, rgba(18, 53, 36, .12) 48%, transparent 50%),
        linear-gradient(-45deg, transparent 46%, rgba(18, 53, 36, .1) 48%, transparent 50%);
    background-size: 92px 92px;
    animation: islamicPatternSlide 30s linear infinite;
}

body.theme-islami-elegan #theme-ornaments::after {
    opacity: .2;
    background:
        radial-gradient(ellipse at 50% 100%, transparent 0 34%, rgba(18, 53, 36, .14) 35% 36%, transparent 37%);
    background-size: 150px 92px;
    animation: archPatternFloat 24s ease-in-out infinite alternate;
}

body.theme-batik-nusantara #theme-ornaments::before {
    opacity: .24;
    background:
        repeating-radial-gradient(circle at 50% 50%, rgba(54, 34, 4, .12) 0 2px, transparent 3px 18px),
        repeating-linear-gradient(135deg, rgba(54, 34, 4, .08) 0 3px, transparent 3px 28px);
    background-size: 120px 120px, 160px 160px;
    animation: nusantaraBatikFlow 28s linear infinite;
}

body.theme-batik-nusantara #theme-ornaments::after {
    opacity: .16;
    background:
        linear-gradient(45deg, transparent 0 44%, rgba(127, 84, 45, .14) 46%, transparent 48% 100%),
        linear-gradient(-45deg, transparent 0 44%, rgba(127, 84, 45, .1) 46%, transparent 48% 100%);
    background-size: 140px 140px;
    animation: wovenPatternShift 35s linear infinite;
}

body.theme-garden-party #theme-ornaments::before {
    opacity: .26;
    background:
        repeating-linear-gradient(110deg, transparent 0 34px, rgba(27, 67, 50, .11) 35px 37px, transparent 38px 90px),
        radial-gradient(ellipse at 30% 20%, rgba(45, 106, 79, .12) 0 12%, transparent 13%);
    background-size: 260px 260px, 320px 240px;
    animation: gardenBreezeMove 30s ease-in-out infinite alternate;
}

body.theme-garden-party #theme-ornaments::after {
    opacity: .18;
    background:
        linear-gradient(80deg, transparent 0 46%, rgba(27, 67, 50, .12) 48%, transparent 50% 100%);
    background-size: 160px 160px;
    animation: leafShadowDrift 18s linear infinite;
}

body.theme-ana-danu #theme-ornaments::before {
    opacity: .24;
    background:
        repeating-linear-gradient(0deg, rgba(32, 50, 68, .045) 0 1px, transparent 1px 12px),
        repeating-linear-gradient(90deg, rgba(183, 110, 121, .08) 0 1px, transparent 1px 54px);
    background-size: 160px 160px;
    animation: anaPaperBreathe 24s ease-in-out infinite alternate;
}

body.theme-ana-danu #theme-ornaments::after {
    opacity: .18;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(183, 110, 121, .14) 0 16%, transparent 17%),
        radial-gradient(ellipse at 50% 50%, rgba(32, 50, 68, .1) 0 10%, transparent 11%);
    background-size: 180px 140px, 260px 200px;
    animation: anaFloralDrift 34s linear infinite;
}

body.theme-zedlabs-editorial #theme-ornaments::before {
    opacity: .3;
    background:
        linear-gradient(90deg, transparent 0 48%, rgba(255, 255, 255, .1) 49%, transparent 50%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 26px);
    background-size: 180px 180px, 100% 52px;
    animation: editorialLinesMove 26s linear infinite;
}

body.theme-zedlabs-editorial #theme-ornaments::after {
    opacity: .2;
    background:
        linear-gradient(115deg, transparent 0 42%, rgba(226, 232, 240, .14) 48%, transparent 54% 100%);
    background-size: 380px 100%;
    animation: editorialSpotlightSweep 13s ease-in-out infinite;
}

body.theme-full-photo .full-photo-bg-layer {
    animation: fullPhotoKenBurns 18s ease-in-out infinite alternate;
    transform-origin: center;
}

body.theme-full-photo .full-photo-bg-layer:nth-child(even) {
    animation-duration: 22s;
    transform-origin: 60% 40%;
}

@keyframes minimalLinesDrift {
    to { background-position: 180px 180px, 56px 56px; }
}

@keyframes softRotateField {
    to { transform: rotate(360deg) scale(1.03); }
}

@keyframes batikParangDrift {
    to { background-position: 150px 150px, -150px 150px; }
}

@keyframes batikDotsFloat {
    to { transform: translate3d(28px, -22px, 0); }
}

@keyframes luxurySheenSweep {
    0%, 100% { transform: translate3d(-26%, 0, 0); opacity: .12; }
    45%, 60% { transform: translate3d(26%, 0, 0); opacity: .32; }
}

@keyframes diamondLatticeGlide {
    to { background-position: 120px 120px, -120px 120px; }
}

@keyframes royalRaysTurn {
    to { transform: rotate(360deg); }
}

@keyframes goldPatternRise {
    to { background-position: 68px -68px, -68px -68px; }
}

@keyframes parchmentGrainMove {
    0%, 100% { transform: translate3d(0, 0, 0); }
    25% { transform: translate3d(8px, -6px, 0); }
    50% { transform: translate3d(-5px, 7px, 0); }
    75% { transform: translate3d(4px, 5px, 0); }
}

@keyframes vintagePatternSway {
    to { transform: translate3d(-32px, 18px, 0) scale(1.04); }
}

@keyframes neonScanMove {
    to { background-position: 0 280px, 96px 96px; }
}

@keyframes premiumRainFall {
    to { background-position: 0 154px; }
}

@keyframes sakuraWindField {
    to { transform: translate3d(34px, -18px, 0) scale(1.04); }
}

@keyframes sakuraMistDrift {
    to { background-position: 180px -180px; }
}

@keyframes islamicPatternSlide {
    to { background-position: 92px 92px, -92px 92px; }
}

@keyframes archPatternFloat {
    to { transform: translate3d(0, -24px, 0); }
}

@keyframes nusantaraBatikFlow {
    to { background-position: 120px 120px, -160px 160px; }
}

@keyframes wovenPatternShift {
    to { background-position: 140px 140px, -140px 140px; }
}

@keyframes gardenBreezeMove {
    to { transform: translate3d(42px, -26px, 0); }
}

@keyframes leafShadowDrift {
    to { background-position: 160px -160px; }
}

@keyframes anaPaperBreathe {
    to { transform: translate3d(0, -18px, 0) scale(1.025); }
}

@keyframes anaFloralDrift {
    to { background-position: 180px 140px, -260px 200px; }
}

@keyframes editorialLinesMove {
    to { background-position: 180px 180px, 0 52px; }
}

@keyframes editorialSpotlightSweep {
    0%, 100% { transform: translate3d(-28%, 0, 0); opacity: .12; }
    50% { transform: translate3d(28%, 0, 0); opacity: .28; }
}

@keyframes fullPhotoKenBurns {
    from { transform: scale(1); }
    to { transform: scale(1.08) translate3d(-1.8%, 1.2%, 0); }
}

/* Cross-theme responsive polish */
body.is-paged main,
body.theme-full-photo.is-paged main {
    width: min(100vw, 600px);
}

body.is-paged main img,
body.theme-full-photo.is-paged main img {
    max-width: 100%;
}

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

body.is-paged main .border,
body.theme-full-photo.is-paged main .border,
body.is-paged main .bg-theme-auto,
body.theme-full-photo.is-paged main .bg-theme-auto {
    min-width: 0;
}

@media (min-width: 576px) and (max-width: 991.98px) {
    body.is-paged main,
    body.theme-full-photo.is-paged main,
    body.is-paged #navbar-menu,
    body.theme-full-photo.is-paged #navbar-menu {
        max-width: min(100vw, 560px);
    }

    body.is-paged main > section,
    body.theme-full-photo.is-paged main > section {
        padding-left: .75rem !important;
        padding-right: .75rem !important;
    }

    .theme-signature {
        width: clamp(102px, 16vw, 138px);
        height: clamp(102px, 16vw, 138px);
    }

    .signature-adat-jawa {
        width: clamp(86px, 14vw, 116px);
        height: clamp(116px, 18vw, 158px);
    }
}

@media (max-width: 575.98px) {
    body.is-paged main > section,
    body.theme-full-photo.is-paged main > section {
        padding-top: clamp(.85rem, 4.6dvh, 1.45rem) !important;
        padding-bottom: calc(58px + max(.45rem, env(safe-area-inset-bottom))) !important;
    }

    body.is-paged main > section > .container,
    body.theme-full-photo.is-paged main > section > .container {
        padding-left: clamp(.75rem, 3.8vw, 1rem);
        padding-right: clamp(.75rem, 3.8vw, 1rem);
    }

    body.is-paged #home h1.font-esthetic,
    body.theme-full-photo.is-paged #home h1.font-esthetic {
        font-size: clamp(1.75rem, 8.2vw, 2.15rem) !important;
        line-height: .98;
        padding-top: clamp(2.35rem, 7.6dvh, 4rem) !important;
        padding-bottom: clamp(.6rem, 2dvh, 1rem) !important;
    }

    body.is-paged #home h2.font-esthetic,
    body.theme-full-photo.is-paged #home h2.font-esthetic {
        font-size: clamp(1.95rem, 9vw, 2.45rem) !important;
        line-height: .96;
        margin-top: clamp(.8rem, 2.3dvh, 1.2rem) !important;
        margin-bottom: clamp(.75rem, 2.3dvh, 1.15rem) !important;
    }

    body.is-paged #home .img-center-crop,
    body.theme-full-photo.is-paged #home .img-center-crop {
        width: clamp(7.6rem, 42vw, 10rem) !important;
        height: clamp(7.6rem, 42vw, 10rem) !important;
        margin-top: clamp(.85rem, 2.8dvh, 1.25rem) !important;
        margin-bottom: clamp(.85rem, 2.8dvh, 1.25rem) !important;
    }

    body.is-paged main h2.font-esthetic,
    body.theme-full-photo.is-paged main h2.font-esthetic {
        font-size: clamp(1.72rem, 7.8vw, 2.14rem) !important;
        line-height: 1;
    }

    body.is-paged main .rounded-5,
    body.theme-full-photo.is-paged main .rounded-5 {
        border-radius: 1rem !important;
    }

    body.is-paged .audio-float,
    body.theme-full-photo.is-paged .audio-float {
        right: .7rem;
        bottom: calc(4.45rem + env(safe-area-inset-bottom));
    }

    .theme-signature {
        max-width: calc(100vw - 2rem);
    }

    .floral-burgundy-border {
        height: clamp(82px, 17dvh, 145px);
    }

    .floral-burgundy-border.bottom {
        height: clamp(92px, 18dvh, 156px);
    }

    body.is-paged .floral-burgundy-border.bottom {
        bottom: calc(58px + max(.35rem, env(safe-area-inset-bottom)));
    }

    .royal-corner,
    .luxury-diamond-frame,
    .royal-frame {
        opacity: .48;
    }

    .sakura-sun {
        width: 92px;
        height: 92px;
    }

    .sakura-branch {
        width: 152px;
    }

    .batik-corner {
        width: clamp(38px, 13vw, 60px);
        opacity: .08;
    }

    .garden-vine,
    .ana-danu-lace {
        height: clamp(48px, 9dvh, 70px);
    }

    .minimalist-line {
        right: 12%;
    }

    .neon-halo {
        inset: 24%;
    }
}

@media (max-width: 380px) {
    body.is-paged main > section,
    body.theme-full-photo.is-paged main > section {
        padding-top: .75rem !important;
        padding-bottom: calc(56px + max(.35rem, env(safe-area-inset-bottom))) !important;
    }

    body.is-paged main p,
    body.is-paged main small,
    body.theme-full-photo.is-paged main p,
    body.theme-full-photo.is-paged main small {
        font-size: clamp(.76rem, 3.5vw, .88rem) !important;
        line-height: 1.35;
    }

    body.is-paged #home h1.font-esthetic,
    body.theme-full-photo.is-paged #home h1.font-esthetic {
        padding-top: 2.15rem !important;
    }

    body.is-paged #home .img-center-crop,
    body.theme-full-photo.is-paged #home .img-center-crop {
        width: clamp(6.9rem, 39vw, 8.8rem) !important;
        height: clamp(6.9rem, 39vw, 8.8rem) !important;
    }

    #navbar-menu .nav-link {
        min-height: 3.45rem;
        padding-left: .05rem;
        padding-right: .05rem;
    }

    #navbar-menu .nav-link span {
        font-size: clamp(.5rem, 2.55vw, .62rem) !important;
    }
}

@media (max-height: 720px) and (max-width: 575.98px) {
    body.is-paged #home h1.font-esthetic,
    body.theme-full-photo.is-paged #home h1.font-esthetic {
        padding-top: 1.8rem !important;
        padding-bottom: .45rem !important;
    }

    body.is-paged #home .img-center-crop,
    body.theme-full-photo.is-paged #home .img-center-crop {
        width: clamp(6.4rem, 33vw, 8rem) !important;
        height: clamp(6.4rem, 33vw, 8rem) !important;
        margin-top: .55rem !important;
        margin-bottom: .55rem !important;
    }

    body.is-paged #home .mouse-animation,
    body.theme-full-photo.is-paged #home .mouse-animation,
    body.is-paged #home .mouse-animation + *,
    body.theme-full-photo.is-paged #home .mouse-animation + * {
        display: none !important;
    }

    .theme-signature {
        --signature-opacity: .16;
        top: 1.4rem !important;
        transform: translate3d(-50%, -18px, 0) scale(.82);
    }

    .signature-adat-jawa {
        --signature-opacity: .16;
        top: 1.15rem !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #theme-ornaments::before,
    #theme-ornaments::after,
    #theme-ornaments.ornaments-enter .theme-signature,
    #theme-ornaments.ornaments-enter .theme-signature span,
    body.theme-full-photo .full-photo-bg-layer {
        animation: none !important;
    }

    #theme-ornaments.ornaments-enter .theme-signature {
        opacity: var(--signature-opacity);
        transform: translate3d(-50%, 0, 0) scale(1);
    }
}

/* Shared mobile refinement for the primary Home composition in every theme. */
@media (max-width: 575.98px) {
    body #home > .home-primary-content {
        transform: translateY(clamp(1rem, 2.4dvh, 1.35rem));
    }

    body #home .home-couple-name {
        font-size: clamp(1.8rem, 8.2vw, 2.2rem) !important;
        line-height: .96;
    }

    body.theme-wayang-kencana #home .home-couple-name {
        font-size: clamp(3rem, 15.5vw, 4.65rem) !important;
        line-height: .92;
    }
}

/* 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,
body.theme-full-photo.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,
body.theme-full-photo.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,
body.theme-full-photo.is-paged main > section.is-leaving-section {
    visibility: visible;
    pointer-events: none;
    z-index: 1;
    animation: invitationPageOut .22s ease-in both;
}

@keyframes invitationPageIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes invitationPageOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* 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 .petal,
html.performance-lite .leaf,
html.performance-lite .sparkle,
html.performance-lite .shooting-star {
    display: none !important;
}

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

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

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

html.performance-lite body.theme-wayang-kencana #theme-ornaments.ornaments-enter .wayang-puppet.wayang-sinta {
    animation: wayangPuppetLeftIn 2.6s ease both, wayangPuppetLiteSwayLeft 9.6s 2.7s ease-in-out infinite alternate !important;
}

html.performance-lite body.theme-wayang-kencana #theme-ornaments.ornaments-enter .wayang-puppet.wayang-rama {
    animation: wayangPuppetRightIn 2.6s .05s ease both, wayangPuppetLiteSwayRight 10.2s 2.75s ease-in-out infinite alternate !important;
}

html.performance-lite #theme-ornaments > .wayang-puppet {
    will-change: transform;
}

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 * {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

html.performance-lite body.is-paged main,
html.performance-lite body.theme-full-photo.is-paged main {
    transition: none;
}

html.performance-lite body.is-paged .invitation-reveal-item,
html.performance-lite body.theme-full-photo.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,
html.performance-lite body.theme-full-photo.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,
html.performance-lite body.theme-full-photo.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,
html.performance-lite body.theme-full-photo.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);
}

@keyframes invitationRevealLite {
    from {
        opacity: 0;
        transform: translate3d(var(--item-reveal-x), var(--item-reveal-y), 0) scale(var(--item-reveal-scale));
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes wayangPuppetLiteSwayLeft {
    from { transform: translate3d(0, 0, 0) rotate(-.16deg); }
    to { transform: translate3d(0, -3px, 0) rotate(.16deg); }
}

@keyframes wayangPuppetLiteSwayRight {
    from { transform: translate3d(0, -1px, 0) rotate(.14deg); }
    to { transform: translate3d(0, 2px, 0) rotate(-.14deg); }
}

@keyframes scrollDotLite {
    0%, 100% { opacity: .35; transform: translate3d(0, 0, 0); }
    50% { opacity: .9; transform: translate3d(0, 7px, 0); }
}

@keyframes loveFloatLite {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(0, -4px, 0) scale(1.035); }
}

@keyframes invitationButtonLite {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.018); }
}

/* 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;
}

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;
}

@keyframes themeOrnamentsSoftIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

#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;
}

body.theme-wayang-kencana #welcome > .d-flex > .d-flex.flex-column > * {
    animation-duration: 1.35s;
    animation-timing-function: ease;
}

html.performance-lite body.theme-wayang-kencana #welcome > .d-flex > .d-flex.flex-column > * {
    animation-duration: 1.2s;
    animation-timing-function: ease;
}

body.theme-wayang-kencana #welcome > .d-flex > .d-flex.flex-column > #button-open-invitation,
html.performance-lite body.theme-wayang-kencana #welcome > .d-flex > .d-flex.flex-column > #button-open-invitation {
    animation: welcomeItemReveal 1.2s .32s ease both, invitationButtonLite 5.2s 1.7s ease-in-out infinite;
}

@keyframes welcomeItemReveal {
    from {
        opacity: 0;
        transform: translate3d(0, 14px, 0) scale(.992);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.is-paged main > section.is-active-section,
    body.is-paged main > section.is-leaving-section,
    body.theme-full-photo.is-paged main > section.is-active-section,
    body.theme-full-photo.is-paged main > section.is-leaving-section,
    html.performance-lite #theme-ornaments > .wayang-puppet,
    html.performance-lite .scroll-animation,
    html.performance-lite .animate-love,
    html.performance-lite #button-open-invitation,
    body:not(.theme-wayang-kencana) #theme-ornaments.ornaments-enter,
    html.performance-lite body.is-paged main > section.is-active-section .invitation-reveal-item,
    html.performance-lite body.theme-full-photo.is-paged main > section.is-active-section .invitation-reveal-item {
        animation: none !important;
    }

    #welcome > .d-flex > .d-flex.flex-column > *,
    html.performance-lite #theme-ornaments > .wayang-puppet,
    html.performance-lite body.is-paged .invitation-reveal-item,
    html.performance-lite body.theme-full-photo.is-paged .invitation-reveal-item {
        animation: none !important;
        opacity: 1;
        transform: none;
    }
}