/* =====================================================
   TOKENS
===================================================== */
:root{
  --navy-deepest:#0f2140;
  --navy-deep:#152c52;
  --navy:#1c3866;
  --navy-light:#2d4d80;
  --gold:#c9a24b;
  --gold-light:#e6cd8d;
  --gold-dim:#a4823f;
  --maroon:#4a2420;
  --cream:#f3ecd9;
  --ivory:#fbf7ec;
  --ink:#2a2118;

  --font-script: 'Great Vibes', cursive;
  --font-body: 'Cormorant Garamond', serif;
  --font-label: 'Marcellus', serif;

  --radius: 22px;
  --nav-h: 76px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--navy-deepest);
  color:var(--cream);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
h1,h2,h3{ margin:0; font-weight:500; }
p{ margin:0; }
a{ color:inherit; }
button{ font-family:inherit; }

.eyebrow{
  font-family:var(--font-label);
  letter-spacing:.28em;
  text-transform:uppercase;
  font-size:.68rem;
  color:var(--gold-light);
  margin:0 0 .6em;
}

.amp{ font-family:var(--font-script); font-weight:400; }

/* shared texture: soft radial "glitter" wash used on dark navy panels */
.texture-glitter{
  background:
    radial-gradient(ellipse at 15% 8%, rgba(230,205,141,.18), transparent 40%),
    radial-gradient(ellipse at 85% 92%, rgba(230,205,141,.14), transparent 45%);
}

/* =====================================================
   ✨ SCROLL REVEAL (fade-in pas discroll)
   =====================================================
   CARA PAKAI (neng HTML):
   Tambahke class "reveal" + siji arah + (opsional) delay neng
   elemen sing arep muncul pelan-pelan. Conto:

     <h2 class="reveal reveal--down">Judul</h2>
     <p  class="reveal reveal--up reveal-d2">Teks</p>

   Pilihan arah:
     reveal--down   -> muncul mudhun seko duwur     (elegan kanggo judul)
     reveal--up     -> muncul munggah seko ngisor    (elegan kanggo teks/isi)
     reveal--left   -> muncul seko kiri
     reveal--right  -> muncul seko tengen
     reveal--scale  -> muncul mbrudul (zoom in) alon, apik kanggo foto/badge

   Pilihan delay (ben ora muncul bareng kabeh, tapi gantian):
     reveal-d1 nganti reveal-d6 (d1 paling cepet, d6 paling suwe)

   MATENI ANIMASI KABEH: buka assets/js/script.js, goleki
   CONFIG.reveal.enabled, ganti dadi false.

   NGATUR "RASA" ANIMASI (kesuwen/kacepeten, adoh/cedhake jarak
   gèsèré): ganti angka ing :root ngisor iki wae, ora perlu ngubah
   sing liya.
===================================================== */
:root{
  --reveal-duration: 900ms;                      /* suwene animasi */
  --reveal-ease: cubic-bezier(.16,.8,.24,1);      /* "rasa" gerakane */
  --reveal-distance: 26px;                        /* sepira adohe gèsèr */
  --reveal-stagger: 110ms;                        /* jarak wektu antar delay (d1,d2,d3...) */
}

.reveal{
  opacity:0;
  transition:
    opacity var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease);
}
.reveal--down{ transform:translateY(calc(var(--reveal-distance) * -1)); }
.reveal--up{ transform:translateY(var(--reveal-distance)); }
.reveal--left{ transform:translateX(calc(var(--reveal-distance) * -1)); }
.reveal--right{ transform:translateX(var(--reveal-distance)); }
.reveal--scale{ transform:scale(.92); }

.reveal.is-visible{ opacity:1; transform:none; }

.reveal-d1{ transition-delay: calc(var(--reveal-stagger) * 1); }
.reveal-d2{ transition-delay: calc(var(--reveal-stagger) * 2); }
.reveal-d3{ transition-delay: calc(var(--reveal-stagger) * 3); }
.reveal-d4{ transition-delay: calc(var(--reveal-stagger) * 4); }
.reveal-d5{ transition-delay: calc(var(--reveal-stagger) * 5); }
.reveal-d6{ transition-delay: calc(var(--reveal-stagger) * 6); }

