@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}



@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-50px) translateX(-50%);
    }

    to {
        opacity: 1;
        transform: translateY(0) translateX(-50%);
    }
}

/* Animasi Pohon Melambai (Swaying) */
@keyframes sway {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(2deg);
    }

    /* Goyang sedikit ke kanan */
    100% {
        transform: rotate(0deg);
    }
}

/* Animasi Masuk Pohon Kanan 2 (Rotasi 346deg) */
@keyframes slideInTreeRight2 {
    from {
        opacity: 0;
        transform: translateX(100px) rotate(346deg);
    }

    to {
        opacity: 1;
        transform: translateX(0) rotate(346deg);
    }
}

/* Animasi Masuk Pohon Kanan 3 (Rotasi -15deg) */
@keyframes slideInTreeRight3 {
    from {
        opacity: 0;
        transform: translateX(100px) rotate(-15deg);
    }

    to {
        opacity: 1;
        transform: translateX(0) rotate(-15deg);
    }
}

@keyframes slideInFlower3 {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animasi Sway (Goyang) tetap menggunakan variabel agar fleksibel */
@keyframes swayMirror {
    0% {
        transform: rotate(var(--rotasi-asal));
    }

    50% {
        transform: rotate(calc(var(--rotasi-asal) + 2deg));
    }

    100% {
        transform: rotate(var(--rotasi-asal));
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mengaktifkan scroll halus untuk seluruh halaman */
html {
    scroll-behavior: smooth;
}

/* --- CUSTOM SCROLLBAR --- */
/* Ukuran scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

/* Bagian jalur (track) scrollbar */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Bagian batang (thumb) scrollbar */
::-webkit-scrollbar-thumb {
    background: #8da1b9;
    /* Warna biru sesuai Save The Date Anda */
    border-radius: 10px;
}

/* Batang scrollbar saat diarahkan kursor (hover) */
::-webkit-scrollbar-thumb:hover {
    background: #343638;
    /* Warna gelap sesuai tema card Anda */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Georgia', serif;
    margin: 0;
    padding: 0;
    color: #4a4a4a;
}

.wrapper {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* --- BAGIAN KIRI (FOTO PASANGAN) --- */
.left-section {
    flex: 1.4;
  
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 80px 60px;
    /* Padding sedikit diperbesar */
    position: relative;
    overflow: hidden;
}

/* Overlay Gradasi: Dibuat lebih pekat di bawah untuk teks */
.left-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.7) 0%,
            rgba(0, 0, 0, 0.3) 40%,
            rgba(0, 0, 0, 0) 70%);
    z-index: 1;
}

.left-content {
    position: relative;
    z-index: 3;
    /* Di atas overlay dan gunungan */
    color: white;
    text-align: center;
}

/* Styling Gunungan di Left Section */
.left-decor {
    position: absolute;
    bottom: 0;
    left: 36%;
    transform: translateX(-50%);
    width: 100%;
    z-index: 2;
    pointer-events: none;
}

.left-gunungan-bg {
    width: 120%;
    /* Sedikit lebih besar untuk kesan megah */
    opacity: 0.15;
    filter: brightness(0) invert(1);
    /* Membuat gunungan menjadi putih transparan */
    margin-bottom: -530px;

}

.left-content h2 {
    font-family: 'Montserrat', sans-serif;
    /* Konsisten dengan isi undangan */
    font-weight: 300;
    letter-spacing: 6px;
    font-size: 0.8rem;
    margin-bottom: 0;
    text-transform: uppercase;
    opacity: 0.9;
}

.bride-name-cursive {
    font-family: 'Pinyon Script', cursive;
    font-size: 5rem;
    margin: 5px 0;
    font-weight: 400;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
}

.left-divider {
    margin: 10px 0;
}

.left-divider img {
    width: 120px;
    opacity: 0.7;
    filter: brightness(0) invert(1);
}

.wedding-date {
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 4px;
    font-weight: 400;
    font-size: 0.85rem;
    text-transform: uppercase;
    margin-top: 5px;
}

/* Responsif: Sembunyikan di layar kecil */
@media (max-width: 1024px) {
    .left-section {
        display: none;
    }
}

/* --- BAGIAN KANAN (SAMPUL ELEGAN) --- */
.right-section {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    background: url('../images/bg-pembuka-java.webp') no-repeat center center;
    background-size: cover;
    scroll-behavior: smooth;
}

.section {
    min-height: 100vh;
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
}

/* First Screen Base */
.first-screen {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 10vh;
    background-color: #f4ece4;
    /* Fallback color */
}

.bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: brightness(0.9);
    z-index: 1;
}

/* Decorations */
.flower-top {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    z-index: 5;
}

/* Typography */
.content-wrapper {
    position: relative;
    z-index: 10;
    text-align: center;
}

.sub-title {
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 4px;
    font-size: 0.9rem;
    color: #5d4037;
    margin-bottom: 10px;
    margin-top: 10vh;
}

.couple-names {
    font-family: 'Pinyon Script', cursive;
    /* Gunakan font script yang elegan */
    font-size: 3.5rem;
    color: #4e342e;
    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.5);
    margin-bottom: 15vh;
    margin-top: 20px;

}

.couple-names {
    opacity: 0;
    /* Sembunyikan awal untuk animasi */
    animation: fadeInUp 1s ease forwards;
}

/* Guest Box */
.guest-box {
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(5px);
    padding: 20px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #4e342e;
    max-width: 300px;
    margin: 0 auto;
}

.guest-box {
    opacity: 0;
    /* Sembunyikan awal untuk animasi */
    animation: fadeInUp 1s ease forwards;
}

.guest-box {
    animation-delay: 1.5s;
}


.guest-name {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    margin: 10px 0 20px;
}

.btn-open {
    background-color: #795548;
    color: white;
    border: none;
    padding: 10px 25px;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.btn-open:hover {
    background-color: #5d4037;
    transform: translateY(-3px) scale(1.05);
}

/* Assets Positioning & Layers */
.assets-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50vh;
    z-index: 2;
}

/* Base Style (Default untuk Mobile/Tablet) */
.temple-img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 650px;
    bottom: 20px;
    /* Posisi default */
    z-index: 4;
    animation: fadeInAsset 2.5s ease forwards;
}

