/* wayang-kencana visual identity. */


/* 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 > :not(#theme-ornaments) {
    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);
}


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


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


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