/* =====================================================
   ✨ KUNANG-KUNANG (efek latar sing mabur alon-alon)
   =====================================================
   Spans-e digawe otomatis nganggo JS (assets/js/script.js,
   bagian CONFIG.fireflies) lan ditambahke neng
   <div id="fireflies"> sing wis disiapke neng index.html.

   MATENI EFEK IKI: buka assets/js/script.js, goleki
   CONFIG.fireflies.enabled, ganti dadi false.

   NGATUR JUMLAH / KECEPETAN / UKURAN: uga neng
   CONFIG.fireflies (assets/js/script.js) — kabeh angka
   dikomentari cetha neng kono.

   NGATUR WERNA / GLOW: cukup ganti --firefly-color ngisor iki.
===================================================== */
:root{
  --firefly-color: 230,205,141; /* format R,G,B — cocok karo --gold-light */
}
.fireflies{
  position:fixed;
  inset:0;
  z-index:3;
  pointer-events:none;
  overflow:hidden;
  mix-blend-mode:screen;
}
.firefly{
  position:absolute;
  left:var(--fx);
  top:var(--fy);
  width:var(--fsize);
  height:var(--fsize);
  border-radius:50%;
  background:rgba(var(--firefly-color), .95);
  box-shadow:
    0 0 6px 2px rgba(var(--firefly-color), .85),
    0 0 16px 5px rgba(var(--firefly-color), .35);
  opacity:0;
  animation: fireflyDrift var(--fduration) ease-in-out var(--fdelay) infinite;
}
@keyframes fireflyDrift{
  0%   { transform:translate(0,0) scale(1); opacity:0; }
  12%  { opacity:var(--fopacity); }
  50%  { transform:translate(var(--fdrift-x), calc(var(--fdrift-y) * -1)) scale(1.2); opacity:calc(var(--fopacity) * .35); }
  62%  { opacity:var(--fopacity); }
  100% { transform:translate(0,0) scale(1); opacity:0; }
}

/* =====================================================
   COVER / REVEAL
===================================================== */
.cover{
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(230,205,141,.16), transparent 42%),
    radial-gradient(ellipse at 90% 100%, rgba(230,205,141,.14), transparent 45%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 55%, var(--navy-deepest) 100%);
  padding:6vh 6vw;
  transition:transform .9s cubic-bezier(.65,0,.2,1), opacity .8s ease;
}
.cover.is-open{
  transform:translateY(-100%);
  opacity:0;
  pointer-events:none;
}
.cover__texture{
  position:absolute; inset:0;
  background-image:url('../images/flowers-and-leaves.webp');
  background-repeat:no-repeat;
  background-position:bottom -20px right -40px;
  background-size:min(70vw,340px);
  opacity:.5;
  mix-blend-mode:luminosity;
  filter:sepia(.4) saturate(1.4) hue-rotate(-10deg);
  pointer-events:none;
}
.cover__frame{
  position:relative;
  width:100%;
  max-width:420px;
  min-height:82vh;
  border:1px solid rgba(230,205,141,.45);
  border-radius:2px;
  padding:8vh 1.6rem 4vh;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
  text-align:center;
  background:rgba(15,33,64,.15);
}
.cover__top .eyebrow{ text-align:center; }
.cover__to-label{ font-size:1.05rem; font-style:italic; opacity:.9; line-height:1.5; }
.cover__to-name{
  font-family:var(--font-label);
  font-size:1.15rem;
  letter-spacing:.02em;
  color:var(--gold-light);
  border-bottom:1px solid rgba(230,205,141,.5);
  display:inline-block;
  padding:.35em .2em .3em;
  margin:.5em 0 .3em;
  min-width:180px;
}
.cover__to-place{ font-style:italic; opacity:.85; margin-top:.2em; }