/* Penyesuaian Khusus Laptop/Desktop */
@media (min-width: 1025px) {
    .temple-img {
        bottom: -190px;
        /* Turun lebih jauh di layar besar */
    }

}

/* Container Group agar berada di tengah */
.wayang-group {
    position: absolute;
    bottom: 50px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    /* Memastikan alas wayang sejajar */
    z-index: 4;
    /* Naikkan z-index agar di atas pohon tengah jika perlu */
    animation: fadeInAsset 2s ease forwards;
}

/* Base Style untuk semua Wayang */
.wayang {
    width: 325px;
    /* Sedikit diperbesar agar terlihat jelas */
    opacity: 0;
    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.2));
    /* Tambahkan bayangan tipis agar elegan */
    animation: fadeInAsset 1.5s ease forwards;
    animation-delay: 0.8s;
    /* Muncul setelah gunungan */
}

/* Posisi spesifik Wayang Kiri */
.wayang-left {
    margin-right: -235px;

    margin-bottom: -8px;
}

/* Posisi spesifik Wayang Kanan */
.wayang-right {
    margin-left: -235px;
    margin-bottom: -8px;
    /* Menjorok masuk ke arah gunungan */
}

/* Gunungan (Tetap) */
.wayang-center {
    width: 416px;
    /* Sesuai ukuran yang Anita set */
    margin: 0 -20px;
    z-index: 9;
    position: relative;
    animation:
        fadeInAsset 2s ease forwards,
        floating 4s ease-in-out infinite;
}

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

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

    100% {
        transform: translateY(0px);
    }
}

/* Base Asset Tree */
.asset-tree {
    position: absolute;
    bottom: -10px;
    /* Sedikit keluar layar agar natural */
    z-index: 4;
    pointer-events: none;
    transform-origin: bottom center;
}

/* Susunan Sisi Kiri */
.tree-left-1 {
    left: -117px;
    width: 354px;
    opacity: 0.7;
    z-index: 5;
    bottom: -242px;
    animation: treeSwayRight 8s ease-in-out infinite;
}

.tree-left-2 {
    left: -67px;
    width: 354px;
    opacity: 0.9;
    bottom: -203px;
    z-index: 6;
    animation: treeSwayRight 6s ease-in-out infinite;
    /* Kecepatan berbeda agar natural */
    animation-delay: 1s;
}

/* Susunan Sisi Kanan */
.tree-right-1 {
    right: -149px;
    bottom: -215px;
    width: 354px;
    opacity: 0.7;
    z-index: 5;
    transform: scaleX(-1);
    animation: treeSwayLeft 9s ease-in-out infinite;
}

.tree-right-2 {
    right: -64px;
    width: 354px;
    opacity: 0.9;
    z-index: 6;
    transform: scaleX(-1);
    bottom: -203px;
    animation: treeSwayLeft 7s ease-in-out infinite;
    animation-delay: 0.5s;
}

/* Pohon Tengah Utama (Tree-3) */
.tree-center-front {
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    z-index: 7;
    bottom: -205px;
    opacity: 1;
    animation: treeSwayCenter 10s ease-in-out infinite;
}

/* Penyesuaian Temple agar tidak tertutup total */
.tree-front {
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    z-index: 6;
    bottom: -20px;
    pointer-events: none;
}

@media (min-width: 1025px) {
 
    .tree-left-1 {
        left: 19%;
    }

    .tree-left-2 {
        left: 25%;
    }

    .tree-right-2 {
        right: 24%;
    }

    .tree-right-1 {
        right: 19%;
        bottom: -257px;
    }
}

/* Floating Animation */

.wayang-center {
    animation: floating 4s ease-in-out infinite;
}

@keyframes fadeInAsset {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Animasi Goyang ke Kanan */
@keyframes treeSwayRight {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(2deg);
    }

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

/* Animasi Goyang ke Kiri (untuk pohon yang di-flip/scaleX-1) */
@keyframes treeSwayLeft {
    0% {
        transform: rotate(0deg) scaleX(-1);
    }

    50% {
        transform: rotate(-2deg) scaleX(-1);
    }

    100% {
        transform: rotate(0deg) scaleX(-1);
    }
}

/* Khusus Pohon Tengah (tanpa flip) */
@keyframes treeSwayCenter {
    0% {
        transform: translateX(-50%) rotate(0deg);
    }

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

    100% {
        transform: translateX(-50%) rotate(0deg);
    }
}

.opening-section {
    position: relative;
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
      background: url('../images/bg-pembuka-java.webp') no-repeat center center;
    background-size: cover;
}

.video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

#openingVideo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    /* Gelapkan sedikit agar teks putih menonjol */
    z-index: 2;
}

/* Typography & Content */
.opening-content {
    position: relative;
    z-index: 3;
    color: #fff;
    text-align: center;
}

.opening-couple {
    font-family: 'Pinyon Script', cursive;
    font-size: 3.2rem;
    margin: 50px 0;
}

/* --- LOGIKA REVEAL --- */
.reveal-element {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1.5s ease;
}

/* Muncul serentak setelah 8 detik jika ditambahkan class .reveal */
.reveal-element.reveal {
    opacity: 1;
    transform: translateY(0);
}

/* Urutan delay (Staggered Effect) mulai dari detik ke-8 */
.opening-title.reveal {
    transition-delay: 8s;
}

.opening-couple.reveal {
    transition-delay: 8.4s;
}

.opening-date.reveal {
    transition-delay: 8.8s;
}

.scroll-wrapper.reveal {
    transition-delay: 9.5s;
}

/* Scroll Indicator */
.scroll-wrapper {
    position: absolute;
    bottom: 30px;
    transform: translateX(-50%);
    z-index: 10;
    text-align: center;
}

.mouse {
    width: 25px;
    height: 40px;
    border: 2px solid #fff;
    border-radius: 20px;
    margin: 0 auto 8px;
    position: relative;
}

.mouse::before {
    content: "";
    width: 4px;
    height: 8px;
    background: #fff;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 6px;
    border-radius: 2px;
    animation: scroll-anim 2s infinite ease;
}

@keyframes scroll-anim {
    0% {
        opacity: 1;
        transform: translate(-50%, 0);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, 15px);
    }
}

/* quotes */
.quotes-section {
    position: relative;
    padding: 30px 20px;
    background-color: #fcf8f5;
    /* Warna krem yang lebih terang agar teks kontras */
    overflow: hidden;
    min-height: 70vh;
    display: flex;
    align-items: center;
}

