@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('/template/royal_burgundy/fonts/e111viva/style.css');
@import url('/template/royal_burgundy/fonts/cronde/style.css');
@import url('/template/royal_burgundy/fonts/brittany_signature/BrittanySignature.css');
@import url('/template/royal_burgundy/fonts/photograph_signature/fonts.css');
@import url('/template/royal_burgundy/fonts/heatwood/Heatwood.css');

:root {
    --inv-bg: #F9F7FB;
    --inv-base: #4A3B6A;
    --inv-accent: #C19A6B;
    /* Terracotta/Goldish */
    --inv-border: #D1C4E9;
    --menu-bg: #4A3B6A;
    --menu-inactive: #ffffff;
    --menu-active: #D8B4E2;
    --btn-color: #4A3B6A;
    --inv-leaf: #8E7AB5;
    --inv-flower: #D8B4E2;
    --font-base: "Open Sans", sans-serif;
    --font-accent: "CRONDE", serif;
    --font-latin: "English111 Vivace BT", cursive;
}


body {
    overflow: hidden;
    font-family: var(--font-base);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.fa-solid,
.fas {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

@keyframes left-right {
    0% {
        transform: translateX(8%);
    }

    100% {
        transform: translateX(0%);
    }
}

.left-right img {
    animation: left-right 3s ease-in-out infinite alternate;
}

@keyframes wave-right {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(10deg);
    }
}

.wave-right img {
    animation: wave-right 4s ease-in-out infinite alternate;
}

@keyframes wave-left {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-10deg);
    }
}

.wave-left img {
    animation: wave-left 4s ease-in-out infinite alternate;
}

@keyframes float-frame {
    0% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(5px, 5px);
    }

    100% {
        transform: translate(0, 0);
    }
}

@keyframes float-frame-reverse {
    0% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(-5px, -5px);
    }

    100% {
        transform: translate(0, 0);
    }
}

.floating-frame {
    animation: float-frame 6s ease-in-out infinite alternate;
}

.floating-frame-reverse {
    animation: float-frame-reverse 6s ease-in-out infinite alternate;
}

.container-mobile {
    background-color: var(--inv-bg);
    background-image: radial-gradient(circle at center, rgba(209, 196, 233, 0.2) 0%, rgba(249, 247, 251, 1) 100%);
    background-size: cover;
    background-position: center;
    color: var(--inv-base);
    height: 100%;
    width: 100%;
}

@media (max-width: 576px) {
    .container-mobile {
        background-size: 100% 100%;
        background-attachment: scroll;
    }
}

.container-mobile.cover {
    color: var(--inv-base);
    background-color: #0d0d0d;
    overflow: hidden;
}

/* Legacy Heritage Removed - Using 1:1 Layers at Line 1200+ */

.glass-card {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(209, 196, 233, 0.4);
    border-radius: 20px;
    box-shadow: 0 8px 32px 0 rgba(74, 59, 106, 0.1);
    color: var(--inv-base);
}

.cover .glass-card {
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    color: var(--inv-base);
}

/* Hide traditional frames globally if still present in HTML */
.frame {
    display: none !important;
}

.cover .frame,
.ngundang_list li:last-child .frame,
.ngundang_list li:nth-child(2) .frame-1 {
    display: none
}

.font-brittany-signature {
    font-family: 'Brittany Signature';
    line-height: 1.6 !important;
}

.font-photograph-signature {
    font-family: 'Photograph Signature';
    line-height: 1.6 !important;
}

.font-heatwood {
    font-family: 'Heatwood';
    line-height: 3 !important;
}

#YTMusic {
    display: block
}

/* Font Helpers */
.font-accent {
    font-family: var(--font-accent), serif;
}

.font-latin {
    font-family: var(--font-latin), cursive;
}

/* Allow clicks to pass through decorative elements */
.ornament-container,
.gapura-frame,
.hanging-ornament,
.grass-ornament {
    pointer-events: none !important;
    z-index: 1;
}

/* Heritage Clean: Hide legacy ornaments on cover */
.cover .gapura-frame,
.cover .hanging-ornament,
.cover .grass-ornament {
    display: none !important;
}

/* Ensure menu is always on top and fits well */
.ngundang_menu {
    z-index: 9999 !important;
    background: linear-gradient(180deg, #3d2a1a 0%, #2a1c10 50%, #1f150c 100%) !important;
    border-radius: 24px 24px 0 0 !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(212, 165, 116, 0.2) !important;
    overflow: visible !important;
    border-top: 1px solid rgba(212, 165, 116, 0.25) !important;
}

/* Gold shimmer line at top of menu */
.ngundang_menu::before {
    content: "";
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(243, 201, 109, 0.6), rgba(212, 165, 116, 0.4), rgba(243, 201, 109, 0.6), transparent);
    pointer-events: none;
    z-index: 1;
}

.ngundang_menu .ngundang_menu_list {
    overflow: visible !important;
}

/* Base menu item styling */
.ngundang_menu_item {
    padding: 8px 4px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    z-index: 2 !important;
}

.ngundang_menu_item i {
    font-size: 1.3rem !important;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.ngundang_menu_item span {
    font-size: clamp(10px, 2.5vw, 11px) !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    margin-top: 3px !important;
    transition: all 0.35s ease !important;
}

/* Remove default active background */
.ngundang_menu .ngundang_menu_item:after {
    display: none !important;
}

/* Active item: golden raised circle */
.ngundang_menu_item.active {
    color: #3d2917 !important;
    transform: translateY(-18px) !important;
    z-index: 10 !important;
}

.ngundang_menu_item.active::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 62px;
    height: 62px;
    transform: translate(-50%, -50%);
    background: linear-gradient(145deg, #f5d57a 0%, #d4a55a 40%, #c19a4b 70%, #b8893e 100%) !important;
    border-radius: 50% !important;
    z-index: -1;
    box-shadow:
        0 4px 16px rgba(193, 154, 107, 0.5),
        0 8px 30px rgba(193, 154, 107, 0.25),
        inset 0 2px 4px rgba(255, 235, 180, 0.5),
        inset 0 -2px 4px rgba(160, 120, 60, 0.3);
    border: 2px solid rgba(255, 235, 180, 0.4) !important;
}

.ngundang_menu_item.active i {
    font-size: 1.4rem !important;
    color: #3d2917 !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}

.ngundang_menu_item.active span {
    color: #3d2917 !important;
    font-weight: 700 !important;
}



/* Floating buttons fix */
.floating-action {
    position: absolute;
    bottom: 120px;
    /* Base height */
    right: 14px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 10010;
}

.btn-float {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--inv-accent);
    color: var(--inv-base);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-float.playing {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

.ph-slash {
    position: relative;
    display: inline-block;
}

.ph-slash::after {
    content: "";
    position: absolute;
    top: 55%;
    left: 50%;
    width: 100%;
    height: 2px;
    background: currentColor;
    transform: translate(-50%, -50%) rotate(-45deg);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

/* Ensure sub-content is pushed up for the menu */
.container-content {
    padding-bottom: 60px;
}

.bottom-ornament {
    bottom: 60px !important;
}

/* RSVP Form Styles - Premium Refinement */
.form-control-custom {
    width: 100%;
    padding: 14px 18px;
    background: rgba(26, 58, 21, 0.5);
    border: 1px solid rgba(200, 169, 81, 0.25);
    border-radius: 12px;
    color: #f5f0e8;
    font-size: 15px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    -webkit-appearance: none;
    appearance: none;
}

.form-control-custom::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.form-control-custom:focus {
    outline: none;
    border-color: var(--inv-accent);
    background: rgba(26, 58, 21, 0.7);
    box-shadow: 0 0 0 4px rgba(200, 169, 81, 0.15), inset 0 2px 4px rgba(0, 0, 0, 0.05);
    transform: translateY(-1px);
}

.btn-submit {
    background: var(--inv-base);
    color: white;
    border: none;
    padding: 16px 30px;
    border-radius: 12px;
    cursor: pointer;
    width: 100%;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-size: 15px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(45, 90, 39, 0.25);
    margin-top: 10px;
}

.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(45, 90, 39, 0.35);
    filter: brightness(1.1);
}

/* Guestbook Styles (Redesigned based on reference) */
.guestbook-list {
    width: 100%;
    margin-top: 25px;
    text-align: left;
}

.guestbook-item {
    display: flex;
    gap: 12px;
    background: rgba(26, 58, 21, 0.4);
    border: 1px solid rgba(200, 169, 81, 0.15);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
    transition: all 0.3s;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.guestbook-avatar {
    width: 42px;
    height: 42px;
    background: var(--inv-base);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
    text-transform: uppercase;
}

.guestbook-content {
    flex: 1;
}

.guestbook-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.guestbook-name {
    font-weight: 800;
    color: #3d2917;
    font-size: 15px;
}

.guestbook-message {
    font-size: 15px;
    line-height: 1.4;
    color: #3d2917;
    margin-bottom: 5px;
}

.guestbook-date {
    font-size: 13px;
    color: rgba(0, 0, 0, 0.55);
}

.badge-rsvp {
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
}

.badge-rsvp.hadir {
    background: #e0f2f1;
    color: #00695c;
}

.badge-rsvp.tidak_hadir {
    background: #ffebee;
    color: #c62828;
}

/* Story & Gallery Styles */
.story-timeline {
    position: relative;
    padding: 20px 0;
    margin-top: 10px;
}

.story-timeline::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, transparent, var(--inv-accent), transparent);
}

.story-item {
    position: relative;
    padding-left: 45px;
    margin-bottom: 30px;
    text-align: left;
}

.story-dot {
    position: absolute;
    left: 13px;
    top: 5px;
    width: 16px;
    height: 16px;
    background: var(--inv-base);
    border: 3px solid var(--inv-accent);
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0 0 10px rgba(45, 90, 39, 0.3);
}

.story-date {
    font-family: var(--font-accent);
    font-size: 20px;
    color: var(--inv-base);
    margin-bottom: 5px;
    display: block;
}

.story-content {
    font-size: 14px;
    color: #444;
    line-height: 1.6;
    background: rgba(45, 90, 39, 0.05);
    padding: 12px 15px;
    border-radius: 10px;
    border-left: 3px solid var(--inv-accent);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 5px;
}

.gallery-item {
    display: block;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 1/1;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

.gallery-item:hover {
    transform: scale(1.03);
    z-index: 5;
}

.layer-flower-bed img {
    width: 100%;
    height: auto;
    display: block;
}

@keyframes kenBurns {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.15);
    }
}

.animate-ken-burns {
    animation: kenBurns 20s ease-in-out infinite alternate;
}

@keyframes flowerFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-8px) rotate(1deg);
    }
}

.animate-float {
    animation: flowerFloat 4s ease-in-out infinite;
}


/* Confetti Canvas - positioned to match invitation canvas */
#confetti-canvas {
    position: fixed;
    pointer-events: none;
    z-index: 99998;
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* NEW PREMIUM LOADER */
.loader-wrapper {
    background-color: #fff;
    color: var(--inv-base);
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
}

.loader-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.loader-couple {
    font-family: var(--font-accent);
    font-weight: 700;
    letter-spacing: 0.5px;
    font-size: 20px;
    color: var(--inv-accent);
    text-shadow: 0 0 15px rgba(193, 154, 107, 0.35);
}

.loader-title {
    font-family: var(--font-base);
    font-weight: 700;
    letter-spacing: 0.3px;
    font-size: 14px;
    opacity: 0.85;
}

.loader {
    border: none !important;
    width: auto !important;
    height: auto !important;
    animation: heart-beat 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.loader-inner {
    display: none !important;
}

.loader::before {
    content: "\f004" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-size: 60px !important;
    color: var(--inv-accent) !important;
    text-shadow: 0 0 15px rgba(193, 154, 107, 0.35);
}

@keyframes heart-beat {
    0% {
        transform: scale(0.95);
    }

    5% {
        transform: scale(1.1);
    }

    39% {
        transform: scale(0.85);
    }

    45% {
        transform: scale(1);
    }

    60% {
        transform: scale(0.95);
    }

    50% {
        transform: scale(0.92);
    }

    100% {
        transform: scale(1);
    }
}

/* Flying Birds Animation */
.flying-birds {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 12;
    overflow: hidden;
}

.bird {
    position: absolute;
    opacity: 0;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.4));
}

.bird svg {
    width: 28px;
    height: auto;
}

.bird.active {
    opacity: 1;
}

.bird:nth-child(1) {
    top: 12%;
    animation: fly1 14s linear infinite;
}

.bird:nth-child(2) {
    top: 22%;
    animation: fly2 18s linear infinite;
    animation-delay: -5s;
}

.bird:nth-child(3) {
    top: 8%;
    animation: fly3 12s linear infinite;
    animation-delay: -9s;
}

.bird:nth-child(4) {
    top: 30%;
    animation: fly1 20s linear infinite;
    animation-delay: -12s;
}

.bird:nth-child(5) {
    top: 18%;
    animation: fly2 16s linear infinite;
    animation-delay: -3s;
}

@keyframes fly1 {
    0% {
        transform: translate(-50px, 0);
        opacity: 0;
    }

    5% {
        opacity: 0.8;
    }

    25% {
        transform: translate(150px, -18px);
    }

    50% {
        transform: translate(300px, 8px);
    }

    75% {
        transform: translate(450px, -12px);
    }

    95% {
        opacity: 0.8;
    }

    100% {
        transform: translate(600px, 0);
        opacity: 0;
    }
}

@keyframes fly2 {
    0% {
        transform: translate(-40px, 5px);
        opacity: 0;
    }

    5% {
        opacity: 0.7;
    }

    30% {
        transform: translate(180px, -14px);
    }

    60% {
        transform: translate(360px, 10px);
    }

    90% {
        opacity: 0.7;
    }

    100% {
        transform: translate(600px, -5px);
        opacity: 0;
    }
}

@keyframes fly3 {
    0% {
        transform: translate(-60px, -5px);
        opacity: 0;
    }

    8% {
        opacity: 0.75;
    }

    35% {
        transform: translate(150px, 12px);
    }

    65% {
        transform: translate(350px, -8px);
    }

    92% {
        opacity: 0.75;
    }

    100% {
        transform: translate(600px, 5px);
        opacity: 0;
    }
}

/* Wing flap animation for bird SVG */
.bird svg path {
    animation: wingFlap 0.4s ease-in-out infinite alternate;
}

@keyframes wingFlap {
    0% {
        d: path('M0 12Q7 2 15 10Q23 2 30 12');
    }

    100% {
        d: path('M0 8Q7 14 15 6Q23 14 30 8');
    }
}

/* Garden Gate Frame on Cover */
.gapura-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.gapura-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.7;
}

/* Story Timeline Fix */
.story-timeline {
    position: relative;
    padding-left: 20px;
    margin-top: 20px;
    border-left: 2px solid var(--inv-accent);
}

.story-item {
    position: relative;
    margin-bottom: 30px;
    padding-left: 20px;
    text-align: left;
}

.story-dot {
    position: absolute;
    left: -28px;
    top: 5px;
    width: 14px;
    height: 14px;
    background: var(--inv-accent);
    border-radius: 50%;
    border: 2px solid var(--inv-base);
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

.story-date {
    display: block;
    font-family: var(--font-accent);
    font-size: 24px;
    color: var(--inv-accent);
    margin-bottom: 5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.story-content {
    font-size: 14px;
    line-height: 1.6;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Sky Atmosphere */
.sky-atmosphere {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Clouds */
.cloud {
    position: absolute;
    opacity: 0.8;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.cloud-1 {
    top: 8%;
    left: -20%;
    width: 100px;
    animation: move-cloud-1 30s linear infinite;
}

.cloud-2 {
    top: 15%;
    left: -10%;
    width: 80px;
    animation: move-cloud-2 45s linear infinite;
    animation-delay: 5s;
}

.cloud-3 {
    top: 5%;
    left: -30%;
    width: 120px;
    animation: move-cloud-3 38s linear infinite;
    animation-delay: 2s;
}

@keyframes move-cloud-1 {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(130vw);
    }
}

@keyframes move-cloud-2 {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(130vw);
    }
}

@keyframes move-cloud-3 {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(130vw);
    }
}

/* Birds */
.bird {
    position: absolute;
    opacity: 0.9;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
}

.bird-1 {
    top: 12%;
    width: 30px;
    animation: fly-bird-1 18s linear infinite;
}

.bird-2 {
    top: 16%;
    width: 25px;
    animation: fly-bird-2 22s linear infinite;
    animation-delay: 3s;
}

.bird-3 {
    top: 10%;
    width: 28px;
    animation: fly-bird-3 20s linear infinite;
    animation-delay: 8s;
}

.bird-4 {
    top: 14%;
    width: 22px;
    animation: fly-bird-4 25s linear infinite;
    animation-delay: 12s;
}

@keyframes fly-bird-1 {
    0% {
        transform: translateX(-10vw) translateY(0) scale(1);
    }

    25% {
        transform: translateX(25vw) translateY(-10px) scale(0.9);
    }

    50% {
        transform: translateX(60vw) translateY(0) scale(1);
    }

    75% {
        transform: translateX(95vw) translateY(15px) scale(1.1);
    }

    100% {
        transform: translateX(130vw) translateY(0) scale(1);
    }
}

@keyframes fly-bird-2 {
    0% {
        transform: translateX(-10vw) translateY(20px) scale(0.8);
    }

    100% {
        transform: translateX(130vw) translateY(-20px) scale(0.8);
    }
}

@keyframes fly-bird-3 {
    0% {
        transform: translateX(-10vw) translateY(-10px);
    }

    50% {
        transform: translateX(50vw) translateY(20px);
    }

    100% {
        transform: translateX(130vw) translateY(-10px);
    }
}

@keyframes fly-bird-4 {
    0% {
        transform: translateX(-10vw);
    }

    100% {
        transform: translateX(130vw);
    }
}

/* Heritage Layers System */
.cover-layers {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.mempelai-full-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 5;
    pointer-events: none;
    backface-visibility: hidden;
    transform: translateZ(0);
    opacity: 0.8;
}

.cover-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.cover-bg-video-main {
    opacity: 1;
}

.cover-waterfall-video {
    position: absolute;
    top: -10%;
    left: -5%;
    width: 110%;
    height: 120%;
    object-fit: cover;
    object-position: center bottom;
    z-index: 4;
    pointer-events: none;
    opacity: 0;
    clip-path: none;
    filter: saturate(1.06) contrast(1.02) brightness(1.01);
    transition: opacity 0.2s ease;
    transform: none;
}

.ngundang_cover.waterfall-active .cover-waterfall-video {
    opacity: 1;
}

.ngundang_cover.waterfall-active .cover-bg-video-main {
    opacity: 0;
}

.ngundang_cover.video-switching .cover-bg-video-main {
    animation: coverMainFadeOut 0.8s ease forwards;
}

.ngundang_cover.video-switching .cover-waterfall-video {
    animation: coverWaterfallFadeIn 0.8s ease forwards;
}

@keyframes coverMainFadeOut {
    0% {
        opacity: 1;
        filter: blur(0);
        transform: scale(1);
    }

    100% {
        opacity: 0;
        filter: blur(2px);
        transform: scale(1.02);
    }
}

@keyframes coverWaterfallFadeIn {
    0% {
        opacity: 0;
        filter: blur(3px);
    }

    100% {
        opacity: 1;
        filter: blur(0);
    }
}

.flying-bird {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--bird-size, 72px);
    height: auto;
    z-index: 18;
    pointer-events: none;
    opacity: 0;
    will-change: transform, opacity;
    animation-name: birdRandomFlight;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes birdRandomFlight {
    0% {
        opacity: 0;
        transform: translate3d(var(--start-x, -20vw), var(--start-y, 20vh), 0) scaleX(var(--bird-flip, 1)) scale(var(--bird-scale, 1));
    }

    10% {
        opacity: 1;
    }

    95% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translate3d(var(--end-x, 120vw), var(--end-y, 26vh), 0) scaleX(var(--bird-flip, 1)) scale(var(--bird-scale, 1));
    }
}

.ngundang_cover .cover-layers {
    overflow: hidden;
}

/* Keep cover video perfectly upright and stable across devices */
.ngundang_cover .cover-bg-video,
.ngundang_cover .cover-bg-video-main,
.ngundang_cover .cover-waterfall-video {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    transform: none;
    backface-visibility: visible;
}

.ngundang_cover .cover-waterfall-video {
    transform: none;
}

/* Slight overscan only for frame image to hide thin seams */
.ngundang_cover .cover-page-frame {
    top: -2px;
    left: -2px;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    object-position: center center;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.layer-bg-waterfall {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("/template/ornamen/jabat/bg_waterfall.png");
    background-size: cover;
    background-position: center bottom;
    opacity: 1;
    z-index: 1;
}

.mempelai-full-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    background-size: cover;
    background-position: center;
    pointer-events: none;
}

.cover-layers .ornament-flower {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: auto;
    z-index: 10;
    pointer-events: none;
}

.salam-flower-left,
.salam-flower-right {
    position: absolute;
    bottom: -8%;
    width: 40%;
    z-index: 5;
    pointer-events: none;
}

.salam-flower-left {
    left: -14%;
}

.salam-flower-right {
    right: -14%;
    transform: scaleX(-1);
}

.salam-flower-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -32%;
    width: 100%;
    z-index: 4;
    pointer-events: none;
}

