/* ==========================================================================
   Undangan Digital — Halaman Cover (Halaman 1)
   --------------------------------------------------------------------------
   Font yang dipakai:
   - "You're"        : Amoresa          (fallback: Great Vibes)
   - "INVITED"       : Walbaum Medium   (fallback: Playfair Display 500)
   - "OPEN HERE ....": Walbaum Regular  (fallback: Playfair Display 400)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400&display=swap');

/* --------------------------------------------------------------------------
   Gunakan file font asli bila tersedia.
   Letakkan file berikut di dalam folder /fonts (sejajar dengan /css dan /image):
     - fonts/Amoresa.otf
     - fonts/Walbaum-Medium.otf
     - fonts/Walbaum-Regular.otf
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'Amoresa';
    src: local('Amoresa'),
         url('../fonts/Amoresa.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

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

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

/* ---- Design tokens ----------------------------------------------------- */
:root {
    --cream: #fbf6ec;
    --cream-2: #f2e7d3;
    --brown: #54402c;
    --brown-soft: #7a6044;
    --gold: #b28a56;
    --gold-soft: #d8b98a;
    --shadow: rgba(84, 64, 44, 0.22);
}

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

html,
body {
    width: 100%;
    min-height: 100%;
}

body {
    font-family: 'Walbaum Regular', 'Playfair Display', Georgia, serif;
    color: var(--brown);
    background:
        radial-gradient(ellipse 120% 80% at 50% 0%, #fffdf6 0%, rgba(255, 253, 246, 0) 55%),
        linear-gradient(160deg, var(--cream) 0%, var(--cream-2) 100%);
    overflow-x: hidden;
}

img {
    max-width: 100%;
}

/* ---- Reveal saat section pertama kali masuk viewport ------------------ */
body.has-reveal .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

body.has-reveal .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

body.has-reveal .reveal--hero {
    transition-duration: 1s;
}

body.has-reveal .reveal--delay-1 {
    transition-delay: 0.12s;
}

body.has-reveal .reveal--delay-2 {
    transition-delay: 0.24s;
}

@media (prefers-reduced-motion: reduce) {
    body.has-reveal .reveal,
    body.has-reveal .reveal.is-visible {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ---- Cover / halaman awal --------------------------------------------- */
.cover {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    display: flex;
    padding: clamp(24px, 5vw, 64px) clamp(16px, 4vw, 48px);
    text-align: center;
    transition: opacity 0.75s ease, transform 0.75s ease;
}

.cover.is-leaving {
    opacity: 0;
    transform: scale(0.96);
}

.cover__inner {
    margin: auto;
    width: 100%;
    max-width: 760px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(14px, 3vh, 26px);
}

/* "You're" — Amoresa */
.cover__youre {
    font-family: 'Amoresa', 'Great Vibes', cursive;
    font-size: clamp(56px, 12vw, 112px);
    line-height: 0.95;
    color: var(--gold);
    text-shadow: 0 2px 26px rgba(178, 138, 86, 0.28);
}

/* "INVITED" — Walbaum Medium */
.cover__invited {
    font-family: 'Walbaum Medium', 'Playfair Display', Georgia, serif;
    font-weight: 500;
    font-size: clamp(34px, 6vw, 62px);
    line-height: 1.05;
    letter-spacing: clamp(0.14em, 2.4vw, 0.34em);
    color: var(--brown);
}

.cover__rule {
    width: clamp(120px, 24vw, 220px);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-soft), transparent);
}

/* ---- Envelope + bunga -------------------------------------------------- */
.cover__envelope-wrap {
    position: relative;
    width: min(64vw, 430px);
    margin-top: clamp(4px, 1.5vh, 18px);
}

.cover__envelope {
    position: relative;
    width: 100%;
    z-index: 1;
    animation: float 5.5s ease-in-out infinite;
}

.cover__envelope-img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 20px 32px var(--shadow));
}

.cover__stamp {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20%;
    height: auto;
    filter: drop-shadow(0 5px 12px rgba(84, 64, 44, 0.3));
}