/* Dekorasi Pohon di Sisi */
.q-tree {
    position: absolute;
    width: 300px;
    opacity: 0.4;
    z-index: 1;
    bottom: 0;
}

.q-tree-left {
    left: -158px;
}

.q-tree-right {
    right: -157px;
    transform: scaleX(-1);
}

/* Image Wrapper & Frame */
.quote-image-wrapper {
    position: relative;
    display: inline-block;
    margin-bottom: 60px;
    z-index: 5;
}

/* Penempatan Bunga pada Frame */
.quote-flower-acc {
    position: absolute;
    top: -40px;
    /* Sedikit keluar dari bingkai ke atas */
    right: -50px;
    /* Sedikit keluar dari bingkai ke samping */
    width: 180px;
    /* Sesuaikan ukuran bunga */
    z-index: 7;
    /* Di atas bingkai foto dan gunungan */
    transform: rotate(15deg);
    filter: drop-shadow(4px 8px 10px rgba(0, 0, 0, 0.15));
    pointer-events: none;
}

/* Penyesuaian Responsif untuk Mobile */
@media (max-width: 768px) {
    .quote-flower-acc {
        width: 130px;
        top: -5px;
        right: -30px;
    }
}

.image-frame {
    width: 400px;
    height: 400px;
    border-radius: 20px 20px;
    /* Bentuk melengkung atas seperti kubah candi */
    overflow: hidden;
    border: 8px solid #fff;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.main-quote-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.quote-gunungan {
    position: absolute;
    bottom: -103px;
    left: 50%;
    transform: translateX(-50%);
    width: 220px;
    z-index: 6;
}

/* Typography */
.quote-title {
    font-family: 'Pinyon Script', cursive;
    font-size: 2.2rem;
    color: #4e342e;
    margin-bottom: 30px;
    font-weight: 700;
}

.quote-text {
    font-family: 'Montserrat', sans-serif;
    color: #5d4037;
    font-style: italic;
    line-height: 1.8;
    max-width: 600px;
    margin: 0 auto;
}

.quote-text p {
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.quote-author {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.8rem;
    display: block;
}

/* Responsif Mobile */
@media (max-width: 768px) {
    .image-frame {
        width: 320px;
        height: 320px;
    }

    .quote-gunungan {
        width: 210px;
    }

    .quote-title {
        font-size: 2.2rem;
    }
}

.couple-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    padding: 100px 15px;

}

.card-couple {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    padding: 60px 30px;
    border-radius: 25px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
    max-width: 800px;
    width: 100%;
    text-align: center;
    border: 1px solid rgba(212, 163, 115, 0.2);
    z-index: 5;
}

/* Background Decor */
.cp-flower-decor {
    position: absolute;
    width: 184px;
    top: 0;
    right: 0;
    transform: rotate(173deg);
    opacity: 0.3;
    z-index: 1;
}

.cp-tree-decor {
    position: absolute;
    width: 300px;
    bottom: 0;
    left: -50px;
    opacity: 0.3;
    z-index: 1;
}

.title-section {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    letter-spacing: 5px;
    color: #4e342e;
    margin-bottom: 20px;
}

.opening-text {
    max-width: 600px;
    margin: 0 auto 50px;
    font-size: 0.9rem;
    line-height: 1.8;
    color: #5d4037;
}

/* Photo Frame Oval */
.photo-frame {
    position: relative;
    width: 220px;
    height: 300px;
    margin: 0 auto 30px;
    z-index: 5;
    /* Jangan gunakan overflow: hidden di sini agar wayang bisa menyembul keluar */
}

.wayang-behind {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
    /* Naik sedikit agar terlihat di atas kepala */
    width: 320px;
    /* Lebih besar dari foto */
    opacity: 0.15;
    z-index: -1;
    /* Di bawah .img-couple */
    pointer-events: none;
}

/* Wayang Karakter di Depan (Pojok Bawah) */
.wayang-front-character {
    position: absolute;
    bottom: -85px;
    right: -40px;
    width: 164px;
    transform: rotate(13deg);
    z-index: 7;
    /* filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.2)); */
    pointer-events: none;
}

/* Penyesuaian agar karakter pria simetris (opsional) */
.mempelai-box:last-child .wayang-front-character {
    right: auto;
    left: -20px;
}

/* Pastikan foto tetap berada di tengah tumpukan */
.img-couple {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 110px;
    border: 5px solid #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.frame-flower {
    z-index: 8;
    /* Paling depan */
}

.frame-flower {
    bottom: -25px;
    position: absolute;
    top: 46px;
    right: 7px;
    width: 125px;
    z-index: 6;
    transform: rotate(243deg);
    transform-origin: bottom right;
    /* Titik tumpu di sudut bawah kanan */

    /* Tambahkan animasi sway */
    animation: flowerSwayCouple 6s ease-in-out infinite;
}

.frame-flower.bottom {
    top: auto;
    bottom: -5px;
    left: -7px;
    right: auto;
    transform: rotate(19deg);
    transform-origin: top left;
    /* Titik tumpu di sudut atas kiri */

    /* Tambahkan animasi sway variasi */
    animation: flowerSwayCoupleAlt 7s ease-in-out infinite;
    animation-delay: 1s;
    /* Berikan delay agar tidak bergerak barengan */
}

/* Typography Detail */
.nick-name {
    font-family: 'Pinyon Script', cursive;
    font-size: 3rem;
    color: #795548;
    margin-bottom: 5px;
}

.full-name {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.4rem;
    color: #4e342e;
    margin-bottom: 10px;
}

.parents-info {
    font-size: 0.9rem;
    color: #795548;
    line-height: 1.6;
}

/* Divider & Gunungan */
.couple-divider {
    margin: 40px 0;
    position: relative;
}

.ampersand {
    font-family: 'Pinyon Script', cursive;
    font-size: 4rem;
    color: #4e342e;
    display: block;
    z-index: 10;
    position: relative;
}