.salam-flower-top-left,
.salam-flower-top-right {
    position: absolute;
    top: -3%;
    width: 28%;
    z-index: 6;
    opacity: 0.9;
    pointer-events: none;
}

.salam-flower-top-left {
    left: -8%;
}

.salam-flower-top-right {
    right: -8%;
    transform: scaleX(-1);
}

.ngundang_salam .container-content {
    position: relative;
    z-index: 8 !important;
}

.cover-layers {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

.cover-layers video.cover-bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    pointer-events: none;
}

.cover-page-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 20;
    pointer-events: none;
}

.cover-page-frame.frame-hidden-initial {
    opacity: 0;
    transform: scale(1.35);
    transform-origin: center center;
}

.cover-page-frame.frame-visible {
    animation: frameZoomIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes frameZoomIn {
    0% {
        opacity: 0;
        transform: scale(1.35);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.cover-frame-center {
    position: relative;
    z-index: 30;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: auto;
}

.cover-frame-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: none;
    height: 100%;
    padding: 120px 20px 26px;
    margin-top: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    border: none;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
}

.cover-frame-content::before,
.cover-frame-content::after {
    content: "";
    position: absolute;
    pointer-events: none;
    display: none;
}

.cover-frame-content::before {
    inset: auto;
    border: none;
}

.cover-frame-content::after {
    inset: auto;
    border: none;
}

.cover-frame-content.cover-hidden-initial {
    opacity: 0;
    transform: translateY(140px);
    pointer-events: none;
    will-change: transform, opacity;
}

.cover-frame-content.cover-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    animation: coverOverlayZoomIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.cover-frame-content:not(.cover-text-visible)>* {
    opacity: 0 !important;
    animation: none !important;
}

.cover-frame-center .pretitle {
    position: relative;
    font-family: "Open Sans", sans-serif;
    letter-spacing: 1.8px;
    color: #ffd980;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
    z-index: 2;
}

.cover-frame-center .cover-pretitle-badge {
    background-image: url("/template/aruna-valley-gold/asset/overlay_title.webp");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    padding: 6px 36px;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 85vw;
    font-size: 0.95rem;
    color: #3d2917;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.4);
}

.cover-frame-center .date {
    font-family: "Playfair Display", "Cinzel", serif;
    letter-spacing: 2px;
    font-size: clamp(0.9rem, 3.5vw, 1.25rem) !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    color: #3c2b02 !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
    margin-bottom: 12px !important;
    border-bottom: 1px solid rgba(60, 43, 2, 0.3);
    padding-bottom: 4px;
    display: inline-block;
}

.cover-frame-center .title {
    font-family: "Brittany Signature", cursive;
    font-size: clamp(1.4rem, 4.5vw, 2.2rem) !important;
    line-height: 1.2;
    font-weight: 700 !important;
    color: #3c2b02 !important;
    text-shadow: 0 2px 12px rgba(26, 16, 8, 0.55), 0 1px 2px rgba(255, 255, 255, 0.35);
    margin-bottom: 24px !important;
    letter-spacing: 0px;
    white-space: normal;
    max-width: 95vw;
    margin-left: auto;
    margin-right: auto;
}

.cover-couple-photo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.cover-couple-image-frame {
    padding: 6px;
    background: linear-gradient(145deg, rgba(177, 139, 84, 0.9), rgba(255, 236, 196, 0.95));
    transform: scale(1.3);
    transform-origin: center center;
}

.cover-couple-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}



.cover-frame-center .to {
    font-family: "Open Sans", sans-serif;
    letter-spacing: 1.2px;
    color: #ffffff;
    opacity: 0.95;
}

.cover-frame-center .guest-sub {
    font-family: "Open Sans", sans-serif;
    color: #f4efe3;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.cover-frame-center .guest-name {
    font-family: "CRONDE", serif;
    letter-spacing: 0.2px;
    color: #ffffff;
    text-shadow: 0 3px 16px rgba(0, 0, 0, 0.45);
}

.guest-name-box {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.cover-open-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 190px;
    min-height: 48px;
    padding: 8px 24px;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.96);
    background: linear-gradient(120deg, #a47d44 0%, #c9a164 50%, #a47d44 100%);
    background-size: 200% 100%;
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
    margin-top: 32px;
    font-family: "Open Sans", sans-serif;
}

/* Cover text animation follows animate.css utility classes (aligned with royal-burgundy). */

.cover-open-btn:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.34);
}

@media (min-width: 577px) {

    .ngundang_cover .cover-frame-content,
    .ngundang_cover .cover-frame-content.cover-hidden-initial,
    .ngundang_cover .cover-frame-content.cover-visible {
        height: 88% !important;
        max-height: 88% !important;
        padding: 28px 20px 18px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 14px !important;
        overflow: visible !important;
    }

    .ngundang_cover .cover-open-btn {
        margin-top: 10px !important;
    }

    .ngundang_cover .cover-top-block {
        position: relative;
        padding-top: 84px;
    }

    .ngundang_cover .cover-guest-block {
        margin-top: 6px;
    }

    .ngundang_cover .cover-frame-center .pretitle {
        position: absolute;
        top: -6px;
        left: 0;
        right: 0;
        width: max-content;
        margin: 0 auto;
        font-size: 12px !important;
        letter-spacing: 2px;
        padding: 6px 36px;
        background-color: transparent !important;
        z-index: 3;
    }

    .ngundang_cover .cover-frame-center .date {
        position: absolute;
        top: 36px;
        left: 0;
        right: 0;
        width: max-content;
        margin: 0 auto;
        font-size: 1.3rem !important;
        letter-spacing: 4px;
        line-height: 1;
        margin-bottom: 0 !important;
    }
}

@keyframes coverTextCascadeIn {
    0% {
        transform: translateY(10px) scale(0.985);
        filter: blur(1.6px);
    }

    100% {
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes coverTitleRevealNew {
    0% {
        transform: translateY(12px) scale(0.965);
        letter-spacing: 1px;
        filter: blur(2px);
    }

    70% {
        transform: translateY(-2px) scale(1.02);
    }

    100% {
        transform: translateY(0) scale(1);
        letter-spacing: 0;
        filter: blur(0);
    }
}

@keyframes coverPhotoRevealZoom {
    0% {
        transform: translateY(8px) scale(0.9) rotate(-1.2deg);
        filter: saturate(0.8);
    }

    100% {
        transform: translateY(0) scale(1) rotate(0deg);
        filter: saturate(1);
    }
}

@keyframes coverPhotoBreathNew {
    0% {
        transform: translateY(0) scale(1);
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
    }

    100% {
        transform: translateY(-2px) scale(1.04);
        box-shadow: 0 12px 24px rgba(177, 139, 84, 0.4);
    }
}

@keyframes coverTitleDriftNew {
    0% {
        transform: translateY(0) rotate(0deg);
        text-shadow: 0 3px 16px rgba(0, 0, 0, 0.34);
    }

    100% {
        transform: translateY(-2px) rotate(-0.3deg);
        text-shadow: 0 5px 22px rgba(255, 225, 160, 0.3);
    }
}

@keyframes coverPhotoTiltNew {
    0% {
        transform: translateY(0) rotate(0deg);
        filter: saturate(1);
    }

    100% {
        transform: translateY(-3px) rotate(1.2deg);
        filter: saturate(1.08);
    }
}

@keyframes coverGuestNameRevealNew {
    0% {
        transform: translateY(10px) scale(0.97);
        filter: blur(2px);
    }

    100% {
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes coverButtonEnterNew {
    0% {
        transform: translateY(8px) scale(0.96);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}

@keyframes coverButtonPulseNew {
    0% {
        transform: translateY(0);
        box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2);
    }

    100% {
        transform: translateY(-1px);
        box-shadow: 0 14px 30px rgba(243, 215, 116, 0.32);
    }
}

@keyframes coverButtonSweepNew {
    0% {
        background-position: 0% 50%;
        box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2);
    }

    100% {
        background-position: 100% 50%;
        box-shadow: 0 14px 28px rgba(243, 215, 116, 0.3);
    }
}

@keyframes coverOverlayFrameIn {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.96);
        filter: blur(4px);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes coverOverlayZoomIn {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Special transition when opening invitation: Cover -> Salam */
.ngundang_cover.travel-leave .container-mobile.cover {
    animation: coverTravelOut 0.62s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.ngundang_salam.travel-enter .container-mobile {
    animation: salamTravelIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes coverTravelOut {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-68px) scale(1.08);
        filter: blur(6px);
    }
}

@keyframes salamTravelIn {
    0% {
        opacity: 0;
        transform: translateY(88px) scale(0.94);
        filter: blur(7px);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@media (max-width: 576px) {

    .ngundang_cover .cover-frame-content,
    .ngundang_cover .cover-frame-content.cover-hidden-initial,
    .ngundang_cover .cover-frame-content.cover-visible {
        width: calc(100% - 28px);
        max-width: none;
        margin-top: 0;
        height: auto !important;
        max-height: none !important;
        padding: 34px 16px 22px;
        border-radius: 22px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 12px;
        overflow: visible;
    }

    .ngundang_cover .cover-top-block {
        position: relative;
        padding-top: 0;
    }

    .cover-frame-center .pretitle {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        width: auto;
        margin: 0 auto;
        font-size: 12px !important;
        letter-spacing: 2px;
        padding: 6px 28px;
        border-radius: 0;
        background-color: transparent;
        /* jangan pakai background: shorthand — akan override background-image! */
        z-index: 3;
    }

    .ngundang_cover .cover-frame-center .date {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        width: auto;
        margin: 8px auto 12px;
        font-size: clamp(1.05rem, 5.8vw, 1.6rem);
        font-weight: 700;
        letter-spacing: 1.2px;
        line-height: 1.15;
    }

    .cover-frame-center .title {
        margin-top: 0;
        color: #fffdf8;
    }

    .cover-couple-photo {
        margin-top: 8px;
    }

    .cover-couple-image-frame {
        padding: 5px;
        transform: scale(1.18);
    }

    .cover-open-btn {
        min-width: 172px;
        min-height: 44px;
        padding: 9px 26px;
        margin-top: 10px;
    }

    .ngundang_cover .cover-guest-block {
        margin-top: 4px;
    }
}

@media (max-width: 576px) {

    .salam-flower-left,
    .salam-flower-right {
        width: 46%;
        bottom: -10%;
    }

    .salam-flower-left {
        left: -18%;
    }

    .salam-flower-right {
        right: -18%;
    }

    .salam-flower-center {
        width: 110%;
        bottom: -36%;
    }

    .salam-flower-top-left,
    .salam-flower-top-right {
        width: 34%;
        top: -5%;
    }
}

@media (max-width: 390px) {

    .ngundang_cover .cover-frame-content,
    .ngundang_cover .cover-frame-content.cover-hidden-initial,
    .ngundang_cover .cover-frame-content.cover-visible {
        width: calc(100% - 22px);
        height: auto !important;
        max-height: none !important;
        padding: 30px 14px 18px;
        gap: 10px;
        border-radius: 20px;
        overflow: visible;
    }

    .cover-open-btn {
        min-width: 164px;
        margin-top: 0;
    }

    .cover-couple-image-frame {
        padding: 4px;
        transform: scale(1.1);
    }

    .ngundang_cover .cover-top-block {
        padding-top: 0;
    }

    .cover-frame-center .pretitle {
        font-size: 11px !important;
        letter-spacing: 1.8px;
    }

    .ngundang_cover .cover-frame-center .date {
        margin: 6px auto 10px;
        font-size: clamp(1rem, 6.2vw, 1.45rem);
    }

    .cover-frame-center .title {
        margin-top: 0;
    }
}

.flower-kiri-bawah {
    left: -24%;
    width: 44% !important;
    bottom: -10% !important;
    z-index: 14 !important;
}

.flower-kanan-bawah {
    right: -24%;
    width: 44% !important;
    bottom: -10% !important;
    transform: scaleX(-1);
    z-index: 14 !important;
}

.flower-tengah-bawah {
    left: 50%;
    transform: translateX(-50%);
    width: 100% !important;
    z-index: 13 !important;
    bottom: -38% !important;
}

.flower-tengah2-bawah {
    left: 50%;
    transform: translateX(-50%);
    width: 100% !important;
    z-index: 12 !important;
    bottom: -34% !important;
}

.flower-tengah-gif-kiri,
.flower-tengah-gif-kanan {
    top: 26%;
    bottom: auto !important;
    width: 40% !important;
    z-index: 999 !important;
    opacity: 0;
    filter: saturate(1.28) contrast(1.12) drop-shadow(0 8px 14px rgba(0, 0, 0, 0.28));
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.flower-tengah-gif-kiri {
    left: -23%;
    transform: translateY(18px);
}

.flower-tengah-gif-kanan {
    right: -23%;
    transform: scaleX(-1) translateY(18px);
}

.flower-tengah-gif-kiri.flower-side-visible {
    opacity: 1;
    transform: translateY(0);
}

.flower-tengah-gif-kanan.flower-side-visible {
    opacity: 1;
    transform: scaleX(-1) translateY(0);
}

.flower-bawah-gif-kiri {
    left: -12%;
    width: 58% !important;
    bottom: -8% !important;
    z-index: 10 !important;
    animation: none !important;
}

.flower-bawah-gif-kanan {
    right: -12%;
    width: 58% !important;
    bottom: -8% !important;
    z-index: 10 !important;
    transform: scaleX(-1);
    animation: none !important;
}

/* 1:1 Typography Styles */
.cover-title-wrapper {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    z-index: 20;
    pointer-events: none;
}

.text-undangan {
    font-family: var(--font-latin);
    font-size: 70px;
    color: #d67a61;
    /* Muted Coral/Terracotta */
    line-height: 0.8;
    margin: 0;
    display: block;
    text-shadow: 1px 1px 4px rgba(255, 255, 255, 0.4);
}

.text-pernikahan {
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    color: #7a6a9a;
    /* Muted Mauve/Lavender */
    font-weight: 500;
    letter-spacing: 4px;
    text-transform: capitalize;
    margin-top: -15px;
    margin-left: 10px;
    display: block;
}

/* Responsive Heritage */
@media (max-width: 576px) {
    .layer-joglo {
        bottom: 15%;
    }

    .flower-kiri-bawah {
        left: -28%;
        width: 48% !important;
        bottom: -12% !important;
    }

    .flower-kanan-bawah {
        right: -28%;
        width: 48% !important;
        bottom: -12% !important;
    }

    .flower-bawah-gif-kiri,
    .flower-bawah-gif-kanan {
        width: 68% !important;
        bottom: -10% !important;
    }

    .flower-bawah-gif-kiri {
        left: -18%;
    }

    .flower-bawah-gif-kanan {
        right: -18%;
    }

    .flower-tengah2-bawah {
        bottom: -36% !important;
        width: 106% !important;
    }

    .flower-tengah-bawah {
        bottom: -42% !important;
        width: 122% !important;
    }
}







/* --- Editor Overrides --- */
/* Salam Slide Ornament System */
.ngundang_salam .cover-layers {
    overflow: hidden;
}

.ngundang_salam .salam-hero {
    background: transparent;
    border: none;
    border-radius: 20px;
    padding: 1.25rem 1rem !important;
    backdrop-filter: none;
    margin-bottom: 1.8rem !important;
}

/* Salam Slide Typography Redesign */
.ngundang_salam .salam-intro-title {
    font-family: var(--font-base);
    font-weight: 700;
    letter-spacing: 0.2em !important;
    font-size: 0.78rem !important;
    color: #3d2917 !important;
    text-transform: uppercase;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.4) !important;
    background: transparent;
    padding: 0;
    border-radius: 0;
    display: inline-block;
}

.ngundang_salam .salam-couple-name {
    font-family: var(--font-accent), serif;
    font-size: clamp(1.6rem, 6vw, 2.6rem) !important;
    font-weight: 700 !important;
    color: #fef3d0 !important;
    line-height: 1.2 !important;
    margin: 0.6rem 0 1.2rem !important;
    white-space: normal !important;
    letter-spacing: 2px !important;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), 0 2px 5px rgba(0, 0, 0, 0.3);
}

.ngundang_salam .salam-date {
    font-family: var(--font-base);
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    font-size: 0.95rem !important;
    color: #4a321d !important;
    text-transform: uppercase;
    text-shadow: none !important;
    display: inline-block;
    background: linear-gradient(180deg, rgba(255, 248, 235, 0.92), rgba(246, 231, 205, 0.92)) !important;
    border: 1px solid rgba(179, 139, 84, 0.48) !important;
    border-radius: 999px !important;
    padding: 8px 24px !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24), inset 0 2px 5px rgba(255, 255, 255, 0.5) !important;
    margin-bottom: 0.5rem !important;
}

.ngundang_salam .salam-quote-card {
    background: rgba(255, 248, 235, 0.85) !important;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(220, 187, 129, 0.6) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
    border-radius: 16px !important;
    padding: 1.8rem 1.4rem !important;
    position: relative;
    overflow: hidden;
}

.ngundang_salam .salam-quote-card::before {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 12px;
    border: 1px solid rgba(220, 187, 129, 0.4);
    pointer-events: none;
}

.ngundang_salam .salam-quote {
    font-family: var(--font-base);
    font-weight: 600;
    font-size: 1rem !important;
    color: #3d2917 !important;
    line-height: 1.6 !important;
    text-shadow: none !important;
}

.ngundang_salam .salam-quote-source {
    font-family: var(--font-base);
    font-size: 0.85rem !important;
    color: #5a4533 !important;
    margin-top: 1rem !important;
    letter-spacing: 0.04em !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    text-shadow: none !important;
}

@media (max-width: 576px) {
    .ngundang_salam .salam-couple-name {
        font-size: clamp(1.4rem, 6vw, 2.2rem) !important;
        white-space: normal !important;
    }

    .ngundang_salam .salam-date {
        font-size: 0.92rem !important;
    }

    .ngundang_salam .salam-quote {
        font-size: 0.97rem !important;
    }

    .ngundang_salam .salam-quote-source {
        font-size: 0.84rem !important;
        letter-spacing: 0.03em !important;
    }
}

.salam-bg-main {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    transform: scale(1.06);
    animation: salamBgReveal 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.salam-bg-left,
.salam-bg-right {
    position: absolute;
    top: 0;
    height: 100%;
    width: 50%;
    max-width: none;
    object-fit: cover;
    z-index: 6;
    pointer-events: none;
    opacity: 0;
}

.salam-bg-left {
    left: 0;
    object-position: left center;
    animation: salamSideLeftIn 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards,
        salamSideFloatLeft 4.6s ease-in-out 1.4s infinite alternate;
}

.salam-bg-right {
    right: 0;
    object-position: right center;
    animation: salamSideRightIn 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards,
        salamSideFloatRight 4.8s ease-in-out 1.45s infinite alternate;
}

.salam-wayang-left,
.salam-wayang-right {
    position: absolute;
    bottom: -4%;
    width: 42%;
    z-index: 12;
    pointer-events: none;
    opacity: 1;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.28));
    transform-origin: bottom center;
}

.salam-wayang-left {
    left: -28%;
    width: 48%;
    z-index: 14;
    transform: rotate(24deg);
    animation: wayangLeftIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both,
        wayangLeftSway 4.2s ease-in-out 1s infinite alternate;
}

.salam-wayang-right {
    right: -28%;
    width: 48%;
    z-index: 14;
    transform: scaleX(-1) rotate(24deg);
    animation: wayangRightIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both,
        wayangRightSway 4.2s ease-in-out 1.1s infinite alternate;
}

.salam-rumah-batak,
.salam-rumah-jawa {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.24));
    height: auto;
    object-fit: contain;
}

.salam-rumah-batak {
    bottom: 1%;
    left: 10%;
    width: 50%;
    z-index: 11;
    animation: rumahLeftIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards,
        rumahLeftFloat 4.6s ease-in-out 1.2s infinite alternate;
}

.salam-rumah-jawa {
    bottom: -10%;
    left: 40%;
    width: 80%;
    z-index: 13;
    animation: rumahRightIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards,
        rumahRightFloat 4.8s ease-in-out 1.25s infinite alternate;
}

@keyframes wayangLeftIn {
    0% {
        opacity: 0;
        transform: rotate(30deg) translateY(24px) scale(0.92);
    }

    100% {
        opacity: 1;
        transform: rotate(24deg) translateY(0) scale(1);
    }
}

@keyframes wayangRightIn {
    0% {
        opacity: 0;
        transform: scaleX(-1) rotate(30deg) translateY(24px) scale(0.92);
    }

    100% {
        opacity: 1;
        transform: scaleX(-1) rotate(24deg) translateY(0) scale(1);
    }
}

@keyframes wayangLeftSway {
    0% {
        transform: rotate(22deg) translateY(0);
    }

    100% {
        transform: rotate(28deg) translateY(-10px);
    }
}

@keyframes wayangRightSway {
    0% {
        transform: scaleX(-1) rotate(22deg) translateY(-1px);
    }

    100% {
        transform: scaleX(-1) rotate(28deg) translateY(-11px);
    }
}

@keyframes rumahLeftIn {
    0% {
        opacity: 0;
        transform: translateY(16px) scale(0.92);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes rumahRightIn {
    0% {
        opacity: 0;
        transform: translateY(18px) scale(0.92);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes rumahLeftFloat {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-7px);
    }
}

@keyframes rumahRightFloat {
    0% {
        transform: translateY(-1px);
    }

    100% {
        transform: translateY(-8px);
    }
}

@keyframes salamBgReveal {
    0% {
        opacity: 0;
        transform: scale(1.08);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes salamSideLeftIn {
    0% {
        opacity: 0;
        transform: translateX(-22px) translateY(14px) scale(0.96);
    }

    100% {
        opacity: 1;
        transform: translateX(0) translateY(0) scale(1);
    }
}

@keyframes salamSideRightIn {
    0% {
        opacity: 0;
        transform: translateX(22px) translateY(14px) scale(0.96);
    }

    100% {
        opacity: 1;
        transform: translateX(0) translateY(0) scale(1);
    }
}

@keyframes salamSideFloatLeft {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-10px);
    }
}

@keyframes salamSideFloatRight {
    0% {
        transform: translateY(-2px);
    }

    100% {
        transform: translateY(-12px);
    }
}

@media (max-width: 576px) {

    .salam-bg-left,
    .salam-bg-right {
        width: 50%;
    }

    .salam-wayang-left,
    .salam-wayang-right {
        width: 44%;
        bottom: -4%;
    }

    .salam-rumah-batak {
        width: 42%;
        bottom: 6%;
        left: 8%;
    }

    .salam-rumah-jawa {
        width: 64%;
        bottom: -6%;
        left: 24%;
    }

    .salam-wayang-left {
        left: -18%;
        transform: rotate(14deg);
        animation: wayangLeftInMobile 0.8s cubic-bezier(0.22, 1, 0.36, 1) both,
            wayangLeftSwayMobile 4.2s ease-in-out 1s infinite alternate;
    }

    .salam-wayang-right {
        right: -18%;
        transform: scaleX(-1) rotate(14deg);
        animation: wayangRightInMobile 0.8s cubic-bezier(0.22, 1, 0.36, 1) both,
            wayangRightSwayMobile 4.2s ease-in-out 1.1s infinite alternate;
    }

    .salam-bg-left {
        left: 0;
    }

    .salam-bg-right {
        right: 0;
    }
}

@media (max-width: 480px) {

    .salam-wayang-left,
    .salam-wayang-right {
        width: 46%;
        bottom: -5%;
    }

    .salam-wayang-left {
        left: -20%;
    }

    .salam-wayang-right {
        right: -20%;
    }

    .salam-rumah-batak {
        width: 44%;
        left: 6%;
        bottom: 7%;
    }

    .salam-rumah-jawa {
        width: 68%;
        left: 20%;
        bottom: -7%;
    }
}

@media (max-width: 390px) {

    .salam-wayang-left,
    .salam-wayang-right {
        width: 48%;
        bottom: -6%;
    }

    .salam-wayang-left {
        left: -22%;
    }

    .salam-wayang-right {
        right: -22%;
    }

    .salam-rumah-batak {
        width: 46%;
        left: 3%;
        bottom: 8%;
    }

    .salam-rumah-jawa {
        width: 72%;
        left: 16%;
        bottom: -8%;
    }
}

@media (max-width: 360px) {

    .salam-wayang-left,
    .salam-wayang-right {
        width: 50%;
    }

    .salam-rumah-batak {
        width: 48%;
        left: 1%;
    }

    .salam-rumah-jawa {
        width: 76%;
        left: 12%;
        bottom: -9%;
    }
}

@keyframes wayangLeftInMobile {
    0% {
        opacity: 0;
        transform: rotate(18deg) translateY(16px) scale(0.94);
    }

    100% {
        opacity: 1;
        transform: rotate(14deg) translateY(0) scale(1);
    }
}

@keyframes wayangRightInMobile {
    0% {
        opacity: 0;
        transform: scaleX(-1) rotate(18deg) translateY(16px) scale(0.94);
    }

    100% {
        opacity: 1;
        transform: scaleX(-1) rotate(14deg) translateY(0) scale(1);
    }
}

@keyframes wayangLeftSwayMobile {
    0% {
        transform: rotate(12deg) translateY(0);
    }

    100% {
        transform: rotate(16deg) translateY(-7px);
    }
}

@keyframes wayangRightSwayMobile {
    0% {
        transform: scaleX(-1) rotate(12deg) translateY(0);
    }

    100% {
        transform: scaleX(-1) rotate(16deg) translateY(-7px);
    }
}

/* Cover stabilization on mobile: keep cover visuals upright */
@media (max-width: 576px) {
    #panZoom {
        transform: none !important;
        transform-origin: center center !important;
    }

    .canvas,
    #ngundang,
    .ngundang_track,
    .ngundang_list {
        rotate: 0deg !important;
    }

    .ngundang_cover .cover-page-frame,
    .ngundang_cover .cover-page-frame.frame-hidden-initial,
    .ngundang_cover .cover-page-frame.frame-visible {
        transform: none !important;
        animation: none !important;
        opacity: 1 !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: fill !important;
        object-position: center center !important;
    }

    /* Mobile fix: prevent skew/tilt artifacts on cover video rendering */
    .ngundang_cover .cover-layers,
    .ngundang_cover .container-mobile.cover,
    .ngundang_cover .cover-bg-video,
    .ngundang_cover .cover-bg-video-main,
    .ngundang_cover .cover-waterfall-video {
        transform: none !important;
        perspective: none !important;
    }

    .ngundang_cover .cover-bg-video,
    .ngundang_cover .cover-bg-video-main {
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
        backface-visibility: visible !important;
    }

    .ngundang_cover .cover-waterfall-video {
        top: -10% !important;
        left: -5% !important;
        width: 110% !important;
        height: 120% !important;
        object-fit: cover !important;
        object-position: center bottom !important;
        transform: none !important;
    }

    .ngundang_cover .cover-frame-content,
    .ngundang_cover .cover-frame-content.cover-hidden-initial,
    .ngundang_cover .cover-frame-content.cover-visible {
        transform: none !important;
        padding-top: 60px !important;
    }

    .ngundang_cover .cover-frame-center .pretitle {
        margin-bottom: 14px !important;
    }

    .ngundang_cover .cover-frame-center .date {
        margin-top: 2px !important;
        font-size: clamp(0.75rem, 3vw, 1.1rem) !important;
    }

    .ngundang_cover .flying-bird {
        animation-duration: 16s !important;
    }
}

/* Responsive workspace without JS scaling transform */
#panZoom {
    inset: 0;
    transform: none !important;
}

#workspace-container {
    inset: 0;
}