.flower {
    position: absolute;
    bottom: -4%;
    height: 60%;
    width: auto;
    z-index: 10;
    transform-origin: bottom center;
    pointer-events: none;
    user-select: none;
}

.flower--left {
    left: -16%;
    animation: swayLeft 6s ease-in-out infinite;
}

.flower--right {
    right: -16%;
    animation: swayRight 7s ease-in-out infinite;
}

/* "OPEN HERE ...." — Walbaum Regular */
.cover__open {
    margin-top: clamp(2px, 1vh, 12px);
    display: inline-block;
    font-family: 'Walbaum Regular', 'Playfair Display', Georgia, serif;
    font-weight: 400;
    font-size: clamp(20px, 4vw, 30px);
    letter-spacing: 0.2em;
    color: var(--brown);
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 10px 16px;
    transition: color 0.35s ease, letter-spacing 0.35s ease;
}

.cover__open:hover {
    color: var(--gold);
    letter-spacing: 0.26em;
}

.cover__open:focus-visible {
    color: var(--gold);
    letter-spacing: 0.26em;
    outline: 2px solid var(--gold-soft);
    outline-offset: 4px;
}

.cover__open-dots {
    display: inline-block;
    animation: dotsPulse 1.8s ease-in-out infinite;
}

/* ---- Animasi ----------------------------------------------------------- */
@keyframes float {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes dotsPulse {
    0%,
    100% {
        opacity: 0.35;
    }
    50% {
        opacity: 1;
    }
}

@keyframes swayLeft {
    0%,
    100% {
        transform: rotate(0deg) translateY(0);
    }
    50% {
        transform: rotate(-5deg) translateY(-5px);
    }
}

@keyframes swayRight {
    0%,
    100% {
        transform: rotate(0deg) translateY(0);
    }
    50% {
        transform: rotate(5deg) translateY(-5px);
    }
}

/* ---- Responsive & aksesibilitas ---------------------------------------- */
@media (max-width: 480px) {
    .cover__envelope-wrap {
        width: 62vw;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ==========================================================================
   Halaman Utama (home.html) — Section "The Wedding Of"
   --------------------------------------------------------------------------
   Susunan lapisan (dari belakang ke depan):
   1. Amplop terbuka
   2. Banner3 (pita panjang dari tengah stempel ke bawah)
   3. Stempel
   4. Banner2 (berisi nama & tanggal)
   5. Kupu-kupu, kunci, dan bunga bagian depan
   ========================================================================== */

.home {
    position: relative;
}

.hero {
    position: relative;
    padding: clamp(48px, 9vw, 104px) clamp(4px, 1.5vw, 20px) clamp(56px, 11vw, 120px);
    text-align: center;
}

.hero__stage {
    position: relative;
    z-index: 0;
    width: min(74vw, 440px);
    margin: 0 auto;
    text-align: center;
}

/* ---- Amplop terbuka + stempel + banner -------------------------------- */
.hero__envelope {
    position: relative;
    width: 100%;
}

.hero__envelope-img {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 22px 34px var(--shadow));
    animation: gentleFloat 6s ease-in-out infinite;
}

.hero__stamp {
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 22%;
    z-index: 5;
    filter: drop-shadow(0 6px 14px rgba(84, 64, 44, 0.32));
    animation: stampBreath 5s ease-in-out 0.5s infinite;
}

.hero__banner3 {
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translateX(-50%);
    width: 72%;
    z-index: 2;
    filter: drop-shadow(0 10px 16px rgba(84, 64, 44, 0.18));
    animation: bannerFloat 7s ease-in-out 0.3s infinite;
}

.hero__banner3-img {
    display: block;
    width: 100%;
    height: auto;
    animation: bannerShimmer 6s ease-in-out 0.8s infinite;
}

.hero__banner3-content {
    position: absolute;
    top: 20%;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(4px, 1vw, 10px);
}

.hero__label {
    margin-bottom: clamp(3px, 0.8vw, 8px);
}

/* ---- Banner2 + isi teks ------------------------------------------------ */
.hero__banner2 {
    position: absolute;
    top: 88%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 92%;
    z-index: 1;
}

.hero__banner2-img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 18px 26px rgba(84, 64, 44, 0.26));
    animation: banner2Float 7.5s ease-in-out 1s infinite reverse;
}