.divider-gunungan {
    width: 120px;
    opacity: 0.15;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.ig-link {
    display: inline-block;
    margin-top: 15px;
    color: #795548;
    text-decoration: none;
    font-size: 1.2rem;
    transition: 0.3s;
}

.ig-link:hover {
    color: #4e342e;
    transform: scale(1.1);
}

/* Animasi Sway untuk Bunga Mempelai Wanita (Top Right) */
@keyframes flowerSwayCouple {
    0% {
        transform: rotate(243deg);
    }

    50% {
        transform: rotate(246deg);
    }

    /* Goyang sedikit ke kanan */
    100% {
        transform: rotate(243deg);
    }
}

/* Animasi Sway untuk Bunga Mempelai Pria (Bottom Left) */
@keyframes flowerSwayCoupleAlt {
    0% {
        transform: rotate(19deg);
    }

    50% {
        transform: rotate(16deg);
    }

    /* Goyang sedikit ke kiri */
    100% {
        transform: rotate(19deg);
    }
}

/* /savedate. */
.save-the-date {
    position: relative;
    min-height: 90vh;
    border-radius: 30px 30px 0 0;
    padding: 50px 0 150px;
    background-color: #fbf7f4;
    overflow: hidden;
}

.std-sub {
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 5px;
    text-transform: uppercase;
    font-size: 0.9rem;
    color: #795548;
}

.std-title {
    font-family: 'Pinyon Script', cursive;
    font-size: 3.5rem;
    color: #4e342e;
}

/* Countdown Style */
.countdown-wrapper {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 40px 0;
    position: relative;
    z-index: 10;
}

.countdown-item {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(5px);
    border: 1px solid #d7ccc8;
    padding: 15px;
    min-width: 80px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.countdown-item .num {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    font-weight: 700;
    color: #4e342e;
}

.countdown-item .label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #8d6e63;
}

/* Info & Button */
.std-date {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    color: #5d4037;
    margin-bottom: 25px;
}

.btn-calendar {
    background: #4e342e;
    color: #fff;
    border: none;
    padding: 12px 25px;
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    transition: 0.3s;
}

.btn-calendar:hover {
    background: #795548;
    transform: translateY(-3px);
}

/* Footer Assets */
.std-footer-assets {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
}

.std-temple {
    width: 100%;
    max-width: 800px;
    opacity: 0.8;
    position: relative;
    z-index: 2;
    margin-bottom: -160px;
}

.std-tree-front {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    z-index: 3;
}

.std-gunungan-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    opacity: 0.2;
    z-index: 1;
}

@media (max-width: 768px) {
    .countdown-wrapper {
        gap: 10px;
    }

    .countdown-item {
        min-width: 65px;
        padding: 10px;
    }

    .std-title {
        font-size: 2.5rem;
    }
}

/* --- EVENT SECTION --- */
.event-section {
    min-height: 100vh;
    /* background: url('bg-awal-pink.png') no-repeat center center; */
    /* background-size: cover; */
    /* background-attachment: fixed; */
    padding: 100px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
}

/* Dekorasi Floral Latar */
.event-flower-tl {
    position: absolute;
    top: -50px;
    left: -50px;
    width: 200px;
    opacity: 0.6;
    z-index: 1;
}

/* Bentuk Kartu Arch */
.event-card {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(10px);
    width: 100%;
    max-width: 380px;
    padding: 60px 35px 160px;
    /* Padding bawah untuk ornamen merak */
    text-align: center;
    border-radius: 200px 200px;
    /* Bentuk Arch Atas */
    border: 5px solid #f8f4f1;
    /* Emas Lembut */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
    z-index: 2;
    opacity: 1;
    transform: translateY(50px);
    transition: all 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Ornamen Merak & Bunga di Bawah Kartu */
.event-card::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 180px;
    background: url('../images/merak.webp') no-repeat bottom center;
    background-size: contain;
    z-index: 1;
    pointer-events: none;
}

.event-card-inner {
    position: relative;
    z-index: 3;
}

.event-icon {
    width: 80px;
    margin-bottom: 15px;
    filter: drop-shadow(0 2px 4px rgba(212, 163, 115, 0.3));
}

.event-title {
    font-family: 'Pinyon Script', cursive;
    font-size: 3.5rem;
    color: #674b42;
    margin-bottom: 20px;
}

.event-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    color: #8da1b9;
    letter-spacing: 1px;
}

.event-date {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.3rem;
    margin: 10px 0;
    color: #4a4a4a;
}

.event-time {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 1rem;
    color: #5d6d5a;
    margin-bottom: 25px;
}

/* Bagian Lokasi */
.event-location {
    margin: 0 0;
    padding: 0px 0 20px;
    border-top: 1px solid rgba(212, 163, 115, 0.2);
}

.loc-icon {
    width: 45px;
    margin-bottom: 10px;
}

.loc-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    color: #333;
    margin-bottom: 5px;
}

.loc-detail {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    line-height: 1.6;
    color: #666;
}

/* Tombol Maps Elegant */
.btn-maps {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #644d46;
    /* Sage Dark */
    color: white;
    padding: 12px 30px;
    border-radius: 30px;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    transition: 0.4s;
    box-shadow: 0 5px 15px rgba(93, 109, 90, 0.3);
}

.btn-maps:hover {
    background: #d4a373;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(212, 163, 115, 0.4);
}

/* Reveal Trigger */


/* Mobile Adjustments */
@media (max-width: 768px) {
    .event-card {
        max-width: 320px;
        padding: 50px 25px 140px;
    }

    .event-title {
        font-size: 2.8rem;
    }
}

.gallery-section {
    position: relative;
    padding: 80px 0;
    background-color: #fcf8f5;
    overflow: hidden;
}

/* Background Decor */
.gallery-bg-decor {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    z-index: 1;
    pointer-events: none;
}

.bg-gunungan {
    width: 600px;
    opacity: 0.03;
    display: block;
    margin: 0 auto;
}

/* Typography */
.sub-title-java {
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 4px;
    font-size: 0.8rem;
    color: #8d6e63;
    text-transform: uppercase;
}

.title-java {
    font-family: 'Pinyon Script', cursive;
    font-size: 3rem;
    color: #4e342e;
}

.divider-line {
    width: 50px;
    height: 2px;
    background: #795548;
    margin: 15px auto;
}

/* Grid Layout (Masonry-like) */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    z-index: 5;
    position: relative;
    padding: 0 15px;
}

.gallery-item {
    width: 100%;
}

.gallery-frame {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    border: 5px solid #fff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.gallery-frame img:not(.flower-acc) {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.gallery-frame:hover img:not(.flower-acc) {
    transform: scale(1.1);
}