#app,
body,
html,
#workspace-container,
#panZoom {
    min-height: 100vh;
}

@supports (height: 100svh) {

    #app,
    body,
    html,
    #workspace-container,
    #panZoom {
        min-height: 100svh;
    }
}

@supports (height: 100dvh) {

    #app,
    body,
    html,
    #workspace-container,
    #panZoom {
        min-height: 100dvh;
    }
}

#panZoom>.h-100.w-100 {
    width: 100% !important;
    height: 100% !important;
    align-items: stretch !important;
    justify-content: center !important;
}

#panZoom .canvas {
    position: relative !important;
    width: 100% !important;
    max-width: 414px;
    height: 100% !important;
    max-height: 100vh;
    max-height: 100svh;
    max-height: 100dvh;
    transform: none !important;
}

#panZoom #ngundang {
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
}

/* --- Premium CSS Butterfly --- */
.butterfly-box {
    position: absolute;
    top: 15%;
    right: 15%;
    width: 40px;
    height: 40px;
    z-index: 100;
    pointer-events: none;
    perspective: 500px;
    animation: butterflySwing 12s ease-in-out infinite alternate;
}

.butterfly-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: rotateX(30deg) rotateY(20deg);
}

.butterfly-wing {
    position: absolute;
    width: 20px;
    height: 25px;
    background: linear-gradient(135deg, #f3c96d 0%, #ffffff 50%, #f3c96d 100%);
    opacity: 0.85;
    border: 1px solid rgba(212, 175, 55, 0.4);
    box-shadow: 0 0 8px rgba(243, 201, 109, 0.5);
}

.wing-left {
    right: 50%;
    border-radius: 50% 50% 10% 80%;
    transform-origin: right center;
    animation: flapLeft 0.35s ease-in-out infinite alternate;
}

.wing-right {
    left: 50%;
    border-radius: 50% 50% 80% 10%;
    transform-origin: left center;
    animation: flapRight 0.35s ease-in-out infinite alternate;
}

.butterfly-body {
    position: absolute;
    left: 50%;
    top: 10px;
    width: 2px;
    height: 12px;
    background: #443311;
    transform: translateX(-50%);
    border-radius: 2px;
    z-index: 2;
}

@keyframes flapLeft {
    0% {
        transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(75deg);
    }
}

@keyframes flapRight {
    0% {
        transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(-75deg);
    }
}

@keyframes butterflySwing {
    0% {
        transform: translate(0, 0) rotate(5deg);
    }

    25% {
        transform: translate(-20px, -15px) rotate(-5deg);
    }

    50% {
        transform: translate(10px, -30px) rotate(10deg);
    }

    75% {
        transform: translate(30px, -10px) rotate(-5deg);
    }

    100% {
        transform: translate(0, 0) rotate(5deg);
    }
}

/* --- Java & Batak Ornaments --- */
.ornament-jawa {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    filter: contrast(1.1) saturate(1.2) drop-shadow(0 5px 25px rgba(0, 0, 0, 0.8));
    z-index: 50;
    width: 65%;
}

.ornament-batak {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    filter: brightness(1.2) contrast(1.2) drop-shadow(0 0 15px rgba(255, 255, 255, 0.4)) drop-shadow(0 5px 25px rgba(0, 0, 0, 0.9));
    z-index: 50;
    width: 65%;
}

/* Mempelai ornament placement targets (top/bottom center boxes) */
.ngundang_mempelai .mempelai-content-stack {
    position: relative;
    z-index: 35;
    justify-content: center !important;
    gap: 0.35rem;
    transform: none;
}

.ngundang_mempelai .mempelai-content-shell {
    position: relative;
    height: 100%;
    z-index: 40;
    background: transparent;
}

.ngundang_mempelai .mempelai-content-shell .row,
.ngundang_mempelai .mempelai-content-shell .col-12 {
    height: 100%;
}

.ngundang_mempelai .mempelai-content-shell .row {
    margin: 0 !important;
}

.ngundang_mempelai .mempelai-content-shell .col-12 {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
}

.ngundang_mempelai .cover-layers {
    transform: scale(1.06) translateX(-5px);
    transform-origin: center center;
}

.ngundang_mempelai .mempelai-cover-frame {
    opacity: 1;
    z-index: 30;
}

.ngundang_mempelai .mempelai-bg-main {
    background-size: cover;
    background-position: center;
    opacity: 0.85;
}

.ngundang_mempelai .mempelai-waterfall-layer {
    opacity: 0.12;
    z-index: 1;
}

.ngundang_mempelai .ornament-flower {
    z-index: 15;
}

.ngundang_mempelai .mempelai-panel {
    width: min(92%, 420px);
    padding: 0.3rem clamp(0.6rem, 2.4vw, 0.9rem);
    margin: 0 auto !important;
    border-radius: 12px;
    background: transparent;
    border: none;
    box-shadow: none;
}

.ngundang_mempelai .mempelai-basmallah {
    font-family: "Brittany Signature", cursive;
    color: #3c2b02;
    text-shadow:
        0 2px 12px rgba(26, 16, 8, 0.55),
        0 1px 2px rgba(0, 0, 0, 0.35);
    letter-spacing: 0.4px;
}

.ngundang_mempelai .mempelai-intro {
    color: #4a3420;
    text-shadow:
        0 1px 2px rgba(255, 255, 255, 0.5);
    letter-spacing: 0.3px;
    max-width: 86%;
    margin-left: auto;
    margin-right: auto;
}

.ngundang_mempelai .mempelai-cards {
    background: transparent;
    border-radius: 0;
    padding: 0.2rem 0.1rem;
}

.ngundang_mempelai .mempelai-name-badge {
    background: transparent;
    padding: 0.6rem 1.7rem;
    margin: 0 auto;
    color: #fef3d0 !important;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), 0 2px 5px rgba(0, 0, 0, 0.3);
    max-width: 86%;
}


.ngundang_mempelai .mempelai-parent-card {
    max-width: 86%;
    padding: 0.45rem 0.85rem;
    background: transparent;
}

.ngundang_mempelai .mempelai-parent {
    color: #4a3420;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

.ngundang_mempelai .mempelai-and {
    color: #3c2b02;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
    letter-spacing: 1.4px;
}

.ngundang_mempelai .ornament-jawa {
    position: relative;
    top: auto;
    left: auto;
    bottom: auto;
    transform: none;
    display: block;
    margin: 0 auto 0.45rem;
    width: 34%;
    z-index: 18;
}

.ngundang_mempelai .ornament-batak {
    position: relative;
    top: auto;
    left: auto;
    bottom: auto;
    transform: none;
    display: block;
    margin: 0.7rem auto 0;
    width: 28%;
    z-index: 18;
}

/* Mempelai slide fit-to-screen refinements */
.ngundang_mempelai .container-content {
    box-sizing: border-box;
    padding-bottom: 48px;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.ngundang_mempelai .mempelai-content-stack {
    padding: 0 clamp(0.6rem, 3vw, 1rem) !important;
    gap: clamp(0.2rem, 1.1vh, 0.45rem);
    width: 100%;
    text-align: center;
    margin: 0 auto;
}

.ngundang_mempelai .mempelai-basmallah {
    font-size: clamp(1.1rem, 3.2vw, 1.7rem) !important;
    line-height: 1.05 !important;
    margin-bottom: 0.4rem !important;
}

.ngundang_mempelai .mempelai-intro {
    font-size: clamp(0.7rem, 1.9vw, 0.85rem) !important;
    line-height: 1.45 !important;
    margin-bottom: 0.5rem !important;
    max-width: 92%;
}

.ngundang_mempelai .mempelai-card-pria .mempelai-name,
.ngundang_mempelai .mempelai-card-wanita .mempelai-name {
    font-size: clamp(20px, 5vw, 28px) !important;
    padding: 0 !important;
    margin: 0 auto;
    color: #3c2b02 !important;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.4);
}

.ngundang_mempelai .glass-card {
    padding: 0.35rem 0.6rem !important;
}

.ngundang_mempelai .mempelai-parent {
    font-size: clamp(0.68rem, 1.7vw, 0.8rem) !important;
    line-height: 1.4 !important;
}

.ngundang_mempelai .mempelai-and {
    font-size: clamp(1.1rem, 4vw, 1.6rem) !important;
    margin: 0.35rem 0 !important;
}

.ngundang_mempelai .ornament-jawa {
    margin-bottom: 0.3rem;
    width: 30%;
}

.ngundang_mempelai .ornament-batak {
    margin-top: 0.4rem;
    width: 24%;
}

@media (max-width: 576px) {
    .ngundang_mempelai .ornament-jawa {
        margin-bottom: 0.25rem;
        width: 34%;
    }

    .ngundang_mempelai .ornament-batak {
        margin-top: 0.35rem;
        width: 26%;
    }
}

@media (max-width: 390px) {
    .ngundang_mempelai .ornament-jawa {
        width: 35%;
    }

    .ngundang_mempelai .ornament-batak {
        width: 27%;
    }
}

@media (max-height: 720px) {
    .ngundang_mempelai .mempelai-content-stack {
        gap: 0.25rem;
    }

    .ngundang_mempelai .mempelai-basmallah {
        font-size: clamp(1rem, 3vw, 1.5rem) !important;
        margin-bottom: 0.3rem !important;
    }

    .ngundang_mempelai .mempelai-intro {
        font-size: clamp(0.66rem, 1.7vw, 0.8rem) !important;
        margin-bottom: 0.35rem !important;
    }

    .ngundang_mempelai .mempelai-card-pria .mempelai-name,
    .ngundang_mempelai .mempelai-card-wanita .mempelai-name {
        padding: 14px 30px !important;
        font-size: clamp(16px, 3.6vw, 22px) !important;
    }

    .ngundang_mempelai .mempelai-and {
        margin: 0.25rem 0 !important;
    }
}

@media (max-height: 640px) {
    .ngundang_mempelai .container-content {
        padding-bottom: 42px;
    }

    .ngundang_mempelai .ornament-jawa {
        width: 28%;
    }

    .ngundang_mempelai .ornament-batak {
        width: 22%;
    }
}

/* ====================================================== */
/* Mempelai Slide - Festive active-state animation system */
/* ====================================================== */
.ngundang_mempelai .container-mobile {
    overflow: hidden;
    padding: 0 !important;
}

.ngundang_mempelai .container-content::before,
.ngundang_mempelai .container-content::after {
    content: "";
    position: absolute;
    inset: -8%;
    pointer-events: none;
    z-index: 6;
    opacity: 0;
    background-image:
        radial-gradient(circle, rgba(255, 241, 184, 0.96) 0 2px, transparent 3px),
        radial-gradient(circle, rgba(255, 213, 136, 0.9) 0 1.7px, transparent 2.7px),
        radial-gradient(circle, rgba(255, 255, 255, 0.85) 0 1.2px, transparent 2.2px);
    background-size: 170px 170px, 130px 130px, 100px 100px;
    background-position: 12% 16%, 72% 28%, 30% 72%;
    mix-blend-mode: screen;
}

.ngundang_mempelai .container-content::after {
    background-position: 82% 18%, 26% 35%, 62% 78%;
}

.ngundang_mempelai .mempelai-bg-main,
.ngundang_mempelai .mempelai-waterfall-layer,
.ngundang_mempelai .ornament-jawa,
.ngundang_mempelai .ornament-batak,
.ngundang_mempelai .flower-kiri-bawah,
.ngundang_mempelai .flower-kanan-bawah,
.ngundang_mempelai .flower-tengah2-bawah,
.ngundang_mempelai .flower-tengah-bawah,
.ngundang_mempelai .flower-bawah-gif-kiri,
.ngundang_mempelai .flower-bawah-gif-kanan,
.ngundang_mempelai .mempelai-basmallah,
.ngundang_mempelai .mempelai-intro,
.ngundang_mempelai .mempelai-card-pria .mempelai-name,
.ngundang_mempelai .mempelai-card-pria .mempelai-parent,
.ngundang_mempelai .mempelai-and,
.ngundang_mempelai .mempelai-card-wanita .mempelai-name,
.ngundang_mempelai .mempelai-card-wanita .mempelai-parent {
    opacity: 0;
}

.ngundang_mempelai.active .container-content::before {
    animation: mempelaiSparkleDriftA 8.5s linear infinite,
        mempelaiSparkleBlink 2s ease-in-out infinite;
    opacity: 0.58;
}

.ngundang_mempelai.active .container-content::after {
    animation: mempelaiSparkleDriftB 10.5s linear infinite,
        mempelaiSparkleBlink 2.4s ease-in-out 0.8s infinite;
    opacity: 0.48;
}

.ngundang_mempelai.active .mempelai-bg-main {
    animation: mempelaiBgReveal 1.15s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both,
        mempelaiBgBreath 11s ease-in-out 1.3s infinite alternate;
}

.ngundang_mempelai.active .mempelai-waterfall-layer {
    animation: mempelaiWaterfallReveal 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both,
        mempelaiWaterfallPan 12s ease-in-out 1.4s infinite alternate;
}

.ngundang_mempelai.active .mempelai-content-stack {
    animation: mempelaiStackEnter 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
}

.ngundang_mempelai.active .ornament-jawa {
    animation: mempelaiJawaDropIn 0.95s cubic-bezier(0.34, 1.56, 0.64, 1) 0.45s both,
        mempelaiJawaSway 4.6s ease-in-out 1.8s infinite alternate;
}

.ngundang_mempelai.active .ornament-batak {
    animation: mempelaiBatakRiseIn 1s cubic-bezier(0.34, 1.56, 0.64, 1) 1.35s both,
        mempelaiBatakSway 4.8s ease-in-out 2.3s infinite alternate;
}

.ngundang_mempelai.active .flower-kiri-bawah {
    animation: mempelaiFlowerLeftIn 0.95s cubic-bezier(0.34, 1.56, 0.64, 1) 0.12s both,
        mempelaiFlowerLeftFloat 3.9s ease-in-out 1.2s infinite alternate;
}

.ngundang_mempelai.active .flower-kanan-bawah {
    animation: mempelaiFlowerRightIn 0.95s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both,
        mempelaiFlowerRightFloat 4.2s ease-in-out 1.3s infinite alternate;
}

.ngundang_mempelai.active .flower-tengah2-bawah {
    animation: mempelaiFlowerCenterBackIn 1.05s cubic-bezier(0.22, 1, 0.36, 1) 0.28s both,
        mempelaiFlowerCenterBackFloat 5.2s ease-in-out 1.45s infinite alternate;
}

.ngundang_mempelai.active .flower-tengah-bawah {
    animation: mempelaiFlowerCenterFrontIn 1.12s cubic-bezier(0.22, 1, 0.36, 1) 0.42s both,
        mempelaiFlowerCenterFrontFloat 5.5s ease-in-out 1.6s infinite alternate;
}

.ngundang_mempelai.active .flower-bawah-gif-kiri {
    animation: mempelaiPetalWaveLeft 5.8s ease-in-out 1.15s infinite !important;
}

.ngundang_mempelai.active .flower-bawah-gif-kanan {
    animation: mempelaiPetalWaveRight 5.8s ease-in-out 1.35s infinite !important;
}

.ngundang_mempelai .mempelai-name {
    position: relative;
    overflow: visible;
}

.ngundang_mempelai .mempelai-name::after {
    content: "";
    position: absolute;
    inset: -7px -10px;
    pointer-events: none;
    opacity: 0;
    border-radius: 20px;
    background: linear-gradient(115deg,
            transparent 0%,
            rgba(255, 255, 255, 0.12) 35%,
            rgba(255, 229, 165, 0.55) 50%,
            rgba(255, 255, 255, 0.12) 65%,
            transparent 100%);
    transform: translateX(-130%) skewX(-14deg);
}

.ngundang_mempelai.active .mempelai-name::after {
    animation: mempelaiNameShine 3.6s ease-in-out 1.8s infinite;
}

.ngundang_mempelai.active .mempelai-basmallah {
    animation: mempelaiTextIn 0.62s cubic-bezier(0.22, 1, 0.36, 1) 0.6s both;
}

.ngundang_mempelai.active .mempelai-intro {
    animation: mempelaiTextIn 0.62s cubic-bezier(0.22, 1, 0.36, 1) 0.78s both;
}

.ngundang_mempelai.active .mempelai-card-pria .mempelai-name {
    animation: mempelaiNameLeftIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.96s both;
}

.ngundang_mempelai.active .mempelai-card-pria .mempelai-parent {
    animation: mempelaiTextIn 0.62s cubic-bezier(0.22, 1, 0.36, 1) 1.12s both;
}

.ngundang_mempelai.active .mempelai-and {
    animation: mempelaiAndPop 0.72s cubic-bezier(0.34, 1.56, 0.64, 1) 1.24s both;
}

.ngundang_mempelai.active .mempelai-card-wanita .mempelai-name {
    animation: mempelaiNameRightIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1.36s both;
}

.ngundang_mempelai.active .mempelai-card-wanita .mempelai-parent {
    animation: mempelaiTextIn 0.62s cubic-bezier(0.22, 1, 0.36, 1) 1.52s both;
}

@keyframes mempelaiBgReveal {
    0% {
        opacity: 0;
        transform: scale(1.24);
        filter: blur(6px) brightness(0.58);
    }

    60% {
        filter: blur(0) brightness(1.18);
    }

    100% {
        opacity: 0.88;
        transform: scale(1);
        filter: blur(0) brightness(1);
    }
}

@keyframes mempelaiBgBreath {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.08);
    }
}

@keyframes mempelaiWaterfallReveal {
    0% {
        opacity: 0;
        transform: translateY(-8%) scale(1.12);
        filter: blur(5px);
    }

    100% {
        opacity: 0.2;
        transform: translateY(-10%) scale(1.05);
        filter: blur(0);
    }
}

@keyframes mempelaiWaterfallPan {
    0% {
        transform: translateY(-10%) scale(1.05);
    }

    100% {
        transform: translateY(-6%) scale(1.11);
    }
}

@keyframes mempelaiStackEnter {
    0% {
        opacity: 0;
        transform: translateY(18px) scale(0.96);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes mempelaiJawaDropIn {
    0% {
        opacity: 0;
        transform: translateY(-34px) scale(0.56) rotate(-5deg);
    }

    62% {
        opacity: 1;
        transform: translateY(5px) scale(1.06) rotate(1deg);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
    }
}

@keyframes mempelaiBatakRiseIn {
    0% {
        opacity: 0;
        transform: translateY(36px) scale(0.55) rotate(5deg);
    }

    62% {
        opacity: 1;
        transform: translateY(-5px) scale(1.06) rotate(-1deg);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
    }
}

@keyframes mempelaiJawaSway {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    100% {
        transform: translateY(-4px) rotate(1.4deg);
    }
}

@keyframes mempelaiBatakSway {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    100% {
        transform: translateY(-4px) rotate(-1.4deg);
    }
}

@keyframes mempelaiFlowerLeftIn {
    0% {
        opacity: 0;
        transform: translate(-54px, 44px) scale(0.62) rotate(-12deg);
        filter: blur(4px);
    }

    65% {
        opacity: 1;
        transform: translate(7px, -5px) scale(1.08) rotate(2deg);
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: translate(0, 0) scale(1) rotate(0deg);
        filter: blur(0);
    }
}

@keyframes mempelaiFlowerRightIn {
    0% {
        opacity: 0;
        transform: scaleX(-1) translate(-54px, 44px) scale(0.62) rotate(-12deg);
        filter: blur(4px);
    }

    65% {
        opacity: 1;
        transform: scaleX(-1) translate(7px, -5px) scale(1.08) rotate(2deg);
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: scaleX(-1) translate(0, 0) scale(1) rotate(0deg);
        filter: blur(0);
    }
}

@keyframes mempelaiFlowerCenterBackIn {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(48px) scale(0.8);
        filter: blur(4px);
    }

    62% {
        opacity: 1;
        transform: translateX(-50%) translateY(-4px) scale(1.05);
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes mempelaiFlowerCenterFrontIn {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(58px) scale(0.78);
        filter: blur(5px);
    }

    62% {
        opacity: 1;
        transform: translateX(-50%) translateY(-5px) scale(1.07);
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes mempelaiFlowerLeftFloat {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    100% {
        transform: translate(9px, -10px) rotate(1.6deg);
    }
}

@keyframes mempelaiFlowerRightFloat {
    0% {
        transform: scaleX(-1) translate(0, 0) rotate(0deg);
    }

    100% {
        transform: scaleX(-1) translate(9px, -10px) rotate(1.6deg);
    }
}

@keyframes mempelaiFlowerCenterBackFloat {
    0% {
        transform: translateX(-50%) translateY(0) scale(1);
    }

    100% {
        transform: translateX(-50%) translateY(-7px) scale(1.03);
    }
}

@keyframes mempelaiFlowerCenterFrontFloat {
    0% {
        transform: translateX(-50%) translateY(0) scale(1);
    }

    100% {
        transform: translateX(-50%) translateY(-9px) scale(1.04);
    }
}

@keyframes mempelaiPetalWaveLeft {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0.82;
    }

    50% {
        transform: translate(12px, -8px) rotate(2.1deg);
        opacity: 1;
    }
}

@keyframes mempelaiPetalWaveRight {

    0%,
    100% {
        transform: scaleX(-1) translate(0, 0) rotate(0deg);
        opacity: 0.82;
    }

    50% {
        transform: scaleX(-1) translate(12px, -8px) rotate(2.1deg);
        opacity: 1;
    }
}

@keyframes mempelaiSparkleDriftA {
    0% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(-12px, -16px, 0);
    }

    100% {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes mempelaiSparkleDriftB {
    0% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(14px, -11px, 0);
    }

    100% {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes mempelaiSparkleBlink {

    0%,
    100% {
        filter: brightness(1);
        opacity: 0.35;
    }

    50% {
        filter: brightness(1.3);
        opacity: 0.7;
    }
}

@keyframes mempelaiTextIn {
    0% {
        opacity: 0;
        transform: translateY(16px) scale(0.94);
        filter: blur(3px);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes mempelaiNameLeftIn {
    0% {
        opacity: 0;
        transform: translateX(-34px) scale(0.9);
        filter: blur(3px);
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
        filter: blur(0);
    }
}

@keyframes mempelaiNameRightIn {
    0% {
        opacity: 0;
        transform: translateX(34px) scale(0.9);
        filter: blur(3px);
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
        filter: blur(0);
    }
}

@keyframes mempelaiAndPop {
    0% {
        opacity: 0;
        transform: scale(0.25) rotate(-8deg);
        filter: blur(4px);
    }

    62% {
        opacity: 1;
        transform: scale(1.14) rotate(1deg);
        filter: blur(0);
    }

    80% {
        transform: scale(0.95) rotate(-0.4deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: blur(0);
    }
}

@keyframes mempelaiNameShine {
    0% {
        opacity: 0;
        transform: translateX(-130%) skewX(-14deg);
    }

    10% {
        opacity: 1;
    }

    26% {
        opacity: 0;
        transform: translateX(140%) skewX(-14deg);
    }

    100% {
        opacity: 0;
        transform: translateX(140%) skewX(-14deg);
    }
}

.ngundang_groom .groom-bg-batak-back {
    z-index: 0;
    pointer-events: none;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.ngundang_groom .groom-bg-layer {
    z-index: 1;
    pointer-events: none;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Keep groom/bride names on one line without ugly truncation */
.mempelai-single-line {
    display: block !important;
    width: min(94vw, 420px);
    max-width: 94vw;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    transform: translateX(-40px);
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    font-size: clamp(1.4rem, 5.4vw, 1.95rem) !important;
    line-height: 1.2;
    letter-spacing: -0.01em;
    padding: 16px 26px !important;
    text-align: center;
    word-break: break-word;
    hyphens: auto;
}

@media (max-width: 390px) {
    .mempelai-single-line {
        width: min(96vw, 360px);
        max-width: 96vw;
        font-size: clamp(1.2rem, 5.3vw, 1.7rem) !important;
        padding: 14px 22px !important;
    }
}

/* Mobile fix: prevent bride slide tilt/rotation artifacts */
@media (max-width: 576px) {

    .ngundang_bride .bride-bg-base,
    .ngundang_bride .bride-bg-main,
    .ngundang_bride .bride-bg-bottom,
    .ngundang_bride .bride-corner,
    .ngundang_bride .bride-photo-backdrop {
        transform: none !important;
        rotate: 0deg !important;
        animation: none !important;
        opacity: 1 !important;
        filter: none !important;
    }

    .ngundang_bride .bride-photo-backdrop {
        transform: translate(-50%, -50%) !important;
    }

    .ngundang_bride .container-mobile,
    .ngundang_bride .container-content {
        transform: none !important;
        rotate: 0deg !important;
    }

    .ngundang_bride .bride-bg-base,
    .ngundang_bride .bride-bg-main {
        background-position: center center !important;
        background-size: cover !important;
    }

    .ngundang_bride img {
        transform: none !important;
        rotate: 0deg !important;
    }
}

.ngundang_bride .bride-bg-base {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    pointer-events: none;
    z-index: 3;
    opacity: 1;
}

.ngundang_bride .bride-bg-main {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    pointer-events: none;
    z-index: 2;
    opacity: 1;
}

.ngundang_bride .bride-corner {
    position: absolute;
    pointer-events: none;
    z-index: 4;
    height: auto;
    object-fit: contain;
}

.ngundang_bride .bride-corner-top-left {
    top: -1%;
    left: -2%;
    width: 44%;
}

.ngundang_bride .bride-corner-bottom-left {
    bottom: 82px;
    left: -14%;
    width: 74%;
}

.ngundang_bride .bride-corner-bottom-right {
    bottom: 82px;
    right: -14%;
    width: 74%;
}

.ngundang_bride .bride-bg-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 56px;
    width: 100%;
    max-width: 414px;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    object-fit: contain;
    pointer-events: none;
    z-index: 3;
}

.ngundang_bride .bride-photo-backdrop {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 430px;
    max-width: none;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: contain;
    pointer-events: none;
    z-index: 4;
}

@media (max-width: 576px) {
    .ngundang_bride .bride-corner-top-left {
        top: -1%;
        left: -3%;
        width: 48%;
    }

    .ngundang_bride .bride-corner-bottom-left,
    .ngundang_bride .bride-corner-bottom-right {
        bottom: 88px;
        width: 80%;
    }

    .ngundang_bride .bride-corner-bottom-left {
        left: -18%;
    }

    .ngundang_bride .bride-corner-bottom-right {
        right: -18%;
    }

    .ngundang_bride .bride-bg-bottom {
        bottom: 58px;
        width: 100%;
    }

    .ngundang_bride .bride-photo-backdrop {
        width: 450px;
    }
}

@media (max-width: 390px) {
    .ngundang_bride .bride-corner-top-left {
        top: -2%;
        left: -4%;
        width: 50%;
    }

    .ngundang_bride .bride-corner-bottom-left,
    .ngundang_bride .bride-corner-bottom-right {
        bottom: 92px;
        width: 84%;
    }

    .ngundang_bride .bride-corner-bottom-left {
        left: -20%;
    }

    .ngundang_bride .bride-corner-bottom-right {
        right: -20%;
    }

    .ngundang_bride .bride-bg-bottom {
        bottom: 60px;
        width: 100%;
    }

    .ngundang_bride .bride-photo-backdrop {
        width: 420px;
    }
}

.ngundang_bride .shadow-lg {
    position: relative;
    z-index: 5;
}

/* ============================================= */
/* Bride Slide — Festive Ornament Animations     */
/* ============================================= */

/* --- Initial hidden state for all bride ornaments --- */
.ngundang_bride .bride-bg-base,
.ngundang_bride .bride-bg-main,
.ngundang_bride .bride-corner,
.ngundang_bride .bride-bg-bottom,
.ngundang_bride .bride-photo-backdrop {
    opacity: 0;
}

/* --- 1. Background Base: dramatic zoom reveal --- */
.ngundang_bride.active .bride-bg-base {
    animation: brideBgBaseReveal 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both;
}

@keyframes brideBgBaseReveal {
    0% {
        opacity: 0;
        transform: scale(1.25);
        filter: blur(6px) brightness(0.6);
    }

    60% {
        filter: blur(0) brightness(1.15);
    }

    100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0) brightness(1);
    }
}

/* --- 2. Frame Jawa: zoom + glow reveal --- */
.ngundang_bride.active .bride-bg-main {
    animation: brideBgMainReveal 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

@keyframes brideBgMainReveal {
    0% {
        opacity: 0;
        transform: scale(1.18) rotate(0.5deg);
        filter: brightness(0.5) saturate(0.3);
    }

    50% {
        filter: brightness(1.3) saturate(1.4);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: brightness(1) saturate(1);
    }
}

/* --- 3. Corner Top-Left: bounce in dari kiri atas --- */
.ngundang_bride.active .bride-corner-top-left {
    animation: brideCornerTopLeftIn 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s both,
        brideCornerFloatA 3.8s ease-in-out 1.4s infinite alternate;
}

@keyframes brideCornerTopLeftIn {
    0% {
        opacity: 0;
        transform: translate(-40px, -30px) scale(0.5) rotate(-15deg);
    }

    60% {
        opacity: 1;
        transform: translate(6px, 4px) scale(1.08) rotate(2deg);
    }

    80% {
        transform: translate(-2px, -1px) scale(0.97) rotate(-0.5deg);
    }

    100% {
        opacity: 1;
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
}

/* --- 4. Corner Bottom-Left: bounce in dari kiri bawah --- */
.ngundang_bride.active .bride-corner-bottom-left {
    animation: brideCornerBottomLeftIn 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s both,
        brideCornerFloatB 4.2s ease-in-out 1.6s infinite alternate;
}

@keyframes brideCornerBottomLeftIn {
    0% {
        opacity: 0;
        transform: translate(-50px, 40px) scale(0.4) rotate(12deg);
    }

    55% {
        opacity: 1;
        transform: translate(8px, -6px) scale(1.1) rotate(-3deg);
    }

    78% {
        transform: translate(-3px, 2px) scale(0.96) rotate(0.5deg);
    }

    100% {
        opacity: 1;
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
}

/* --- 5. Corner Bottom-Right: bounce in dari kanan bawah --- */
.ngundang_bride.active .bride-corner-bottom-right {
    animation: brideCornerBottomRightFromLeft 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 0.7s both,
        brideCornerFloatC 4.0s ease-in-out 1.9s infinite alternate;
}

@keyframes brideCornerBottomRightFromLeft {
    0% {
        opacity: 0;
        transform: translate(-100vw, 40px) scale(0.4) rotate(-35deg);
    }

    55% {
        opacity: 1;
        transform: translate(20px, -10px) scale(1.15) rotate(15deg);
    }

    78% {
        transform: translate(-5px, 2px) scale(0.96) rotate(-2deg);
    }

    100% {
        opacity: 1;
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
}

/* --- 6. Background bawah: dramatic slide up --- */
.ngundang_bride.active .bride-bg-bottom {
    animation: brideBgBottomSlideUp 1.0s cubic-bezier(0.34, 1.56, 0.64, 1) 0.85s both;
}

@keyframes brideBgBottomSlideUp {
    0% {
        opacity: 0;
        transform: translateY(60px) scale(0.85);
        filter: blur(4px);
    }

    60% {
        opacity: 1;
        transform: translateY(-8px) scale(1.04);
        filter: blur(0);
    }

    80% {
        transform: translateY(3px) scale(0.98);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* --- 7. Photo Backdrop: zoom burst + glow --- */
.ngundang_bride.active .bride-photo-backdrop {
    animation: bridePhotoBackdropZoom 1.2s cubic-bezier(0.22, 1, 0.36, 1) 1.0s both,
        bridePhotoGlow 3.5s ease-in-out 2.2s infinite alternate;
}

@keyframes bridePhotoBackdropZoom {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.3) rotate(8deg);
        filter: blur(8px) brightness(2);
    }

    50% {
        filter: blur(0) brightness(1.3);
    }

    70% {
        transform: translate(-50%, -50%) scale(1.06) rotate(-1deg);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
        filter: blur(0) brightness(1);
    }
}

/* --- Looping Float Animations (meriah!) --- */
@keyframes brideCornerFloatA {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    100% {
        transform: translate(4px, -8px) rotate(1.5deg);
    }
}

@keyframes brideCornerFloatB {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    100% {
        transform: translate(-5px, -10px) rotate(-2deg);
    }
}

@keyframes brideCornerFloatC {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    100% {
        transform: translate(5px, -10px) rotate(2deg);
    }
}

@keyframes bridePhotoGlow {
    0% {
        filter: drop-shadow(0 0 8px rgba(243, 201, 109, 0.0)) brightness(1);
    }

    100% {
        filter: drop-shadow(0 0 20px rgba(243, 201, 109, 0.45)) brightness(1.08);
    }
}

/* --- Photo circle entrance (zoomIn + shimmer) --- */
.ngundang_bride.active .shadow-lg {
    animation: bridePhotoCircleIn 1.0s cubic-bezier(0.34, 1.56, 0.64, 1) 1.1s both,
        bridePhotoBreath 4s ease-in-out 2.2s infinite alternate;
}

@keyframes bridePhotoCircleIn {
    0% {
        opacity: 0;
        transform: scale(0.3) rotate(-5deg);
        box-shadow: 0 0 0 rgba(243, 201, 109, 0);
    }

    60% {
        opacity: 1;
        transform: scale(1.08) rotate(1deg);
        box-shadow: 0 0 30px rgba(243, 201, 109, 0.6);
    }

    80% {
        transform: scale(0.96) rotate(-0.5deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
    }
}

@keyframes bridePhotoBreath {
    0% {
        transform: scale(1);
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
    }

    100% {
        transform: scale(1.04) translateY(-3px);
        box-shadow: 0 14px 28px rgba(243, 201, 109, 0.35);
    }
}

/* --- Text content entrance (staggered cascade) --- */
.ngundang_bride.active .w-100.text-center>div {
    opacity: 0;
    animation: brideTextCascadeIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ngundang_bride.active .w-100.text-center>div:nth-child(1) {
    animation-delay: 1.3s;
}

.ngundang_bride.active .w-100.text-center>div:nth-child(2) {
    animation-delay: 1.5s;
}

@keyframes brideTextCascadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.92);
        filter: blur(3px);
    }

    60% {
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* ==================================================== */
/* Shared Slide Ornament System — Story to Thanks       */
/* ==================================================== */

/* --- Base ornament positioning --- */
.slide-ornament {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
}

/* Flower bottom corners */
.slide-orn-flower-bl {
    bottom: 56px;
    left: -8%;
    width: 52%;
}

.slide-orn-flower-br {
    bottom: 56px;
    right: -8%;
    width: 52%;
    transform: scaleX(-1);
}

/* Jawa ornament top center */
.slide-orn-jawa {
    top: 2%;
    left: 50%;
    transform: translateX(-50%);
    width: 38%;
    z-index: 5;
}

/* Batak ornament bottom center */
.slide-orn-batak {
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    width: 30%;
    z-index: 5;
}

/* Clouds */
.slide-orn-cloud-l {
    top: 0;
    left: -15%;
    width: 50%;
}

.slide-orn-cloud-r {
    top: 0;
    right: -15%;
    width: 50%;
}

/* Trees */
.slide-orn-tree-l {
    bottom: 56px;
    left: -12%;
    width: 40%;
    z-index: 1;
}

.slide-orn-tree-r {
    bottom: 56px;
    right: -12%;
    width: 40%;
    z-index: 1;
}

/* Ornament bunga top center */
.slide-orn-bunga-top {
    top: 2%;
    left: 50%;
    transform: translateX(-50%);
    width: 30%;
    z-index: 5;
}

@media (max-width: 576px) {
    .slide-orn-flower-bl {
        width: 56%;
        left: -10%;
        bottom: 58px;
    }

    .slide-orn-flower-br {
        width: 56%;
        right: -10%;
        bottom: 58px;
    }

    .slide-orn-tree-l {
        width: 44%;
        left: -14%;
    }

    .slide-orn-tree-r {
        width: 44%;
        right: -14%;
    }

    .slide-orn-jawa {
        width: 42%;
    }

    .slide-orn-batak {
        width: 34%;
    }

    .slide-orn-cloud-l {
        width: 55%;
        left: -18%;
    }

    .slide-orn-cloud-r {
        width: 55%;
        right: -18%;
    }
}

@media (max-width: 390px) {
    .slide-orn-flower-bl {
        width: 60%;
        left: -12%;
    }

    .slide-orn-flower-br {
        width: 60%;
        right: -12%;
    }

    .slide-orn-tree-l {
        width: 48%;
        left: -16%;
    }

    .slide-orn-tree-r {
        width: 48%;
        right: -16%;
    }

    .slide-orn-jawa {
        width: 46%;
    }

    .slide-orn-batak {
        width: 36%;
    }
}

/* --- Entrance Animations --- */

/* Flower bouncing in from bottom corners */
.ngundang_slide.active .slide-orn-flower-bl {
    animation: ornFlowerLeftIn 1.0s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both,
        ornFloatLeft 4s ease-in-out 1.5s infinite alternate;
}

.ngundang_slide.active .slide-orn-flower-br {
    animation: ornFlowerRightIn 1.0s cubic-bezier(0.34, 1.56, 0.64, 1) 0.45s both,
        ornFloatRight 4.3s ease-in-out 1.6s infinite alternate;
}

@keyframes ornFlowerLeftIn {
    0% {
        opacity: 0;
        transform: translate(-50px, 50px) scale(0.4) rotate(15deg);
    }

    60% {
        opacity: 1;
        transform: translate(6px, -5px) scale(1.08) rotate(-2deg);
    }

    80% {
        transform: translate(-2px, 2px) scale(0.97) rotate(0.5deg);
    }

    100% {
        opacity: 1;
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
}

@keyframes ornFlowerRightIn {
    0% {
        opacity: 0;
        transform: scaleX(-1) translate(-50px, 50px) scale(0.4) rotate(15deg);
    }

    60% {
        opacity: 1;
        transform: scaleX(-1) translate(6px, -5px) scale(1.08) rotate(-2deg);
    }

    80% {
        transform: scaleX(-1) translate(-2px, 2px) scale(0.97) rotate(0.5deg);
    }

    100% {
        opacity: 1;
        transform: scaleX(-1) translate(0, 0) scale(1) rotate(0deg);
    }
}

/* Jawa ornament — drop in from top */
.ngundang_slide.active .slide-orn-jawa {
    animation: ornJawaDropIn 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both,
        ornJawaSway 5s ease-in-out 1.3s infinite alternate;
}

@keyframes ornJawaDropIn {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-40px) scale(0.6) rotate(-5deg);
    }

    55% {
        opacity: 1;
        transform: translateX(-50%) translateY(6px) scale(1.06) rotate(1deg);
    }

    78% {
        transform: translateX(-50%) translateY(-2px) scale(0.98) rotate(-0.3deg);
    }

    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1) rotate(0deg);
    }
}

@keyframes ornJawaSway {
    0% {
        transform: translateX(-50%) rotate(0deg) scale(1);
    }

    100% {
        transform: translateX(-50%) rotate(1.5deg) scale(1.03);
    }
}

/* Batak ornament — rise from bottom */
.ngundang_slide.active .slide-orn-batak {
    animation: ornBatakRiseIn 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.55s both,
        ornBatakSway 4.5s ease-in-out 1.7s infinite alternate;
}

@keyframes ornBatakRiseIn {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(40px) scale(0.6) rotate(5deg);
    }

    55% {
        opacity: 1;
        transform: translateX(-50%) translateY(-6px) scale(1.06) rotate(-1deg);
    }

    78% {
        transform: translateX(-50%) translateY(2px) scale(0.98) rotate(0.3deg);
    }

    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1) rotate(0deg);
    }
}

@keyframes ornBatakSway {
    0% {
        transform: translateX(-50%) rotate(0deg) scale(1);
    }

    100% {
        transform: translateX(-50%) rotate(-1.5deg) scale(1.03);
    }
}

/* Clouds — drift in */
.ngundang_slide.active .slide-orn-cloud-l {
    animation: ornCloudLeftIn 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both,
        ornCloudDriftL 6s ease-in-out 1.5s infinite alternate;
}

.ngundang_slide.active .slide-orn-cloud-r {
    animation: ornCloudRightIn 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both,
        ornCloudDriftR 7s ease-in-out 1.6s infinite alternate;
}

@keyframes ornCloudLeftIn {
    0% {
        opacity: 0;
        transform: translateX(-60px);
    }

    100% {
        opacity: 0.8;
        transform: translateX(0);
    }
}

@keyframes ornCloudRightIn {
    0% {
        opacity: 0;
        transform: translateX(60px);
    }

    100% {
        opacity: 0.8;
        transform: translateX(0);
    }
}

@keyframes ornCloudDriftL {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(10px);
    }
}

@keyframes ornCloudDriftR {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-10px);
    }
}

/* Trees — grow up from bottom */
.ngundang_slide.active .slide-orn-tree-l {
    animation: ornTreeLeftIn 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both,
        ornTreeSwayL 5s ease-in-out 1.5s infinite alternate;
}

.ngundang_slide.active .slide-orn-tree-r {
    animation: ornTreeRightIn 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s both,
        ornTreeSwayR 5.5s ease-in-out 1.7s infinite alternate;
}

@keyframes ornTreeLeftIn {
    0% {
        opacity: 0;
        transform: translateY(60px) scale(0.5) rotate(8deg);
    }

    60% {
        opacity: 1;
        transform: translateY(-5px) scale(1.05) rotate(-1deg);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
    }
}

@keyframes ornTreeRightIn {
    0% {
        opacity: 0;
        transform: translateY(60px) scale(0.5) rotate(-8deg);
    }

    60% {
        opacity: 1;
        transform: translateY(-5px) scale(1.05) rotate(1deg);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
    }
}

@keyframes ornTreeSwayL {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(1.5deg) translateX(3px);
    }
}

@keyframes ornTreeSwayR {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-1.5deg) translateX(-3px);
    }
}

/* Ornament bunga top — zoom in with glow */
.ngundang_slide.active .slide-orn-bunga-top {
    animation: ornBungaTopIn 1.0s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both,
        ornBungaGlow 4s ease-in-out 1.3s infinite alternate;
}

@keyframes ornBungaTopIn {
    0% {
        opacity: 0;
        transform: translateX(-50%) scale(0.3) rotate(-10deg);
        filter: blur(5px);
    }

    60% {
        opacity: 1;
        transform: translateX(-50%) scale(1.08) rotate(1deg);
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: translateX(-50%) scale(1) rotate(0deg);
        filter: blur(0);
    }
}

@keyframes ornBungaGlow {
    0% {
        filter: drop-shadow(0 0 4px rgba(243, 201, 109, 0)) brightness(1);
    }

    100% {
        filter: drop-shadow(0 0 15px rgba(243, 201, 109, 0.4)) brightness(1.06);
    }
}

/* --- Looping Float Animations (shared) --- */
@keyframes ornFloatLeft {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    100% {
        transform: translate(4px, -8px) rotate(1.5deg);
    }
}

@keyframes ornFloatRight {
    0% {
        transform: scaleX(-1) translate(0, 0) rotate(0deg);
    }

    100% {
        transform: scaleX(-1) translate(4px, -8px) rotate(1.5deg);
    }
}

/* ============================================= */
/* Events Slide — Premium Gold Look             */
/* ============================================= */

.ngundang_events .container-mobile {
    position: relative;
    overflow: hidden;
    background: #1a1712;
}

.ngundang_events .events-bg-acara {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transform: scale(1.15);
    transition: none;
}

.ngundang_events .events-bunga-phon-kiri {
    position: absolute;
    left: -10px;
    top: 10%;
    height: auto;
    width: 40%;
    z-index: 2;
    pointer-events: none;
    object-fit: contain;
    opacity: 0;
    transform: translateX(-60px) scale(0.8);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}

.ngundang_events .events-bunga-phon-kanan {
    position: absolute;
    right: -10px;
    top: 10%;
    height: auto;
    width: 40%;
    z-index: 2;
    pointer-events: none;
    object-fit: contain;
    opacity: 0;
    transform: translateX(60px) scale(0.8);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}

.ngundang_events .events-kain-bottom {
    position: absolute;
    bottom: -250px;
    left: -30px;
    right: -30px;
    width: calc(100% + 60px);
    z-index: 3;
    pointer-events: none;
    display: block;
    object-fit: fill;
    opacity: 0;
    transform: translateY(80px);
}

/* --- Acara Ornaments --- */
.ngundang_events .events-acara-1 {
    position: absolute;
    top: 0;
    left: -10px;
    width: 55%;
    z-index: 2;
    pointer-events: none;
    object-fit: contain;
    opacity: 0;
    transform: translateX(-40px) translateY(-20px) scale(0.7);
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25));
}

