/**
 * DESIGN.CSS — Premium Botanical Editorial
 * Visual refresh only: preserves existing content, interactions and game logic.
 */
:root {
  --color-cream: #fbf8f1;
  --color-cream-soft: #f2eee4;
  --color-cream-dark: #ded7c6;
  --color-white: #fffdf8;
  --color-sage: #8a2f42;
  --color-sage-dark: #4a1622;
  --color-sage-soft: #f3e6d5;
  --color-gold: #b08a4a;
  --color-gold-light: #ddc38b;
  --color-brown: #5a4638;
  --color-brown-light: #a98a73;
  --color-ink: #332a24;
  --color-ink-soft: #6e5f52;
  --color-rose: #c98f91;
  --color-maroon: #6d2233;
  --color-maroon-dark: #4a1622;
  --color-card: #f4ede0;
  --gradient-gold: linear-gradient(135deg, #ead7a7, #b08a4a);
  --gradient-sage: linear-gradient(135deg, #b08a4a, #6d2233);
  --gradient-meadow: linear-gradient(180deg, #fbf8f1 0%, #f2e2c8 52%, #ddc38b 100%);
  --glass-bg: rgba(255, 253, 248, .72);
  --glass-border: rgba(255,255,255,.82);
  --shadow-soft: 0 12px 34px rgba(53, 60, 48, .09);
  --shadow-elevated: 0 22px 55px rgba(42, 50, 41, .16);
}

body {
  background: #efe6d8;
}
body::before {
  content: "";
  position: fixed;
  inset: -30px;
  z-index: -1;
  background:
    linear-gradient(rgba(40,30,22,.12), rgba(40,30,22,.28)),
    url("../images/backgrounds/bg-page.jpg") center top / cover no-repeat;
  filter: blur(18px) saturate(0.92);
  transform: scale(1.06);
}

#app-frame {
  background: var(--color-cream);
  box-shadow: 0 30px 90px rgba(40,30,24,.24);
}

.section {
  padding: clamp(4.5rem, 12vw, 7rem) 1.15rem;
  overflow: hidden;
}

.section-inner { max-width: 920px; }

.section:not(.hero-section):not(.closing-section) {
  isolation: isolate;
}

.eyebrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  letter-spacing: .24em;
  font-size: .68rem;
  color: var(--color-gold);
  margin-bottom: .65rem;
}

.eyebrow::before,
.eyebrow::after {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: .65;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.05rem, 8vw, 3rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--color-brown);
  margin-bottom: .7rem;
}

.section-desc {
  max-width: 510px;
  color: var(--color-ink-soft);
  font-size: .92rem;
  line-height: 1.8;
}

.title-divider {
  width: 108px;
  margin: -.2rem auto .85rem;
  opacity: .78;
}

/* Hero — editorial invitation card, blurred backdrop */
.hero-section {
  min-height: 100svh;
  padding: 0 1rem;
  justify-content: center;
  background-color: var(--color-cream-soft);
}

.hero-bg {
  background-color: var(--color-cream-soft);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  transform: none;
}

/* Transisi mulus antar-section: setiap layer foto latar memudar ke warna
   dasar (--color-cream-soft, sama dengan warna section polos di bawahnya)
   di tepi atas/bawahnya, jadi pergantian dari satu section ke section
   berikutnya terasa menyatu, bukan potongan gambar yang tiba-tiba. */
/* Transisi mulus antar-section: layer foto latar memudar tipis di
   tepi atas/bawahnya ke warna dasar (--color-cream-soft) — pakai jarak
   PIKSEL TETAP (bukan persen) supaya di section yang sangat tinggi,
   fade ini tidak ikut memakan bagian foto (kain & daun) yang baru
   mulai ditampilkan dari atas. */