/* Flower Decoration on Images */
.flower-acc {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 80px;
    transform: rotate(180deg);
    z-index: 6;
    filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.2));
}

.flower-acc.bottom {
    top: auto;
    bottom: -10px;
    left: -10px;
    right: auto;
}

/* Desktop Adjustment */
@media (min-width: 992px) {
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
    }
}

/* Styling Frame agar bisa diklik */
.gallery-item a {
    display: block;
    cursor: pointer;
    text-decoration: none;
}

.gallery-frame {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    border: 5px solid #fff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    background-color: #ddd;
    /* Warna loading */
}

/* Efek Overlay saat Hover */
.overlay-zoom {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(78, 52, 46, 0.4);
    /* Warna coklat transparan */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 5;
}

.overlay-zoom i {
    color: #fff;
    font-size: 1.5rem;
    transform: scale(0.5);
    transition: all 0.3s ease;
}

.gallery-frame:hover .overlay-zoom {
    opacity: 1;
}

.gallery-frame:hover .overlay-zoom i {
    transform: scale(1);
}

/* Menjaga bunga tetap di atas overlay */
.flower-acc {
    z-index: 6;
}
/* YouTube Video Container */
.video-wrapper {
    position: relative;
    width: 100%;
    max-width: 800px; /* Atur lebar maksimal video */
    margin: 0 auto 40px; /* Jarak bawah ke galeri */
    padding: 0 15px;
    z-index: 5;
}

.video-frame {
    position: relative;
    padding-bottom: 56.25%; /* Rasio 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 20px;
    border: 8px solid #fff;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.video-frame iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}
/* story/ */
/* --- SECTION STORY (REDESIGN) --- */
.section-story {
    width: 100%;
    /* Warna Background Biru Kalem (Slate Blue) sesuai gambar referensi */
    background-color: #fcf8f5;
    padding: 80px 0 100px 0;
    position: relative;
    z-index: 25;
    /* Di atas section couple */

    /* Lengkungan pemisah di atas */
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    margin-top: 50px;
    /* Overlap ke section putih sebelumnya */
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.story-header {
    text-align: center;
    margin-bottom: 50px;
    padding: 0 20px;
}

.title-story {
    font-family: 'Pinyon Script', cursive;
    font-size: 3.5rem;
    color: #4e342e;
    margin-bottom: 10px;
}

.subtitle-story {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 2px;
    color: #8d6e63;
    text-transform: uppercase;
}

/* --- SLIDER CONTAINER --- */
.story-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 25px;
    padding: 20px 30px 60px 30px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

.story-container::-webkit-scrollbar {
    display: none;
}

/* --- KARTU CERITA (NEW LOOK) --- */
.story-card {
    position: relative;
    min-width: 290px;
    max-width: 320px;
    height: 480px;
    border-radius: 30px;
    /* Lebih membulat agar elegan */
    overflow: hidden;
    scroll-snap-align: center;
    box-shadow: 0 20px 40px rgba(78, 52, 46, 0.15);
    flex-shrink: 0;
    background-color: #fff;
    border: 1px solid rgba(121, 85, 72, 0.1);
}

.story-img-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.story-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.story-card:hover .story-img {
    transform: scale(1.1) rotate(2deg);
}

/* Konten Teks (Redesign with Glassmorphism) */
.story-content {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    padding: 25px;
    background: rgba(255, 255, 255, 0.85);
    /* Box putih transparan */
    backdrop-filter: blur(10px);
    border-radius: 20px;
    color: #4e342e;
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.5);
    z-index: 10;
}

.story-year {
    display: inline-block;
    background: #795548;
    color: #fff;
    padding: 3px 12px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 700;
    margin-bottom: 12px;
    box-shadow: 0 4px 10px rgba(121, 85, 72, 0.3);
}

.story-title {
    font-family: 'Playfair Display', serif;
    /* Font serif untuk kesan formal */
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: #4e342e;
}

.story-desc {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    line-height: 1.6;
    color: #5d4037;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0;
}

/* Dekorasi Wayang Kecil di Pojok Kartu */
.story-card::after {
    content: '';
    position: absolute;
    top: 15px;
    right: 15px;
    width: 50px;
    height: 50px;
    background: url('../images/wayang-center.webp') no-repeat center;
    background-size: contain;
    opacity: 0.2;
    z-index: 2;
}

.story-counter {
    position: absolute;
    top: 25px;
    left: 25px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    background: rgba(0, 0, 0, 0.3);
    padding: 5px 10px;
    border-radius: 10px;
    backdrop-filter: blur(2px);
    z-index: 5;
}

/* --- RESPONSIVE --- */
@media (max-width: 480px) {
    .story-card {
        min-width: 85%;
        height: 450px;
    }

    .title-story {
        font-size: 2.8rem;
    }
}

/* gift/ */
.gift-section {
    position: relative;
    padding: 80px 0;
    background-color: #fcf8f5;
    overflow: hidden;
    min-height: 70vh;
}

.bg-gunungan-gift {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    opacity: 0.03;
    z-index: 1;
}

@media (max-width: 480px) {
    .gift-desc {
        max-width: 350px;
    }
}

.gift-desc {
    max-width: 350px;
    margin: 0 auto;
    color: #5d4037;
    font-size: 0.9rem;
}

.gift-card {
    background: #fff;
    padding: 40px 30px;
    margin: 15px;
    border-radius: 20px;
    border: 1px solid #f4ece4;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    height: 100%;
    position: relative;
    z-index: 5;
}

.gift-icon {
    font-size: 2.5rem;
    color: #795548;
    margin-bottom: 20px;
}

.gift-card h3 {
    font-family: 'Playfair Display', serif;
    color: #4e342e;
    margin-bottom: 15px;
}

/* Button Toggle */
.btn-toggle-gift {
    background: #795548;
    color: #fff;
    border: none;
    padding: 10px 25px;
    border-radius: 50px;
    margin-top: 15px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom:15px;
}

.btn-toggle-gift:hover {
    background: #4e342e;
    transform: translateY(-2px);
}

/* Details Section */
.gift-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
    /* Animasi buka-tutup */
}

.gift-details.active {
    max-height: 300px;
    /* Atur sesuai kebutuhan konten */
    margin-top: 25px;
}

.account-box {
    background: #fdfaf8;
    padding: 20px;
    border-radius: 15px;
    border: 1px dashed #d7ccc8;
}