.ngundang_events .events-acara-2 {
    position: absolute;
    top: 0;
    right: -10px;
    width: 55%;
    z-index: 2;
    pointer-events: none;
    object-fit: contain;
    opacity: 0;
    transform: translateX(40px) translateY(-20px) scale(0.7);
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25));
}

/* Cards wrapper for relative positioning of acara_3 */
.ngundang_events .events-cards-wrapper {
    position: relative;
}

.ngundang_events .events-acara-3-left {
    position: absolute;
    bottom: -15px;
    left: -25px;
    width: 50%;
    z-index: 5;
    pointer-events: none;
    object-fit: contain;
    opacity: 0;
    transform: translateY(15px) scale(0.7);
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.2));
}

.ngundang_events .events-acara-3-right {
    position: absolute;
    bottom: -15px;
    right: -25px;
    width: 50%;
    z-index: 5;
    pointer-events: none;
    object-fit: contain;
    opacity: 0;
    transform: translateY(15px) scale(0.7) scaleX(-1);
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.2));
}

/* Single line text utility */
.ngundang_events .events-single-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 10px !important;
}

/* --- Acara Ornament Animations --- */
.ngundang_events.active .events-acara-1 {
    animation: eventsAcara1In 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both,
        eventsAcaraFloat 5s ease-in-out 1.5s infinite alternate;
}