.hero__banner2-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: clamp(2px, 0.6vw, 6px);
    padding: clamp(10px, 4vw, 26px) clamp(8px, 3vw, 20px);
}

.hero__label {
    font-family: 'Walbaum Regular', 'Playfair Display', Georgia, serif;
    font-weight: 400;
    font-size: clamp(11px, 2.5vw, 16px);
    letter-spacing: clamp(0.16em, 1.4vw, 0.38em);
    text-transform: uppercase;
    color: var(--brown);
}

.hero__name {
    font-family: 'Walbaum Medium', 'Playfair Display', Georgia, serif;
    font-size: clamp(28px, 8vw, 52px);
    line-height: 0.95;
    color: var(--brown);
    text-shadow: 0 2px 14px rgba(84, 64, 44, 0.28);
}

.hero__amp {
    font-family: 'Amoresa', 'Great Vibes', cursive;
    font-size: clamp(22px, 6.2vw, 40px);
    line-height: 1.05;
    color: var(--gold-soft);
    margin-top: clamp(0px, 0.4vw, 4px);
}

.hero__partner {
    font-family: 'Walbaum Medium', 'Playfair Display', Georgia, serif;
    font-size: clamp(24px, 6.8vw, 44px);
    line-height: 0.95;
    color: var(--brown);
    text-shadow: 0 2px 14px rgba(84, 64, 44, 0.28);
}

.hero__date {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(1px, 0.5vw, 4px);
    margin-top: clamp(6px, 1.8vw, 16px);
    white-space: normal;
}

.hero__date-day {
    font-family: 'Walbaum Medium', 'Playfair Display', Georgia, serif;
    font-size: clamp(26px, 7vw, 46px);
    line-height: 1;
    margin-top: -25px;
    color: #ffffff;
}

.hero__date-month {
    font-family: 'Amoresa', 'Great Vibes', cursive;
    font-size: clamp(23px, 5.8vw, 38px);
    line-height: 1;
    color: #ffffff;
}

.hero__date-year {
    font-family: 'Walbaum Medium', 'Playfair Display', Georgia, serif;
    font-size: clamp(17px, 4.2vw, 27px);
    line-height: 1;
    letter-spacing: 0.08em;
    color: #ffffff;
}

/* ---- Ornamen bunga (depan & belakang) ---------------------------------- */
.flower-decor {
    position: absolute;
    pointer-events: none;
    user-select: none;
    transform-origin: bottom center;
}

.flower-decor--back-left {
    left: -17%;
    top: 1%;
    width: 34%;
    z-index: 0;
    animation: swayLeft 7.5s ease-in-out infinite;
}

.flower-decor--back-right {
    right: -17%;
    top: 3%;
    width: 34%;
    z-index: 0;
    animation: swayRight 8s ease-in-out infinite;
}

.flower-decor--front-envelope-left {
    left: -13%;
    top: 26%;
    width: 24%;
    z-index: 6;
    animation: swayLeft 6.5s ease-in-out infinite;
}

.flower-decor--front-envelope-right {
    right: -13%;
    top: 29%;
    width: 24%;
    z-index: 6;
    animation: swayRight 7s ease-in-out infinite;
}

.flower-decor--front-banner-left {
    left: -15%;
    top: 82%;
    width: 28%;
    z-index: 6;
    animation: swayLeft 7.8s ease-in-out infinite;
}

.flower-decor--front-banner-right {
    right: -15%;
    top: 86%;
    width: 28%;
    z-index: 6;
    animation: swayRight 6.8s ease-in-out infinite;
}

/* ---- Kupu-kupu ---------------------------------------------------------- */
.butterfly {
    position: absolute;
    --flip: 1;
    z-index: 5;
    pointer-events: none;
    user-select: none;
    animation: flyButterfly var(--fly-duration, 7s) ease-in-out var(--fly-delay, 0s) infinite;
}

.butterfly--flip {
    --flip: -1;
}