.bank-logo {
    width: 80px;
    margin-bottom: 15px;
}

.acc-number {
    font-size: 1.2rem;
    font-weight: 700;
    color: #4e342e;
    margin-bottom: 5px;
}

.btn-copy {
    background: none;
    border: 1px solid #795548;
    color: #795548;
    padding: 5px 15px;
    border-radius: 5px;
    font-size: 0.75rem;
    margin-top: 10px;
    cursor: pointer;
}

.btn-copy:hover {
    background: #795548;
    color: #fff;
}

/* rsvp */
.rsvp-section {
    position: relative;
    padding: 80px 20px;
    /* background-color: #fcf8f5; */
    overflow: hidden;
}

.rsvp-container {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 5;
}

/* Grid System Murni */
.rsvp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Dua kolom sejajar */
    gap: 40px;
    margin-top: 40px;
}

/* Header & Decor */
.bg-gunungan-rsvp {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    opacity: 0.04;
    z-index: 1;
}

.flower-header-decor {
    width: 100px;
    margin-top: -10px;
}

/* Card Style */
.rsvp-card,
.guest-book-container {
    background: #fff;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(78, 52, 46, 0.08);
    border: 1px solid #f4ece4;
    height: 100%;
}

.rsvp-card h3,
.guest-book-container h3 {
    font-family: 'Playfair Display', serif;
    color: #4e342e;
    margin-bottom: 25px;
    text-align: center;
}

/* Form Styling */
.form-group {
    margin-bottom: 20px;
    text-align: left;
}

.form-group label {
    display: block;
    font-weight: 600;
    color: #5d4037;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border-radius: 10px;
    border: 1px solid #d7ccc8;
    font-family: 'Montserrat', sans-serif;
    box-sizing: border-box;
    /* Penting agar padding tidak merusak lebar */
}

.btn-rsvp-send {
    width: 100%;
    background-color: #795548;
    color: #fff;
    border: none;
    padding: 15px;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s ease;
}

.btn-rsvp-send:hover {
    background-color: #4e342e;
    transform: translateY(-2px);
}

/* Messages List */
.guest-book-list {
    max-height: 400px;
    overflow-y: auto;
    padding-right: 10px;
}

.guest-item {
    background: #fdfaf8;
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 15px;
    border-left: 4px solid #795548;
    text-align: left;
}

.guest-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.badge-status {
    font-size: 0.7rem;
    background: #e8f5e9;
    color: #2e7d32;
    padding: 2px 10px;
    border-radius: 20px;
    font-weight: 600;
}

/* Responsive Mobile */
@media (max-width: 850px) {
    .rsvp-grid {
        grid-template-columns: 1fr;
        /* Menjadi satu kolom di HP */
    }
}

/* closing/ */
/* Closing Section Style */
.closing-section {
    position: relative;
    padding: 100px 20px 300px;
    /* Padding bawah besar untuk ruang candi */
    background-color: #fcf8f5;
    text-align: center;
    overflow: hidden;
}

.closing-container {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

/* Typography */
.closing-p {
    font-family: 'Montserrat', sans-serif;
    color: #5d4037;
    line-height: 1.8;
    margin-bottom: 15px;
    font-size: 0.95rem;
}

.closing-salam {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.2rem;
    color: #4e342e;
    margin-top: 30px;
}

.couple-final-name {
    font-family: 'Pinyon Script', cursive;
    font-size: 3.5rem;
    color: #4e342e;
    margin: 40px 0 10px;
}

.hashtag {
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 3px;
    color: #795548;
    font-weight: 600;
    font-size: 0.8rem;
}

/* Photo Frame */
.closing-photo-wrapper {
    margin: 50px 0;
}

.photo-frame-oval {
    position: relative;
    width: 200px;
    height: 280px;
    margin: 0 auto;
}

.img-final {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 100px;
    border: 5px solid #fff;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.flower-final-decor {
    position: absolute;
    top: -20px;
    right: -30px;
    width: 100px;
    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.1));
}

/* Background & Footer Assets */
.closing-gunungan {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    opacity: 0.05;
    z-index: 1;
}

.closing-footer-assets {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
}

.temple-bottom {
    width: 100%;
    max-width: 900px;
    /* opacity: 0.8; */
    margin-bottom: -158px;
    z-index: 2;
}

.tree-final {
    position: absolute;
    bottom: 6px;
    width: 200px;
    z-index: 1;
    left: 100px;
}

/* Footer Amorra.id */
.main-footer {
    background-color: #4e342e;
    color: #f4ece4;
    padding: 30px 20px;
    text-align: center;
}

.footer-content p {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 1px;
    margin: 0;
}

.footer-content i {
    color: #e91e63;
    margin: 0 5px;
}

/* Responsive Mobile */
@media (max-width: 600px) {
    .couple-final-name {
        font-size: 2.5rem;
    }

    .temple-bottom {
        max-width: 100%;
    }
}

/* State Awal: Sembunyi */
/* State Awal: Sembunyi */
.quotes-section .reveal-element {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1.2s ease-out;
}

/* State Aktif: Muncul */
.quotes-section .reveal-element.reveal {
    opacity: 1;
    /* Default untuk teks dan foto */
    transform: translateY(0);
}

/* Khusus untuk Dekorasi Pohon (Penyesuaian Opacity 0.4) */
.q-tree.reveal-element.reveal {
    opacity: 0.4;
    /* Sesuai request: tetap transparan saat muncul */
    transform: translateY(0);
}

/* Pengaturan Delay Berurutan (Staggered) */
.q-tree-left.reveal {
    transition-delay: 0.2s;
}

.q-tree-right.reveal {
    transition-delay: 0.4s;
}

.quote-image-wrapper.reveal {
    transition-delay: 0.6s;
}

.quote-flower-acc.reveal {
    transition-delay: 1.2s;
}

.quote-title.reveal {
    transition-delay: 1.4s;
}

.quote-text.reveal {
    transition-delay: 1.7s;
}

.quote-author.reveal {
    transition-delay: 2.0s;
}

/* --- State Awal (Hidden) --- */
.couple-section .reveal-element {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s ease-out;
}

/* Khusus Photo Frame gunakan Zoom Effect agar tidak kaku */
.photo-frame.reveal-element {
    transform: scale(0.8) translateY(30px);
}