.ngundang_events.active .events-acara-2 {
    animation: eventsAcara2In 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.45s both,
        eventsAcaraFloat 5.5s ease-in-out 1.6s infinite alternate;
}

.ngundang_events.active .events-acara-3-left {
    animation: eventsAcara3In 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 1.3s both;
}

.ngundang_events.active .events-acara-3-right {
    animation: eventsAcara3RightIn 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 1.4s both;
}

@keyframes eventsAcara1In {
    0% {
        opacity: 0;
        transform: translateX(-50px) translateY(-30px) scale(0.5) rotate(8deg);
    }

    60% {
        opacity: 1;
        transform: translateX(5px) translateY(3px) scale(1.05) rotate(-1deg);
    }

    100% {
        opacity: 1;
        transform: translateX(0) translateY(0) scale(1) rotate(0deg);
    }
}

@keyframes eventsAcara2In {
    0% {
        opacity: 0;
        transform: translateX(50px) translateY(-30px) scale(0.5) rotate(-8deg);
    }

    60% {
        opacity: 1;
        transform: translateX(-5px) translateY(3px) scale(1.05) rotate(1deg);
    }

    100% {
        opacity: 1;
        transform: translateX(0) translateY(0) scale(1) rotate(0deg);
    }
}

@keyframes eventsAcara3In {
    0% {
        opacity: 0;
        transform: translateY(25px) scale(0.5);
    }

    60% {
        opacity: 1;
        transform: translateY(-3px) scale(1.05);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes eventsAcara3RightIn {
    0% {
        opacity: 0;
        transform: translateY(25px) scale(0.5) scaleX(-1);
    }

    60% {
        opacity: 1;
        transform: translateY(-3px) scale(1.05) scaleX(-1);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1) scaleX(-1);
    }
}

@keyframes eventsAcaraFloat {
    0% {
        transform: translateX(0) translateY(0);
    }

    100% {
        transform: translateX(3px) translateY(-4px);
    }
}

/* --- Golden Overlay (Bootstrap: position-absolute top-0 start-0 w-100 h-100 pe-none) --- */
.ngundang_events .events-golden-overlay {
    z-index: 1;
    background:
        radial-gradient(ellipse at 50% 15%, rgba(243, 201, 109, 0.25) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 85%, rgba(30, 20, 10, 0.5) 0%, transparent 50%),
        linear-gradient(to bottom,
            rgba(18, 12, 7, 0.1) 0%,
            rgba(18, 12, 7, 0.15) 30%,
            rgba(18, 12, 7, 0.35) 65%,
            rgba(18, 12, 7, 0.5) 100%);
}

/* --- Golden Sparkle Particles --- */
.ngundang_events .events-sparkles {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    overflow: hidden;
}

.ngundang_events .events-sparkles .sparkle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffd700, #f5c842, transparent);
    box-shadow: 0 0 6px 2px rgba(255, 215, 0, 0.6),
        0 0 12px 4px rgba(255, 200, 50, 0.3);
    opacity: 0;
}

.ngundang_events.active .sparkle.s1 {
    animation: sparkleFloat 3.0s ease-in-out 0.5s infinite;
    top: 12%;
    left: 8%;
}

.ngundang_events.active .sparkle.s2 {
    animation: sparkleFloat 3.5s ease-in-out 0.8s infinite;
    top: 25%;
    right: 12%;
    width: 3px;
    height: 3px;
}

.ngundang_events.active .sparkle.s3 {
    animation: sparkleFloat 4.0s ease-in-out 1.2s infinite;
    top: 38%;
    left: 15%;
    width: 5px;
    height: 5px;
}

.ngundang_events.active .sparkle.s4 {
    animation: sparkleFloat 3.2s ease-in-out 0.3s infinite;
    top: 50%;
    right: 20%;
}

.ngundang_events.active .sparkle.s5 {
    animation: sparkleFloat 3.8s ease-in-out 1.5s infinite;
    top: 18%;
    left: 45%;
    width: 3px;
    height: 3px;
}

.ngundang_events.active .sparkle.s6 {
    animation: sparkleFloat 4.2s ease-in-out 0.6s infinite;
    top: 62%;
    left: 25%;
    width: 5px;
    height: 5px;
}

.ngundang_events.active .sparkle.s7 {
    animation: sparkleFloat 3.4s ease-in-out 1.0s infinite;
    top: 30%;
    right: 8%;
}

.ngundang_events.active .sparkle.s8 {
    animation: sparkleFloat 3.6s ease-in-out 1.8s infinite;
    top: 75%;
    right: 30%;
    width: 3px;
    height: 3px;
}

.ngundang_events.active .sparkle.s9 {
    animation: sparkleFloat 4.5s ease-in-out 0.2s infinite;
    top: 8%;
    right: 35%;
    width: 4px;
    height: 4px;
}

.ngundang_events.active .sparkle.s10 {
    animation: sparkleFloat 3.3s ease-in-out 1.4s infinite;
    top: 55%;
    left: 10%;
    width: 3px;
    height: 3px;
}

.ngundang_events.active .sparkle.s11 {
    animation: sparkleFloat 3.9s ease-in-out 0.9s infinite;
    top: 42%;
    right: 40%;
    width: 5px;
    height: 5px;
}

.ngundang_events.active .sparkle.s12 {
    animation: sparkleFloat 4.1s ease-in-out 1.6s infinite;
    top: 68%;
    left: 45%;
}

@keyframes sparkleFloat {
    0% {
        opacity: 0;
        transform: translateY(0) scale(0);
    }

    15% {
        opacity: 1;
        transform: translateY(-5px) scale(1.2);
    }

    30% {
        opacity: 0.7;
        transform: translateY(-12px) scale(0.8);
    }

    50% {
        opacity: 1;
        transform: translateY(-18px) scale(1.1);
    }

    70% {
        opacity: 0.5;
        transform: translateY(-25px) scale(0.6);
    }

    85% {
        opacity: 0.8;
        transform: translateY(-30px) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(-40px) scale(0);
    }
}

/* --- Ornamental Flourish Dividers --- */
.ngundang_events .events-flourish-top,
.ngundang_events .events-flourish-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 6px;
    opacity: 0;
}

.ngundang_events .events-flourish-bottom {
    margin-top: 4px;
    margin-bottom: 8px;
}

.ngundang_events .flourish-line {
    width: 50px;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, #d4a574, #f3c96d, #d4a574, transparent);
    border-radius: 2px;
}

.ngundang_events .flourish-diamond {
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, #f3c96d, #d4a574);
    transform: rotate(45deg);
    box-shadow: 0 0 6px rgba(243, 201, 109, 0.5);
    flex-shrink: 0;
}

/* Flourish entrance animations */
.ngundang_events.active .events-flourish-top {
    animation: flourishReveal 0.8s ease-out 0.55s both;
}

.ngundang_events.active .events-flourish-bottom {
    animation: flourishReveal 0.8s ease-out 0.85s both;
}

@keyframes flourishReveal {
    0% {
        opacity: 0;
        transform: scaleX(0);
    }

    60% {
        opacity: 1;
        transform: scaleX(1.1);
    }

    100% {
        opacity: 1;
        transform: scaleX(1);
    }
}


/* ============================================= */
/* Events Slide — Festive Entrance Animations    */
/* ============================================= */

/* --- Background: zoom-in reveal --- */
.ngundang_events.active .events-bg-acara {
    animation: eventsBgReveal 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both,
        eventsBgBreath 8s ease-in-out 1.6s infinite alternate;
}

@keyframes eventsBgReveal {
    0% {
        opacity: 0;
        transform: scale(1.25);
        filter: blur(6px) brightness(0.6);
    }

    60% {
        opacity: 1;
        filter: blur(0) brightness(1.05);
    }

    100% {
        opacity: 1;
        transform: scale(1.05);
        filter: blur(0) brightness(1);
    }
}

@keyframes eventsBgBreath {
    0% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1.1) translate3d(0, -5px, 0);
    }
}

/* --- Bunga Phon Kiri: swing in from left --- */
.ngundang_events.active .events-bunga-phon-kiri {
    animation: eventsBungaKiriIn 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both,
        eventsBungaKiriFloat 5s ease-in-out 1.5s infinite alternate;
}

@keyframes eventsBungaKiriIn {
    0% {
        opacity: 0;
        transform: translateX(-80px) scale(0.6) rotate(12deg);
    }

    50% {
        opacity: 1;
        transform: translateX(8px) scale(1.06) rotate(-2deg);
    }

    75% {
        transform: translateX(-3px) scale(0.98) rotate(0.5deg);
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1) rotate(0deg);
    }
}

@keyframes eventsBungaKiriFloat {
    0% {
        transform: translateX(0) translateY(0) rotate(0deg);
    }

    100% {
        transform: translateX(5px) translateY(-6px) rotate(1deg);
    }
}

/* --- Bunga Phon Kanan: swing in from right --- */
.ngundang_events.active .events-bunga-phon-kanan {
    animation: eventsBungaKananIn 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.45s both,
        eventsBungaKananFloat 5.5s ease-in-out 1.6s infinite alternate;
}

@keyframes eventsBungaKananIn {
    0% {
        opacity: 0;
        transform: translateX(80px) scale(0.6) rotate(-12deg);
    }

    50% {
        opacity: 1;
        transform: translateX(-8px) scale(1.06) rotate(2deg);
    }

    75% {
        transform: translateX(3px) scale(0.98) rotate(-0.5deg);
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1) rotate(0deg);
    }
}

@keyframes eventsBungaKananFloat {
    0% {
        transform: translateX(0) translateY(0) rotate(0deg);
    }

    100% {
        transform: translateX(-5px) translateY(-6px) rotate(-1deg);
    }
}

/* --- Kain: rise from bottom with bounce --- */
.ngundang_events.active .events-kain-bottom {
    animation: eventsKainRise 1.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s both,
        eventsKainSway 6s ease-in-out 2s infinite alternate;
}