.hero-bg--fade-bottom {
  mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 70px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 70px), transparent 100%);
}
.hero-bg--fade-both {
  mask-image: linear-gradient(to bottom, transparent 0, #000 40px, #000 calc(100% - 70px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 40px, #000 calc(100% - 70px), transparent 100%);
}

.hero-overlay {
  background:
    radial-gradient(circle at 15% 8%, rgba(109,34,51,.04), transparent 40%),
    radial-gradient(circle at 88% 85%, rgba(109,34,51,.05), transparent 45%),
    linear-gradient(180deg, rgba(248,240,227,.15) 0%, rgba(238,224,203,.18) 100%);
}

.hero-content {
  width: min(100%, 390px);
  padding: 3.1rem 1rem 4rem;
}

/* The paper card itself — bingkai bunga di 2 sudut + garis tepi tipis,
   diambil dari desain kartu yang di-upload (assets/images/frame-corner-*.png).
   Sengaja dipisah jadi 2 gambar sudut (bukan 1 background utuh) supaya
   ilustrasi bunganya TIDAK GEPENG/melar saat tinggi kartu berubah-ubah
   mengikuti panjang nama tamu, format tanggal, dst — cuma garis tepi
   polos (dibuat CSS border, bukan gambar) yang ikut menyesuaikan tinggi. */
.hero-card {
  position: relative;
  width: 100%;
  background-color: var(--color-card);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 30%),
    url("../images/hero-card-texture.jpg");
  background-size: auto, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-blend-mode: normal, multiply;
  border: 1px solid var(--color-maroon);
  border-radius: 26px;
  padding: 3.4rem 1.4rem 2rem;
  box-shadow: 0 30px 60px rgba(45,20,20,.22), 0 2px 0 rgba(255,255,255,.5) inset;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-card::before,
.hero-card::after {
  content: "";
  position: absolute;
  /* z-index NEGATIF, disengaja: tanpa ini, ::before/::after otomatis
     dilukis PALING ATAS dari semua anak asli (dianggap "anak pertama/
     terakhir" dalam urutan render) — makanya sudut kiri-bawah sempat
     menutupi tombol "Buka Undangan". Dengan z-index:-1, dekorasi ini
     tetap di atas warna dasar kartu tapi di BAWAH semua teks & tombol. */
  z-index: -1;
  width: 30%;
  max-width: 128px;
  background-repeat: no-repeat;
  pointer-events: none;
  opacity: 0;
}
.hero-card::before {
  top: -1px;
  right: -1px;
  aspect-ratio: 394 / 412;
  background-image: url("../images/frame-corner-tr.png");
  background-size: contain;
  background-position: top right;
}
.hero-card::after {
  bottom: -1px;
  left: -1px;
  aspect-ratio: 430 / 590;
  background-image: url("../images/frame-corner-bl.png");
  background-size: contain;
  background-position: bottom left;
}

.hero-stamp {
  position: absolute;
  top: -46px;
  left: 50%;
  transform: translateX(-50%);
  width: 92px;
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(45,20,20,.35));
}

.hero-content .eyebrow {
  color: var(--color-maroon);
  margin-bottom: .5rem;
  opacity: .9;
}
.hero-content .eyebrow::before,
.hero-content .eyebrow::after {
  background: var(--color-maroon);
}

.hero-names {
  font-size: clamp(2.6rem, 12vw, 3.9rem);
  line-height: .95;
  color: var(--color-maroon);
  text-shadow: none;
}

.hero-names span:not(.hero-amp) { display: block; }
.hero-amp { margin: .06em 0; font-size: .55em; color: var(--color-maroon); opacity: .85; }

.hero-date {
  margin-top: .9rem;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-maroon);
  opacity: .95;
}

.invited-guest {
  margin-top: 1.4rem;
  min-width: min(100%, 285px);
  padding: .95rem 1.35rem 1rem;
  border-radius: 14px;
  background: #eceae4;
  border: 1px solid rgba(109,34,51,.4);
  box-shadow: none;
  backdrop-filter: none;
}

.invited-guest-sprig { display: none; }

.invited-guest-label {
  font-size: .62rem;
  letter-spacing: .22em;
  color: var(--color-maroon);
  opacity: .85;
}
.invited-guest-name {
  font-size: 1.3rem;
  color: var(--color-maroon);
}

.hero-countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  gap: .45rem;
  margin-top: 1.1rem;
}

.countdown-item {
  min-width: 0;
  padding: .65rem .35rem .55rem;
  border: 1px solid rgba(109,34,51,.35);
  background: rgba(109,34,51,.05);
  border-radius: 14px;
  backdrop-filter: none;
}

.countdown-value {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--color-maroon);
}
.countdown-label {
  font-size: .55rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-maroon);
  opacity: .78;
}

.hero-countdown {
  margin-bottom: var(--space-xs);
}

.hero-content .btn-primary {
  margin-top: 0.6rem;
  min-height: 50px;
  padding-inline: 1.55rem;
  background: var(--color-maroon);
  color: var(--color-card);
  box-shadow: 0 14px 30px rgba(74,22,34,.28);
  -webkit-tap-highlight-color: transparent;
}
.hero-content .btn-primary .btn-icon { filter: brightness(0) invert(1); }

.hero-content .btn-primary:hover { transform: translateY(-3px); background: var(--color-maroon-dark); }

.hero-card .scroll-hint {
  position: static;
  transform: none;
  margin-top: .85rem;
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-maroon);
}
.scroll-hint-icon { filter: none; }

/* Kata Pembuka / Ayat — kartu bersegel, sama gaya dengan hero-card */
.opening-section,
.profile-section {
  padding-top: 3.4rem;
  padding-bottom: 1.85rem;
}
.opening-section .section-inner { padding-top: 0; }

#opening-label { display: none; }