.butterfly--1 { left: -8%; top: 12%; width: 13%; --fly-duration: 7.5s; --fly-delay: 0s; }
.butterfly--2 { right: -6%; top: 22%; width: 9%; --flip: -1; --fly-duration: 6.2s; --fly-delay: 0.8s; }
.butterfly--3 { left: -5%; top: 54%; width: 10%; --flip: -1; --fly-duration: 8s; --fly-delay: 1.6s; }
.butterfly--4 { right: -8%; top: 62%; width: 14%; --fly-duration: 7s; --fly-delay: 0.4s; }

/* ---- Kunci -------------------------------------------------------------- */
.hero__key {
    position: absolute;
    right: -5%;
    top: 70%;
    width: 13%;
    z-index: 5;
    pointer-events: none;
    user-select: none;
    transform-origin: top center;
    animation: swingKey 6s ease-in-out infinite;
}

/* ---- Piringan musik ----------------------------------------------------- */
.hero__music {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(14px, 3vw, 22px);
    width: fit-content;
    margin: 75% auto 0;
    position: relative;
    z-index: 4;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.hero__music-disc {
    display: block;
    width: clamp(84px, 17vw, 110px);
    filter: drop-shadow(0 14px 24px var(--shadow));
    animation: spinDisc 8s linear infinite;
    animation-play-state: paused;
}

.hero__music-disc img {
    display: block;
    width: 100%;
    height: auto;
}

.hero__music.is-playing .hero__music-disc {
    animation-play-state: running;
}

.hero__music-hint {
    font-family: 'Walbaum Regular', 'Playfair Display', Georgia, serif;
    font-weight: 400;
    font-size: clamp(13px, 3.2vw, 18px);
    letter-spacing: 0.14em;
    color: var(--brown);
    transition: color 0.3s ease;
}

.hero__music:hover .hero__music-hint,
.hero__music:focus-visible .hero__music-hint {
    color: var(--gold);
}

.hero__music:focus-visible {
    outline: 2px solid var(--gold-soft);
    outline-offset: 10px;
}

/* ---- Menghitung hari --------------------------------------------------- */
.counting-days {
    padding: clamp(36px, 8vw, 76px) clamp(16px, 5vw, 44px) clamp(72px, 12vw, 116px);
    text-align: center;
    background: rgba(255, 253, 246, 0.58);
}

.counting-days__inner {
    width: min(100%, 760px);
    margin: 0 auto;
}

.counting-days__title,
.calendar__month {
    font-family: 'Amoresa', 'Great Vibes', cursive;
    font-weight: normal;
    color: var(--brown);
}

.counting-days__title {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: clamp(44px, 10vw, 78px);
    line-height: 0.78;
    margin-bottom: clamp(28px, 6vw, 48px);
}

.counting-days__title span:last-child {
    font-family: 'Walbaum Regular', 'Playfair Display', Georgia, serif;
    font-size: 0.7em;
    line-height: 0.95;
    margin-top: 0;
}

.countdown {
    position: relative;
    width: min(100%, 600px);
    margin: 0 auto;
}

.countdown__frame {
    display: block;
    width: 100%;
    height: auto;
}

.countdown__values {
    position: absolute;
    inset: 14% 8% 19%;
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    align-items: center;
}

.countdown__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--brown);
}

.countdown__number {
    font-family: 'Walbaum Regular', 'Playfair Display', Georgia, serif;
    font-size: clamp(28px, 6.5vw, 52px);
    line-height: 1;
    letter-spacing: 0.08em;
}

.countdown__label {
    font-family: 'Walbaum Regular', 'Playfair Display', Georgia, serif;
    font-size: clamp(15px, 3.5vw, 28px);
    line-height: 1.05;
}

.countdown__separator {
    align-self: center;
    margin-top: 0;
    color: var(--brown);
    font-family: 'Walbaum Regular', 'Playfair Display', Georgia, serif;
    font-size: clamp(22px, 5vw, 38px);
    line-height: 1;
}

.calendar {
    width: min(100%, 800px);
    margin: clamp(54px, 10vw, 92px) auto 0;
}

.calendar__month {
    font-size: clamp(58px, 13vw, 104px);
    line-height: 0.9;
    margin-bottom: clamp(24px, 5vw, 42px);
}