@keyframes eventsKainRise {
    0% {
        opacity: 0;
        transform: translateY(80px) scale(1.1);
    }

    50% {
        opacity: 1;
        transform: translateY(-10px) scale(1.02);
    }

    70% {
        transform: translateY(4px) scale(0.99);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes eventsKainSway {
    0% {
        transform: translateY(0) scale(1);
    }

    100% {
        transform: translateY(-3px) scale(1.01);
    }
}

/* --- Text Elements: staggered drops with pop --- */
.ngundang_events.active .events-kicker {
    animation: eventsTextDrop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s both,
        eventsTextShimmer 4s ease-in-out 2s infinite alternate;
}

.ngundang_events.active .events-main-title {
    animation: eventsTitlePop 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.75s both,
        eventsTitleGlow 5s ease-in-out 2s infinite alternate;
}

.ngundang_events.active .events-main-amp {
    animation: eventsAmpSpin 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.9s both;
}

.ngundang_events.active .events-date-pill {
    animation: eventsPillPop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 1s both,
        eventsPillPulse 3s ease-in-out 2.2s infinite alternate;
}

@keyframes eventsTextDrop {
    0% {
        opacity: 0;
        transform: translateY(-40px) scale(0.7);
    }

    60% {
        opacity: 1;
        transform: translateY(5px) scale(1.05);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes eventsTextShimmer {
    0% {
        text-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
    }

    100% {
        text-shadow: 0 3px 18px rgba(243, 201, 109, 0.5), 0 0 30px rgba(243, 201, 109, 0.15);
    }
}

@keyframes eventsTitlePop {
    0% {
        opacity: 0;
        transform: scale(0.3) rotate(-5deg);
        filter: blur(8px);
    }

    50% {
        opacity: 1;
        transform: scale(1.08) rotate(1deg);
        filter: blur(0);
    }

    75% {
        transform: scale(0.97) rotate(-0.3deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: blur(0);
    }
}

@keyframes eventsTitleGlow {
    0% {
        text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    100% {
        text-shadow: 0 4px 25px rgba(243, 201, 109, 0.6), 0 0 40px rgba(243, 201, 109, 0.2), 0 2px 8px rgba(0, 0, 0, 0.3);
    }
}

@keyframes eventsAmpSpin {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-180deg);
    }

    60% {
        opacity: 1;
        transform: scale(1.3) rotate(10deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

@keyframes eventsPillPop {
    0% {
        opacity: 0;
        transform: scaleX(0.2) scaleY(0.5);
    }

    50% {
        opacity: 1;
        transform: scaleX(1.08) scaleY(1.06);
    }

    75% {
        transform: scaleX(0.97) scaleY(0.98);
    }

    100% {
        opacity: 1;
        transform: scaleX(1) scaleY(1);
    }
}

@keyframes eventsPillPulse {
    0% {
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.08);
    }

    100% {
        box-shadow: 0 8px 28px rgba(243, 201, 109, 0.35), 0 2px 10px rgba(243, 201, 109, 0.15);
    }
}

/* --- Event Cards: bounce in from sides --- */
.ngundang_events.active .events-card:nth-child(1) {
    animation: eventsCardLeftBounce 1s cubic-bezier(0.34, 1.56, 0.64, 1) 1.1s both;
}

.ngundang_events.active .events-card:nth-child(2) {
    animation: eventsCardRightBounce 1s cubic-bezier(0.34, 1.56, 0.64, 1) 1.25s both;
}

@keyframes eventsCardLeftBounce {
    0% {
        opacity: 0;
        transform: translateX(-100px) rotate(-8deg) scale(0.5);
    }

    50% {
        opacity: 1;
        transform: translateX(10px) rotate(2deg) scale(1.04);
    }

    70% {
        transform: translateX(-4px) rotate(-0.5deg) scale(0.98);
    }

    100% {
        opacity: 1;
        transform: translateX(0) rotate(0deg) scale(1);
    }
}

@keyframes eventsCardRightBounce {
    0% {
        opacity: 0;
        transform: translateX(100px) rotate(8deg) scale(0.5);
    }

    50% {
        opacity: 1;
        transform: translateX(-10px) rotate(-2deg) scale(1.04);
    }

    70% {
        transform: translateX(4px) rotate(0.5deg) scale(0.98);
    }

    100% {
        opacity: 1;
        transform: translateX(0) rotate(0deg) scale(1);
    }
}

/* --- Countdown: staggered pop-in --- */
.ngundang_events.active .events-countdown {
    animation: eventsCountdownFade 0.8s ease-out 1.4s both;
}

.ngundang_events.active .events-countdown-item:nth-child(1) {
    animation: eventsCountdownPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.5s both;
}

.ngundang_events.active .events-countdown-item:nth-child(2) {
    animation: eventsCountdownPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.65s both;
}

.ngundang_events.active .events-countdown-item:nth-child(3) {
    animation: eventsCountdownPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.8s both;
}

.ngundang_events.active .events-countdown-item:nth-child(4) {
    animation: eventsCountdownPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.95s both;
}

@keyframes eventsCountdownFade {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes eventsCountdownPop {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-15deg);
    }

    60% {
        opacity: 1;
        transform: scale(1.15) rotate(3deg);
    }

    80% {
        transform: scale(0.95) rotate(-1deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* --- Save The Date: glow pulse --- */
.ngundang_events.active .events-save-date-btn {
    animation: eventsSaveDateIn 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 2.1s both,
        eventsSaveDateGlow 2.5s ease-in-out 3s infinite alternate;
}

@keyframes eventsSaveDateIn {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.6);
    }

    60% {
        opacity: 1;
        transform: translateY(-5px) scale(1.08);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes eventsSaveDateGlow {
    0% {
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
        filter: brightness(1);
    }

    100% {
        box-shadow: 0 8px 30px rgba(243, 201, 109, 0.5), 0 0 20px rgba(243, 201, 109, 0.2);
        filter: brightness(1.1);
    }
}

.ngundang_events .events-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
    filter: saturate(1.1) contrast(1.04) brightness(0.92) sepia(0.08);
    transform: scale(1.07);
    animation: eventsVideoDrift 14s ease-in-out infinite alternate;
}

.ngundang_events .events-bg-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 10%, rgba(255, 236, 193, 0.42), transparent 36%),
        linear-gradient(to bottom, rgba(18, 12, 7, 0.18) 0%, rgba(18, 12, 7, 0.42) 70%, rgba(18, 12, 7, 0.5) 100%);
}

.ngundang_events .events-frame-bunga {
    position: absolute;
    top: 0;
    left: 50%;
    width: 134%;
    height: 104%;
    object-fit: cover;
    object-position: 42% center;
    z-index: 2;
    pointer-events: none;
    opacity: 1;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.35));
    transform: translateX(-50%);
}

.ngundang_events .events-floral-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
    object-fit: cover;
}

.ngundang_events .events-content {
    position: relative;
    z-index: 4 !important;
    justify-content: flex-start !important;
    padding: 8px 4px 90px !important;
    overflow: visible;
}

.ngundang_events .events-wrap {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
}

.ngundang_events .events-date-pill {
    display: inline-block;
    background: linear-gradient(180deg, rgba(255, 251, 243, 0.98), rgba(248, 240, 225, 0.96));
    color: #3d2917;
    border: 1.5px solid rgba(201, 168, 118, 0.7);
    border-radius: 999px;
    padding: 6px 20px;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.08);
    letter-spacing: 0.3px;
}

.ngundang_events .events-kicker {
    /* font-size: Bootstrap fs-6 */
    color: #fbe5c8;
    letter-spacing: 1.2px;
    /* spacing: Bootstrap mb-2 */
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
    font-weight: 700;
    text-transform: uppercase;
}

.ngundang_events .events-main-title {
    margin: 0;
    font-family: 'Brittany Signature', cursive;
    color: #fef3d0;
    line-height: 1.1;
    letter-spacing: 0.8px;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
    font-size: 34px;
    white-space: normal;
    /* allow wrapping for two-line title */
}

.ngundang_events .events-main-amp {
    display: inline;
    font-family: var(--font-accent), serif;
    font-size: 0.92em;
    line-height: 0.9;
    margin: 0 2px;
    color: #efd7a2;
    vertical-align: middle;
}

.ngundang_events .events-date-ribbon {
    /* spacing: Bootstrap mt-2 mb-3, font: Bootstrap fs-6 fw-bold */
    display: inline-block;
    background: linear-gradient(180deg, rgba(255, 248, 235, 0.92), rgba(246, 231, 205, 0.92));
    color: #4a321d;
    border: 1px solid rgba(179, 139, 84, 0.48);
    border-radius: 999px;
    padding: 6px 20px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
}

.ngundang_events .events-cards-flex {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    gap: 12px !important;
}

.ngundang_events .events-card {
    position: relative;
    background: linear-gradient(135deg, rgba(255, 251, 243, 0.75), rgba(248, 240, 225, 0.6)) !important;
    border: 1.5px solid rgba(212, 180, 130, 0.7) !important;
    border-radius: 16px !important;
    padding: 24px 16px !important;
    box-shadow: 0 8px 20px rgba(18, 12, 7, 0.2), inset 0 1px 2px rgba(255, 255, 255, 0.3) !important;
    text-align: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transform: perspective(1000px) rotateX(0deg);
    transition: all 0.3s ease;
    flex: 1;
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    gap: 8px;
}

.ngundang_events .events-card::before {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 13px;
    border: 1px solid rgba(220, 187, 129, 0.3);
    pointer-events: none;
}


.ngundang_events .events-name {
    margin: 0;
    color: #3d2917;
    font-size: clamp(15px, 4.5vw, 19px);
    line-height: 1.2;
    letter-spacing: 0.8px;
    font-weight: 700;
}

.ngundang_events .events-date {
    margin: 0;
    color: #5a4533;
    font-size: clamp(12px, 3.2vw, 15px);
    font-weight: 700;
    letter-spacing: 0.1px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ngundang_events .events-time-chip {
    margin: 0 auto;
    width: fit-content;
    max-width: 100%;
    background: rgba(90, 57, 23, 0.95);
    color: #fff4e8;
    border-radius: 999px;
    padding: 6px 16px;
    font-size: clamp(13px, 3.5vw, 16px);
    font-weight: 700;
    letter-spacing: 0.3px;
    box-shadow: inset 0 0 0 1px rgba(245, 214, 164, 0.2), 0 4px 10px rgba(0, 0, 0, 0.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    white-space: nowrap;
}


.ngundang_events .events-place {
    color: #5a4533;
    font-style: normal;
    font-size: clamp(12px, 3.2vw, 15px);
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 0.2px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    margin-bottom: 0;
}

.ngundang_events .events-place i {
    color: #d4a574;
    margin-right: 5px;
    font-weight: 600;
}

.ngundang_events .events-countdown {
    margin-top: -10px;
}

.ngundang_events .events-countdown-label {
    color: #fff8e6;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 3px;
    margin-bottom: 18px !important;
    text-shadow: 0 6px 14px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
    text-transform: uppercase;
}

.ngundang_events .events-countdown-flex {
    display: flex !important;
    flex-wrap: nowrap;
    width: 100%;
    gap: 8px !important;
}

.ngundang_events .events-countdown-item {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    width: 100% !important;
    background: linear-gradient(180deg, rgba(90, 60, 30, 0.98), rgba(50, 30, 15, 0.97)) !important;
    border: 1.5px solid rgba(220, 185, 130, 0.6) !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    padding: 8px 4px !important;
    color: #fff6ed !important;
}

.ngundang_events .events-countdown-item .number {
    margin-bottom: 1px !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1;
    color: #fffef0 !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.ngundang_events .events-countdown-item .text {
    font-size: 11px !important;
    letter-spacing: 1.2px;
    opacity: 0.95;
    font-weight: 600;
    color: #fff8d8;
}

/* Icon wrapper with circular background */
.ngundang_events .events-card-icon-wrapper {
    position: relative;
    width: 44px;
    height: 44px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.1));
}

.ngundang_events .events-icon-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 32%, rgba(245, 223, 201, 0.9), rgba(229, 196, 160, 0.85));
    opacity: 0.95;
    box-shadow: inset 0 2px 8px rgba(255, 255, 255, 0.3), 0 4px 12px rgba(18, 12, 7, 0.15);
}

.ngundang_events .events-card-icon {
    position: relative;
    z-index: 2;
    font-size: 22px;
    color: #9a7a5a;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* .events-save-date replaced by .events-save-date-btn */
.ngundang_events .events-save-date-btn {
    font-family: 'Brittany Signature', cursive;
    color: #f2ddba;
    font-size: 24px;
    line-height: 1;
    text-shadow: 0 3px 16px rgba(0, 0, 0, 0.42);
    background: linear-gradient(180deg, rgba(90, 57, 23, 0.7), rgba(60, 38, 15, 0.7));
    border: 1px solid rgba(210, 171, 111, 0.5);
    border-radius: 8px;
    padding: 8px 22px 10px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
}

.ngundang_events .events-save-date-btn:hover {
    background: linear-gradient(180deg, rgba(110, 72, 30, 0.85), rgba(75, 48, 20, 0.85));
    color: #fff2da;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
}

.ngundang_events .events-save-date-btn i {
    font-family: "Font Awesome 6 Free" !important;
}

.ngundang_gift .events-frame-ulos {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    z-index: 3;
    mix-blend-mode: screen;
    opacity: 0.9;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.25));
    animation: ulosGlow 6s ease-in-out infinite,
        ulosFloat 3.6s ease-in-out infinite,
        ulosPulse 1.8s ease-in-out infinite,
        ulosSway 4.8s ease-in-out infinite,
        ulosZoom 7.2s ease-in-out infinite;
    transform-origin: center;
}

.ngundang_gift.active .events-frame-ulos {
    animation: ulosIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both,
        ulosGlow 6s ease-in-out infinite,
        ulosFloat 3.6s ease-in-out infinite,
        ulosPulse 1.8s ease-in-out infinite,
        ulosSway 4.8s ease-in-out infinite,
        ulosZoom 7.2s ease-in-out infinite;
}

@keyframes ulosIn {
    0% {
        opacity: 0;
        transform: scale(0.92) rotate(-1deg);
    }

    100% {
        opacity: 0.9;
        transform: scale(1) rotate(0deg);
    }
}

@keyframes ulosGlow {

    0%,
    100% {
        filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.2)) saturate(1);
    }

    50% {
        filter: drop-shadow(0 14px 32px rgba(0, 0, 0, 0.32)) saturate(1.15);
    }
}

@keyframes ulosFloat {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-6px) scale(1.01);
    }
}

@keyframes ulosPulse {

    0%,
    100% {
        opacity: 0.82;
    }

    50% {
        opacity: 0.98;
    }
}

@keyframes ulosSway {

    0%,
    100% {
        transform: translateY(0) scale(1) rotate(0deg);
    }

    25% {
        transform: translateY(-4px) scale(1.01) rotate(0.4deg);
    }

    50% {
        transform: translateY(-8px) scale(1.015) rotate(-0.4deg);
    }

    75% {
        transform: translateY(-4px) scale(1.01) rotate(0.3deg);
    }
}

@keyframes ulosZoom {

    0%,
    100% {
        filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.2)) saturate(1);
    }

    50% {
        filter: drop-shadow(0 16px 36px rgba(0, 0, 0, 0.35)) saturate(1.2);
    }
}

.ngundang_gift .events-content {
    justify-content: flex-start !important;
    padding-top: 2px !important;
    height: 100%;
    min-height: 0;
}

.ngundang_gift .events-kicker {
    margin-top: 4px;
    transform: translateY(18px);
}

.ngundang_gift .events-wrap {
    margin-top: -8px;
    justify-content: flex-start !important;
    gap: 6px;
    height: 100%;
    min-height: 0;
}

.ngundang_gift .events-wrap>p {
    margin: 2px 0 4px !important;
}

.ngundang_gift .events-cards-flex {
    flex: 1 1 auto;
    overflow-y: visible;
    padding-bottom: 80px;
}

.ngundang_gift .events-card:last-child {
    margin-bottom: 6px;
}

@media (max-height: 740px) {
    .ngundang_gift .events-content {
        padding-top: 0 !important;
        padding-bottom: 48px !important;
    }

    .ngundang_gift .events-wrap {
        margin-top: -40px;
    }

    .ngundang_gift .events-cards-flex {
        gap: 8px !important;
    }

    .ngundang_gift .events-card {
        padding: 16px 12px !important;
    }
}

@media (max-height: 680px) {
    .ngundang_gift .events-wrap {
        margin-top: -54px;
    }

    .ngundang_gift .events-cards-flex {
        gap: 6px !important;
    }

    .ngundang_gift .events-name {
        font-size: clamp(13px, 4vw, 16px);
    }

    .ngundang_gift .events-time-chip {
        font-size: clamp(12px, 3.2vw, 14px);
        padding: 5px 12px;
    }

    .ngundang_gift .events-place {
        font-size: clamp(11px, 3vw, 13px);
    }
}

@media (max-width: 576px) {
    .ngundang_events .events-content {
        padding: 16px 0 102px !important;
    }

    .ngundang_events .events-frame-bunga {
        width: 146%;
        height: 106%;
        object-position: 40% center;
    }

    .ngundang_events .events-main-title {
        font-size: 28px;
    }

    .ngundang_events .events-cards-flex {
        gap: 10px !important;
    }

    .ngundang_events .events-countdown-flex {
        gap: 6px !important;
    }

    .ngundang_events .events-card {
        padding: 20px 10px !important;
        border-radius: 14px !important;
    }

    .ngundang_events .events-name {
        font-size: clamp(14px, 4.5vw, 18px);
        letter-spacing: 0.5px;
    }

    .ngundang_events .events-date {
        font-size: clamp(11.5px, 3.5vw, 14px);
    }

    .ngundang_events .events-time-chip {
        font-size: clamp(12px, 3.8vw, 15px);
        padding: 5px 12px;
        margin: 0 auto;
    }

    .ngundang_events .events-place {
        font-size: clamp(11.5px, 3.5vw, 14px);
    }

    .ngundang_events .events-card-icon-wrapper {
        width: 70px;
        height: 70px;
        margin-bottom: 10px;
    }

    .ngundang_events .events-card-icon {
        font-size: 38px;
    }

    .ngundang_events .events-save-date-btn {
        font-size: 24px;
        padding: 8px 22px 12px;
    }
}

@keyframes eventsVideoDrift {
    0% {
        transform: scale(1.07) translate3d(0, 0, 0);
    }

    100% {
        transform: scale(1.11) translate3d(0, -10px, 0);
    }
}

/* ============================================= */
/* Maps Slide CSS (Jabat Premium Style)          */
/* ============================================= */

.ngundang_maps .maps-content {
    padding: 8px 4px 90px !important;
}

.ngundang_maps .maps-wrap {
    padding: 10px 0;
}

.ngundang_maps .maps-card {
    background: linear-gradient(135deg, rgba(255, 251, 243, 0.75), rgba(248, 240, 225, 0.6)) !important;
    border: 1.5px solid rgba(212, 180, 130, 0.7) !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 20px rgba(18, 12, 7, 0.2), inset 0 1px 2px rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    position: relative;
    margin-bottom: 20px;
}

.ngundang_maps .maps-card::before {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 16px;
    border: 1px solid rgba(220, 187, 129, 0.4);
    pointer-events: none;
}

.ngundang_maps .maps-preview-inner {
    border-radius: 1rem;
    overflow: hidden;
    border: 3px solid rgba(200, 160, 100, 0.6);
    background: transparent;
    padding: 4px;
}

.ngundang_maps .maps-preview-img-wrap {
    width: 100%;
    border-radius: 0.8rem;
    overflow: hidden;
    padding-bottom: 45%;
    position: relative;
    background: white;
}

.ngundang_maps .maps-preview-img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
    filter: sepia(0.3) brightness(0.9);
}

.ngundang_maps iframe.maps-preview-img {
    filter: none;
    border: 0;
}

.ngundang_maps .maps-preview-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    background: rgba(0, 0, 0, 0.1);
}