.ayat-card {
  position: relative;
  max-width: 420px;
  margin: 0 auto;
  background-color: var(--color-card);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 30%),
    url("../images/hero-card-texture.jpg");
  background-size: auto, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-blend-mode: normal, multiply;
  border: 1.5px solid var(--color-gold);
  border-radius: 26px;
  padding: 3.6rem 1.7rem 2.3rem;
  box-shadow: 0 24px 50px rgba(45,20,20,.16);
}
.ayat-card::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid var(--color-gold);
  border-radius: 18px;
  opacity: .7;
  pointer-events: none;
}

.ayat-stamp {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 86px;
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(45,20,20,.32));
  z-index: 2;
}

.ayat-flower {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}
.ayat-flower--tr { top: 8px; right: 8px; width: 23%; height: auto; }
.ayat-flower--bl { bottom: 8px; left: 8px; width: 24%; height: auto; }

.opening-title {
  position: relative;
  z-index: 2;
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-maroon);
  font-size: .92rem;
  margin: .3rem 0 0;
}

.ayat-divider {
  position: relative;
  z-index: 2;
  width: 150px;
  height: 14px;
  margin: .6rem auto;
}
.ayat-divider::before {
  content: "";
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 1px;
  background: var(--color-gold);
  transform: translateY(-50%);
}
.ayat-divider::after {
  content: "\25C6";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-card);
  padding: 0 10px;
  color: var(--color-gold);
  font-size: .55rem;
  line-height: 1;
}

.opening-arabic {
  position: relative;
  z-index: 2;
  color: var(--color-maroon);
  margin: 0 auto;
}

.opening-translation {
  position: relative;
  z-index: 2;
  font-style: normal;
  color: var(--color-maroon-dark);
  font-size: .92rem;
}

.opening-source {
  position: relative;
  z-index: 2;
  color: var(--color-maroon);
  letter-spacing: .05em;
}
.opening-source::before { content: "("; }
.opening-source::after { content: ")"; }

/* Profil Mempelai — kartu bersegel + ranting zaitun, senada hero/ayat */
.profile-section .section-inner { padding-top: 0; }

.profile-frame {
  position: relative;
  max-width: 460px;
  margin: 0 auto;
  background-color: var(--color-card);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 30%),
    url("../images/hero-card-texture.jpg");
  background-size: auto, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-blend-mode: normal, multiply;
  border: 1.5px solid var(--color-gold);
  border-radius: 26px;
  padding: 3.6rem 1.4rem 2.2rem;
  box-shadow: 0 24px 50px rgba(45,20,20,.16);
}
.profile-frame::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid var(--color-gold);
  border-radius: 18px;
  opacity: .7;
  pointer-events: none;
}

.profile-frame-stamp {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 86px;
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(45,20,20,.32));
  z-index: 2;
}

.profile-section .eyebrow,
.profile-frame > .ayat-divider,
.profile-role-title,
.profile-portrait,
.profile-medallion-divider,
.profile-fleuron {
  position: relative;
  z-index: 2;
}

.profile-section .eyebrow { color: var(--color-maroon); }
.profile-section .eyebrow::before,
.profile-section .eyebrow::after { background: var(--color-maroon); }

/* Ornamen kecil di bawah eyebrow, sebelum judul "Mempelai Pria/Wanita" */
.profile-fleuron {
  text-align: center;
  color: var(--color-gold);
  font-size: 1.15rem;
  line-height: 1;
  margin: .1rem 0 .3rem;
  opacity: .85;
}
.profile-fleuron::before { content: "\2767"; }

/* Judul "Mempelai Pria" / "Mempelai Wanita" */
.profile-role-title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 6.5vw, 2.15rem);
  line-height: 1.1;
  color: var(--color-maroon);
  margin: .6rem 0 0;
}
.profile-frame > .profile-role-title:first-of-type { margin-top: 0; }

/* Foto profil bulat + ornamen berlian kiri-kanan */
.profile-portrait {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  margin: .3rem auto 1rem;
}
.profile-portrait-orn {
  flex: 0 0 auto;
  width: 20px;
  text-align: center;
  font-size: .5rem;
  line-height: 1.7;
  color: var(--color-gold);
  opacity: .7;
  white-space: pre;
}
.profile-portrait-orn::before { content: "\25C6\A\25C6\A\25C6"; }

.profile-avatar {
  width: 148px;
  height: 148px;
  margin: 0;
  border: none;
  box-shadow: 0 0 0 7px var(--color-card), 0 0 0 8.5px var(--color-maroon);
}
.placeholder-icon-small { width: 34px; height: 34px; opacity: .5; }

.profile-frame h3 { color: var(--color-maroon); }
.profile-order { color: var(--color-maroon); opacity: .85; }

/* Divider bermedalion di antara dua profil */
.profile-medallion-divider {
  width: 210px;
  height: 18px;
  margin: 1rem auto .9rem;
}
.profile-medallion-divider::before {
  content: "";
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 1px;
  background: var(--color-gold);
  transform: translateY(-50%);
}
.profile-medallion-divider::after {
  content: "\2740";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-card);
  padding: 0 12px;
  color: var(--color-gold);
  font-size: 1rem;
  line-height: 1;
}