.cover__mid{ display:flex; flex-direction:column; align-items:center; gap:.6rem; }
.cover__names{
  font-family:var(--font-script);
  font-size:clamp(3rem,13vw,4.4rem);
  line-height:1;
  color:var(--ivory);
  text-shadow:0 0 30px rgba(230,205,141,.25);
}
.cover__date{ font-family:var(--font-label); letter-spacing:.14em; font-size:.92rem; color:var(--gold-light); }

.seal{ position:relative; width:74px; height:74px; display:flex; align-items:center; justify-content:center; }
.seal__ring{ position:absolute; inset:0; width:100%; height:100%; }
.seal__ring circle{ fill:none; stroke:var(--gold); stroke-width:1.4; }
.seal__initials{ font-family:var(--font-script); font-size:1.6rem; color:var(--gold-light); }
.seal--small{ width:52px; height:52px; margin:0 auto 1rem; }
.seal--small .seal__initials{ font-size:1.2rem; }

.btn-open{
  appearance:none;
  border:1px solid var(--gold);
  background:transparent;
  color:var(--ivory);
  font-family:var(--font-label);
  letter-spacing:.12em;
  font-size:.85rem;
  padding:.95em 2em;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  gap:.6em;
  cursor:pointer;
  transition:background .3s ease, color .3s ease, transform .3s ease;
}
.btn-open:hover{ background:var(--gold); color:var(--navy-deepest); }
.btn-open:active{ transform:scale(.97); }
.btn-open__icon{ display:flex; }

/* =====================================================
   APP SHELL
===================================================== */
.app{ position:relative; padding-bottom:var(--nav-h); }

.sound-toggle{
  position:fixed;
  top:16px; right:16px;
  z-index:60;
  width:40px; height:40px;
  border-radius:50%;
  border:1px solid rgba(230,205,141,.5);
  background:rgba(15,33,64,.65);
  backdrop-filter:blur(6px);
  color:var(--gold-light);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.sound-toggle.is-muted #soundWave{ display:none; }

.section{
  position:relative;
  padding:5.5rem 6vw 4.5rem;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:var(--navy-deepest);
  overflow:hidden;
}
.section--dark{
  background:linear-gradient(180deg, var(--navy-deep), var(--navy-deepest));
}
.section-head{ margin-bottom:2.4rem; }
.section-head h2{ font-family:var(--font-script); font-size:clamp(2.2rem,8vw,3rem); color:var(--ivory); }

.divider{ display:flex; align-items:center; gap:.7rem; color:var(--gold); margin:1.6rem 0; width:100%; max-width:260px; }
.divider span{ flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--gold), transparent); }

/* ---------- HERO ---------- */
.hero-section{ padding-top:4rem; }
.hero-floral{
  position:absolute; top:-10px; left:50%; transform:translateX(-50%) scaleY(-1);
  width:min(80vw,320px); opacity:.4; pointer-events:none;
  filter:grayscale(1) sepia(.7) saturate(2.2) brightness(.85) hue-rotate(-6deg);
}
.hero-title{
  font-family:var(--font-script);
  font-size:clamp(3.4rem,15vw,5.2rem);
  line-height:1.05;
  color:var(--ivory);
}
.hero-quote{
  font-style:italic;
  font-size:1.05rem;
  line-height:1.7;
  max-width:34ch;
  color:var(--cream);
  opacity:.92;
}
.hero-quote cite{ display:block; margin-top:.9em; font-style:normal; font-family:var(--font-label); letter-spacing:.15em; font-size:.72rem; color:var(--gold-light); }
.hero-scroll{ margin-top:3rem; font-size:.85rem; letter-spacing:.05em; opacity:.6; }