.ngundang_maps .maps-pin-pulse {
    background: linear-gradient(180deg, #fff5d6, #ffe0a3);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 0 4px rgba(255, 255, 255, 0.5);
    color: #8c5a2b;
    animation: pulsePinMaps 2s infinite;
}

@keyframes pulsePinMaps {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(255, 255, 255, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

.ngundang_maps .maps-icon-brown {
    color: #8c5a2b !important;
    margin-right: 6px;
}

.ngundang_maps .maps-text-brown {
    color: #3d2917 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.ngundang_maps .maps-text-muted {
    color: #5a4533 !important;
    opacity: 0.9;
    line-height: 1.6;
    font-weight: 500;
}

.ngundang_maps .maps-info-pill {
    background: rgba(255, 255, 255, 0.5);
    border: 1.5px solid rgba(212, 180, 130, 0.6);
    border-radius: 12px;
    flex: 1 1 0%;
    box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.7);
}

.ngundang_maps .events-save-date-btn {
    font-family: var(--font-base), sans-serif;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #f2ddba;
    font-size: 16px;
    line-height: 1.5;
    text-shadow: 0 3px 16px rgba(0, 0, 0, 0.42);
    background: linear-gradient(180deg, rgba(90, 57, 23, 0.7), rgba(60, 38, 15, 0.7));
    border: 1px solid rgba(210, 171, 111, 0.5);
    border-radius: 8px;
    padding: 8px 22px 10px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
}

.ngundang_maps .events-save-date-btn:hover {
    background: linear-gradient(180deg, rgba(110, 72, 30, 0.85), rgba(75, 48, 20, 0.85));
    color: #fff2da;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
}

.ngundang_maps .events-save-date-btn i {
    font-family: "Font Awesome 6 Free" !important;
}

@media (max-width: 576px) {
    .ngundang_maps .maps-text-brown.fs-4 {
        font-size: clamp(16px, 4.5vw, 20px) !important;
    }

    .ngundang_maps .maps-text-muted {
        font-size: clamp(12px, 3.5vw, 15px) !important;
    }

    .ngundang_maps .events-save-date-btn {
        font-size: 14px;
        padding: 8px 16px;
    }
}

/* Global Premium Button for non-event sliders */
.jabat-btn-primary {
    color: #f2ddba !important;
    background: linear-gradient(180deg, rgba(90, 57, 23, 0.7), rgba(60, 38, 15, 0.7)) !important;
    border: 1px solid rgba(210, 171, 111, 0.5) !important;
    text-shadow: 0 3px 16px rgba(0, 0, 0, 0.42) !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28) !important;
    transition: all 0.3s ease !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.jabat-btn-primary:hover {
    background: linear-gradient(180deg, rgba(110, 72, 30, 0.85), rgba(75, 48, 20, 0.85)) !important;
    color: #fff2da !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35) !important;
}

.jabat-btn-primary i.fa-solid,
.jabat-btn-primary i.fa-regular {
    font-family: "Font Awesome 6 Free" !important;
}

/* ============================================= */
/* Inline CSS migrated from jabat.blade.php      */
/* ============================================= */

/* Apply Resepsi/Acara Card styling to all other slides' cards */
.ngundang_salam .salam-quote-card,
.ngundang_groom .glass-card,
.ngundang_bride .glass-card,
.ngundang_story .glass-card,
.ngundang_gallery .glass-card,
.ngundang_maps .glass-card,
.ngundang_gift .glass-card,

/* Thanks Slide: Animated Background */
.ngundang_thanks .thanks-container {
    position: relative;
    overflow: hidden;
    background-image: none !important;
}

.ngundang_thanks .thanks-bg {
    position: absolute;
    inset: -10%;
    z-index: 0;
}

.ngundang_thanks .thanks-bg-inner {
    position: absolute;
    inset: 0;
    background-image: url("../asset/background2.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transform: scale(1.15);
}

/* Entrance: fade+zoom in saat slide aktif */
.ngundang_thanks.active .thanks-bg-inner {
    animation:
        thanksBgIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both,
        thanksBgDrift 50s ease-in-out 1.4s infinite alternate;
}

@keyframes thanksBgIn {
    0% {
        opacity: 0;
        transform: scale(1.2);
    }

    100% {
        opacity: 1;
        transform: scale(1.1);
    }
}

/* Loop: Ken Burns drift pelan */
@keyframes thanksBgDrift {
    0% {
        transform: scale(1.1) translate(0, 0) rotate(0deg);
    }

    33% {
        transform: scale(1.13) translate(-1.5%, 1%) rotate(0.5deg);
    }

    66% {
        transform: scale(1.08) translate(1%, -1%) rotate(-0.5deg);
    }

    100% {
        transform: scale(1.12) translate(-0.5%, 0.5%) rotate(0.3deg);
    }
}

/* Overlay tipis agar konten lebih terbaca */
.ngundang_thanks .thanks-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
            rgba(20, 10, 5, 0.15) 0%,
            rgba(20, 10, 5, 0.05) 40%,
            rgba(20, 10, 5, 0.2) 100%);
    z-index: 1;
    pointer-events: none;
}

.ngundang_thanks .glass-card {
    background: linear-gradient(135deg, rgba(255, 251, 243, 0.75), rgba(248, 240, 225, 0.6)) !important;
    border: 1.5px solid rgba(212, 180, 130, 0.7) !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 20px rgba(18, 12, 7, 0.2), inset 0 1px 2px rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    position: relative;
}

/* Thanks slide: body text */
.ngundang_thanks .thanks-body-text {
    font-size: clamp(13px, 3.5vw, 15px);
    font-weight: 500;
}

/* Thanks slide: foto pasangan di atas kartu */
.ngundang_thanks .thanks-photo-wrap {
    position: absolute;
    top: -65px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px solid rgba(212, 180, 130, 0.85);
    box-shadow: 0 6px 22px rgba(18, 12, 7, 0.28), 0 0 0 6px rgba(255, 248, 230, 0.5);
    overflow: hidden;
    background: #f5f0e8;
    z-index: 5;
}

.ngundang_thanks .thanks-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/* Thanks slide: "Hormat Kami, Yang Mengundang" tanpa ornamen */
.ngundang_thanks .thanks-hormat-label {
    font-size: clamp(12px, 3.2vw, 14px);
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--inv-accent);
    margin-top: 8px;
    margin-bottom: 4px;
    opacity: 0.85;
}

/* Thanks slide: nama pasangan */
.ngundang_thanks .thanks-names {
    font-size: clamp(28px, 8vw, 42px);
    line-height: 1.15;
}

/* Thanks slide: divider */
.ngundang_thanks .thanks-divider {
    width: 80px;
    height: 1px;
    background: var(--inv-base);
    margin: 0 auto;
    opacity: 0.25;
}

/* Pastikan card thanks punya position relative untuk foto absolute */
.ngundang_thanks .thanks-card {
    position: relative;
    margin-top: 65px;
}


.ngundang_salam .salam-quote-card::before,
.ngundang_groom .glass-card::before,
.ngundang_bride .glass-card::before,
.ngundang_story .glass-card::before,
.ngundang_gallery .glass-card::before,
.ngundang_maps .glass-card::before,
.ngundang_gift .glass-card::before,

.ngundang_thanks .glass-card::before {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 16px;
    border: 1px solid rgba(220, 187, 129, 0.4);
    pointer-events: none;
}

/* Clear the old inline transparency forcing block */
.ngundang_gallery [style*="background: rgba("],
.ngundang_maps [style*="background: rgba("],
.ngundang_gift [style*="background: rgba("],
.ngundang_rsvp [style*="background: rgba("],
.ngundang_thanks [style*="background: rgba("] {
    background: none !important;
    /* allow the glass-card gradient class to override */
}

/* Events slide CSS moved to jabat.css per CODING_STANDARDS.md */

/* Story redesign: improve readability and hierarchy */
.ngundang_story .story-panel {
    position: relative;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 18px 16px 10px !important;
    overflow: hidden;
    margin-top: -10px;
}

.ngundang_story .story-panel.glass-card {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.ngundang_story .glass-card::before {
    border: none !important;
    display: none !important;
}

.ngundang_story .container-content {
    padding-left: 10px !important;
    padding-right: 10px !important;
    z-index: 3 !important;
    justify-content: flex-start !important;
    padding-top: 24px !important;
}

.ngundang_story .container-mobile {
    position: relative;
    overflow: hidden;
    background-size: cover !important;
    background-position: center !important;
}

.ngundang_story .story-bg-motion-layer {
    position: absolute;
    inset: -9%;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1.1);
    will-change: transform, opacity, filter;
}

.ngundang_story .story-bg-motion-layer::before,
.ngundang_story .story-bg-motion-layer::after {
    content: "";
    position: absolute;
    inset: -12%;
    pointer-events: none;
    opacity: 0;
}

.ngundang_story .story-bg-motion-layer::before {
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.42) 0 2px, transparent 3px),
        radial-gradient(circle, rgba(255, 233, 168, 0.38) 0 1.6px, transparent 2.6px),
        radial-gradient(circle, rgba(198, 227, 255, 0.28) 0 1.3px, transparent 2.4px);
    background-size: 170px 170px, 130px 130px, 110px 110px;
    mix-blend-mode: screen;
}

.ngundang_story .story-bg-motion-layer::after {
    background:
        radial-gradient(circle at 20% 30%, rgba(245, 231, 211, 0.32), transparent 46%),
        radial-gradient(circle at 75% 65%, rgba(226, 203, 172, 0.34), transparent 52%);
    mix-blend-mode: soft-light;
}

.ngundang_story .container-mobile::before,
.ngundang_story .container-mobile::after {
    content: "";
    position: absolute;
    inset: -10%;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
}

.ngundang_story .container-mobile::before {
    background:
        radial-gradient(circle at 18% 24%, rgba(239, 224, 201, 0.34), transparent 52%),
        radial-gradient(circle at 78% 72%, rgba(228, 208, 181, 0.3), transparent 56%);
    mix-blend-mode: soft-light;
}

.ngundang_story .container-mobile::after {
    background: linear-gradient(130deg,
            rgba(222, 201, 171, 0.34) 0%,
            rgba(236, 219, 197, 0.2) 36%,
            rgba(209, 185, 153, 0.26) 52%,
            rgba(239, 227, 210, 0.14) 70%);
    transform: translateX(-35%);
    mix-blend-mode: multiply;
}

/* removed story-specific wayang z-index to match default/maps style */

.ngundang_story .story-bottom-flower-a,
.ngundang_story .story-bottom-flower-b {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 1;
    opacity: 0.95;
}

.ngundang_story .story-bottom-flower-a {
    bottom: -20% !important;
    width: 116% !important;
}

.ngundang_story .story-bottom-flower-b {
    bottom: -16% !important;
    width: 106% !important;
}

@media (max-width: 576px) {
    .ngundang_story .story-bottom-flower-b {
        bottom: -20% !important;
        width: 118% !important;
    }

    .ngundang_story .story-bottom-flower-a {
        bottom: -24% !important;
        width: 132% !important;
    }
}

.ngundang_story .story-title {
    display: inline-flex;
    color: #3d2917 !important;
    font-size: clamp(20px, 4.8vw, 28px) !important;
    line-height: 1.1;
    letter-spacing: 1.2px;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.45);
}

.ngundang_story .story-title-badge {
    background-image: url("/template/aruna-valley-gold/asset/overlay_title.webp");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    padding: 14px 44px;
    max-width: 90%;
    box-shadow: 0 8px 18px rgba(84, 61, 34, 0.24);
}

.ngundang_story .story-scroll {
    scrollbar-color: rgba(78, 58, 36, 0.6) transparent !important;
    padding: 8px 0 360px 0 !important;
    max-height: calc(100vh - 260px) !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    scrollbar-width: none;
}

.ngundang_story .story-scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.ngundang_story .story-focus-timeline,
.ngundang_story .story-event {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.ngundang_story .story-focus-timeline {
    position: relative;
    text-align: left;
    padding-left: 0;
    padding-right: 0;
}

.ngundang_story .story-focus-timeline::before {
    display: none;
}

.ngundang_story .story-event {
    position: relative;
    display: block;
    padding-left: 0;
    margin-bottom: 18px;
}

.ngundang_story .story-event:last-child {
    margin-bottom: 0;
}

.ngundang_story .story-marker {
    position: relative;
    width: 20px;
    height: 20px;
    margin: 0;
    position: absolute;
    left: -18px;
    top: 6px;
    border-radius: 50%;
    border: 2px solid #8f6b43;
    background: radial-gradient(circle, #fff2dc 0%, #efd8b6 100%);
    box-shadow: 0 4px 10px rgba(84, 61, 34, 0.25);
    z-index: 2;
    flex-shrink: 0;
}

.ngundang_story .story-marker::after {
    content: "\2665";
    position: absolute;
    left: 50%;
    top: 44%;
    transform: translate(-50%, -50%);
    color: #7d5a33;
    font-size: 10px;
    line-height: 1;
}

.ngundang_story .story-card {
    background: linear-gradient(180deg, rgba(255, 251, 245, 0.96) 0%, rgba(246, 229, 203, 0.95) 100%);
    border: 1px solid rgba(168, 132, 84, 0.35);
    border-radius: 14px;
    padding: 16px 16px 18px;
    box-shadow: 0 10px 22px rgba(66, 46, 24, 0.22);
    width: 100%;
    max-width: 100%;
}

.ngundang_story .story-entry-date {
    color: #5b3f24 !important;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
    margin: 0 0 7px;
}

.ngundang_story .story-entry-title {
    color: #2f2316 !important;
    font-weight: 700;
    margin: 0 0 8px;
    letter-spacing: 0.2px;
}

.ngundang_story .story-entry-text {
    color: #4a3520 !important;
    line-height: 1.55;
    margin: 0;
    font-size: 15px;
    font-weight: 500;
}

/* Story slide festive animation system (active-state based) */
.ngundang_story .story-bg-motion-layer,
.ngundang_story .story-frame-layer,
.ngundang_story .story-panel,
.ngundang_story .story-title,
.ngundang_story .story-scroll,
.ngundang_story .story-event,
.ngundang_story .story-marker,
.ngundang_story .story-card,
.ngundang_story .story-bottom-flower-a,
.ngundang_story .story-bottom-flower-b {
    opacity: 0;
}

.ngundang_story.active .story-bg-motion-layer {
    animation: storyBgLayerIn 1.35s cubic-bezier(0.16, 1, 0.3, 1) 0.02s both,
        storyBgLayerDrift 9.2s ease-in-out 1.0s infinite alternate;
}

.ngundang_story.active .story-bg-motion-layer::before {
    animation: storyBgParticleIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both,
        storyBgParticleDrift 6.5s linear 1.1s infinite;
}

.ngundang_story.active .story-bg-motion-layer::after {
    animation: storyBgAuraIn 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.16s both,
        storyBgAuraPulse 4.4s ease-in-out 1.3s infinite alternate;
}

.ngundang_story.active .container-mobile::before {
    animation: storyBgGlowReveal 1.05s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both,
        storyBgGlowDrift 6.2s ease-in-out 1.0s infinite alternate;
}

.ngundang_story.active .container-mobile::after {
    animation: storyBgShineIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both,
        storyBgShineSweep 6.8s ease-in-out 1.1s infinite;
}

.ngundang_story.active .story-frame-layer {
    animation: storyFrameIn 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.16s both,
        storyFramePulse 4.6s ease-in-out 1.4s infinite alternate;
}

/* removed story-specific wayang animations to match maps style */

.ngundang_story.active .story-bottom-flower-b {
    animation: storyFlowerBackIn 1.05s cubic-bezier(0.34, 1.56, 0.64, 1) 0.18s both,
        storyFlowerBackFloat 5.2s ease-in-out 1.2s infinite alternate;
}

.ngundang_story.active .story-bottom-flower-a {
    animation: storyFlowerFrontIn 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.28s both,
        storyFlowerFrontFloat 5.5s ease-in-out 1.4s infinite alternate;
}

.ngundang_story.active .story-panel {
    animation: storyPanelIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.26s both;
}

.ngundang_story.active .story-title {
    animation: storyTitlePopIn 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) 0.46s both,
        storyTitleGlow 2.8s ease-in-out 1.4s infinite alternate;
}

.ngundang_story.active .story-scroll {
    animation: storyScrollIn 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.58s both;
}

.ngundang_story.active .story-focus-timeline::before {
    transform-origin: top center;
    animation: storyLineGrow 1.05s cubic-bezier(0.22, 1, 0.36, 1) 0.7s both;
}

.ngundang_story.active .story-event {
    animation: storyEventIn 0.66s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(0.78s + (var(--story-i, 0) * 0.12s));
}

.ngundang_story.active .story-marker {
    animation: storyMarkerPopIn 0.56s cubic-bezier(0.34, 1.56, 0.64, 1) both,
        storyMarkerPulse 2.2s ease-in-out infinite alternate;
    animation-delay: calc(0.85s + (var(--story-i, 0) * 0.12s)),
        calc(1.55s + (var(--story-i, 0) * 0.12s));
}

.ngundang_story.active .story-card {
    animation: storyCardIn 0.64s cubic-bezier(0.22, 1, 0.36, 1) both,
        storyCardBreath 3.8s ease-in-out infinite alternate;
    animation-delay: calc(0.92s + (var(--story-i, 0) * 0.12s)),
        calc(1.65s + (var(--story-i, 0) * 0.12s));
}

@keyframes storyWayangLeftIn {
    0% {
        opacity: 0;
        transform: translate(-36px, 18px) scale(0.82);
        filter: blur(4px);
    }

    100% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
        filter: blur(0);
    }
}

@keyframes storyBgLayerIn {
    0% {
        opacity: 0;
        transform: perspective(960px) rotateY(-14deg) rotate(-2deg) scale(1.34) translate3d(-72px, 26px, 0);
        filter: blur(6px) saturate(1.35) brightness(0.55) contrast(1.15) hue-rotate(-8deg);
    }

    55% {
        opacity: 1;
        transform: perspective(960px) rotateY(3deg) rotate(0.8deg) scale(1.1) translate3d(14px, -10px, 0);
        filter: blur(0) saturate(1.18) brightness(1.06) contrast(1.06) hue-rotate(0deg);
    }

    100% {
        opacity: 1;
        transform: perspective(960px) rotateY(0deg) rotate(0deg) scale(1.12) translate3d(0, 0, 0);
        filter: blur(0) saturate(1.08) brightness(1.01) contrast(1.02) hue-rotate(0deg);
    }
}

@keyframes storyBgLayerDrift {
    0% {
        transform: scale(1.12) translate3d(-14px, -10px, 0);
        filter: saturate(1.05) brightness(1);
    }

    50% {
        transform: scale(1.24) translate3d(16px, -20px, 0);
        filter: saturate(1.16) brightness(1.08);
    }

    100% {
        transform: scale(1.18) translate3d(-10px, 14px, 0);
        filter: saturate(1.1) brightness(1.04);
    }
}

@keyframes storyBgParticleIn {
    0% {
        opacity: 0;
        transform: translate3d(-70px, 24px, 0) rotate(-5deg) scale(1.18);
    }

    100% {
        opacity: 0.95;
        transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    }
}

@keyframes storyBgParticleDrift {
    0% {
        background-position: 0% 0%, 0% 0%, 0% 0%;
    }

    100% {
        background-position: 40px -70px, -35px -60px, 30px -50px;
    }
}

@keyframes storyBgAuraIn {
    0% {
        opacity: 0;
        transform: translateY(26px) scale(1.22);
    }

    100% {
        opacity: 0.75;
        transform: translateY(0) scale(1);
    }
}

@keyframes storyBgAuraPulse {
    0% {
        opacity: 0.42;
        transform: scale(1);
    }

    100% {
        opacity: 0.78;
        transform: scale(1.06);
    }
}

@keyframes storyBgGlowReveal {
    0% {
        opacity: 0;
        transform: scale(1.12);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes storyBgGlowDrift {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    100% {
        transform: translate3d(-12px, -10px, 0) scale(1.04);
    }
}

@keyframes storyBgShineIn {
    0% {
        opacity: 0;
        transform: translateX(-40%);
    }

    100% {
        opacity: 0.9;
        transform: translateX(-8%);
    }
}

@keyframes storyBgShineSweep {
    0% {
        opacity: 0.2;
        transform: translateX(-35%);
    }

    50% {
        opacity: 0.55;
        transform: translateX(8%);
    }

    100% {
        opacity: 0.22;
        transform: translateX(26%);
    }
}

@keyframes storyFrameIn {
    0% {
        opacity: 0;
        transform: scale(1.06);
        filter: blur(4px) brightness(1.25);
    }

    100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0) brightness(1);
    }
}

@keyframes storyFramePulse {
    0% {
        filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0)) brightness(1);
    }

    100% {
        filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0.28)) brightness(1.05);
    }
}

@keyframes storyWayangRightIn {
    0% {
        opacity: 0;
        transform: translate(36px, 18px) scale(0.82);
        filter: blur(4px);
    }

    100% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
        filter: blur(0);
    }
}

@keyframes storyWayangFloatL {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    100% {
        transform: translate(-4px, -8px) rotate(-1deg);
    }
}

@keyframes storyWayangFloatR {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    100% {
        transform: translate(4px, -8px) rotate(1deg);
    }
}