.calendar__grid {
    position: relative;
}

.calendar__image {
    display: block;
    width: 100%;
    height: auto;
}

/* ---- Undangan ---------------------------------------------------------- */
.invitation {
    padding: clamp(28px, 7vw, 68px) clamp(12px, 4vw, 32px) clamp(72px, 12vw, 116px);
    text-align: center;
}

.invitation__frame {
    position: relative;
    width: min(100%, 600px);
    margin: 0 auto;
    color: #fffaf0;
}

.invitation__background {
    display: block;
    width: 100%;
    height: auto;
}

.invitation__content {
    position: absolute;
    inset: 14% 9% 6%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.invitation__bismillah {
    display: block;
    width: min(50%, 250px);
    height: auto;
    margin-bottom: clamp(14px, 3vw, 26px);
}

.invitation__title,
.invitation__intro,
.invitation__parents,
.invitation__with {
    font-family: 'Walbaum Regular', 'Playfair Display', Georgia, serif;
    font-weight: normal;
}

.invitation__title {
    font-size: clamp(16px, 3.2vw, 25px);
    line-height: 1.1;
    margin-bottom: clamp(18px, 4vw, 30px);
}

.invitation__intro {
    font-size: clamp(14px, 2.7vw, 22px);
    line-height: 1.25;
    margin-bottom: clamp(24px, 5vw, 38px);
}

.invitation__person {
    width: 100%;
}

.invitation__name {
    font-family: 'Amoresa', 'Great Vibes', cursive;
    font-size: clamp(32px, 7.2vw, 58px);
    line-height: 0.95;
    color: #fffaf0;
    margin-bottom: clamp(4px, 0.9vw, 8px);
}

.invitation__parents {
    font-size: clamp(11px, 2.1vw, 17px);
    line-height: 1.2;
}

.invitation__with {
    font-family: 'Walbaum Medium', 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: bold;
    font-size: clamp(14px, 2.8vw, 22px);
    margin: clamp(14px, 3vw, 22px) 0;
}

/* ---- When & where ------------------------------------------------------ */
.when-where {
    padding: 0 0 clamp(76px, 12vw, 120px);
    text-align: center;
    overflow: visible;
    background: rgba(255, 253, 246, 0.58);
}

.when-where__schedule {
    position: relative;
    width: min(100%, 800px);
    aspect-ratio: 799 / 636;
    margin: 0 auto;
}

.when-where__curtain {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 0;
}

.when-where__schedule-content {
    position: relative;
    z-index: 1;
    width: min(70%, 560px);
    margin: 0 auto;
    padding-top: clamp(110px, 19vw, 156px);
    color: var(--brown);
}

.when-where__title {
    font-family: 'Amoresa', 'Great Vibes', cursive;
    font-size: clamp(48px, 10vw, 82px);
    font-weight: normal;
    line-height: 1;
    margin-bottom: clamp(36px, 8vw, 64px);
}

.event-list {
    display: flex;
    flex-direction: column;
    gap: clamp(34px, 7vw, 62px);
}

.event-list__item h3 {
    font-family: 'Amoresa', 'Great Vibes', cursive;
    font-size: clamp(38px, 8vw, 68px);
    font-weight: normal;
    line-height: 0.95;
}

.event-list__item p {
    margin-top: clamp(10px, 2vw, 16px);
    font-family: 'Walbaum Medium', 'Playfair Display', Georgia, serif;
    font-size: clamp(24px, 5vw, 42px);
    font-weight: bold;
    line-height: 1;
}

.location-card {
    position: relative;
    width: min(86vw, 570px);
    margin: clamp(18px, 4vw, 32px) auto 0;
    aspect-ratio: 1;
    isolation: isolate;
    z-index: 1;
}

.location-card__banner {
    position: absolute;
    top: 11%;
    right: 0;
    width: 70%;
    z-index: 2;
}

.location-card__background {
    display: block;
    width: 100%;
    height: auto;
    animation: bannerShimmer 7s ease-in-out 0.6s infinite;
}

.location-card__envelope {
    position: absolute;
    top: 15%;
    left: -3%;
    width: 68%;
    z-index: 1;
    transform: rotate(-22deg);
    filter: drop-shadow(0 16px 18px rgba(84, 64, 44, 0.24));
    animation: envelopeSway 8s ease-in-out infinite;
}

.location-card__stamp {
    position: absolute;
    top: 35%;
    left: -6%;
    width: 16%;
    transform: none;
    z-index: 3;
    filter: drop-shadow(0 5px 10px rgba(84, 64, 44, 0.28));
    animation: locationStampBreath 5.5s ease-in-out 0.8s infinite;
}

.location-card__ribbon {
    position: absolute;
    top: 74%;
    left: 57%;
    width: 55%;
    height: 300%;
    object-fit: contain;
    object-position: top center;
    transform: translateX(-50%) scaleX(-1);
    transform-origin: top center;
    z-index: 1;
    pointer-events: none;
}

.location-card__flower,
.location-card__butterfly {
    position: absolute;
    pointer-events: none;
    user-select: none;
}

.location-card__flower {
    z-index: 4;
    width: 25%;
}

.location-card__flower--left {
    left: -7%;
    bottom: 5%;
    transform: rotate(-12deg);
    animation: swayLeft 7s ease-in-out infinite;
}

.location-card__flower--right {
    right: -8%;
    top: 3%;
    transform: rotate(12deg);
    animation: swayRight 7.5s ease-in-out infinite;
}

.location-card__butterfly {
    z-index: 5;
    width: 12%;
    animation: flyButterfly 7s ease-in-out infinite;
}

.location-card__butterfly--left {
    left: -3%;
    top: 35%;
}

.location-card__butterfly--right {
    right: -4%;
    top: 20%;
    transform: scaleX(-1);
    animation-delay: 0.8s;
}

.location-card__content {
    position: absolute;
    top: 15%;
    right: 3%;
    bottom: 27%;
    width: 65%;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--brown);
}