/* Section backgrounds */
.detail-section,
.gallery-section,
.gift-section { background: linear-gradient(180deg, #fbf8f1, #f6f2e8); }
.love-story-section,
.rsvp-section,
.livewall-section { background: linear-gradient(180deg, #f8f2e6, #f0e4cd); }
/* Detail Acara sekarang punya layer foto (hero-bg) yang fade di tepi
   atas/bawahnya — base color-nya disamakan dengan cream-soft supaya
   nyambung mulus ke section Profil sebelumnya & Peta sesudahnya. */
.detail-section { background: var(--color-cream-soft); }

/* Kartu Detail Acara — bersegel & berserat, senada hero/ayat/profile */
.detail-section .section-inner { padding-top: 0; }
.detail-frame {
  position: relative;
  max-width: 460px;
  margin: 0 auto;
  background-color: var(--color-card);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 30%),
    url("../images/hero-card-texture.jpg");
  background-size: auto, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-blend-mode: normal, multiply;
  border: 1.5px solid var(--color-gold);
  border-radius: 26px;
  padding: 3.6rem 1.5rem 2.2rem;
  box-shadow: 0 24px 50px rgba(45,20,20,.16);
  text-align: center;
}
.detail-frame::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid var(--color-gold);
  border-radius: 18px;
  opacity: .7;
  pointer-events: none;
}
.detail-section .eyebrow,
.detail-frame .profile-role-title,
.detail-frame .ayat-divider,
.detail-frame .section-desc,
.detail-rows,
.detail-frame .countdown-mini {
  position: relative;
  z-index: 2;
}
.detail-frame .countdown-mini { color: var(--color-maroon); }
.detail-section .eyebrow { color: var(--color-maroon); justify-content: center; }
.detail-section .eyebrow::before,
.detail-section .eyebrow::after { background: var(--color-maroon); }
.detail-frame .profile-role-title { margin-top: 0; }
.detail-frame .section-desc { max-width: 340px; margin: 0 auto; font-size: .85rem; }

.detail-rows { margin-top: 1.6rem; }
.detail-row { padding: .3rem 0; }
.detail-row h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--color-maroon);
  margin: .5rem 0 .2rem;
}
.detail-row p { font-size: .88rem; color: var(--color-ink-soft); }
.detail-row .btn { margin-top: .8rem; }
.detail-row-divider {
  width: 90px;
  height: 1px;
  margin: 1.3rem auto;
  background: var(--color-gold);
  opacity: .5;
}

/* Cards */
.detail-grid { gap: .8rem; margin-top: 1.8rem; }
.detail-card,
.gift-card,
.livewall-card,
.rsvp-form {
  position: relative;
  border: 1px solid rgba(176,138,74,.16);
  background: rgba(255,253,248,.72);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(12px);
}

.detail-card {
  padding: 1.45rem 1.15rem;
  border-radius: 22px;
}

.detail-card::before,
.gift-card::before,
.livewall-card::before,
.rsvp-form::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(176,138,74,.08);
  border-radius: inherit;
  pointer-events: none;
}

.detail-icon { width: 38px; height: 38px; margin-bottom: .65rem; }
.detail-card .btn { margin-top: .8rem; }

/* Kartu Peta Lokasi — sama persis treatment-nya dengan Detail Acara */
.map-section { background: var(--color-cream-soft); }
.map-section .section-inner { padding-top: 0; }
.map-frame {
  position: relative;
  max-width: 460px;
  margin: 0 auto;
  background-color: var(--color-card);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 30%),
    url("../images/hero-card-texture.jpg");
  background-size: auto, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-blend-mode: normal, multiply;
  border: 1.5px solid var(--color-gold);
  border-radius: 26px;
  padding: 3.6rem 1.5rem 2.2rem;
  box-shadow: 0 24px 50px rgba(45,20,20,.16);
  text-align: center;
}
.map-frame::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid var(--color-gold);
  border-radius: 18px;
  opacity: .7;
  pointer-events: none;
}
.map-section .eyebrow,
.map-frame .profile-role-title,
.map-frame .ayat-divider,
.map-frame .section-desc,
.map-embed-wrap,
.map-frame .btn {
  position: relative;
  z-index: 2;
}
.map-section .eyebrow { color: var(--color-maroon); }
.map-section .eyebrow::before,
.map-section .eyebrow::after { background: var(--color-maroon); }
.map-frame .profile-role-title { margin-top: 0; }
.map-frame .section-desc { max-width: 340px; margin: 0 auto; font-size: .85rem; }
.map-embed-wrap {
  max-width: 100%;
  background: rgba(255,255,255,.5);
  border: 1px solid rgba(176,138,74,.3);
}
.map-frame .btn { margin-top: .3rem; }