@keyframes storyFlowerBackIn {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(48px) scale(0.78);
        filter: blur(4px);
    }

    100% {
        opacity: 0.95;
        transform: translateX(-50%) translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes storyFlowerFrontIn {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(58px) scale(0.74);
        filter: blur(5px);
    }

    100% {
        opacity: 0.95;
        transform: translateX(-50%) translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes storyFlowerBackFloat {
    0% {
        transform: translateX(-50%) translateY(0) scale(1);
    }

    100% {
        transform: translateX(-50%) translateY(-8px) scale(1.03);
    }
}

@keyframes storyFlowerFrontFloat {
    0% {
        transform: translateX(-50%) translateY(0) scale(1);
    }

    100% {
        transform: translateX(-50%) translateY(-10px) scale(1.04);
    }
}

@keyframes storyPanelIn {
    0% {
        opacity: 0;
        transform: translateY(14px) scale(0.96);
        filter: blur(4px);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes storyTitlePopIn {
    0% {
        opacity: 0;
        transform: translateY(-18px) scale(0.66);
        filter: blur(3px);
    }

    65% {
        opacity: 1;
        transform: translateY(2px) scale(1.08);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes storyTitleGlow {
    0% {
        box-shadow: 0 8px 18px rgba(84, 61, 34, 0.22);
    }

    100% {
        box-shadow: 0 12px 24px rgba(96, 71, 41, 0.28), 0 0 18px rgba(239, 224, 201, 0.34);
    }
}

@keyframes storyScrollIn {
    0% {
        opacity: 0;
        transform: translateY(18px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes storyLineGrow {
    0% {
        transform: scaleY(0);
        opacity: 0;
    }

    100% {
        transform: scaleY(1);
        opacity: 1;
    }
}

@keyframes storyEventIn {
    0% {
        opacity: 0;
        transform: translateX(20px) scale(0.96);
        filter: blur(3px);
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
        filter: blur(0);
    }
}

@keyframes storyMarkerPopIn {
    0% {
        opacity: 0;
        transform: scale(0.2) rotate(-8deg);
        filter: blur(3px);
    }

    70% {
        opacity: 1;
        transform: scale(1.14) rotate(1deg);
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: blur(0);
    }
}

@keyframes storyMarkerPulse {
    0% {
        box-shadow: 0 2px 7px rgba(30, 34, 43, 0.22);
    }

    100% {
        box-shadow: 0 2px 10px rgba(30, 34, 43, 0.3), 0 0 14px rgba(255, 255, 255, 0.35);
    }
}

@keyframes storyCardIn {
    0% {
        opacity: 0;
        transform: translateY(14px) scale(0.94);
        filter: blur(3px);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes storyCardBreath {
    0% {
        transform: translateY(0);
        box-shadow: 0 8px 16px rgba(20, 25, 36, 0.2);
    }

    100% {
        transform: translateY(-3px);
        box-shadow: 0 12px 22px rgba(20, 25, 36, 0.28);
    }
}

/* Gallery slide festive animation system */
.ngundang_gallery .container-mobile {
    position: relative;
    overflow: hidden;
    background-image: none !important;
    background-size: cover !important;
    background-position: center !important;
}

.ngundang_gallery .gallery-bg-motion-layer {
    position: absolute;
    inset: -10%;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1.1);
    will-change: transform, opacity, filter;
}

.ngundang_gallery .gallery-bg-motion-layer::before,
.ngundang_gallery .gallery-bg-motion-layer::after {
    content: "";
    position: absolute;
    inset: -12%;
    pointer-events: none;
    opacity: 0;
}

.ngundang_gallery .gallery-bg-motion-layer::before {
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.36) 0 2px, transparent 3px),
        radial-gradient(circle, rgba(255, 230, 160, 0.34) 0 1.7px, transparent 2.7px),
        radial-gradient(circle, rgba(196, 255, 222, 0.24) 0 1.3px, transparent 2.4px);
    background-size: 165px 165px, 125px 125px, 105px 105px;
    mix-blend-mode: screen;
}

.ngundang_gallery .gallery-bg-motion-layer::after {
    background:
        radial-gradient(circle at 18% 24%, rgba(170, 232, 214, 0.22), transparent 46%),
        radial-gradient(circle at 78% 68%, rgba(124, 191, 170, 0.24), transparent 50%);
    mix-blend-mode: screen;
}

.ngundang_gallery .container-mobile::before,
.ngundang_gallery .container-mobile::after {
    content: "";
    position: absolute;
    inset: -12%;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
}

.ngundang_gallery .container-mobile::before {
    background:
        radial-gradient(circle at 22% 22%, rgba(78, 140, 118, 0.36), transparent 50%),
        radial-gradient(circle at 82% 78%, rgba(62, 120, 102, 0.3), transparent 56%);
    mix-blend-mode: screen;
}

.ngundang_gallery .container-mobile::after {
    background: linear-gradient(128deg,
            rgba(35, 82, 77, 0.28) 0%,
            rgba(23, 60, 56, 0.16) 35%,
            rgba(70, 122, 108, 0.22) 52%,
            rgba(20, 52, 49, 0.1) 72%);
    transform: translateX(-40%);
    mix-blend-mode: multiply;
}

/* Gallery-only wayang placement: avoid inheriting oversized Salam positioning */
.ngundang_gallery .salam-wayang-left,
.ngundang_gallery .salam-wayang-right {
    bottom: -1% !important;
    width: 36% !important;
    z-index: 2 !important;
    opacity: 0.9;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.26));
    animation: none;
}

.ngundang_gallery .salam-wayang-left {
    left: -19% !important;
    transform: rotate(14deg);
}

.ngundang_gallery .salam-wayang-right {
    right: -19% !important;
    transform: scaleX(-1) rotate(14deg);
}

.ngundang_gallery .gallery-frame-kiri,
.ngundang_gallery .gallery-frame-kanan {
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100%;
    width: auto;
    max-width: none;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.2));
    transform-origin: center center;
    object-fit: contain;
}

.ngundang_gallery .gallery-frame-kiri {
    left: 0;
}

.ngundang_gallery .gallery-frame-kanan {
    right: 0;
}

.ngundang_gallery .container-content {
    z-index: 3 !important;
}

@media (max-width: 576px) {

    .ngundang_gallery .salam-wayang-left,
    .ngundang_gallery .salam-wayang-right {
        width: 40% !important;
        bottom: -1.5% !important;
    }

    .ngundang_gallery .salam-wayang-left {
        left: -23% !important;
    }

    .ngundang_gallery .salam-wayang-right {
        right: -23% !important;
    }

    .ngundang_gallery .gallery-frame-kiri,
    .ngundang_gallery .gallery-frame-kanan {
        width: auto;
        max-width: none;
        height: 100%;
        top: 0;
        bottom: 0;
    }

    .ngundang_gallery .gallery-frame-kiri {
        left: 0;
    }

    .ngundang_gallery .gallery-frame-kanan {
        right: 0;
    }
}

.ngundang_gallery .gallery-bg-motion-layer {
    opacity: 0;
}

/* Fail-safe: keep core gallery content visible even if active animation isn't retriggered */
.ngundang_gallery .gallery-panel,
.ngundang_gallery .gallery-title,
.ngundang_gallery .gallery-scroll,
.ngundang_gallery .gallery-video-wrap,
.ngundang_gallery .gallery-item,
.ngundang_gallery .gallery-item img {
    opacity: 1;
}

.ngundang_gallery .gallery-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.ngundang_gallery .gallery-title {
    display: inline-flex;
    color: #3d2917 !important;
    font-size: clamp(20px, 4.8vw, 28px) !important;
    line-height: 1.1;
    letter-spacing: 1.2px;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.45);
}

.ngundang_gallery .gallery-title-badge {
    background-image: url("/template/aruna-valley-gold/asset/overlay_title.webp");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    padding: 14px 44px;
    max-width: 90%;
    box-shadow: 0 8px 18px rgba(84, 61, 34, 0.24);
}

.ngundang_gallery .gallery-panel {
    position: relative;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 18px 0 14px !important;
    overflow: hidden;
}

.ngundang_gallery .gallery-panel.glass-card {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.ngundang_gallery .glass-card::before {
    border: none !important;
    display: none !important;
}

.ngundang_gallery .gallery-scroll {
    scrollbar-color: rgba(78, 58, 36, 0.6) transparent !important;
    padding: 6px 0 200px 0 !important;
}

.ngundang_gallery .gallery-video-wrap {
    border-radius: 16px !important;
    border: 1px solid rgba(170, 134, 86, 0.45) !important;
    box-shadow: 0 12px 26px rgba(44, 30, 16, 0.25) !important;
    width: 100%;
    max-width: 100%;
}

.ngundang_gallery .gallery-grid {
    gap: 10px;
}

.ngundang_gallery .gallery-item {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(44, 30, 16, 0.22);
    border: 1px solid rgba(170, 134, 86, 0.4);
    width: 100%;
}

.ngundang_gallery.active .gallery-bg-motion-layer {
    animation: galleryBgIn 1.22s cubic-bezier(0.2, 0.95, 0.22, 1.08) 0.03s both,
        galleryBgDrift 8.8s ease-in-out 0.9s infinite alternate;
}

.ngundang_gallery.active .gallery-bg-motion-layer::before {
    animation: galleryBgParticleIn 1.08s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both,
        galleryBgParticleDrift 6.1s linear 1.0s infinite;
}

.ngundang_gallery.active .gallery-bg-motion-layer::after {
    animation: galleryBgAuraIn 1.05s cubic-bezier(0.2, 0.95, 0.22, 1.08) 0.14s both,
        galleryBgAuraPulse 4.2s ease-in-out 1.2s infinite alternate;
}

.ngundang_gallery.active .container-mobile::before {
    animation: galleryGlowReveal 1.05s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both,
        galleryGlowDrift 6s ease-in-out 1s infinite alternate;
}

.ngundang_gallery.active .container-mobile::after {
    animation: galleryShineIn 1.15s cubic-bezier(0.22, 1, 0.36, 1) 0.16s both,
        galleryShineSweep 6.6s ease-in-out 1.0s infinite;
}

.ngundang_gallery.active .salam-wayang-left {
    animation: galleryWayangLeftIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.06s both,
        galleryWayangFloatL 4.4s ease-in-out 1.2s infinite alternate;
}

.ngundang_gallery.active .salam-wayang-right {
    animation: galleryWayangRightIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both,
        galleryWayangFloatR 4.6s ease-in-out 1.3s infinite alternate;
}

.ngundang_gallery.active .gallery-frame-kiri {
    animation: galleryFrameLeftIn 0.92s cubic-bezier(0.22, 1, 0.36, 1) 0.22s both,
        galleryFrameFloatL 4.8s ease-in-out 1.4s infinite alternate;
}

.ngundang_gallery.active .gallery-frame-kanan {
    animation: galleryFrameRightIn 0.92s cubic-bezier(0.22, 1, 0.36, 1) 0.28s both,
        galleryFrameFloatR 4.9s ease-in-out 1.45s infinite alternate;
}

.ngundang_gallery.active .gallery-panel {
    animation: galleryPanelIn 0.78s cubic-bezier(0.22, 1, 0.36, 1) 0.24s both;
}

.ngundang_gallery.active .gallery-title {
    animation: galleryTitlePopIn 0.72s cubic-bezier(0.34, 1.56, 0.64, 1) 0.42s both,
        galleryTitleGlow 2.8s ease-in-out 1.3s infinite alternate;
}

.ngundang_gallery.active .gallery-scroll {
    animation: galleryScrollIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.56s both;
}

.ngundang_gallery.active .gallery-video-wrap {
    animation: galleryVideoIn 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.68s both,
        galleryVideoBreath 4s ease-in-out 1.8s infinite alternate;
}

.ngundang_gallery.active .gallery-item {
    animation: galleryItemIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both,
        galleryItemFloat 3.8s ease-in-out infinite alternate;
    animation-delay: calc(0.82s + (var(--gallery-i, 0) * 0.1s)),
        calc(1.55s + (var(--gallery-i, 0) * 0.1s));
}

@keyframes galleryBgIn {
    0% {
        opacity: 0;
        transform: perspective(1000px) scale(0.7) rotate(6deg) translate3d(0, 34px, 0);
        filter: blur(7px) saturate(0.65) brightness(1.42) contrast(0.85);
    }

    60% {
        opacity: 1;
        transform: perspective(1000px) scale(1.2) rotate(-1.2deg) translate3d(0, -8px, 0);
        filter: blur(0) saturate(1.25) brightness(1.02) contrast(1.06);
    }

    100% {
        opacity: 1;
        transform: perspective(1000px) scale(1.12) rotate(0deg) translate3d(0, 0, 0);
        filter: blur(0) saturate(1.08) brightness(1) contrast(1.02);
    }
}

@keyframes galleryBgDrift {
    0% {
        transform: scale(1.12) translate3d(-13px, -10px, 0);
        filter: saturate(1.05) brightness(1);
    }

    50% {
        transform: scale(1.23) translate3d(16px, -18px, 0);
        filter: saturate(1.16) brightness(1.08);
    }

    100% {
        transform: scale(1.18) translate3d(-10px, 13px, 0);
        filter: saturate(1.1) brightness(1.04);
    }
}

@keyframes galleryBgParticleIn {
    0% {
        opacity: 0;
        transform: translate3d(0, 38px, 0) scale(0.78) rotate(4deg);
    }

    100% {
        opacity: 0.9;
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    }
}

@keyframes galleryBgParticleDrift {
    0% {
        background-position: 0% 0%, 0% 0%, 0% 0%;
    }

    100% {
        background-position: 38px -68px, -34px -56px, 28px -48px;
    }
}

@keyframes galleryBgAuraIn {
    0% {
        opacity: 0;
        transform: scale(0.68);
    }

    100% {
        opacity: 0.72;
        transform: scale(1);
    }
}

@keyframes galleryBgAuraPulse {
    0% {
        opacity: 0.4;
        transform: scale(1);
    }

    100% {
        opacity: 0.76;
        transform: scale(1.05);
    }
}

@keyframes galleryGlowReveal {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes galleryGlowDrift {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-10px, -8px, 0);
    }
}

@keyframes galleryShineIn {
    0% {
        opacity: 0;
        transform: translateX(-40%);
    }

    100% {
        opacity: 0.9;
        transform: translateX(-10%);
    }
}

@keyframes galleryShineSweep {
    0% {
        opacity: 0.2;
        transform: translateX(-40%);
    }

    50% {
        opacity: 0.55;
        transform: translateX(8%);
    }

    100% {
        opacity: 0.22;
        transform: translateX(25%);
    }
}

@keyframes galleryWayangLeftIn {
    0% {
        opacity: 0;
        transform: translate(-34px, 16px) scale(0.84) rotate(8deg);
        filter: blur(4px);
    }

    100% {
        opacity: 1;
        transform: translate(0, 0) scale(1) rotate(14deg);
        filter: blur(0);
    }
}

@keyframes galleryWayangRightIn {
    0% {
        opacity: 0;
        transform: scaleX(-1) translate(34px, 16px) scale(0.84) rotate(8deg);
        filter: blur(4px);
    }

    100% {
        opacity: 1;
        transform: scaleX(-1) translate(0, 0) scale(1) rotate(14deg);
        filter: blur(0);
    }
}

@keyframes galleryWayangFloatL {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    100% {
        transform: translate(-4px, -8px) rotate(-1deg);
    }
}

@keyframes galleryWayangFloatR {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    100% {
        transform: translate(4px, -8px) rotate(1deg);
    }
}

@keyframes galleryFrameLeftIn {
    0% {
        opacity: 0;
        transform: translate(-12px, 0) scale(0.98);
        filter: blur(2px);
    }

    100% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
        filter: blur(0);
    }
}

@keyframes galleryFrameRightIn {
    0% {
        opacity: 0;
        transform: translate(12px, 0) scale(0.98);
        filter: blur(2px);
    }

    100% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
        filter: blur(0);
    }
}

@keyframes galleryFrameFloatL {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    100% {
        transform: translateY(-2px) rotate(-0.35deg);
    }
}

@keyframes galleryFrameFloatR {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    100% {
        transform: translateY(-2px) rotate(0.35deg);
    }
}

@keyframes galleryPanelIn {
    0% {
        opacity: 0;
        transform: translateY(14px) scale(0.96);
        filter: blur(4px);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes galleryTitlePopIn {
    0% {
        opacity: 0;
        transform: translateY(-16px) scale(0.68);
        filter: blur(3px);
    }

    65% {
        opacity: 1;
        transform: translateY(2px) scale(1.08);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes galleryTitleGlow {
    0% {
        box-shadow: 0 8px 18px rgba(84, 61, 34, 0.22);
    }

    100% {
        box-shadow: 0 12px 24px rgba(96, 71, 41, 0.28), 0 0 18px rgba(239, 224, 201, 0.34);
    }
}

@keyframes galleryScrollIn {
    0% {
        opacity: 0;
        transform: translateY(16px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes galleryVideoIn {
    0% {
        opacity: 0;
        transform: translateY(16px) scale(0.93);
        filter: blur(4px);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes galleryVideoBreath {
    0% {
        transform: translateY(0) scale(1);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }

    100% {
        transform: translateY(-2px) scale(1.015);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.28);
    }
}

@keyframes galleryItemIn {
    0% {
        opacity: 0;
        transform: translateY(14px) scale(0.9);
        filter: blur(3px);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes galleryItemFloat {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-4px);
    }
}

/* Date ribbon ornament — decorative gold flourish lines */
.ngundang_events .events-date-ornament {
    width: 100%;
    position: relative;
}

.ngundang_events .events-date-ornament-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(210, 171, 111, 0.7), rgba(245, 214, 164, 0.9), rgba(210, 171, 111, 0.7), transparent);
    min-width: 20px;
}

.ngundang_events .events-date-ornament-diamond {
    color: rgba(220, 187, 129, 0.85);
    font-size: 8px;
    line-height: 1;
    text-shadow: 0 0 6px rgba(245, 214, 164, 0.5);
}

/* Ampersand as separate block line */
.ngundang_events .events-main-amp {
    display: block;
    font-family: var(--font-accent), serif;
    font-size: 28px;
    line-height: 1;
    color: #efd7a2;
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
}

/* Countdown ornament lines */
.ngundang_events .events-ornament-line {
    flex: 1;
    height: 1px;
    max-width: 60px;
    background: linear-gradient(90deg, transparent, rgba(220, 187, 129, 0.7), transparent);
}

.ngundang_maps .maps-frame-kiri,
.ngundang_maps .maps-frame-kanan,
.ngundang_story .story-frame-kiri,
.ngundang_story .story-frame-kanan {
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100%;
    width: auto;
    max-width: none;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.2));
    transform-origin: center center;
    object-fit: contain;
}

.ngundang_maps .maps-frame-kiri,
.ngundang_story .story-frame-kiri {
    left: 0;
}

.ngundang_maps .maps-frame-kanan,
.ngundang_story .story-frame-kanan {
    right: 0;
}

@media (max-width: 576px) {

    .ngundang_maps .maps-frame-kiri,
    .ngundang_maps .maps-frame-kanan,
    .ngundang_story .story-frame-kiri,
    .ngundang_story .story-frame-kanan {
        width: auto;
        max-width: none;
        height: 100%;
        top: 0;
        bottom: 0;
    }

    .ngundang_maps .maps-frame-kiri,
    .ngundang_story .story-frame-kiri {
        left: 0;
    }

    .ngundang_maps .maps-frame-kanan,
    .ngundang_story .story-frame-kanan {
        right: 0;
    }
}

.ngundang_maps.active .maps-frame-kiri,
.ngundang_story.active .story-frame-kiri {
    animation: galleryFrameLeftIn 0.92s cubic-bezier(0.22, 1, 0.36, 1) 0.22s both,
        galleryFrameFloatL 4.8s ease-in-out 1.4s infinite alternate;
}

.ngundang_maps.active .maps-frame-kanan,
.ngundang_story.active .story-frame-kanan {
    animation: galleryFrameRightIn 0.92s cubic-bezier(0.22, 1, 0.36, 1) 0.28s both,
        galleryFrameFloatR 4.9s ease-in-out 1.45s infinite alternate;
}

/* RSVP Slide CSS (Jabat Premium Style)          */
/* ============================================= */
.ngundang_rsvp .rsvp-panel {
    position: relative;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 12px 0 10px !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    transform: translateX(10px);
}

.ngundang_rsvp .rsvp-title {
    display: inline-flex;
    color: #3d2917 !important;
    font-size: 1.75rem !important;
    line-height: 1.1;
    letter-spacing: 0.8px;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.4);
}

.ngundang_rsvp .rsvp-title-badge {
    background-image: url("/template/aruna-valley-gold/asset/overlay_title.webp");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    padding: 25px 50px;
    min-width: 300px;
    max-width: 90%;
    box-shadow: none;
}

.ngundang_rsvp .rsvp-scroll {
    padding: 10px 10px 90px 10px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: 80vh !important;
    display: block !important;
}

.ngundang_rsvp .container-content {
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding-top: 6px !important;
    padding-bottom: 70px !important;
}

.ngundang_rsvp .container-mobile {
    position: relative;
    overflow: hidden;
    background-image: none !important;
}

.ngundang_rsvp .container-mobile>* {
    position: relative;
    z-index: 1;
}

.ngundang_rsvp .rsvp-frame-batak {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    z-index: 2;
    mix-blend-mode: normal;
    opacity: 1;
}

.ngundang_rsvp .rsvp-bg {
    position: absolute;
    inset: -10%;
    /* Extra room for drift */
    z-index: 0;
}

.ngundang_rsvp .rsvp-bg-inner {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.95;
}

.ngundang_rsvp .rsvp-bg-11 {
    z-index: 2;
    animation: rsvpBgDrift1 45s ease-in-out infinite alternate !important;
}

.ngundang_rsvp .rsvp-bg-2 {
    z-index: 1;
    opacity: 0.6;
    animation: rsvpBgDrift2 65s ease-in-out infinite alternate !important;
}

@keyframes rsvpBgDrift1 {
    0% {
        transform: scale(1) translate(0, 0) rotate(0deg);
    }

    100% {
        transform: scale(1.1) translate(-2%, -1%) rotate(1.5deg);
    }
}

@keyframes rsvpBgDrift2 {
    0% {
        transform: scale(1.15) translate(0, 0);
    }

    100% {
        transform: scale(1.0) translate(2%, 1%);
    }
}

.ngundang_rsvp .rsvp-bg-11 .rsvp-bg-inner {
    background-image: url("../asset/11.webp");
}

.ngundang_rsvp .rsvp-bg-2 .rsvp-bg-inner {
    background-image: url("../asset/background2.webp");
}

.ngundang_rsvp .rsvp-scroll::-webkit-scrollbar {
    width: 4px;
}

.ngundang_rsvp .rsvp-scroll::-webkit-scrollbar-thumb {
    background: rgba(78, 58, 36, 0.6);
    border-radius: 4px;
}

.ngundang_rsvp .rsvp-card {
    background: linear-gradient(180deg, rgba(255, 251, 245, 0.96) 0%, rgba(246, 229, 203, 0.95) 100%);
    border: none !important;
    border-radius: 14px;
    padding: 16px 16px 18px;
    box-shadow: 0 10px 22px rgba(66, 46, 24, 0.22);
}

.ngundang_rsvp .guestbook-item {
    background: linear-gradient(135deg, rgba(255, 251, 243, 0.96), rgba(248, 240, 225, 0.92)) !important;
    border: 1.5px solid rgba(212, 180, 130, 0.45) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08) !important;
    position: relative;
    overflow: hidden;
}

.ngundang_rsvp .guestbook-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, #d4b482, #a88454);
}

.ngundang_rsvp .form-control-custom,
.ngundang_rsvp .form-select-custom {
    background: rgba(255, 255, 255, 0.55) !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    font-size: 15px !important;
    color: #3d2917 !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

.ngundang_rsvp .form-control-custom:focus,
.ngundang_rsvp .form-select-custom:focus {
    background: rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 0 0 2px rgba(188, 150, 97, 0.3) !important;
    outline: none !important;
}