/* ---------- MEMPELAI ---------- */
.couple-grid{
  display:flex; flex-direction:column; align-items:center; gap:2.2rem; width:100%; max-width:380px;
}
.couple-amp{ font-family:var(--font-script); font-size:2.6rem; color:var(--gold); line-height:0; }
.couple-card{ display:flex; flex-direction:column; align-items:center; gap:.45rem; }
.couple-card__frame{
  width:132px; height:132px; border-radius:50%; overflow:hidden;
  border:1px solid var(--gold); padding:5px;
  background:radial-gradient(circle, rgba(201,162,75,.15), transparent);
}
.couple-card__frame img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.couple-card__name{ font-family:var(--font-label); font-size:1.15rem; color:var(--ivory); margin-top:.6rem; }
.couple-card__nick{ font-family:var(--font-script); font-size:1.7rem; color:var(--gold-light); }
.couple-card__parents{ font-size:1rem; font-style:italic; opacity:.9; max-width:30ch; }
.couple-card__address{ font-size:.88rem; opacity:.7; line-height:1.5; }

/* ---------- ACARA ---------- */
.acara-day{ font-family:var(--font-label); font-size:1.2rem; color:var(--ivory); }
.acara-time{ font-size:1.05rem; color:var(--gold-light); margin-top:.3rem; letter-spacing:.05em; }

.countdown{ display:flex; gap:.7rem; margin:2.2rem 0 2.4rem; }
.countdown__box{
  width:66px; padding:.8rem 0 .6rem;
  border:1px solid rgba(230,205,141,.4);
  border-radius:12px;
  display:flex; flex-direction:column; align-items:center; gap:.2rem;
  background:rgba(230,205,141,.05);
}
.countdown__box span{ font-family:var(--font-label); font-size:1.4rem; color:var(--gold-light); }
.countdown__box small{ font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; opacity:.65; }

.venue{ max-width:340px; display:flex; flex-direction:column; align-items:center; gap:.6rem; }
.venue__name{ font-size:1.05rem; color:var(--ivory); }
.venue__address{ font-size:.92rem; opacity:.75; line-height:1.6; }

.btn-outline, .btn-solid{
  appearance:none; cursor:pointer; text-decoration:none;
  font-family:var(--font-label); letter-spacing:.08em; font-size:.82rem;
  display:inline-flex; align-items:center; gap:.55em;
  padding:.85em 1.7em; border-radius:999px; margin-top:1rem;
}
.btn-outline{ border:1px solid var(--gold); color:var(--gold-light); background:transparent; }
.btn-outline:hover{ background:var(--gold); color:var(--navy-deepest); }
.btn-solid{ border:none; background:var(--gold); color:var(--navy-deepest); font-weight:600; margin-top:0; }
.btn-solid:hover{ background:var(--gold-light); }

/* ---------- GALERI ---------- */
.carousel{ position:relative; width:100%; max-width:420px; }
.carousel__track{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  border-radius:var(--radius);
  scrollbar-width:none;
}
.carousel__track::-webkit-scrollbar{ display:none; }
.carousel__slide{ flex:0 0 100%; scroll-snap-align:center; aspect-ratio:900/1370; }
.carousel__slide img{ width:100%; height:100%; object-fit:cover; }
.carousel__arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(230,205,141,.5);
  background:rgba(15,33,64,.55); backdrop-filter:blur(4px);
  color:var(--gold-light); font-size:1.3rem; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.carousel__arrow--prev{ left:-6px; }
.carousel__arrow--next{ right:-6px; }
.carousel__dots{ display:flex; justify-content:center; gap:.5rem; margin-top:1rem; }
.carousel__dots span{ width:6px; height:6px; border-radius:50%; background:rgba(230,205,141,.35); transition:background .25s, transform .25s; }
.carousel__dots span.is-active{ background:var(--gold); transform:scale(1.3); }