/* Kartu Galeri — treatment sama, isi jadi kolase foto polaroid */
.gallery-section { background: var(--color-cream-soft); }
.gallery-section .section-inner { padding-top: 0; }
.gallery-frame {
  position: relative;
  max-width: 460px;
  margin: 0 auto;
  background-color: var(--color-card);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 30%),
    url("../images/hero-card-texture.jpg");
  background-size: auto, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-blend-mode: normal, multiply;
  border: 1.5px solid var(--color-gold);
  border-radius: 26px;
  padding: 3.6rem 1.3rem 2rem;
  box-shadow: 0 24px 50px rgba(45,20,20,.16);
  text-align: center;
}
.gallery-frame::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid var(--color-gold);
  border-radius: 18px;
  opacity: .7;
  pointer-events: none;
}
.gallery-section .eyebrow,
.gallery-frame .profile-role-title,
.gallery-frame .ayat-divider,
.gallery-grid,
.gallery-add-placeholder {
  position: relative;
  z-index: 2;
}
.gallery-section .eyebrow { color: var(--color-maroon); }
.gallery-section .eyebrow::before,
.gallery-section .eyebrow::after { background: var(--color-maroon); }
.gallery-frame .profile-role-title { margin-top: 0; }

/* Kolase polaroid — grid 2 kolom, jarak antar foto presisi & konsisten */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 1.6rem;
}
.gallery-item {
  background: #fffdf8;
  padding: 7px 7px 0;
  border-radius: 6px;
  box-shadow: 0 10px 22px rgba(58,48,40,.18);
  cursor: pointer;
  aspect-ratio: auto;
}
.gallery-photo {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 3px;
}
.gallery-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-medium);
}
.gallery-item:hover .gallery-photo img { transform: scale(1.08); }
.gallery-item::after { display: none; }
.gallery-caption {
  display: block;
  position: static;
  opacity: 1;
  transform: none;
  padding: .5rem .2rem .65rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: .68rem;
  line-height: 1.3;
  text-align: center;
  color: var(--color-maroon);
}
.gallery-add-placeholder { color: var(--color-maroon); opacity: .6; }

/* Timeline */
.timeline { margin-top: 2rem; }
.timeline::before {
  left: 0;
  width: 34px;
  background-image: url("../effects/lovestory-vine-new.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  opacity: .9;
}
.timeline-item { padding-left: 58px; margin-bottom: 2rem; }
.timeline-dot {
  left: -1px;
  top: -6px;
  width: 42px;
  height: 42px;
  background: none;
  border: none;
  box-shadow: none;
  object-fit: contain;
  transform: none;
}
.timeline-year { color: var(--color-gold); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; }
.timeline-item h3 { font-size: 1.55rem; margin: .25rem 0 .35rem; }
.timeline-item p { font-size: .88rem; line-height: 1.75; }

/* Kartu Love Story — treatment sama seperti section2 lain */
.love-story-section { background: var(--color-cream-soft); }
.love-story-section .section-inner { padding-top: 0; }
.lovestory-frame {
  position: relative;
  max-width: 460px;
  margin: 0 auto;
  background-color: var(--color-card);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 30%),
    url("../images/hero-card-texture.jpg");
  background-size: auto, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-blend-mode: normal, multiply;
  border: 1.5px solid var(--color-gold);
  border-radius: 26px;
  padding: 3.6rem 1.6rem 2.2rem;
  box-shadow: 0 24px 50px rgba(45,20,20,.16);
  text-align: center;
}
.lovestory-frame::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid var(--color-gold);
  border-radius: 18px;
  opacity: .7;
  pointer-events: none;
}
.love-story-section .eyebrow,
.lovestory-frame .profile-role-title,
.lovestory-frame .ayat-divider,
.lovestory-frame .timeline {
  position: relative;
  z-index: 2;
}
.love-story-section .eyebrow { color: var(--color-maroon); }
.love-story-section .eyebrow::before,
.love-story-section .eyebrow::after { background: var(--color-maroon); }
.lovestory-frame .profile-role-title { margin-top: 0; }
.lovestory-frame .timeline { text-align: left; }
.lovestory-frame .timeline-item h3 { color: var(--color-maroon); }

/* Gallery — kolase polaroid presisi (lihat blok .gallery-frame di atas
   untuk styling utamanya; blok lama "magazine mosaic" di sini sengaja
   dihapus supaya spasi antar foto konsisten & tidak ada ukuran yang beda-beda). */

/* RSVP / inputs */
.rsvp-section { background: var(--color-cream-soft); }
.rsvp-section .section-inner,
.guestbook-section .section-inner,
.gift-section .section-inner { padding-top: 0; }