.location-card__icon {
    width: clamp(34px, 8vw, 58px);
    height: auto;
    margin-bottom: clamp(10px, 2vw, 18px);
}

.location-card__place {
    font-family: 'Walbaum Medium', 'Playfair Display', Georgia, serif;
    font-size: clamp(13px, 2.8vw, 22px);
    font-weight: bold;
    line-height: 1.25;
}

.location-card__link {
    display: inline-block;
    margin-top: clamp(14px, 3vw, 24px);
    padding: 7px 16px;
    border-radius: 999px;
    background: var(--brown);
    color: #fffaf0;
    font-family: 'Walbaum Regular', 'Playfair Display', Georgia, serif;
    font-size: clamp(12px, 2.4vw, 18px);
    text-decoration: underline;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.location-card__link:hover,
.location-card__link:focus-visible {
    background: var(--gold);
    transform: translateY(-2px);
}

/* ---- Gift -------------------------------------------------------------- */
.gift {
    padding: clamp(44px, 9vw, 92px) clamp(14px, 4vw, 32px) clamp(34px, 7vw, 72px);
    text-align: center;
    background: rgba(255, 253, 246, 0.72);
}

.gift__stage {
    width: min(100%, 620px);
    margin: 0 auto;
}

.gift__eyebrow,
.gift__confirm-title {
    font-family: 'Amoresa', 'Great Vibes', cursive;
    font-weight: normal;
    color: var(--brown);
}

.gift__eyebrow {
    text-align: left;
    padding-left: 5%;
    font-size: clamp(52px, 12vw, 92px);
    line-height: 0.7;
    margin-bottom: clamp(12px, 3vw, 24px);
}

.gift__artwork {
    position: relative;
    width: min(100%, 540px);
    aspect-ratio: 447 / 475;
    margin: 0 auto;
}

.gift__envelope {
    position: absolute;
    top: 0;
    left: 2%;
    width: 64%;
    height: auto;
    z-index: 2;
    filter: drop-shadow(0 18px 24px var(--shadow));
    animation: giftEnvelopeFloat 8.5s ease-in-out 0.4s infinite reverse;
}

.gift__banner {
    position: absolute;
    top: 28%;
    right: 1%;
    width: 70%;
    aspect-ratio: 778 / 544;
    z-index: 20;
    filter: drop-shadow(0 12px 18px rgba(84, 64, 44, 0.26));
    animation: giftBannerFloat 7s ease-in-out 0.5s infinite;
}

.gift__banner-img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70%;
    height: auto;
    transform: translate(-50%, -50%) rotate(90deg);
}

