/*Start Global*/
@font-face {
    font-family: 'Cloud';
    src: url('font/Cloud.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sailors';
    src: url('font/Sailors.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Kitsch Display';
    src: url('Kitsch-Text-Extralight-trial.ttf') format('opentype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Flatory HC';
    src: url('font/Flatory-Sans-Regular.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nickainley';
    src: url('font/Nickainley.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

* {
    box-sizing: border-box;
    
}

html {
    scroll-behavior: smooth;
}

body {
    background: #26343b;
    margin: 0;
    font-family: serif;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button,
input,
textarea {
    font-family: inherit;
}

.page-wrapper {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
}

.invitation {
    width: 100%;
    max-width: 480px;
    min-height: 100vh;
    overflow: hidden;
    background: #26343b;
}

.section {
    position: relative;
    width: 100%;
}
/*End Global*/


/*Start Section Background*/
.bg-section {
    width: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
}

/*Background bagian atas*/
.bg-section-1 {
    background-image: url("00-desain/bg1.webp");
    aspect-ratio: 1080 / 8000;
}

/*Background bagian bawah*/
.bg-section-2 {
    position: relative;
    background-image: url("00-desain/bg2.webp");
    top:-1px;
    aspect-ratio: 1080 / 8000;
}
/*End Section Background*/

/*Start Section Cover Opening*/

/*Lock scroll saat cover aktif*/
body.cover-locked {
    overflow: hidden;
    height: 100vh;
}

/*Wrapper cover full screen*/
.cover-opening {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: flex;
    justify-content: center;
    align-items: stretch;

    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transition:
        opacity 1.4s ease,
        visibility 1.4s ease;
}

/*Cover hilang*/
.cover-opening.is-hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/*Frame cover mengikuti lebar undangan*/
.cover-frame {
    position: relative;

    width: 100%;
    max-width: 480px;
    min-height: 100vh;
    min-height: 100svh;

    overflow: hidden;

    background: #000000;
}

/*Background cover*/
.cover-bg {
    position: absolute;
    inset: 0;
    z-index: 1;

    overflow: hidden;
}

/*Slide background*/
.cover-bg-slide {
    position: absolute;
    inset: -5%;

    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    opacity: 0;

    animation:
        coverBgSlideshow 21s infinite;
}

/*Foto background cover*/
.cover-bg-slide-1 {
    background-image: url("0-cover/1.webp");
    animation-delay: 0s, 0s;
}

.cover-bg-slide-2 {
    background-image: url("0-cover/2.webp");
    animation-delay: 6s, 1s;
}

.cover-bg-slide-3 {
    background-image: url("0-cover/3.webp");
    animation-delay: 12s, 2s;
}

/*Overlay gelap*/
.cover-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;

    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.22) 0%,
            rgba(0, 0, 0, 0.28) 45%,
            rgba(0, 0, 0, 0.72) 120%
        );
}

/*Content cover*/
.cover-content {
    position: relative;
    z-index: 3;

    width: 100%;
    min-height: 100vh;
    min-height: 100svh;

    color: #ffffff;
    text-align: center;

    padding-left: 7%;
    padding-right: 7%;
}

/*Group atas*/
.cover-top-group {
    position: absolute;
    top: 8.5%;
    left: 0;

    width: 100%;

    padding-left: 7%;
    padding-right: 7%;
}

/*Group bawah*/
.cover-bottom-group {
    position: absolute;
    top: 60%;
    left: 0;

    width: 100%;

    padding-left: 7%;
    padding-right: 7%;
}

/*Animasi cover default*/
.cover-animate {
    opacity: 0;
}

/*Animasi aktif*/
.cover-opening.is-visible .cover-animate {
    opacity: 1;
    transition:
        opacity 1.8s ease;
}

/*Delay animasi cover*/
.cover-opening.is-visible .cover-delay-1 {
    transition-delay: 0.2s;
}

.cover-opening.is-visible .cover-delay-2 {
    transition-delay: 0.5s;
}

.cover-opening.is-visible .cover-delay-3 {
    transition-delay: 0.85s;
}

.cover-opening.is-visible .cover-delay-4 {
    transition-delay: 1.1s;
}

.cover-opening.is-visible .cover-delay-5 {
    transition-delay: 1.35s;
}

.cover-opening.is-visible .cover-delay-6 {
    transition-delay: 1.6s;
}


/*Wrapper invitation*/
.cover-invitation-wrap {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
}

/*Text invitation*/
.cover-invitation-text {
    margin: 0;
    padding: 0;

    font-family: 'Times New Roman', serif;
    font-size: clamp(14px, 3.95vw, 19px);
    font-weight: normal;
    line-height: 1;

    color: #ffffff;
    text-shadow: 0 3px 8px rgba(0, 0, 0, 0.6);
}

/*Wrapper couple*/
.cover-couple-wrap {
    margin-top: clamp(8px, 2vw, 12px);
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
}

/*Nama pengantin*/
.cover-couple-name {
    margin: 0;
    padding: 0;

    font-family: 'Cardo', serif;
    font-size: clamp(42px, 12.5vw, 60px);
    font-weight: 400;
    font-style: italic;
    line-height: 0.95;
    letter-spacing: clamp(2px, 0.8vw, 4px);

    color: #ffffff;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.7);
}

/*Wrapper greeting*/
.cover-greeting-wrap {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
}

/*Text greeting*/
.cover-greeting-text {
    margin: 0;
    padding: 0;

    font-family: 'Noto Serif', serif;
    font-size: clamp(15px, 4.4vw, 21px);
    font-weight: 700;
    line-height: 1.25;

    color: #ffffff;
    text-shadow: 0 3px 8px rgba(0, 0, 0, 0.7);
}

/*Wrapper nama tamu*/
.cover-guest-wrap {
    margin-top: clamp(8px, 2.2vw, 12px);
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
}

/*Nama tamu kosong*/
.cover-guest-wrap.is-hidden {
    display: none;
}

/*Nama tamu*/
.cover-guest-name {
    margin: 0;
    padding: 0;

    font-family: 'Sailors', serif;
    font-size: clamp(24px, 7.2vw, 35px);
    font-weight: normal;
    line-height: 1.1;
    letter-spacing: 1px;
    text-transform: uppercase;

    color: #ffffff;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.75);
}

/*Wrapper message*/
.cover-message-wrap {
    margin-top: clamp(10px, 2.6vw, 14px);
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
}

/*Message text*/
.cover-message-text {
    margin: 0;
    padding: 0;

    font-family: 'Gilda Display', serif;
    font-size: clamp(13px, 3.7vw, 17px);
    font-weight: normal;
    line-height: 1.35;

    color: #ffffff;
    text-shadow: 0 3px 8px rgba(0, 0, 0, 0.7);
}

.cover-button-wrap {
    width: 100%;

    margin-top: clamp(4px, 1.2vw, 8px);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;

    display: flex;
    justify-content: center;
    align-items: center;
}

.cover-open-button {
    width: 65%;
    max-width: 260px;

    margin: 0;
    padding: 0;
    border: 0;

    display: block;

    background: transparent;
    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
    outline: none;
}

button,
a,
img {
    -webkit-tap-highlight-color: transparent;
}

.cover-open-button {
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

.cover-open-button:focus,
.cover-open-button:active {
    outline: none;
    box-shadow: none;
}

/*Image button*/
.cover-open-button-img {
    width: 100%;
    height: auto;
    display: block;

    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}

/*Slideshow cover*/
@keyframes coverBgSlideshow {
    0% {
        opacity: 0;
    }

    6% {
        opacity: 1;
    }

    29% {
        opacity: 1;
    }

    39% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

/*End Section Cover Opening*/

/*Start Section Cover Kecil*/

/*Wrapper cover kecil*/
.cover-small {
    position: absolute;
    top: 13.8%;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 3;
}

.cover-small-subtitle {
    margin: 0;
    padding: 0;
    font-family: 'times new roman', cursive;
    font-size: clamp(15px, 5vw, 22px);
    font-weight: 100;
    letter-spacing: 1px;
    line-height: 1;
    color: #ffffff;
}

.cover-small-title {
    margin-top: 0;
    padding: 0;
    font-family: 'Cardo', serif;
    font-size: clamp(22px, 6.8vw, 38px);
    font-weight: 400;
    line-height: 1.2;
    font-style: italic;
    letter-spacing: 3px;
    color: #ffffff;
}

/*End Section Cover Kecil*/

/*Start Section Assalamualaikum*/

/*Wrapper assalamualaikum*/
.assalamualaikum-section {
    position: absolute;
    top: 20.4%;
    left: 0;
    width: 100%;
    z-index: 3;

    text-align: center;
    padding: 0 10%;
}

/*Tulisan Assalamualaikum*/
.assalamualaikum-title {
    margin: 0;
    padding: 0;

    font-family: 'Srisakdi', cursive;
    font-size: clamp(20px, 6.25vw, 30px);
    font-weight: 700;
    line-height: 1.1;

    color: #ffffff;
}

/*Teks penyambut*/
.assalamualaikum-text {
    margin: 18px auto 0 auto;
    padding: 0;

    max-width: 360px;

    font-family: 'Kitsch Display', serif;
    font-size: clamp(16px, 4.8vw, 23px);
    font-weight: normal;
    font-style: italic;
    line-height: 1.45;
    letter-spacing: 0.2px;

    color: #ffffff;
}

/*Kondisi awal hanya ketika JS aktif*/
.js-animation-ready .assalamualaikum-title {
    opacity: 0;
    transform: translateY(-24px);
    transition:
        opacity 2.4s ease,
        transform 2.4s ease;
}

.js-animation-ready .assalamualaikum-title {
    opacity: 0;
    transform: translateY(-24px);
    transition:
        opacity 2.4s ease,
        transform 2.4s ease;
}

.js-animation-ready .assalamualaikum-text {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 2.4s ease 1s,
        transform 2.4s ease 1s;
}

.js-animation-ready .assalamualaikum-section.is-visible .assalamualaikum-title,
.js-animation-ready .assalamualaikum-section.is-visible .assalamualaikum-text {
    opacity: 1;
    transform: translateY(0);
}

/*End Section Assalamualaikum*/

/*Start Section Pengantin*/

/*Wrapper pengantin*/
.pengantin-section {
    position: absolute;
    top: 27%;
    left: 0;
    width: 100%;
    z-index: 3;

    display: flex;
    justify-content: center;
}

/*Box pengantin*/
.pengantin-box {
    width: 86.76%;
    aspect-ratio: 937 / 2890.1;

    background-image: url("bgbox/bgbox-cream.webp");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 100%;

    border-radius: clamp(30px, 9.25vw, 44px);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.25);

    overflow: hidden;
}

/*Animasi box pengantin jika JS aktif*/
.js-animation-ready .pengantin-box {
    opacity: 0;
    transform: translateY(45px);
    transition:
        opacity 2.4s ease,
        transform 2.4s ease;
}

/*Box muncul saat section terlihat*/
.js-animation-ready .pengantin-section.is-visible .pengantin-box {
    opacity: 1;
    transform: translateY(0);
}

/*Start Isi Box Pengantin*/

/*Foto pengantin umum*/
.pengantin-photo-wrap {
    position: absolute;
    z-index: 4;
}

.pengantin-photo-card {
    width: 100%;
    aspect-ratio: 532.4 / 714;

    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    border-radius: clamp(30px, 9.25vw, 44px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
}

/*Foto Rindiani*/
.pengantin-photo-wrap-rindiani {
    top: 3%;
    left: 8.4%;
    width: 56.82%;
}

.pengantin-photo-card-rindiani {
    background-image: url("1-pengantin/rindiani.webp");
}

/*Foto Hilmy*/
.pengantin-photo-wrap-hilmy {
    right: 8.4%;
    bottom: 2.8%;
    width: 56.82%;
}

.pengantin-photo-card-hilmy {
    background-image: url("1-pengantin/hilmi.webp");
}


/*Label umum The Bride dan The Groom*/
.pengantin-label-wrap {
    position: absolute;
    z-index: 5;

    width: 42%;
    height: 8%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pengantin-label-text {
    display: block;

    font-family: 'Kitsch Display', serif;
    font-size: clamp(28px, 10vw, 48px);
    font-weight: normal;
    line-height: 1;
    letter-spacing: 10px;

    color: #000000;
    white-space: nowrap;
}

/*Label The Bride*/
.pengantin-label-wrap-bride {
    top: 12%;
    right: -5%;
}

.pengantin-label-text-bride {
    transform: rotate(90deg);
}

/*Label The Groom*/
.pengantin-label-wrap-groom {
    bottom: 12%;
    left: -6%;
}

.pengantin-label-text-groom {
    transform: rotate(-90deg);
}


/*Nama umum*/
.pengantin-name-wrap {
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 5;

    text-align: center;
    padding: 0 8%;
}

.pengantin-name {
    margin: 0;
    padding: 0;

    font-family: 'Charmonman', cursive;
    font-size: clamp(23px, 7.7vw, 37px);
    font-weight: 700;
    line-height: 1.15;

    color: #000000;
}

/*Nama Rindiani*/
.pengantin-name-wrap-rindiani {
    top: 30.2%;
}

.pengantin-name-rindiani {
    transform: translateX(0);
}

/*Nama Hilmy*/
.pengantin-name-wrap-hilmy {
    bottom: 28.8%;
}

.pengantin-name-hilmy {
    transform: translateX(0);
}


/*Orang tua umum*/
.pengantin-parent-wrap {
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 5;

    text-align: center;
    padding: 0 8%;
}

.pengantin-parent {
    margin: 0;
    padding: 0;

    font-family: 'Gilda Display', serif;
    font-size: clamp(12px, 3.55vw, 17px);
    font-weight: 250;
    line-height: 1.45;

    color: #000000;
}

/*Orang tua Rindiani*/
.pengantin-parent-wrap-rindiani {
    top: 37.8%;
}

.pengantin-parent-rindiani {
    transform: translateX(0);
}

/*Orang tua Hilmy*/
.pengantin-parent-wrap-hilmy {
    bottom: 36.8%;
}

.pengantin-parent-hilmy {
    transform: translateX(0);
}


/*Instagram umum*/
.pengantin-instagram-wrap {
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 5;

    display: flex;
    justify-content: center;
    text-align: center;
}

.pengantin-instagram-link {
    display: block;
    width: 42%;
    max-width: 42%;
}

.pengantin-instagram-img {
    width: 100%;
    height: auto;
    display: block;
}

/*Instagram Rindiani*/
.pengantin-instagram-wrap-rindiani {
    top: 41.4%;
}

.pengantin-instagram-link-rindiani {
    margin-left: 0;
    margin-right: 0;
}

/*Instagram Hilmy*/
.pengantin-instagram-wrap-hilmy {
    top: 53.6%;
}

.pengantin-instagram-link-hilmy {
    margin-left: 0;
    margin-right: 0;
}


/*Simbol And*/
.pengantin-and-wrap {
    position: absolute;
    top: 46.5%;
    left: 0;
    width: 100%;
    z-index: 5;

    text-align: center;
}

.pengantin-and-text {
    font-family: 'Gilda Display', serif;
    font-size: clamp(62px, 18vw, 88px);
    font-weight: normal;
    line-height: 1;

    color: #000000;
}

/*End Isi Box Pengantin*/

/*Start Animasi Isi Pengantin*/

/*Kondisi awal animasi isi pengantin*/
.js-animation-ready .pengantin-animate {
    opacity: 0;
    transform: translateY(38px);
    transition:
        opacity 1.8s ease,
        transform 1.8s ease;
}

/*Kondisi muncul saat elemen itu sendiri terlihat*/
.js-animation-ready .pengantin-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/*End Animasi Isi Pengantin*/

/*End Section Pengantin*/

/*Start Section Save The Date*/

/*Wrapper save the date*/
.save-date-section {
    position: absolute;
    top: 66.9%;
    left: 0;
    width: 100%;
    z-index: 3;

    text-align: center;

    transform: scale(0.8);
    transform-origin: top center;
}

/*Title wrapper*/
.save-date-title-wrap {
    width: 100%;
}

/*Title text*/
.save-date-title {
    margin: 0;
    padding: 0;

    font-family: 'Kitsch Display', serif;
    font-size: clamp(44px, 13.5vw, 65px);
    font-weight: normal;
    font-style: italic;
    line-height: 1;
    letter-spacing: 1px;

    color: #000000;
}

/*Countdown wrapper*/
.save-date-countdown {
    width: 78%;
    margin: clamp(16px, 4vw, 22px) auto 0 auto;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: clamp(14px, 6.5vw, 35px);
    align-items: start;
}

/*Countdown item umum*/
.save-date-item {
    width: 100%;
    min-width: 0;
    text-align: center;
}
/*Countdown item Hari*/
.save-date-item-hari {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
}

/*Countdown item Jam*/
.save-date-item-jam {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
}

/*Countdown item Menit*/
.save-date-item-menit {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
}

/*Countdown item Detik*/
.save-date-item-detik {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
}

/*Box angka umum*/
.save-date-number-box {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1 / 1;

    display: flex;
    justify-content: center;
    align-items: center;

    background: rgba(255, 255, 255, 0.36);
    border: clamp(2px, 0.55vw, 3px) solid #000000;
    border-radius: clamp(8px, 2.5vw, 13px);
}

/*Box angka Hari*/
.save-date-number-box-hari {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
}

/*Box angka Jam*/
.save-date-number-box-jam {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
}

/*Box angka Menit*/
.save-date-number-box-menit {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
}

/*Box angka Detik*/
.save-date-number-box-detik {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
}

/*Angka countdown umum*/
.save-date-number {
    display: block;

    font-family: 'Times New Roman', serif;
    font-size: clamp(28px, 8.2vw, 40px);
    font-weight: 700;
    line-height: 1;

    color: #000000;
}

/*Angka Hari*/
.save-date-number-hari {
    margin-top: 0;
    margin-left: 0;
}

/*Angka Jam*/
.save-date-number-jam {
    margin-top: 0;
    margin-left: 0;
}

/*Angka Menit*/
.save-date-number-menit {
    margin-top: 0;
    margin-left: 0;
}

/*Angka Detik*/
.save-date-number-detik {
    margin-top: 0;
    margin-left: 0;
}

/*Label wrapper umum*/
.save-date-label-wrap {
    margin-top: clamp(8px, 2.2vw, 12px);
}

/*Label wrapper Hari*/
.save-date-label-wrap-hari {
    margin-left: 0;
    margin-top: clamp(8px, 2.2vw, 12px);
}

/*Label wrapper Jam*/
.save-date-label-wrap-jam {
    margin-left: 0;
    margin-top: clamp(8px, 2.2vw, 12px);
}

/*Label wrapper Menit*/
.save-date-label-wrap-menit {
    margin-left: -10px;
    margin-top: clamp(8px, 2.2vw, 12px);
}

/*Label wrapper Detik*/
.save-date-label-wrap-detik {
    margin-left: 0;
    margin-top: clamp(8px, 2.2vw, 12px);
}

/*Label text umum*/
.save-date-label {
    display: block;

    font-family: 'Times New Roman', serif;
    font-size: clamp(28px, 8.2vw, 40px);
    font-weight: normal;
    line-height: 1;

    color: #000000;
    white-space: nowrap;
}

/*Label Hari*/
.save-date-label-hari {
    margin-left: 0;
}

/*Label Jam*/
.save-date-label-jam {
    margin-left: 0;
}

/*Label Menit*/
.save-date-label-menit {
    margin-left: 0;
}

/*Label Detik*/
.save-date-label-detik {
    margin-left: 0;
}


/*Start Animasi Save The Date*/

/*Kondisi awal title hanya ketika JS aktif*/
.js-animation-ready .save-date-animate-title {
    opacity: 0;
    transform: translateY(-35px);
    transition:
        opacity 2s ease,
        transform 2s ease;
}

/*Title muncul*/
.js-animation-ready .save-date-animate-title.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/*Kondisi awal box angka*/
.js-animation-ready .save-date-animate-box {
    opacity: 0;
    transform: translateY(24px) scale(0.75);
    transition:
        opacity 1.4s ease,
        transform 1.4s cubic-bezier(0.2, 1.4, 0.4, 1);
}

/*Box angka muncul popup*/
.js-animation-ready .save-date-animate-box.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/*Delay box dari kiri ke kanan*/
.js-animation-ready .save-date-delay-1.is-visible {
    transition-delay: 0s;
}

.js-animation-ready .save-date-delay-2.is-visible {
    transition-delay: 0.18s;
}

.js-animation-ready .save-date-delay-3.is-visible {
    transition-delay: 0.36s;
}

.js-animation-ready .save-date-delay-4.is-visible {
    transition-delay: 0.54s;
}

/*Kondisi awal label*/
.js-animation-ready .save-date-animate-label {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 1.8s ease,
        transform 1.8s ease;
}

/*Label muncul bersamaan*/
.js-animation-ready .save-date-animate-label.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/*End Animasi Save The Date*/

/*End Section Save The Date*/

/*Start Section Wedding Event*/

/*Wrapper wedding event*/
.wedding-event-section {
    position: absolute;
    top: 74.1%;
    left: 0;
    width: 100%;
    z-index: 3;

    display: flex;
    justify-content: center;
}

/*Box wedding event*/
.wedding-event-box {
    width: 86.76%;
    aspect-ratio: 937 / 2014.3;

    background-image: url("bgbox/bgbox-charcoal.webp");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 100%;

    border-radius: clamp(30px, 9.25vw, 44px);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.764);

    overflow: hidden;
}

/*Start Animasi Wedding Event*/

/*Kondisi awal hanya ketika JS aktif*/
.js-animation-ready .wedding-event-animate {
    opacity: 0;
    transform: translateY(45px);
    transition:
        opacity 2.4s ease,
        transform 2.4s ease;
}

/*Box muncul saat terlihat*/
.js-animation-ready .wedding-event-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/*End Animasi Wedding Event*/

/*End Section Wedding Event*/

/*Start Isi Box Wedding Event*/

/*Title wrapper*/
.wedding-event-title-wrap {
    margin-top: clamp(20px, 5.3vw, 26px);
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;

    text-align: center;
}

/*Title text*/
.wedding-event-title {
    margin: 0;
    padding: 0;

    font-family: 'Times New Roman', serif;
    font-size: clamp(20px, 7.1vw, 34px);
    font-weight: normal;
    line-height: 1;
    letter-spacing: clamp(3px, 1.1vw, 5px);

    color: #ffffff;
}


/*Foto slideshow wrapper*/
.wedding-event-photo-wrap {
    width: 77.1%;
    aspect-ratio: 722.4 / 388.7;

    margin-top: clamp(12px, 3vw, 16px);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;

    overflow: hidden;
    border-radius: clamp(8px, 2.3vw, 12px);
}

/*Foto slider*/
.wedding-event-photo-slider {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/*Foto slide umum*/
.wedding-event-photo-slide {
    position: absolute;
    inset: -3%;

    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    opacity: 0;
    animation:
        weddingEventSlideshow 21s infinite;
}

/*Foto masing-masing*/
.wedding-event-photo-slide-1 {
    background-image: url("2-wedding-event/foto/1.webp");
    animation-delay: 0s, 0s;
}

.wedding-event-photo-slide-2 {
    background-image: url("2-wedding-event/foto/2.webp");
    animation-delay: 6s, 1s;
}

.wedding-event-photo-slide-3 {
    background-image: url("2-wedding-event/foto/3.webp");
    animation-delay: 12s, 2s;
}

/*Animasi slideshow foto*/
@keyframes weddingEventSlideshow {
    0% {
        opacity: 0;
    }

    6% {
        opacity: 1;
    }

    29% {
        opacity: 1;
    }

    39% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

/*Subtitle umum Akad/Resepsi*/
.wedding-event-subtitle-wrap {
    text-align: center;
}

.wedding-event-subtitle {
    margin: 0;
    padding: 0;

    font-family: 'Nickainley', cursive;
    font-size: clamp(25px, 8.5vw, 41px);
    font-weight: normal;
    line-height: 1;

    color: #ffffff;
}

/*Subtitle Akad*/
.wedding-event-subtitle-wrap-akad {
    margin-top: clamp(18px, 4.2vw, 22px);
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
}

/*Subtitle Resepsi*/
.wedding-event-subtitle-wrap-resepsi {
    margin-top: clamp(-20px, -4vw, -13px);
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
}


/*Detail umum*/
.wedding-event-detail-wrap {
    width: 100%;

    text-align: center;
    padding-left: 8%;
    padding-right: 8%;
}

.wedding-event-detail {
    margin: 0;
    padding: 0;

    font-family: 'Gilda Display', serif;
    font-size: clamp(10px, 3.4vw, 17px);
    font-weight: normal;
    line-height: 1.35;

    color: #ffffff;
}

/*Detail Akad*/
.wedding-event-detail-wrap-akad {
    margin-top: clamp(11px, 2.8vw, 14px);
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
}

/*Detail Resepsi*/
.wedding-event-detail-wrap-resepsi {
    margin-top: clamp(11px, 2.8vw, 14px);
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
}

/*Akad detail masing-masing*/
.wedding-event-akad-date {
    margin-bottom: clamp(6px, 1.5vw, 8px);
}

.wedding-event-akad-time {
    margin-bottom: clamp(6px, 1.5vw, 8px);
}

.wedding-event-akad-place {
    margin-bottom: clamp(5px, 1.3vw, 7px);
}

.wedding-event-akad-address {
    margin-bottom: 0;
}

/*Resepsi detail masing-masing*/
.wedding-event-resepsi-date {
    margin-bottom: clamp(6px, 1.5vw, 8px);
}

.wedding-event-resepsi-time {
    margin-bottom: clamp(6px, 1.5vw, 8px);
}

.wedding-event-resepsi-place {
    margin-bottom: clamp(5px, 1.3vw, 7px);
}

.wedding-event-resepsi-address {
    margin-bottom: 0;
}


/*Separator*/
.wedding-event-separator-wrap {
    width: 85%;

    margin-top: clamp(-10px, -2.5vw, -6px);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;

    overflow: hidden;
}

.wedding-event-separator-img {
    width: 100%;
    height: auto;
    display: block;
}


/*Maps button*/
.wedding-event-maps-wrap {
    width: 50%;

    margin-top: clamp(3px, 1.5vw, 7px);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
}

.wedding-event-maps-link {
    display: block;
    width: 100%;
}

.wedding-event-maps-img {
    width: 100%;
    height: auto;
    display: block;
}

/*End Isi Box Wedding Event*/

/*Start Animasi Isi Wedding Event*/

/*Kondisi awal umum hanya ketika JS aktif*/
.js-animation-ready .wedding-event-item-animate {
    opacity: 0;
}

/*Animasi pudar dari atas*/
.js-animation-ready .wedding-event-anim-down {
    transform: translateY(-32px);
    transition:
        opacity 2.8s ease,
        transform 2.8s ease;
}

.js-animation-ready .wedding-event-anim-down.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/*Animasi pudar dari bawah*/
.js-animation-ready .wedding-event-anim-up {
    transform: translateY(32px);
    transition:
        opacity 2.8s ease,
        transform 2.8s ease;
}

.js-animation-ready .wedding-event-anim-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/*Animasi fade biasa*/
.js-animation-ready .wedding-event-anim-fade {
    transition:
        opacity 2.8s ease;
}

.js-animation-ready .wedding-event-anim-fade.is-visible {
    opacity: 1;
}

/*Animasi popup*/
.js-animation-ready .wedding-event-anim-popup {
    transform: scale(0.82);
    transition:
        opacity 2s ease,
        transform 2s cubic-bezier(0.22, 1, 0.36, 1);
}

.js-animation-ready .wedding-event-anim-popup.is-visible {
    opacity: 1;
    transform: scale(1);
}

/*Animasi separator split*/
.js-animation-ready .wedding-event-anim-split {
    opacity: 1;
}

.js-animation-ready .wedding-event-anim-split .wedding-event-separator-img {
    clip-path: inset(0 50% 0 50%);
    transition:
        clip-path 2.8s ease;
}

.js-animation-ready .wedding-event-anim-split.is-visible .wedding-event-separator-img {
    clip-path: inset(0 0 0 0);
}

/*End Animasi Isi Wedding Event*/

/*Start Section Gallery*/

/*Wrapper gallery*/
.gallery-section {
    position: absolute;
    top: 1%;
    left: 0;
    width: 100%;
    z-index: 3;

    display: flex;
    justify-content: center;
}

/*Box gallery*/
.gallery-box {
    width: 86.76%;
    aspect-ratio: 937 / 3919.3;

    background-image: url("bgbox/bgbox-charcoal.webp");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 100%;

    border-radius: clamp(30px, 9.25vw, 44px);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.686);

    overflow: hidden;
}

/*End Section Gallery*/

/*Start Isi Box Gallery*/

/*Title gallery*/
.gallery-title-wrap {
    margin-top: clamp(20px, 5vw, 26px);
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;

    text-align: center;
}

.gallery-title {
    margin: 0;
    padding: 0;

    font-family: 'Alex Brush', cursive;
    font-size: clamp(24px, 8.75vw, 42px);
    font-weight: normal;
    line-height: 1;

    color: #ffffff;
}

/*Grid utama gallery*/
.gallery-grid-wrap {
    width: 91.28%;

    margin-top: clamp(12px, 3vw, 16px);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(14px, 4vw, 20px);
    align-items: start;
}

/*Kolom gallery umum*/
.gallery-column {
    width: 100%;

    display: flex;
    flex-direction: column;
    gap: clamp(14px, 4vw, 20px);
}

/*Kolom kiri*/
.gallery-column-left {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
}

/*Kolom kanan*/
.gallery-column-right {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
}

/*Foto umum*/
.gallery-photo {
    width: 100%;
    display: block;

    padding: 0;
    border: 0;
    cursor: pointer;

    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    border-radius: clamp(13px, 4.2vw, 20px);
    overflow: hidden;
}

/*Foto besar*/
.gallery-photo-large {
    aspect-ratio: 406.3 / 550.8;
}

/*Foto kecil*/
.gallery-photo-small {
    aspect-ratio: 406.3 / 244.6;
}

/*Foto bawah*/
.gallery-photo-bottom {
    aspect-ratio: 855.3 / 416.3;
}

/*Foto kiri*/
.gallery-photo-kiri-1 {
    background-image: url("3-gallery/kiri/1.webp");
}

.gallery-photo-kiri-2 {
    background-image: url("3-gallery/kiri/2.webp");
}

.gallery-photo-kiri-3 {
    background-image: url("3-gallery/kiri/3.webp");
}

.gallery-photo-kiri-4 {
    background-image: url("3-gallery/kiri/4.webp");
}

.gallery-photo-kiri-5 {
    background-image: url("3-gallery/kiri/5.webp");
}

/*Foto kanan*/
.gallery-photo-kanan-1 {
    background-image: url("3-gallery/kanan/1.webp");
}

.gallery-photo-kanan-2 {
    background-image: url("3-gallery/kanan/2.webp");
}

.gallery-photo-kanan-3 {
    background-image: url("3-gallery/kanan/3.webp");
}

.gallery-photo-kanan-4 {
    background-image: url("3-gallery/kanan/4.webp");
}

.gallery-photo-kanan-5 {
    background-image: url("3-gallery/kanan/5.webp");
}

/*Foto bawah*/
.gallery-bottom-wrap {
    width: 91.28%;

    margin-top: clamp(14px, 4vw, 20px);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;

    display: flex;
    flex-direction: column;
    gap: clamp(14px, 4vw, 20px);
}

.gallery-photo-bawah-1 {
    background-image: url("3-gallery/3bawah/1.webp");
}

.gallery-photo-bawah-2 {
    background-image: url("3-gallery/3bawah/2.webp");
}

.gallery-photo-bawah-3 {
    background-image: url("3-gallery/3bawah/3.webp");
}

/*End Isi Box Gallery*/ 

/*Start Animasi Gallery*/

/*Box gallery animasi*/
.js-animation-ready .gallery-box-animate {
    opacity: 0;
    transform: translateY(45px);
    transition:
        opacity 2.6s ease,
        transform 2.6s ease;
}

.js-animation-ready .gallery-box-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/*Item gallery animasi*/
.js-animation-ready .gallery-item-animate {
    opacity: 0;
    transform: translateY(36px);
    transition:
        opacity 2.4s ease var(--gallery-delay, 0s),
        transform 2.4s ease var(--gallery-delay, 0s);
}

.js-animation-ready .gallery-item-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/*End Animasi Gallery*/

/*Start Gallery Lightbox*/

.gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 999;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;

    background: rgba(0, 0, 0, 0.86);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.4s ease,
        visibility 0.4s ease;
}

.gallery-lightbox.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.gallery-lightbox-image-wrap {
    max-width: min(92vw, 780px);
    max-height: 86vh;

    display: flex;
    justify-content: center;
    align-items: center;
}

.gallery-lightbox-image {
    max-width: 100%;
    max-height: 86vh;

    display: block;

    border-radius: 18px;
    object-fit: contain;
}

.gallery-lightbox-close {
    position: absolute;
    top: 18px;
    right: 22px;
    z-index: 1000;

    width: 42px;
    height: 42px;

    border: 0;
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;

    font-size: 34px;
    line-height: 1;
    cursor: pointer;
}

.gallery-lightbox-nav {
    position: absolute;
    top: 85%;
    z-index: 1000;

    width: 46px;
    height: 46px;

    border: 0;
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;

    font-size: 46px;
    line-height: 0.8;
    cursor: pointer;

    transform: translateY(-50%);
}

.gallery-lightbox-prev {
    left: 110px;
}

.gallery-lightbox-next {
    right:110px;
}

/*End Gallery Lightbox*/

/*Start Section Our Story*/

/*Wrapper our story*/
.our-story-section {
    position: absolute;
    top: 52.4%;
    left: 0;
    width: 100%;
    z-index: 3;

    text-align: center;
}

/*Title wrapper*/
.our-story-title-wrap {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
}

/*Title text*/
.our-story-title {
    margin: 0;
    padding: 0;

    font-family: 'Alex Brush', cursive;
    font-size: clamp(42px, 12.5vw, 60px);
    font-weight: normal;
    line-height: 1;

    color: #000000;
}

/*Box our story*/
.our-story-box {
    width: 83.65%;
    aspect-ratio: 903.4 / 320;

    margin-top: clamp(6px, 1.8vw, 9px);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;

    background-image: url("bgbox/bgbox-cream.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;

    border-radius: clamp(38px, 11vw, 53px);
    box-shadow: 0 18px 20px rgba(0, 0, 0, 0.314);

    overflow: hidden;
}

/*Scroll area*/
.our-story-scroll {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    gap: clamp(18px, 5vw, 28px);

    padding-left: clamp(20px, 5.5vw, 28px);
    padding-right: clamp(20px, 5.5vw, 28px);

    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

/*Hide scrollbar*/
.our-story-scroll::-webkit-scrollbar {
    display: none;
}

.our-story-scroll {
    scrollbar-width: none;
}

/*Story card umum*/
.our-story-card {
    flex: 0 0 auto;
    width: 23.1%;
    

    padding: 0;
    margin: 0;

    border: 0;
    background: transparent;
    cursor: pointer;

    text-align: center;
    scroll-snap-align: center;
}

/*Story card masing-masing*/
.our-story-card-beginning {
    margin-left: 0;
    margin-top: 10px;
    margin-right: 0;
}

.our-story-card-journey {
    margin-left: 0;
    margin-right: 0;
    margin-top: 10px;
}

.our-story-card-proposal {
    margin-left: 0;
    margin-top: 10px;
    margin-right: 0;
}

.our-story-card-wedding {
    margin-left: 0;
    margin-top: 10px;
    margin-right: 0;
}

/*Story photo umum*/
.our-story-photo {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;

    margin-left: auto;
    margin-right: auto;
    margin-bottom: clamp(8px, 2.4vw, 12px);

    border-radius: 50%;

    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/*Story photo masing-masing*/
.our-story-photo-beginning {
    background-image: url("4-our-story/the beginning.webp");
}

.our-story-photo-journey {
    background-image: url("4-our-story/our journey.webp");
}

.our-story-photo-proposal {
    background-image: url("4-our-story/the proposal.webp");
}

.our-story-photo-wedding {
    background-image: url("4-our-story/our wedding.webp");
}

/*Story label umum*/
.our-story-label {
    display: block;

    font-family: 'Times New Roman', serif;
    font-size: clamp(12px, 3.2vw, 16px);
    font-weight: 700;
    line-height: 1.1;

    color: #000000;
    white-space: nowrap;
}

/*Story label masing-masing*/
.our-story-label-beginning {
    margin-left: -10px;
    margin-right: 0;
}

.our-story-label-journey {
    margin-left: 0;
    margin-right: 0;
}

.our-story-label-proposal {
    margin-left: 0;
    margin-right: 0;
}

.our-story-label-wedding {
    margin-left: 0;
    margin-right: 0;
}


/*Start Animasi Our Story*/

/*Kondisi awal hanya ketika JS aktif*/
.js-animation-ready .our-story-item-animate {
    opacity: 0;
    transform: translateY(34px);
    transition:
        opacity 2.4s ease var(--our-story-delay, 0s),
        transform 2.4s ease var(--our-story-delay, 0s);
}

/*Elemen muncul saat terlihat*/
.js-animation-ready .our-story-item-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/*End Animasi Our Story*/

/*End Section Our Story*/

/*Start Our Story Lightbox*/

.our-story-lightbox {
    position: fixed;
    inset: 0;
    z-index: 999;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;

    background: rgba(0, 0, 0, 0.86);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.4s ease,
        visibility 0.4s ease;
}

.our-story-lightbox.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.our-story-lightbox-image-wrap {
    max-width: min(92vw, 780px);
    max-height: 86vh;

    display: flex;
    justify-content: center;
    align-items: center;
}

.our-story-lightbox-image {
    max-width: 100%;
    max-height: 86vh;

    display: block;

    border-radius: 18px;
    object-fit: contain;
}

.our-story-lightbox-close {
    position: absolute;
    top: 18px;
    right: 22px;
    z-index: 1000;

    width: 42px;
    height: 42px;

    border: 0;
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;

    font-size: 34px;
    line-height: 1;
    cursor: pointer;
}

.our-story-lightbox-nav {
    position: absolute;
    top: 85%;
    z-index: 1000;

    width: 46px;
    height: 46px;

    border: 0;
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;

    font-size: 46px;
    line-height: 0.8;
    cursor: pointer;

    transform: translateY(-50%);
}

.our-story-lightbox-prev {
    left: 110px;
}

.our-story-lightbox-next {
    right: 110px;
}

/*End Our Story Lightbox*/

/*Start Section Wedding Gift*/

/*Wrapper wedding gift*/
.wedding-gift-section {
    position: absolute;
    top: 61%;
    left: 0;
    width: 100%;
    z-index: 3;

    text-align: center;
}

/*Title wrapper*/
.wedding-gift-title-wrap {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
}

/*Title text*/
.wedding-gift-title {
    margin: 0;
    padding: 0;

    font-family: 'Times New Roman', serif;
    font-size: clamp(34px, 9.5vw, 46px);
    font-weight: normal;
    line-height: 1;
    letter-spacing: clamp(3px, 1vw, 5px);

    color: #ffffff;
}

/*Text wrapper*/
.wedding-gift-text-wrap {
    margin-top: clamp(26px, 6vw, 32px);
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;

    padding-left: 7%;
    padding-right: 7%;
}

/*Text*/
.wedding-gift-text {
    margin: 0;
    padding: 0;

    font-family: 'Gilda Display', serif;
    font-size: clamp(15px, 4vw, 20px);
    font-weight: normal;
    line-height: 1.35;

    color: #ffffff;
}

/*Button wrapper umum*/
.wedding-gift-button-wrap {
    width: 100%;

    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;

    display: flex;
    justify-content: center;
}

/*Button hadiah wrapper*/
.wedding-gift-button-wrap-hadiah {
    margin-top: clamp(2px, 1.5vw, 7px);
}

/*Button WA wrapper*/
.wedding-gift-button-wrap-wa {
    margin-top: clamp(1px, 1vw, 5px);
}

/*Button umum*/
.wedding-gift-button {
    display: block;

    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

/*Button hadiah*/
.wedding-gift-button-hadiah {
    width: 55%;
}

/*Button WA*/
.wedding-gift-button-wa {
    width: 70%;
}

/*Button image*/
.wedding-gift-button-img {
    width: 100%;
    height: auto;
    display: block;
}

/*Separator wrapper*/
.wedding-gift-separator-wrap {
    width: 114%;

    margin-top: clamp(-24px, -4.2vw, -15px);
    margin-left: -7%;
    margin-right: auto;
    margin-bottom: 0;

    overflow: hidden;
}

/*Separator image*/
.wedding-gift-separator-img {
    width: 100%;
    height: auto;
    display: block;
}


/*Start Animasi Wedding Gift*/

/*Kondisi awal umum hanya ketika JS aktif*/
.js-animation-ready .wedding-gift-item-animate {
    opacity: 0;
}

/*Animasi pudar dari bawah*/
.js-animation-ready .wedding-gift-anim-up {
    transform: translateY(34px);
    transition:
        opacity 2.4s ease var(--wedding-gift-delay, 0s),
        transform 2.4s ease var(--wedding-gift-delay, 0s);
}

.js-animation-ready .wedding-gift-anim-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/*Animasi popup*/
.js-animation-ready .wedding-gift-anim-popup {
    transform: scale(0.82);
    transition:
        opacity 1.9s ease var(--wedding-gift-delay, 0s),
        transform 1.9s cubic-bezier(0.22, 1, 0.36, 1) var(--wedding-gift-delay, 0s);
}

.js-animation-ready .wedding-gift-anim-popup.is-visible {
    opacity: 1;
    transform: scale(1);
}

/*Animasi separator split*/
.js-animation-ready .wedding-gift-anim-split {
    opacity: 1;
}

.js-animation-ready .wedding-gift-anim-split .wedding-gift-separator-img {
    clip-path: inset(0 50% 0 50%);
    transition:
        clip-path 2.6s ease var(--wedding-gift-delay, 0s);
}

.js-animation-ready .wedding-gift-anim-split.is-visible .wedding-gift-separator-img {
    clip-path: inset(0 0 0 0);
}

/*End Animasi Wedding Gift*/

/*End Section Wedding Gift*/
/*Start Wedding Gift Modal*/

.wedding-gift-modal {
    position: fixed;
    inset: 0;
    z-index: 999;

    display: flex;
    justify-content: center;
    align-items: flex-start;

    padding: 70px 18px 28px 18px;

    background: rgba(0, 0, 0, 0.86);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.4s ease,
        visibility 0.4s ease;
}

.wedding-gift-modal.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/*Modal content scroll*/
.wedding-gift-modal-content {
    width: min(100%, 430px);
    max-height: calc(100vh - 100px);

    overflow-y: auto;
    overflow-x: hidden;

    padding: 0 0 28px 0;

    -webkit-overflow-scrolling: touch;
}

/*Hide scrollbar*/
.wedding-gift-modal-content::-webkit-scrollbar {
    width: 0;
}

.wedding-gift-modal-content {
    scrollbar-width: none;
}

/*Close button*/
.wedding-gift-modal-close {
    position: fixed;
    top: 18px;
    right: 22px;
    z-index: 1000;

    width: 42px;
    height: 42px;

    border: 0;
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;

    font-size: 34px;
    line-height: 1;
    cursor: pointer;
}

/*Modal item image*/
.wedding-gift-modal-item {
    width: 100%;

    margin-left: auto;
    margin-right: auto;
    margin-bottom: clamp(14px, 4vw, 20px);
}

.wedding-gift-modal-img {
    width: 100%;
    height: auto;
    display: block;

    border-radius: 18px;
}

/*Modal copy button wrapper*/
.wedding-gift-modal-button-wrap {
    width: 62%;

    margin-left: auto;
    margin-right: auto;
    margin-bottom: clamp(22px, 5vw, 28px);
}

/*Modal copy button*/
.wedding-gift-copy-button {
    width: 100%;

    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.wedding-gift-modal-button-img {
    width: 100%;
    height: auto;
    display: block;
}

/*End Wedding Gift Modal*/

/*Start Copy Toast*/

.copy-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    z-index: 1200;

    padding: 10px 18px;

    background: rgba(0, 0, 0, 0.82);
    color: #ffffff;

    font-family: 'Gilda Display', serif;
    font-size: 14px;
    line-height: 1;

    border-radius: 999px;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateX(-50%) translateY(16px);

    transition:
        opacity 0.4s ease,
        visibility 0.4s ease,
        transform 0.4s ease;
}

.copy-toast.is-visible {
    opacity: 1;
    visibility: visible;

    transform: translateX(-50%) translateY(0);
}

/*End Copy Toast*/

/*Start Section RSVP*/

/*Wrapper RSVP*/
.rsvp-section {
    position: absolute;
    top: 72%;
    left: 0;
    width: 100%;
    z-index: 3;

    text-align: center;
}

/*Title wrapper*/
.rsvp-title-wrap {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
}

/*Title text*/
.rsvp-title {
    margin: 0;
    padding: 0;

    font-family: 'Times New Roman', serif;
    font-size: clamp(32px, 9vw, 44px);
    font-weight: normal;
    line-height: 0.9;
    letter-spacing: clamp(4px, 1.3vw, 7px);

    color: #ffffff;
}

/*Box RSVP*/
.rsvp-box {
    width: 86.76%;
    aspect-ratio: 937 / 1168.3;

    margin-top: clamp(6px, 2.9vw, 14px);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;

    background-image: url("bgbox/bgbox-cream.webp");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 100%;

    border-radius: clamp(30px, 9.25vw, 44px);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.25);

    overflow: hidden;
}

/*Form wrapper*/
.rsvp-form-wrap {
    width: 89%;

    margin-top: clamp(30px, 7vw, 36px);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
}

/*Field wrapper umum*/
.rsvp-field-wrap {
    width: 100%;

    margin-left: auto;
    margin-right: auto;
    margin-bottom: clamp(10px, 2.5vw, 13px);
}

/*Field masing-masing*/
.rsvp-field-wrap-nama {
    margin-top: 0;
}

.rsvp-field-wrap-ucapan {
    margin-top: 0;
}

.rsvp-field-wrap-konfirmasi {
    margin-top: 0;
}

.rsvp-field-wrap-jumlah {
    margin-top: 0;
}

/*Input, textarea, select umum*/
.rsvp-input,
.rsvp-textarea,
.rsvp-select {
    width: 100%;

    padding-left: clamp(10px, 2.7vw, 14px);
    padding-right: clamp(10px, 2.7vw, 14px);

    border: clamp(1.5px, 0.45vw, 2px) solid #000000;
    border-radius: clamp(7px, 2vw, 10px);

    background: rgba(255, 255, 255, 0.02);
    color: #000000;

    font-family: 'Times New Roman', serif;
    font-size: clamp(13px, 3.4vw, 16px);
    font-weight: normal;
    line-height: 1.2;

    outline: none;
}

/*Input*/
.rsvp-input {
    height: clamp(30px, 7.2vw, 36px);
}

/*Textarea*/
.rsvp-textarea {
    height: clamp(78px, 19vw, 92px);
    padding-top: clamp(9px, 2.4vw, 12px);

    resize: none;
}

/*Select*/
.rsvp-select {
    height: clamp(30px, 7.2vw, 36px);

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/*Placeholder*/
.rsvp-input::placeholder,
.rsvp-textarea::placeholder {
    color: #000000;
    opacity: 1;
}

/*Button kirim wrapper*/
.rsvp-button-wrap {
    width: 100%;

    margin-top: clamp(1px, 0.4vw, 2px);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;

    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/*Notif kirim RSVP*/
.rsvp-submit-notif {
    display: inline-flex;
    align-items: center;

    margin-right: clamp(6px, 1.5vw, 8px);

    font-family: 'Times New Roman', serif;
    font-size: clamp(10px, 2.7vw, 13px);
    line-height: 1;

    color: #000000;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.4s ease,
        visibility 0.4s ease;
}

.rsvp-submit-notif.is-visible {
    opacity: 1;
    visibility: visible;
}

.rsvp-submit-notif.is-success {
    color: #1f6b2d;
}

.rsvp-submit-notif.is-error {
    color: #8b1d1d;
}

/*Button kirim*/
.rsvp-button-kirim {
    width: 22%;

    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

/*Button image*/
.rsvp-button-kirim-img {
    width: 100%;
    height: auto;
    display: block;
}

/*List wrapper*/
.rsvp-list-wrap {
    width: 100%;
    height: clamp(150px, 37vw, 180px);

    margin-top: clamp(16px, 4vw, 20px);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;

    overflow-y: auto;
    overflow-x: hidden;

    border-top: clamp(1.5px, 0.45vw, 2px) solid #000000;

    text-align: left;

    -webkit-overflow-scrolling: touch;
}

/*Hide scrollbar*/
.rsvp-list-wrap::-webkit-scrollbar {
    width: 0;
}

.rsvp-list-wrap {
    scrollbar-width: none;
}

/*Comment item*/
.rsvp-comment {
    padding-top: clamp(10px, 2.5vw, 13px);
    padding-left: 8%;
    padding-right: 8%;
    padding-bottom: clamp(10px, 2.5vw, 13px);

    border-bottom: clamp(1.5px, 0.45vw, 2px) solid #000000;
}

/*Comment masing-masing*/
.rsvp-comment-1 {
    margin-top: 0;
}

.rsvp-comment-2 {
    margin-top: 0;
}

.rsvp-comment-3 {
    margin-top: 0;
}

/*Comment header*/
.rsvp-comment-header {
    display: flex;
    align-items: center;

    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: clamp(4px, 1vw, 5px);
}

/*Comment icon*/
.rsvp-comment-icon {
    width: clamp(13px, 3.4vw, 40px);
    height: auto;
    margin-left: clamp(-21px, 1.3vw, -12px);

    margin-right: clamp(-10px, 1.3vw, 0px);
}

/*Comment name*/
.rsvp-comment-name {
    font-family: 'Times New Roman', serif;
    font-size: clamp(13px, 3.5vw, 17px);
    font-weight: normal;
    line-height: 1;

    color: #000000;
}

/*Comment text*/
.rsvp-comment-text {
    margin: 0;
    padding: 0 0 0 clamp(24px, 6.2vw, 30px);

    font-family: 'Times New Roman', serif;
    font-size: clamp(12px, 3.1vw, 15px);
    font-weight: normal;
    line-height: 1.1;

    color: #000000;
}


/*Start Animasi RSVP*/

/*Kondisi awal hanya ketika JS aktif*/
.js-animation-ready .rsvp-item-animate {
    opacity: 0;
    transform: translateY(34px);
    transition:
        opacity 2.4s ease var(--rsvp-delay, 0s),
        transform 2.4s ease var(--rsvp-delay, 0s);
}

/*Elemen muncul saat terlihat*/
.js-animation-ready .rsvp-item-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/*End Animasi RSVP*/

/*End Section RSVP*/

/*Start Section Footer*/

/*Wrapper footer*/
.footer-section {
    position: absolute;
    top: 130%;
    left: 0;
    width: 100%;
    z-index: 3;

    text-align: center;
}

/*Footer content*/
.footer-content {
    width: 100%;

    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
}

/*Thank you wrapper*/
.footer-thankyou-wrap {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
}

/*Thank you text*/
.footer-thankyou {
    margin: 0;
    padding: 0;

    font-family: 'Alex Brush', cursive;
    font-size: clamp(34px, 9.5vw, 46px);
    font-weight: normal;
    line-height: 1;

    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    color: #ffffff;
}

/*Name wrapper*/
.footer-name-wrap {
    margin-top: clamp(10px, 2.8vw, 14px);
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
}

/*Name text*/
.footer-name {
    margin: 0;
    padding: 0;

    font-family: 'Cardo', serif;
    font-size: clamp(28px, 8vw, 38px);
    font-weight: 400;
    line-height: 1.2;
    font-style: italic;
    letter-spacing: clamp(3px, 1vw, 5px);

    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    color: #ffffff;
}


/*Start Animasi Footer*/

/*Kondisi awal hanya ketika JS aktif*/
.js-animation-ready .footer-item-animate {
    opacity: 0;
    transform: translateY(34px);
    transition:
        opacity 2.4s ease var(--footer-delay, 0s),
        transform 2.4s ease var(--footer-delay, 0s);
}

/*Elemen muncul saat terlihat*/
.js-animation-ready .footer-item-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/*End Animasi Footer*/

/*End Section Footer*/