.rsvp-frame,
.guestbook-frame,
.gift-frame {
  position: relative;
  max-width: 460px;
  margin: 0 auto;
  background-color: var(--color-card);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 30%),
    url("../images/hero-card-texture.jpg");
  background-size: auto, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-blend-mode: normal, multiply;
  border: 1.5px solid var(--color-gold);
  border-radius: 26px;
  padding: 3.6rem 1.5rem 2.2rem;
  box-shadow: 0 24px 50px rgba(45,20,20,.16);
  text-align: center;
}
.rsvp-frame::before,
.guestbook-frame::before,
.gift-frame::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid var(--color-gold);
  border-radius: 18px;
  opacity: .7;
  pointer-events: none;
}
.rsvp-section .eyebrow,
.guestbook-section .eyebrow,
.gift-section .eyebrow,
.rsvp-frame .profile-role-title,
.guestbook-frame .profile-role-title,
.gift-frame .profile-role-title,
.rsvp-frame .ayat-divider,
.guestbook-frame .ayat-divider,
.gift-frame .ayat-divider,
.rsvp-frame .section-desc,
.guestbook-frame .section-desc,
.gift-frame .section-desc,
.rsvp-form,
.rsvp-list,
.gift-grid {
  position: relative;
  z-index: 2;
}
.rsvp-section .eyebrow,
.guestbook-section .eyebrow,
.gift-section .eyebrow { color: var(--color-maroon); }
.rsvp-section .eyebrow::before, .rsvp-section .eyebrow::after,
.guestbook-section .eyebrow::before, .guestbook-section .eyebrow::after,
.gift-section .eyebrow::before, .gift-section .eyebrow::after { background: var(--color-maroon); }
.rsvp-frame .profile-role-title,
.guestbook-frame .profile-role-title,
.gift-frame .profile-role-title { margin-top: 0; }
.rsvp-frame .section-desc,
.guestbook-frame .section-desc,
.gift-frame .section-desc { max-width: 340px; margin: 0 auto; font-size: .85rem; }

.rsvp-form {
  margin-top: 1.8rem;
  padding: 1.35rem;
  border-radius: 24px;
  text-align: left;
}
.form-group label { color: var(--color-brown); font-size: .78rem; letter-spacing: .03em; }
.form-group input,
.form-group select,
.form-group textarea {
  border: 1px solid rgba(96,82,68,.16) !important;
  background: rgba(255,255,255,.68) !important;
  border-radius: 13px !important;
  min-height: 46px;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.form-group textarea { min-height: 100px; padding-top: .75rem; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: rgba(176,138,74,.62) !important;
  box-shadow: 0 0 0 4px rgba(176,138,74,.1) !important;
  background: #fffdf8 !important;
  outline: none;
}

/* Buku Tamu */
.rsvp-list { margin-top: 1.6rem; max-width: 100%; }
.rsvp-list-item { background: rgba(255,253,248,.8); border-left-color: var(--color-maroon); text-align: left; }
.rsvp-list-item strong { color: var(--color-maroon); }

/* Gift */
.gift-grid { gap: .85rem; margin-top: 1.8rem; grid-template-columns: 1fr; text-align: center; }
.gift-card { border-radius: 22px; padding: 1.35rem; }
.gift-account-item {
  border: 1px solid rgba(96,82,68,.09);
  background: rgba(255,255,255,.76);
  border-radius: 17px;
  padding: .9rem 1rem;
  text-align: left;
}
.copy-btn { background: var(--color-sage-soft); }

/* Live wall */
.livewall-card { border-radius: 24px; padding: 3rem 1.25rem; }
.livewall-title { font-family: var(--font-display); font-size: 1.55rem; }

/* Closing */
.closing-section {
  background: var(--color-cream-soft);
  position: relative;
  overflow: hidden;
}
.closing-path { z-index: 2; }
.closing-section .section-title { max-width: 340px; margin-inline: auto; }
.closing-message { background: rgba(251,248,241,.96); backdrop-filter: blur(18px); }
.closing-message-text { color: var(--color-brown); }

/* Floating controls */
.music-toggle-btn {
  width: 50px;
  height: 50px;
  background: rgba(251,248,241,.92);
  border: 1px solid rgba(255,255,255,.5);
  box-shadow: 0 14px 35px rgba(42,34,28,.18);
}
.music-panel {
  border-radius: 16px !important;
  border-color: rgba(255,255,255,.7) !important;
  box-shadow: 0 14px 35px rgba(42,34,28,.12) !important;
}

/* Joystick */
.virtual-joystick { filter: drop-shadow(0 12px 22px rgba(40,32,26,.16)); }
.joystick-base {
  background: rgba(251,248,241,.68) !important;
  border: 1px solid rgba(255,255,255,.85) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 12px 28px rgba(40,32,26,.14) !important;
  backdrop-filter: blur(12px);
}
.joystick-stick {
  background: var(--gradient-sage) !important;
  box-shadow: 0 8px 18px rgba(109,34,51,.28) !important;
  border: 2px solid rgba(255,255,255,.55) !important;
}

/* Decorative branches become quieter and more premium */
.corner-branch { opacity: .42; filter: saturate(.75); }
.corner-branch--light { opacity: .62; }

@media (max-width: 360px) {
  .hero-names { font-size: 2.65rem; }
  .section { padding-inline: .95rem; }
  .hero-content { padding-inline: .45rem; }
}


/* ---------------------------------------------------------
   SUBTLE PRODUCTION MOTION
   Reveal content as it enters the viewport. Motion is intentionally
   restrained so the invitation remains elegant rather than busy.
--------------------------------------------------------- */
.motion-ready .reveal-item {
  opacity: 0;
  transform: translateY(-30px);
  transition: opacity 0.8s cubic-bezier(.22,1,.36,1),
              transform 0.75s cubic-bezier(.22,1,.36,1);
  transition-delay: var(--reveal-delay, 0ms);
}
.motion-ready .reveal-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.motion-ready .reveal-card {
  opacity: 0;
  transform: translateY(-26px) scale(.985);
  transition: opacity 0.8s cubic-bezier(.22,1,.36,1),
              transform 0.7s cubic-bezier(.22,1,.36,1),
              box-shadow 0.7s ease;
  transition-delay: var(--reveal-delay, 0ms);
}
.motion-ready .reveal-card.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Gentle light sweep on important cards; it runs once when revealed. */
.reveal-card { position: relative; overflow: hidden; }
.reveal-card::after {
  content: "";
  position: absolute;
  top: -30%;
  left: -55%;
  width: 38%;
  height: 160%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent);
  transform: rotate(12deg);
  pointer-events: none;
  opacity: 0;
}
.reveal-card.is-visible::after {
  opacity: 1;
  animation: cardLightSweep 1.2s .15s ease-out 1;
}
@keyframes cardLightSweep {
  from { left: -55%; }
  to { left: 125%; }
}