/* --- State Aktif (Muncul) --- */
.couple-section .reveal-element.reveal {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* --- Urutan Delay Berurutan (Staggered) --- */

/* Header & Card Utama */
.card-couple.reveal {
    transition-delay: 0.1s;
}

.couple-header.reveal {
    transition-delay: 0.3s;
}

/* Mempelai Wanita (Adiba) */
.mempelai-box:first-child .photo-frame.reveal {
    transition-delay: 0.5s;
}

.mempelai-box:first-child .wayang-behind.reveal {
    transition-delay: 0.7s;
}

.mempelai-box:first-child .wayang-front-character.reveal {
    transition-delay: 0.9s;
}

.mempelai-box:first-child .nick-name.reveal {
    transition-delay: 1.1s;
}

.mempelai-box:first-child .full-name.reveal {
    transition-delay: 1.3s;
}

.mempelai-box:first-child .parents-info.reveal {
    transition-delay: 1.5s;
}

/* Divider */
.couple-divider.reveal {
    transition-delay: 1.7s;
}

/* Mempelai Pria (Habib) */
.mempelai-box:last-child .photo-frame.reveal {
    transition-delay: 1.9s;
}

.mempelai-box:last-child .wayang-behind.reveal {
    transition-delay: 2.1s;
}

.mempelai-box:last-child .wayang-front-character.reveal {
    transition-delay: 2.3s;
}

.mempelai-box:last-child .nick-name.reveal {
    transition-delay: 2.5s;
}

.mempelai-box:last-child .full-name.reveal {
    transition-delay: 2.7s;
}

.mempelai-box:last-child .parents-info.reveal {
    transition-delay: 2.9s;
}

/* Dekorasi Sisi */
.cp-flower-decor.reveal {
    transition-delay: 3.1s;
}

.cp-tree-decor.reveal {
    transition-delay: 3.1s;
}

/* State Awal: Hidden */
.save-the-date .reveal-element {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1.2s ease-out;
}

/* Khusus Gunungan & Borobudur (Zoom & Fade Up) */
.std-gunungan-bg.reveal-element,
.std-temple.reveal-element {
    transform: scale(0.9) translateY(40px);
}

/* State Aktif: Muncul */
.save-the-date .reveal-element.reveal {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* --- URUTAN DELAY (Staggered) --- */

/* 1. Background Gunungan muncul pertama sebagai pondasi */


/* 2. Judul "Save the Date" */
.std-sub.reveal {
    transition-delay: 0.5s;
}

/* 3. Judul "Menghitung Hari" */
.std-title.reveal {
    transition-delay: 0.7s;
}

/* 4. Kotak Hitung Mundur (Countdown) */
.countdown-wrapper.reveal {
    transition-delay: 1.0s;
}

/* 5. Teks Tanggal */
.std-date.reveal {
    transition-delay: 1.3s;
}

/* 6. Tombol Kalender */
.btn-calendar.reveal {
    transition-delay: 1.5s;
}

/* 7. Candi Borobudur sebagai penutup section */
.std-temple.reveal {
    transition-delay: 1.8s;
}

/* State Khusus untuk Transparansi Gunungan di CSS Utama Anda */
.std-gunungan-bg.reveal {
    opacity: 0.05;
    /* Tetap transparan sesuai tema */
}

/* State Awal: Hidden */
.event-section .reveal-element {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s ease-out;
}

/* State Aktif: Muncul */
.event-section .reveal-element.reveal {
    opacity: 1;
    transform: translateY(0);
}

/* --- URUTAN DELAY --- */

/* Ornamen */
.event-flower-tl.reveal {
    transition-delay: 0.1s;
}

/* --- Kartu Akad (Kiri/Atas) --- */
.event-card:nth-of-type(1).reveal {
    transition-delay: 0.3s;
}

.event-card:nth-of-type(1) .event-icon.reveal {
    transition-delay: 0.5s;
}

.event-card:nth-of-type(1) .event-title.reveal {
    transition-delay: 0.7s;
}

.event-card:nth-of-type(1) .event-info.reveal {
    transition-delay: 0.9s;
}

.event-card:nth-of-type(1) .event-location.reveal {
    transition-delay: 1.1s;
}

.event-card:nth-of-type(1) .btn-maps.reveal {
    transition-delay: 1.3s;
}

/* --- Kartu Resepsi (Kanan/Bawah) --- */
.event-card:nth-of-type(2).reveal {
    transition-delay: 1.5s;
}

.event-card:nth-of-type(2) .event-icon.reveal {
    transition-delay: 1.7s;
}

.event-card:nth-of-type(2) .event-title.reveal {
    transition-delay: 1.9s;
}

.event-card:nth-of-type(2) .event-info.reveal {
    transition-delay: 2.1s;
}

.event-card:nth-of-type(2) .event-location.reveal {
    transition-delay: 2.3s;
}

.event-card:nth-of-type(2) .btn-maps.reveal {
    transition-delay: 2.5s;
}

/* State Awal: Hidden */
.section-story .reveal-element {
    opacity: 0;
    transform: translateX(-40px);
    /* Muncul dari kiri */
    transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* State Aktif: Muncul */
.section-story .reveal-element.reveal {
    opacity: 1;
    transform: translateX(0);
}

/* --- URUTAN DELAY (Staggered) --- */

/* Header */
.title-story.reveal {
    transition-delay: 0.1s;
}

.subtitle-story.reveal {
    transition-delay: 0.3s;
}

/* Kartu Cerita Muncul Bergantian */
.story-card:nth-of-type(1).reveal {
    transition-delay: 0.5s;
}

.story-card:nth-of-type(2).reveal {
    transition-delay: 0.8s;
}

.story-card:nth-of-type(3).reveal {
    transition-delay: 1.1s;
}

/* Konten di dalam kartu (opsional jika ingin lebih detail) */
.story-card.reveal .story-content {
    transition: all 0.8s ease;
    transition-delay: inherit;
}

/* State Awal: Hidden & Slightly Scaled Down */
.gallery-section .reveal-element {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
    transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Smooth pop effect */
}

/* State Aktif: Muncul */
.gallery-section .reveal-element.reveal {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* --- URUTAN DELAY --- */

/* Background & Header */
.bg-gunungan.reveal {
    transition-delay: 0.1s;
    opacity: 0.03 !important;
}

/* Tetap transparan */
.event-flower-tl.reveal {
    transition-delay: 0.2s;
}

.gallery-section .text-center.reveal {
    transition-delay: 0.3s;
}

/* Galeri Grid - Efek Berurutan */
.gallery-item:nth-child(1).reveal {
    transition-delay: 0.4s;
}

.gallery-item:nth-child(2).reveal {
    transition-delay: 0.6s;
}

.gallery-item:nth-child(3).reveal {
    transition-delay: 0.8s;
}

.gallery-item:nth-child(4).reveal {
    transition-delay: 1.0s;
}

.gallery-item:nth-child(5).reveal {
    transition-delay: 1.2s;
}

/* State Awal: Hidden */
.gift-section .reveal-element {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s ease-out;
}

/* State Aktif: Muncul */
.gift-section .reveal-element.reveal {
    opacity: 1;
    transform: translateY(0);
}

/* --- URUTAN DELAY (Staggered) --- */

/* 1. Background Gunungan */
.bg-gunungan-gift.reveal {
    transition-delay: 0.1s;
    opacity: 0.03 !important;
    /* Memastikan tetap sangat tipis */
}

/* 2. Header (Judul & Deskripsi) */
.gift-section .text-center.reveal {
    transition-delay: 0.3s;
}

/* 3. Kartu Transfer Bank (Kiri) */
.gift-section .col-md-6:nth-child(1).reveal {
    transition-delay: 0.6s;
}

/* 4. Kartu Kirim Kado (Kanan) */
.gift-section .col-md-6:nth-child(2).reveal {
    transition-delay: 0.9s;
}

/* Memperhalus transisi dropdown jika ada */
.gift-details {
    transition: max-height 0.5s ease-in-out, opacity 0.5s ease;
}

/* --- State Awal (Hidden) --- */
.rsvp-section .reveal-element {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s ease-out;
}

/* --- State Aktif (Muncul) --- */
.rsvp-section .reveal-element.reveal {
    opacity: 1;
    transform: translateY(0);
}

/* --- URUTAN DELAY (Staggered) --- */

/* 1. Background Gunungan */
.bg-gunungan-rsvp.reveal {
    transition-delay: 0.1s;
    opacity: 0.04 !important;
    /* Memastikan transparansi tetap terjaga */
}

/* 2. Header & Bunga */
.rsvp-header.reveal {
    transition-delay: 0.3s;
}

.flower-header-decor.reveal {
    transition-delay: 0.5s;
}

/* 3. Form RSVP (Kiri) */
.rsvp-card-wrapper.reveal {
    transition-delay: 0.7s;
}

/* 4. Container Pesan (Kanan) */
.messages-wrapper.reveal {
    transition-delay: 1.0s;
}

/* 5. Item Pesan di dalam List (Muncul perlahan) */
.guest-item.reveal:nth-child(1) {
    transition-delay: 1.2s;
}

.guest-item.reveal:nth-child(2) {
    transition-delay: 1.4s;
}

/* --- State Awal (Hidden) --- */
.closing-section .reveal-element {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Khusus Foto & Gunungan gunakan Zoom Effect */
.closing-photo-wrapper.reveal-element,
.closing-gunungan.reveal-element {
    transform: scale(0.9) translateY(30px);
}

/* --- State Aktif (Muncul) --- */
.closing-section .reveal-element.reveal {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* --- URUTAN DELAY (Staggered) --- */

/* 1. Ornamen & Gunungan Background */
.closing-gunungan.reveal {
    transition-delay: 0.1s;
    opacity: 0.05 !important;
}

.closing-section .event-flower-tl.reveal {
    transition-delay: 0.2s;
}

/* 2. Paragraf Penutup & Salam */
.closing-p.reveal:nth-child(1) {
    transition-delay: 0.4s;
}

.closing-p.reveal:nth-child(2) {
    transition-delay: 0.6s;
}

.closing-salam.reveal {
    transition-delay: 0.8s;
}

/* 3. Foto Final (Frame Oval) */
.closing-photo-wrapper.reveal {
    transition-delay: 1.1s;
}

.flower-final-decor.reveal {
    transition-delay: 1.4s;
}

/* 4. Nama Mempelai & Hashtag */
.couple-final-name.reveal {
    transition-delay: 1.7s;
}

.hashtag.reveal {
    transition-delay: 1.9s;
}

/* 5. Candi Borobudur & Wayang (Paling Akhir/Tancep Kayon) */
.temple-bottom.reveal {
    transition-delay: 2.2s;
}

.tree-final.reveal {
    transition-delay: 2.5s;
}

/* --- Konfigurasi Awal Dekorasi Bunga --- */
.opening-section .deco {
    position: absolute;
    z-index: 5;
    opacity: 0;
    transform: translateY(50px);
    /* Mulai dari bawah layar */
    transition: opacity 1.5s ease-out, transform 1.5s ease-out;
    pointer-events: none;
}

/* --- Trigger Muncul dengan Delay 7 Detik --- */
.opening-section .reveal-element.reveal {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 7s;
    /* Delay 7 detik sesuai permintaan */
}

/* --- Efek Animasi Sway (Goyang) --- */
@keyframes flowerSway {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(5deg);
    }

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

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

    50% {
        transform: rotate(-5deg);
    }

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

/* Menerapkan animasi sway setelah elemen muncul (reveal) */
.opening-section .deco.reveal {
    animation: flowerSway 6s ease-in-out infinite;
    animation-delay: 8.5s;
    /* Mulai bergoyang setelah transisi fade-in selesai */
}

/* Variasi goyangan agar terlihat lebih alami */
.tree-left2.reveal,
.tree-right2.reveal {
    animation: flowerSwayAlt 7s ease-in-out infinite !important;
    animation-delay: 8.7s !important;
}

/* --- Penyesuaian Posisi (Layout Tetap Dibawah) --- */
.tree-left {
    left: -20px;
    bottom: -39px !important;
}

.tree-left2 {
    left: 50px;
    bottom: -50px !important;
}

.tree-left3 {
    left: 150px;
    bottom: -60px !important;
}

.tree-right {
    right: -20px;
    bottom: -39px !important;
}

.tree-right2 {
    right: 80px;
    bottom: -45px !important;
}

/* Pastikan konten utama tetap di atas bunga jika diperlukan */
.opening-content {
    z-index: 10;
}