/* ---------- WISHES ---------- */
.wish-form{ width:100%; max-width:380px; display:flex; flex-direction:column; gap:.8rem; margin-bottom:2.6rem; }
.wish-form input, .wish-form textarea{
  width:100%; border-radius:14px; border:1px solid rgba(230,205,141,.4);
  background:rgba(230,205,141,.06); color:var(--ivory);
  font-family:var(--font-body); font-size:1.05rem; padding:.85em 1em;
}
.wish-form input::placeholder, .wish-form textarea::placeholder{ color:rgba(243,236,217,.5); font-style:italic; }
.wish-form textarea{ min-height:96px; resize:vertical; }
.wish-form input:focus, .wish-form textarea:focus{ outline:2px solid var(--gold); outline-offset:1px; }
.wish-form .btn-solid{ align-self:center; }

.wish-list{ width:100%; max-width:380px; display:flex; flex-direction:column; gap:.9rem; text-align:left; max-height:340px; overflow-y:auto; padding-right:2px; }
.wish-empty{ text-align:center; font-style:italic; opacity:.6; }
.wish-item{
  border:1px solid rgba(230,205,141,.25);
  border-radius:16px; padding:.9rem 1.1rem;
  background:rgba(230,205,141,.05);
  animation:wishIn .35s ease;
}
@keyframes wishIn{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none; } }
.wish-item__name{ font-family:var(--font-label); font-size:.95rem; color:var(--gold-light); }
.wish-item__msg{ font-size:.98rem; line-height:1.5; margin-top:.25rem; opacity:.92; }
.wish-item__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:.6rem; }
.wish-item__delete{
  flex:0 0 auto;
  background:none; border:none; cursor:pointer;
  font-size:.85rem; line-height:1;
  opacity:.35;
  padding:.1rem .2rem;
  transition:opacity .2s ease;
}
.wish-item__delete:hover{ opacity:.9; }

/* ---------- FOOTER ---------- */
.app-footer{ text-align:center; padding:4.5rem 6vw 3rem; background:var(--navy-deepest); }
.app-footer p{ font-style:italic; opacity:.85; }
.app-footer__names{ font-family:var(--font-script); font-size:2.4rem; color:var(--gold-light); font-style:normal; margin:.2em 0; }
.app-footer__thanks{ max-width:36ch; margin:1rem auto 0; font-size:.95rem; line-height:1.6; opacity:.75; }

.text-section__body{
  max-width:42ch;
  margin:0 auto;
  text-align:center;
  font-size:.98rem;
  line-height:1.75;
  opacity:.85;
}

.site-credit{
  text-align:center;
  padding:1rem 6vw 1.6rem;
  background:var(--navy-deepest);
  font-size:.72rem;
  letter-spacing:.02em;
  opacity:.55;
}
.site-credit a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }

/* =====================================================
   BOTTOM NAV
===================================================== */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  height:var(--nav-h);
  display:flex;
  background:rgba(15,33,64,.85);
  backdrop-filter:blur(10px);
  border-top:1px solid rgba(230,205,141,.25);
  padding-bottom:env(safe-area-inset-bottom);
}
.nav-item{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem;
  text-decoration:none; color:rgba(243,236,217,.55);
  font-family:var(--font-label); font-size:.62rem; letter-spacing:.04em;
  transition:color .25s ease;
}
.nav-item svg{ transition:transform .25s ease; }
.nav-item.is-active{ color:var(--gold-light); }
.nav-item.is-active svg{ transform:translateY(-2px); }
.bottom-nav__indicator{
  position:absolute; top:0; left:0;
  width:calc(100% / 5); height:2px; background:var(--gold);
  transition:transform .35s cubic-bezier(.65,0,.2,1);
}

/* =====================================================
   RESPONSIVE
===================================================== */
@media (min-width:640px){
  .couple-grid{ flex-direction:row; align-items:flex-start; justify-content:center; max-width:640px; gap:1.6rem; }
  .couple-amp{ margin-top:2.6rem; }
  .cover__frame{ max-width:440px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .cover, .nav-item svg, .wish-item{ transition:none; animation:none; }
  .reveal{ transition:none; opacity:1; transform:none; }
  .fireflies{ display:none; }
}