.gift__ribbon {
    position: absolute;
    top: -8%;
    left: 51%;
    width: 42%;
    height: 125%;
    object-fit: contain;
    object-position: top center;
    z-index: 0;
    pointer-events: none;
}

.gift__bank {
    position: absolute;
    inset: 11% 8%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #203d3a;
}

.gift__bank-logo {
    width: clamp(92px, 22vw, 142px);
    height: auto;
    margin-bottom: clamp(10px, 2vw, 17px);
}

.gift__account,
.gift__account-name {
    font-family: 'Walbaum Medium', 'Playfair Display', Georgia, serif;
    font-weight: bold;
    line-height: 1.15;
}

.gift__account {
    font-size: clamp(17px, 3.8vw, 27px);
    letter-spacing: 0.02em;
}

.gift__account-name {
    margin-top: clamp(7px, 1.5vw, 12px);
    font-size: clamp(14px, 3.1vw, 22px);
}

.gift__details {
    position: relative;
    z-index: 2;
    margin-top: clamp(-4px, -1vw, -2px);
    color: #203d3a;
}

.gift__title {
    font-family: 'Walbaum Medium', 'Playfair Display', Georgia, serif;
    font-size: clamp(18px, 4.2vw, 30px);
    font-weight: normal;
    line-height: 1.15;
}

.gift__address {
    margin-top: clamp(8px, 2vw, 14px);
    font-family: 'Walbaum Regular', 'Playfair Display', Georgia, serif;
    font-size: clamp(15px, 3.2vw, 23px);
    line-height: 1.28;
}

.gift__confirm-title {
    margin-top: clamp(32px, 6vw, 48px);
    font-size: clamp(38px, 9vw, 68px);
    line-height: 0.9;
}

.gift__whatsapp {
    display: inline-flex;
    align-items: center;
    gap: clamp(8px, 2vw, 14px);
    margin-top: clamp(14px, 3vw, 22px);
    color: #203d3a;
    font-family: 'Walbaum Medium', 'Playfair Display', Georgia, serif;
    font-size: clamp(15px, 3.4vw, 23px);
    font-weight: bold;
    text-decoration: underline;
}

.gift__whatsapp img {
    width: clamp(38px, 9vw, 58px);
    height: auto;
}

.gift__ornament {
    display: block;
    width: min(92%, 520px);
    height: auto;
    margin: clamp(34px, 7vw, 58px) auto 0;
}

/* ---- Animasi tambahan --------------------------------------------------- */
@keyframes flyButterfly {
    0%,
    100% {
        transform: translate(0, 0) rotate(-5deg) scaleX(var(--flip)) scaleY(1);
    }
    25% {
        transform: translate(7px, -13px) rotate(4deg) scaleX(var(--flip)) scaleY(1);
    }
    50% {
        transform: translate(-5px, -22px) rotate(-6deg) scaleX(var(--flip)) scaleY(1);
    }
    75% {
        transform: translate(5px, -9px) rotate(3deg) scaleX(var(--flip)) scaleY(1);
    }
}

@keyframes swingKey {
    0%,
    100% {
        transform: rotate(-7deg);
    }
    50% {
        transform: rotate(7deg);
    }
}

@keyframes spinDisc {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes gentleFloat {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}

@keyframes stampBreath {
    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.035);
    }
}

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

@keyframes bannerFloat {
    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(-5px);
    }
}

@keyframes banner2Float {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

@keyframes bannerShimmer {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
}

@keyframes envelopeSway {
    0%,
    100% {
        transform: rotate(-22deg) translateY(0);
    }
    50% {
        transform: rotate(-20deg) translateY(-5px);
    }
}

@keyframes giftEnvelopeFloat {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

@keyframes giftBannerFloat {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}