/* ---------------------------------------------------------
   HERO ENTRANCE — sengaja HANYA aktif setelah #main-content
   diberi class "is-revealed" (oleh loader.js, persis di saat
   layar loading mulai memudar). Sebelumnya animasi ini jalan
   otomatis begitu halaman dimuat (tersembunyi di balik layar
   loading) dan SELALU sudah selesai duluan sebelum layar
   loading hilang — jadi efek "masuk"-nya tidak pernah benar-
   benar terlihat tamu, kartu hero langsung "muncul jadi" begitu
   saja. Digeser ke sini supaya seluruh elemen kartu (stempel,
   judul, tanggal, kotak tamu, countdown, ranting, tombol)
   benar-benar fade/slide masuk berurutan tepat saat tamu
   melihatnya, selaras dengan fade-out layar loading.

   .scroll-hint SENGAJA TIDAK dimasukkan ke sini — elemen itu
   harus tetap opacity:0 (lihat sections.css) sampai tombol
   "Buka Undangan" ditekan (di-fade-in manual lewat GSAP di
   main.js). Kalau ikut dimasukkan, teks "Gerakkan karakter
   untuk menjelajah" akan muncul lebih dulu, sebelum karakter
   pria "berjalan masuk" — padahal instruksi itu baru relevan
   setelah itu terjadi. */
#main-content.is-revealed .hero-card { animation: heroCardIn .8s 0s both cubic-bezier(.22,1,.36,1); }
/* Keyframe TERPISAH untuk .hero-stamp (bukan heroFadeDown biasa) karena
   elemen ini sudah punya transform:translateX(-50%) permanen untuk
   memusatkannya secara horizontal — kalau dipakaikan heroFadeDown biasa,
   nilai "transform: none" di akhir animasi akan MENIMPA translateX(-50%)
   itu dan bikin stempel jadi tidak center lagi setelah animasi selesai. */
#main-content.is-revealed .hero-stamp { animation: heroStampIn .8s .12s both cubic-bezier(.22,1,.36,1); }
#main-content.is-revealed .hero-content .eyebrow { animation: heroFadeDown .9s .24s both cubic-bezier(.22,1,.36,1); }
#main-content.is-revealed .hero-content .hero-names { animation: heroNamesIn 1.1s .36s both cubic-bezier(.22,1,.36,1); }
#main-content.is-revealed .hero-content .hero-date,
#main-content.is-revealed .hero-content .invited-guest,
#main-content.is-revealed .hero-content .hero-countdown { animation: heroFadeUp .9s .58s both cubic-bezier(.22,1,.36,1); }
#main-content.is-revealed .hero-content .btn-primary { animation: heroFadeUp .8s .78s both cubic-bezier(.22,1,.36,1); }
/* Kedua sudut bunga (::before = kanan-atas, ::after = kiri-bawah) SENGAJA
   diberi delay yang SAMA PERSIS dengan tombol "Buka Undangan" (.78s) —
   supaya keduanya muncul bebarengan saat kartu hero pertama kali tampil. */
#main-content.is-revealed .hero-card::before,
#main-content.is-revealed .hero-card::after { animation: heroCornerIn .8s .78s both cubic-bezier(.22,1,.36,1); }

@keyframes heroCardIn { from { opacity:0; transform:translateY(16px) scale(.97); } to { opacity:1; transform:none; } }
@keyframes heroStampIn { from { opacity:0; transform:translate(-50%,-10px); } to { opacity:1; transform:translate(-50%,0); } }
@keyframes heroFadeDown { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:none; } }
@keyframes heroNamesIn { from { opacity:0; transform:translateY(20px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes heroFadeUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes heroCornerIn { from { opacity:0; } to { opacity:1; } }

@media (prefers-reduced-motion: reduce) {
  .motion-ready .reveal-item,
  .motion-ready .reveal-card,
  .hero-card,
  .hero-content .eyebrow,
  .hero-content .hero-names,
  .hero-content .hero-date,
  .hero-content .invited-guest,
  .hero-content .hero-countdown,
  .hero-content .btn-primary,
  .hero-card::before,
  .hero-card::after {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  /* Terpisah dari grup di atas: stempel tidak boleh dipaksa
     transform:none karena perlu tetap center — cuma animasinya
     yang dimatikan. */
  .hero-stamp {
    opacity: 1 !important;
    transform: translateX(-50%) !important;
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================================
   STAMP SAFE ZONE — keep every N&H wax seal fully inside the page
   background. The small top breathing room prevents the seal from
   crossing the section boundary while keeping the card close.
============================================================ */
.section:not(.hero-section):not(.closing-section) {
  padding-top: 56px;
}

/* Hero keeps its original composition; its wax seal is handled separately. */

/* ============================================================
   PAGE BACKGROUND SYSTEM — v19.2
   bg-page -> card/content only.
   The complete supplied artwork is shown on every section so the
   fabric corners are never cropped by background-size: cover.
============================================================ */
.hero-bg {
  background-image: url("../images/backgrounds/bg-page.jpg");
  background-color: #efe3d2;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
  transform: none;
  opacity: 1;
  pointer-events: none;
  filter: none;
  z-index: var(--z-background);
}

/* The page artwork itself is the transition surface. Do not fade it to
   white/cream at section boundaries: that is what was creating the pale
   bands between pages. */
.hero-bg--fade-bottom,
.hero-bg--fade-both {
  -webkit-mask-image: none;
  mask-image: none;
}

/* Keep the tiny breathing space between cards warm, never white. */
.section,
.detail-section,
.map-section,
.gallery-section,
.love-story-section,
.rsvp-section,
.livewall-section,
.guestbook-section,
.gift-section,
.opening-section,
.profile-section {
  background-color: #efe3d2;
}

/* Cards stay close without touching. The artwork remains visible in the
   small gap between sections. */
.section:not(.hero-section):not(.closing-section) {
  padding-top: 1.35rem;
  padding-bottom: 1.35rem;
  margin-top: -1px;
}

/* Jangan potong stempel/wax seal yang menonjol di atas card. */
.section:not(.hero-section):not(.closing-section) {
  overflow: visible;
}

/* Preserve the hero's full-screen composition. */
.hero-section {
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
}

/* Closing cutscene keeps its own stage height/positioning. */
.closing-section {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

@media (max-width: 480px) {
  .hero-bg {
    background-size: 100% 100%;
    background-position: center center;
  }
}

/* ============================================================
   FINAL CARD + STAMP COMPOSITION
   The card and its N&H seal move together as one composition.
   The whole composition sits safely inside the bg-page with a
   warm breathing space above it; the seal keeps its original
   relationship to the card.
============================================================ */
.section:not(.hero-section):not(.closing-section) {
  padding-top: 5rem;
  padding-bottom: .75rem;
  overflow: visible;
}

.section:not(.hero-section):not(.closing-section) .section-inner {
  padding-top: 0;
}

/* Keep every section's seal in the same position as the hero: the seal
   overlaps the card by the same amount, while the section's existing
   top padding keeps the whole seal safely inside the bg-page. */
.ayat-stamp,
.profile-frame-stamp {
  top: -46px;
}

/* ============================================================
   LOVE STORY — botanical branch instead of circular timeline
   markers/line. Clean, thin and consistent with the maroon theme.
============================================================ */
.love-story-section .timeline::before {
  left: 0;
  top: 0;
  bottom: 0;
  width: 42px;
  background-image: url("../effects/lovestory-vine-new.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  opacity: .9;
}

.love-story-section .timeline-dot {
  display: none;
}

.love-story-section .timeline-item {
  padding-left: 58px;
}

@media (max-width: 480px) {
  .section:not(.hero-section):not(.closing-section) {
    padding-top: 5rem;
    padding-bottom: .65rem;
  }

  .love-story-section .timeline::before {
    left: 0;
    width: 38px;
  }

  .love-story-section .timeline-item {
    padding-left: 52px;
  }
}