/* =========================================================
   ETHEREAL REBIRTH — Undangan Pernikahan Digital
   Palet: Putih · Pastel Pink · Ice Blue
   ========================================================= */

:root {
  --white: #ffffff;
  --pink: #FADBD8;
  --ice: #EAF2F8;

  /* turunan halus untuk kedalaman */
  --pink-deep: #e9b7b2;
  --ice-deep: #bcd3e6;
  --ink: #5b4a4f;            /* teks gelap hangat (bukan hitam) */
  --ink-soft: #8a7479;

  --font-script: "Pinyon Script", cursive;
  --font-serif: "Cormorant Garamond", "Times New Roman", serif;
  --font-sans: "Jost", system-ui, sans-serif;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --slide-time: 1.6s;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-serif);
  color: var(--ink);
  background: var(--ice);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.is-locked { overflow: hidden; height: 100dvh; }

/* =========================================================
   MAIN (halaman di bawah cover — masih kosong)
   ========================================================= */
.main {
  position: relative;
  min-height: 100dvh;
  background:
    radial-gradient(900px 600px at 15% 10%, var(--pink) 0%, transparent 60%),
    radial-gradient(800px 700px at 90% 90%, var(--ice-deep) 0%, transparent 60%),
    linear-gradient(180deg, var(--white), var(--ice));
}

/* =========================================================
   COVER
   ========================================================= */
.cover {
  position: fixed;
  inset: 0;
  z-index: 100;
  height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--ink);
  transition: transform var(--slide-time) cubic-bezier(.76, 0, .24, 1),
              opacity var(--slide-time) ease;
  will-change: transform;
}
.cover.is-opening { transform: translateY(-100%); }
.cover.is-gone    { display: none; }

/* ---------- Latar ---------- */
.cover__bg { position: absolute; inset: 0; }

/* Cadangan saat video belum ada: aurora pastel yang bergerak pelan */
.cover__fallback {
  position: absolute; inset: -20%;
  background:
    radial-gradient(40% 40% at 20% 25%, var(--pink) 0%, transparent 70%),
    radial-gradient(45% 45% at 80% 30%, var(--ice) 0%, transparent 70%),
    radial-gradient(50% 50% at 60% 85%, #f6e6e4 0%, transparent 70%),
    radial-gradient(35% 35% at 10% 90%, var(--ice-deep) 0%, transparent 70%),
    var(--white);
  filter: blur(30px);
  animation: aurora 22s ease-in-out infinite alternate;
}
@keyframes aurora {
  0%   { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  50%  { transform: translate3d(3%, -3%, 0) scale(1.12) rotate(4deg); }
  100% { transform: translate3d(-3%, 3%, 0) scale(1.05) rotate(-3deg); }
}

.cover__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.cover__video.is-ready { opacity: 1; }

/* Kerudung putih-pink agar teks selalu terbaca di atas video apa pun */
.cover__veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(70% 60% at 50% 50%, rgba(255,255,255,.55) 0%, rgba(255,255,255,.15) 70%),
    linear-gradient(180deg, rgba(250,219,216,.35), rgba(234,242,248,.45));
  backdrop-filter: saturate(.9);
}

/* Butiran halus seperti kertas/film */
.cover__grain {
  position: absolute; inset: 0; opacity: .18; mix-blend-mode: multiply; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .4  0 0 0 0 .4  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- Partikel ---------- */
.cover__motes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.mote {
  position: absolute; bottom: -20px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgba(255,255,255,0) 70%);
  opacity: 0;
  animation: rise linear infinite;
}
@keyframes rise {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  15%  { opacity: .9; }
  85%  { opacity: .7; }
  100% { transform: translate3d(var(--dx, 20px), -110vh, 0); opacity: 0; }
}

/* ---------- Konten ---------- */
.cover__content {
  position: relative; z-index: 2;
  width: 100%;
  padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
  display: grid; place-items: center;
}

/* Bingkai lengkung ala jendela/gerbang surealis */
.cover__frame {
  position: relative;
  width: min(440px, 100%);
  max-height: calc(100dvh - 48px);
  padding: clamp(36px, 7vh, 64px) clamp(22px, 6vw, 44px) clamp(30px, 5vh, 48px);
  text-align: center;
  border-radius: 999px 999px 28px 28px / 220px 220px 28px 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.38));
  border: 1px solid rgba(255,255,255,.9);
  box-shadow:
    0 30px 80px -20px rgba(201, 140, 150, .35),
    0 0 0 8px rgba(255,255,255,.22),
    inset 0 0 40px rgba(255,255,255,.6);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  display: flex; flex-direction: column; align-items: center;
  overflow: hidden;
}
/* garis tipis kedua di dalam bingkai */
.cover__frame::before {
  content: ""; position: absolute; inset: 10px;
  border-radius: inherit;
  border: 1px solid rgba(233,183,178,.55);
  pointer-events: none;
}

.corner { position: absolute; width: 14px; height: 14px; border: 1px solid var(--pink-deep); opacity: .7; }
.corner--bl { left: 22px;  bottom: 22px; border-width: 0 0 1px 1px; }
.corner--br { right: 22px; bottom: 22px; border-width: 0 1px 1px 0; }
.corner--tl, .corner--tr { display: none; } /* sisi atas melengkung, tanpa sudut */

.cover__eyebrow {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: .68rem;
  letter-spacing: .5em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-left: .5em; /* kompensasi letter-spacing agar tetap center */
  margin-top: clamp(8px, 3vh, 30px);
}

.cover__names {
  margin-top: clamp(12px, 2.4vh, 22px);
  font-family: var(--font-script);
  font-weight: 400;
  line-height: 1;
  color: var(--ink);
  display: flex; flex-direction: column; align-items: center;
  text-shadow: 0 2px 20px rgba(255,255,255,.9);
}
.cover__names .name { font-size: clamp(2.6rem, 11vw, 3.6rem); }
.cover__names .amp {
  font-family: var(--font-serif);
  font-style: italic; font-weight: 300;
  font-size: clamp(1.3rem, 5vw, 1.7rem);
  margin: .25em 0 .1em;
  background: linear-gradient(90deg, var(--pink-deep), var(--ice-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.cover__theme {
  margin-top: clamp(10px, 2vh, 18px);
  font-style: italic; font-weight: 300;
  font-size: clamp(1rem, 3.6vw, 1.2rem);
  letter-spacing: .18em;
  color: var(--ink-soft);
}

.cover__ornament {
  display: flex; align-items: center; gap: 10px;
  margin: clamp(14px, 2.6vh, 24px) 0;
}
.cover__ornament i { display: block; width: 46px; height: 1px; background: linear-gradient(90deg, transparent, var(--pink-deep)); }
.cover__ornament i:last-child { transform: scaleX(-1); }
.cover__ornament b {
  width: 7px; height: 7px; transform: rotate(45deg);
  border: 1px solid var(--pink-deep);
  background: var(--white);
  box-shadow: 0 0 12px rgba(233,183,178,.9);
}

/* ---------- Tamu ---------- */
.cover__guest { margin-bottom: clamp(18px, 3.4vh, 30px); width: 100%; }
.guest__label {
  font-style: italic; font-weight: 300;
  font-size: 1rem; color: var(--ink-soft);
}
.guest__name {
  margin-top: .35em;
  font-weight: 400;
  font-size: clamp(1.45rem, 6vw, 1.85rem);
  line-height: 1.2;
  letter-spacing: .04em;
  color: var(--ink);
  word-break: break-word;
  padding: 0 .4em;
}
.guest__note {
  margin-top: 1em;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: .72rem;
  line-height: 1.8;
  letter-spacing: .08em;
  color: var(--ink-soft);
}

/* ---------- Tombol ---------- */
.btn-open {
  position: relative;
  appearance: none; border: 0; cursor: pointer;
  padding: 1px; /* ketebalan garis gradien */
  border-radius: 999px;
  background: linear-gradient(120deg, var(--pink-deep), #fff, var(--ice-deep), #fff, var(--pink-deep));
  background-size: 300% 100%;
  animation: borderFlow 6s linear infinite;
  box-shadow: 0 12px 30px -10px rgba(201,140,150,.55);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.btn-open__label {
  position: relative; display: block; overflow: hidden;
  padding: 1em 2.6em;
  border-radius: inherit;
  background: linear-gradient(180deg, #fff, var(--pink) 160%);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: .74rem;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--ink);
  padding-left: calc(2.6em + .38em);
}
/* kilau yang menyapu tombol */
.btn-open__label::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.95), transparent);
  transform: skewX(-20deg);
  animation: shine 4.2s ease-in-out infinite 2s;
}
.btn-open:hover, .btn-open:focus-visible { transform: translateY(-3px); box-shadow: 0 18px 38px -10px rgba(201,140,150,.7); outline: none; }
.btn-open:active { transform: translateY(0) scale(.98); }
.btn-open:focus-visible { outline: 2px solid var(--ice-deep); outline-offset: 4px; }
.btn-open[disabled] { pointer-events: none; }

@keyframes borderFlow { to { background-position: 300% 0; } }
@keyframes shine { 0%, 55% { left: -60%; } 100% { left: 130%; } }

/* ---------- Animasi masuk ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(6px);
  animation: reveal 1.4s var(--ease-out) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes reveal { to { opacity: 1; transform: none; filter: blur(0); } }

/* ---------- Tombol musik ---------- */
.music-btn {
  position: fixed; right: 16px; bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 90;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--ink);
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(233,183,178,.6);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px -8px rgba(201,140,150,.5);
  cursor: pointer;
  animation: spin 9s linear infinite;
}
.music-btn:not([hidden]) { animation: fadeIn 1s ease 1s both, spin 9s linear infinite; }
.music-btn[hidden] { display: none; }
.music-btn .ico-off { display: none; }
.music-btn.is-paused { animation: none; }
.music-btn.is-paused .ico-on  { opacity: .45; }
.music-btn.is-paused .ico-off { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Layar pendek (HP landscape) ---------- */
@media (max-height: 640px) {
  .cover__frame { border-radius: 40px; padding-top: 28px; }
  .guest__note { display: none; }
  .cover__ornament { margin: 10px 0; }
}

/* ---------- Aksesibilitas ---------- */
@media (prefers-reduced-motion: reduce) {
  .cover__fallback, .btn-open, .btn-open__label::after, .mote, .music-btn { animation: none !important; }
  .reveal { animation-duration: .01s; animation-delay: 0s; }
  .cover { --slide-time: .6s; }
}


/* =========================================================
   TAHAP 2 — Section isi
   ========================================================= */
.cover__date {
  margin-top: .5em;
  font-family: var(--font-sans); font-weight: 300;
  font-size: .68rem; letter-spacing: .42em; padding-left: .42em;
  color: var(--ink-soft);
}

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Efek global ---------- */
.fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 50; pointer-events: none; }
.cursor-glow {
  position: fixed; left: 0; top: 0; z-index: 51; pointer-events: none;
  width: 280px; height: 280px; margin: -140px 0 0 -140px; border-radius: 50%;
  background: radial-gradient(circle, rgba(250,219,216,.55) 0%, rgba(234,242,248,.28) 40%, transparent 70%);
  mix-blend-mode: soft-light; opacity: 0; transition: opacity .6s ease;
  will-change: transform;
}
.cursor-glow.is-on { opacity: 1; }
@media (hover: none), (pointer: coarse) { .cursor-glow { display: none; } }

/* ---------- Reveal saat scroll ---------- */
.rv {
  opacity: 0;
  transition: opacity 1.8s ease, transform 1.8s var(--ease-out), filter 1.8s ease;
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}
.rv[data-rv="up"]    { transform: translateY(46px); filter: blur(8px); }
.rv[data-rv="left"]  { transform: translateX(-110px) rotate(-2deg); filter: blur(10px); }
.rv[data-rv="right"] { transform: translateX(110px)  rotate(2deg);  filter: blur(10px); }
.rv[data-rv="fade"]  { filter: blur(6px); }
.rv.is-in { opacity: 1; transform: none; filter: none; }

/* Kata demi kata muncul dari kegelapan */
[data-split] .w {
  display: inline-block; opacity: 0; filter: blur(8px); transform: translateY(6px);
  transition: opacity 1.6s ease, filter 1.6s ease, transform 1.6s var(--ease-out);
  transition-delay: calc(var(--i) * 55ms + .9s);
}
[data-split].is-in .w { opacity: 1; filter: none; transform: none; }

/* ---------- Kabut & orb parallax ---------- */
.mist, .orb { position: absolute; pointer-events: none; will-change: transform; }
.mist {
  width: 140%; left: -20%; height: 42vh; filter: blur(46px); opacity: .75;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255,255,255,.9), transparent 70%);
}
.mist--a { top: 12%;  background: radial-gradient(50% 50% at 30% 50%, rgba(250,219,216,.35), transparent 70%); }
.mist--b { bottom: 8%; background: radial-gradient(50% 50% at 70% 50%, rgba(234,242,248,.30), transparent 70%); }
.mist--c { top: 30%;  opacity: .8; }
.mist--d { top: 10%;  opacity: .7; }
.mist--e { bottom: 0; opacity: .8; }
.orb { width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(70px); opacity: .7; }
.orb--pink { background: radial-gradient(circle, var(--pink), transparent 68%); top: -10%; left: -30%; }
.orb--ice  { background: radial-gradient(circle, var(--ice-deep), transparent 68%); bottom: -15%; right: -35%; opacity: .55; }
.orb--r    { top: auto; bottom: -10%; left: auto; right: -35%; }

/* ---------- Umum ---------- */
section { position: relative; overflow: hidden; padding: clamp(84px, 14vh, 150px) 24px; }
.section-head { position: relative; z-index: 2; text-align: center; max-width: 620px; margin: 0 auto clamp(40px, 7vh, 72px); }
.eyebrow {
  font-family: var(--font-sans); font-weight: 300; font-size: .7rem;
  letter-spacing: .5em; padding-left: .5em; text-transform: uppercase; color: var(--ink-soft);
}
.section-title {
  margin-top: .7em; font-weight: 300; font-style: italic;
  font-size: clamp(1.9rem, 7vw, 2.9rem); line-height: 1.15; color: var(--ink);
}
.section-sub { margin-top: 1.1em; font-size: 1.05rem; line-height: 1.75; color: var(--ink-soft); font-weight: 300; }

.btn-soft {
  display: inline-block; text-decoration: none; cursor: pointer; border: 1px solid var(--pink-deep);
  padding: 1em 2em; border-radius: 999px; background: rgba(255,255,255,.7);
  font-family: var(--font-sans); font-weight: 400; font-size: .7rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink); transition: all .5s var(--ease-out); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.btn-soft span { padding-left: .3em; }
.btn-soft:hover, .btn-soft:focus-visible {
  background: linear-gradient(120deg, var(--pink), var(--ice)); transform: translateY(-3px);
  box-shadow: 0 14px 30px -12px rgba(201,140,150,.6); outline: none;
}
.btn-soft--ghost { background: transparent; border-color: var(--ice-deep); }
.btn-soft--solid { background: linear-gradient(120deg, var(--pink), #fff 60%, var(--ice)); }

/* ---------- THE GENESIS ---------- */
.genesis {
  min-height: 100dvh; display: grid; place-items: center;
  padding-bottom: clamp(140px, 24vh, 260px);
  color: #f3e9ec;
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(250,219,216,.10), transparent 70%),
    linear-gradient(180deg, #14111f 0%, #1d1830 45%, #3a2f47 72%, #b98f9b 90%, var(--pink) 100%);
}
.stars { position: absolute; inset: 0; opacity: .8; background-image:
  radial-gradient(1.2px 1.2px at 12% 18%, #fff, transparent),
  radial-gradient(1px 1px at 32% 8%, #fff, transparent),
  radial-gradient(1.4px 1.4px at 58% 22%, #fadbd8, transparent),
  radial-gradient(1px 1px at 78% 12%, #fff, transparent),
  radial-gradient(1.2px 1.2px at 90% 30%, #eaf2f8, transparent),
  radial-gradient(1px 1px at 20% 42%, #eaf2f8, transparent),
  radial-gradient(1.3px 1.3px at 68% 48%, #fff, transparent),
  radial-gradient(1px 1px at 44% 38%, #fadbd8, transparent),
  radial-gradient(1px 1px at 6% 60%, #fff, transparent),
  radial-gradient(1.2px 1.2px at 86% 62%, #fff, transparent);
  animation: twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: .35; } to { opacity: .9; } }
.genesis .eyebrow { color: var(--pink); }
.genesis__inner { position: relative; z-index: 2; max-width: 680px; text-align: center; }
.genesis__arabic {
  margin-top: 2.2rem; font-family: "Amiri", serif; font-size: clamp(1.5rem, 5.6vw, 2.15rem);
  line-height: 2.1; color: #fdf3f1; text-shadow: 0 0 30px rgba(250,219,216,.35);
}
.genesis__rule { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 2rem 0; }
.genesis__rule i { width: 56px; height: 1px; background: linear-gradient(90deg, transparent, var(--pink-deep)); }
.genesis__rule i:last-child { transform: scaleX(-1); }
.genesis__rule b { width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid var(--pink-deep); box-shadow: 0 0 14px var(--pink); }
.genesis__quote { font-size: clamp(1.1rem, 4vw, 1.3rem); line-height: 1.95; font-weight: 300; font-style: italic; color: #ecdfe3; }
.genesis__cite { margin-top: 2rem; font-family: var(--font-sans); font-size: .72rem; letter-spacing: .35em; text-transform: uppercase; color: var(--pink); }
.genesis__scroll { margin-top: 3.5rem; display: flex; flex-direction: column; align-items: center; gap: 10px; font-family: var(--font-sans); font-size: .6rem; letter-spacing: .4em; text-transform: uppercase; color: #3a2f47; }
.genesis__scroll i { width: 1px; height: 46px; background: linear-gradient(#3a2f47, transparent); animation: drip 2.2s ease-in-out infinite; transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- THE SOULS ---------- */
.souls { background: linear-gradient(180deg, var(--pink) 0%, #fdf1ef 18%, var(--white) 50%, var(--ice) 100%); }
.souls__stage { position: relative; z-index: 2; max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(20px, 6vh, 60px); }
.soul { position: relative; width: min(72%, 340px); }
.soul--groom { align-self: flex-start; }
.soul--bride { align-self: flex-end; margin-top: -4vh; }
.soul__photo {
  position: relative; aspect-ratio: 3 / 4; border-radius: 999px 999px 24px 24px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 30px 60px -24px rgba(180,120,135,.45), 0 0 0 8px rgba(255,255,255,.4);
}
.soul__photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 50px rgba(255,255,255,.35); pointer-events: none; }
.soul__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.soul__ph {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: radial-gradient(70% 50% at 50% 30%, #fff, transparent 70%), linear-gradient(160deg, var(--pink), var(--ice));
}
.soul--bride .soul__ph { background: radial-gradient(70% 50% at 50% 30%, #fff, transparent 70%), linear-gradient(200deg, var(--ice), var(--pink)); }
.soul__ph span { font-family: var(--font-script); font-size: 7rem; color: rgba(91,74,79,.35); }
/* bingkai bayangan bergeser: kesan surealis */
.soul::before {
  content: ""; position: absolute; inset: 0; z-index: -1; aspect-ratio: 3/4; height: auto;
  border-radius: 999px 999px 24px 24px; border: 1px solid var(--pink-deep);
  transform: translate(18px, 18px); opacity: .7;
}
.soul--bride::before { transform: translate(-18px, 18px); border-color: var(--ice-deep); }
.soul__text { margin-top: 1.6rem; text-align: center; }
.soul__role { font-family: var(--font-sans); font-weight: 300; font-size: .66rem; letter-spacing: .4em; padding-left: .4em; text-transform: uppercase; color: var(--ink-soft); }
.soul__name { font-family: var(--font-script); font-weight: 400; font-size: clamp(3rem, 13vw, 4.2rem); line-height: 1.1; color: var(--ink); }
.soul__full { font-style: italic; font-size: 1.1rem; color: var(--ink-soft); }
.souls__closing { position: relative; z-index: 2; text-align: center; margin-top: clamp(50px, 9vh, 90px); font-style: italic; font-weight: 300; font-size: 1.15rem; line-height: 1.9; color: var(--ink-soft); }

@media (min-width: 820px) {
  .souls__stage { flex-direction: row; justify-content: center; align-items: flex-start; gap: 0; }
  .soul { width: 340px; }
  .soul--groom { margin-right: 60px; margin-top: 0; }
  .soul--bride { margin-top: 140px; }
}

/* ---------- THE CONVERGENCE ---------- */
.converge { background: linear-gradient(180deg, var(--ice), var(--white) 55%, #fdf1ef); }
.converge__date { margin-top: 1rem; font-size: 1.4rem; letter-spacing: .12em; color: var(--ink); }
.countdown { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 460px; margin: 0 auto clamp(40px, 7vh, 64px); }
.cd {
  text-align: center; padding: 1.1rem .3rem; border-radius: 18px;
  background: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.95);
  box-shadow: 0 14px 30px -16px rgba(150,170,190,.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.cd b { display: block; font-weight: 300; font-size: clamp(1.7rem, 8vw, 2.4rem); line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.cd span { display: block; margin-top: .6em; font-family: var(--font-sans); font-size: .58rem; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-soft); }
.countdown__done { position: relative; z-index: 2; text-align: center; font-style: italic; font-size: 1.4rem; margin-bottom: 2rem; color: var(--ink); }

.events { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 14px; max-width: 560px; margin: 0 auto; }
.event {
  flex: 1; text-align: center; padding: 2.2rem 1rem 1.8rem; border-radius: 999px 999px 22px 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(250,219,216,.35));
  border: 1px solid rgba(255,255,255,.95); box-shadow: 0 24px 50px -24px rgba(180,120,135,.45);
}
.event--resepsi { background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(234,242,248,.7)); }
.event__label { font-family: var(--font-sans); font-size: .64rem; letter-spacing: .34em; padding-left: .34em; text-transform: uppercase; color: var(--ink-soft); }
.event__time { margin-top: .6rem; font-size: clamp(2.6rem, 11vw, 3.8rem); font-weight: 300; line-height: 1; color: var(--ink); }
.event__time sup { font-size: .45em; vertical-align: top; position: relative; top: .25em; }
.event__zone { margin-top: .4rem; font-style: italic; color: var(--ink-soft); }
.events__link { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.events__link i { width: 1px; height: 26px; background: var(--pink-deep); }
.events__link b { width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid var(--pink-deep); background: #fff; }

.venue { position: relative; z-index: 2; text-align: center; margin: clamp(48px, 8vh, 80px) auto 0; max-width: 460px; }
.venue__label { font-family: var(--font-sans); font-size: .66rem; letter-spacing: .4em; padding-left: .4em; text-transform: uppercase; color: var(--ink-soft); }
.venue__name { margin-top: .5rem; font-family: var(--font-script); font-weight: 400; font-size: clamp(2.4rem, 10vw, 3.2rem); color: var(--ink); }
.venue__addr { margin-top: .6rem; font-style: normal; font-size: 1.08rem; line-height: 1.8; color: var(--ink-soft); }
.venue__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ---------- DIGITAL ENVELOPE ---------- */
.envelope { background: linear-gradient(180deg, #fdf1ef, var(--pink) 130%); }
.cards { position: relative; z-index: 2; display: grid; gap: 22px; max-width: 760px; margin: 0 auto; grid-template-columns: 1fr; }
@media (min-width: 720px) { .cards { grid-template-columns: 1fr 1fr; } }
.bank {
  position: relative; padding: 1.7rem 1.6rem 1.6rem; border-radius: 22px; text-align: left; overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(234,242,248,.75));
  border: 1px solid #fff; box-shadow: 0 30px 60px -28px rgba(150,120,140,.5);
}
.bank--alt { background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(250,219,216,.7)); }
.bank::after { content: ""; position: absolute; width: 220px; height: 220px; right: -70px; top: -90px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.9), transparent 70%); }
.bank__top { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.bank__icon { width: 26px; height: 26px; }
.bank__name { font-family: var(--font-sans); font-weight: 400; font-size: .9rem; letter-spacing: .32em; }
.bank__chip { width: 38px; height: 28px; margin-top: 1.4rem; border-radius: 6px; background: linear-gradient(135deg, #f3dccb, #ead0bd); box-shadow: inset 0 0 0 1px rgba(150,110,90,.25); }
.bank__num { margin-top: 1rem; font-size: clamp(1.5rem, 6.4vw, 1.85rem); letter-spacing: .1em; color: var(--ink); font-variant-numeric: tabular-nums; }
.bank__holder { margin-top: .3rem; font-size: 1.05rem; color: var(--ink-soft); font-style: italic; }
.bank__holder small { font-style: normal; font-family: var(--font-sans); font-size: .65rem; letter-spacing: .2em; margin-right: .3em; }
.btn-copy {
  position: relative; z-index: 1; margin-top: 1.4rem; width: 100%; cursor: pointer; padding: .95em 1em; border-radius: 999px;
  border: 1px solid var(--pink-deep); background: rgba(255,255,255,.8);
  font-family: var(--font-sans); font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; color: var(--ink);
  transition: all .4s var(--ease-out);
}
.btn-copy:hover { background: linear-gradient(120deg, var(--pink), var(--ice)); }
.btn-copy.is-copied { background: linear-gradient(120deg, #d9ecdf, var(--ice)); border-color: #a9cdb6; transform: scale(1.02); }

/* ---------- ECHOES OF BLESSING ---------- */
.echoes { background: linear-gradient(180deg, var(--pink) -20%, var(--white) 22%, var(--ice) 100%); }
.wish, .wishes, .wish__mode { position: relative; z-index: 2; max-width: 560px; margin: 0 auto; }
.wish { padding: 1.8rem 1.5rem 1.6rem; border-radius: 26px; background: rgba(255,255,255,.75); border: 1px solid #fff; box-shadow: 0 30px 60px -30px rgba(150,140,170,.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); text-align: center; }
.field { display: block; text-align: left; margin-bottom: 1.2rem; position: relative; }
.field > span { display: block; margin-bottom: .5rem; font-family: var(--font-sans); font-size: .64rem; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-soft); }
.field input, .field textarea {
  width: 100%; padding: .9rem 1rem; border-radius: 14px; border: 1px solid rgba(188,211,230,.9);
  background: rgba(255,255,255,.9); font-family: var(--font-serif); font-size: 1.1rem; color: var(--ink); resize: vertical;
  transition: border-color .3s, box-shadow .3s;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--pink-deep); box-shadow: 0 0 0 4px rgba(250,219,216,.6); }
.field__count { position: absolute; right: 8px; bottom: -1.2em; font-size: .75rem; color: var(--ink-soft); font-style: normal; font-family: var(--font-sans); }
.wish__status { margin-top: 1rem; min-height: 1.4em; font-style: italic; color: var(--ink-soft); }
.wish__status.is-ok { color: #4f8a67; }
.wish__status.is-err { color: #b0534f; }
.wish__mode { margin-top: 1rem; text-align: center; font-size: .85rem; font-style: italic; color: var(--ink-soft); }
.wishes { list-style: none; margin-top: 2.2rem; max-height: 520px; overflow-y: auto; padding: 4px 6px 4px 2px; display: grid; gap: 14px; scrollbar-width: thin; scrollbar-color: var(--pink-deep) transparent; }
.wish-item { padding: 1.1rem 1.2rem; border-radius: 18px; background: rgba(255,255,255,.8); border: 1px solid #fff; box-shadow: 0 14px 30px -20px rgba(150,120,140,.5); animation: fadeIn .8s ease both; }
.wish-item b { display: block; font-weight: 400; font-size: 1.1rem; color: var(--ink); }
.wish-item time { display: block; font-family: var(--font-sans); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); margin: .2rem 0 .6rem; }
.wish-item p { font-size: 1.05rem; line-height: 1.7; color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.wishes__empty { text-align: center; font-style: italic; color: var(--ink-soft); }

/* ---------- Footer ---------- */
.footer { padding: 80px 24px 110px; text-align: center; background: linear-gradient(180deg, var(--ice), var(--pink)); }
.footer__script { font-family: var(--font-script); font-size: clamp(2.6rem, 11vw, 3.6rem); color: var(--ink); }
.footer__note { margin-top: 1rem; line-height: 1.85; color: var(--ink-soft); font-style: italic; }
.footer__tag { margin-top: 2rem; font-family: var(--font-sans); font-size: .62rem; letter-spacing: .4em; text-transform: uppercase; color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) {
  .rv, [data-split] .w { transition-duration: .01s; transition-delay: 0s; }
  .stars, .genesis__scroll i { animation: none; }
}


/* =========================================================
   TAHAP 3 — Galeri, carousel ucapan, amplop, penyempurnaan
   ========================================================= */
[hidden] { display: none !important; }

@property --r { syntax: '<length>'; inherits: true; initial-value: 0px; }

/* ---------- Progress scroll ---------- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 95; pointer-events: none; }
.progress i { display: block; width: 100%; height: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--pink-deep), var(--ice-deep)); }

/* ---------- Penyempurnaan kecil ---------- */
.soul.is-in .soul__photo { animation: floaty 9s ease-in-out 2s infinite; }
.soul--bride.is-in .soul__photo { animation-delay: 4.5s; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.cd b.bump { animation: bump .55s var(--ease-out); }
@keyframes bump { from { transform: translateY(-8px); opacity: .25; } to { transform: none; opacity: 1; } }

.map {
  position: relative; height: 240px; margin: 1.8rem auto 0; border-radius: 24px; overflow: hidden;
  border: 1px solid #fff; box-shadow: 0 26px 50px -24px rgba(150,120,140,.5), 0 0 0 6px rgba(255,255,255,.45);
}
.map iframe { width: 100%; height: 100%; border: 0; filter: saturate(.7) contrast(1.03) hue-rotate(-8deg) sepia(.12); }
.map::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 40px rgba(250,219,216,.45); }

/* =========================================================
   GALERI — THE METAMORPHOSIS
   ========================================================= */
.gallery { padding-left: 0; padding-right: 0; padding-bottom: 0; background: linear-gradient(180deg, var(--ice), #fdf1ef 25%, var(--white) 55%, var(--ice)); }
.gallery .section-head { padding: 0 24px; }
.chapter__tag { text-align: center; font-family: var(--font-sans); font-weight: 300; font-size: .68rem; letter-spacing: .5em; padding-left: .5em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: clamp(28px, 5vh, 48px); }

/* --- Babak I: masonry asimetris + parallax kolom --- */
.chapter--light { position: relative; padding: 0 0 clamp(40px, 8vh, 90px); }
.masonry { display: flex; align-items: flex-start; gap: 14px; max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.g-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; will-change: transform; }
.g-col:nth-child(2) { margin-top: 4.5rem; }
.g-col:nth-child(3) { margin-top: 1.8rem; }
@media (min-width: 900px) { .masonry { gap: 26px; } .g-col { gap: 26px; } .g-col:nth-child(2) { margin-top: 7rem; } .g-col:nth-child(3) { margin-top: 3rem; } }

.g-item { position: relative; cursor: zoom-in; outline: none; -webkit-tap-highlight-color: transparent; }
.g-frame {
  position: relative; aspect-ratio: var(--ar, 3/4); overflow: hidden;
  border: 1px solid rgba(255,255,255,.95);
  box-shadow: 0 24px 50px -24px rgba(180,120,135,.5), 0 0 0 5px rgba(255,255,255,.45);
  transition: transform .6s var(--ease-out), box-shadow .6s ease;
  will-change: transform;
}
.shape-arch .g-frame { border-radius: 999px 999px 16px 16px; }
.shape-oval .g-frame { border-radius: 50%; }
.shape-soft .g-frame { border-radius: 22px; }
.shape-pill .g-frame { border-radius: 999px; }
.g-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease-out); }
.g-ph { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(60% 45% at 50% 30%, #fff, transparent 70%), linear-gradient(160deg, var(--pink), var(--ice)); }
.g-item:nth-child(even) .g-ph { background: radial-gradient(60% 45% at 50% 30%, #fff, transparent 70%), linear-gradient(200deg, var(--ice), var(--pink)); }
.g-ph span { font-size: 1.6rem; color: rgba(91,74,79,.28); }
.g-shine { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.6) 50%, transparent 70%); transform: translateX(-130%); transition: transform 1.1s var(--ease-out); }
.g-item figcaption { margin-top: .9rem; text-align: center; font-family: var(--font-sans); font-size: .58rem; letter-spacing: .35em; padding-left: .35em; text-transform: uppercase; color: var(--ink-soft); opacity: .55; transition: opacity .5s, letter-spacing .6s var(--ease-out); }
@media (hover: hover) {
  .g-item:hover .g-frame { box-shadow: 0 34px 60px -22px rgba(201,140,150,.75), 0 0 0 5px rgba(255,255,255,.7), 0 0 50px rgba(250,219,216,.9); }
  .g-item:hover img { transform: scale(1.09); }
  .g-item:hover .g-shine { transform: translateX(130%); }
  .g-item:hover figcaption { opacity: 1; letter-spacing: .5em; }
}
.g-item:focus-visible .g-frame { outline: 2px solid var(--ice-deep); outline-offset: 5px; }

/* --- Transisi senja & fajar --- */
.dusk, .dawn { position: relative; display: grid; height: clamp(240px, 46vh, 440px); padding: 0 24px; }
.dusk { align-items: end; padding-bottom: clamp(30px, 8vh, 80px); background: linear-gradient(180deg, var(--ice) 0%, #cdbfcf 40%, #4a3f58 78%, #14111f 100%); }
.dawn { align-items: start; padding-top: clamp(40px, 9vh, 90px); background: linear-gradient(180deg, #14111f 0%, #3a2f47 30%, #b98f9b 62%, var(--pink) 85%, var(--ice) 100%); }
.dusk p, .dawn p { text-align: center; font-style: italic; font-weight: 300; font-size: clamp(1.2rem, 4.6vw, 1.6rem); letter-spacing: .06em; color: #f3e9ec; }

/* --- Babak II: gelap, sinematik, cahaya senter --- */
.chapter--dark { position: relative; overflow: hidden; color: #f3e9ec; padding: clamp(30px, 6vh, 70px) 24px clamp(90px, 14vh, 160px); background: linear-gradient(180deg, #14111f, #191427 50%, #14111f); }
.chapter__head { position: relative; z-index: 2; text-align: center; max-width: 560px; margin: 0 auto; }
.chapter--dark .eyebrow { color: var(--pink); }
.chapter__title { margin-top: .7em; font-weight: 300; font-style: italic; font-size: clamp(1.9rem, 7vw, 2.8rem); color: #fdf3f1; text-shadow: 0 0 40px rgba(250,219,216,.3); }
.chapter__hint { margin-top: 1.1em; font-family: var(--font-sans); font-weight: 300; font-size: .72rem; letter-spacing: .2em; color: rgba(250,219,216,.7); }
.hint--touch { display: none; }
@media (hover: none) { .hint--pointer { display: none; } .hint--touch { display: inline; } }

.shadows { position: relative; z-index: 2; display: flex; flex-direction: column; gap: clamp(40px, 10vh, 100px); max-width: 1000px; margin: clamp(44px, 8vh, 80px) auto 0; }
.s-item { position: relative; width: min(88%, 500px); cursor: zoom-in; outline: none; }
.s-left { align-self: flex-start; }
.s-right { align-self: flex-end; }
.s-frame {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; background: #0d0b14;
  border: 1px solid rgba(250,219,216,.2); box-shadow: 0 40px 80px -30px rgba(0,0,0,.85);
  --x: 50%; --y: 50%; --r: 0px;
}
.s-item:nth-child(even) .s-frame::before { content: ""; position: absolute; inset: 8px; z-index: 4; border: 1px solid rgba(250,219,216,.14); pointer-events: none; }
.s-frame img, .s-lit { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.s-frame img { filter: brightness(.32) contrast(1.15) saturate(.5); transition: transform 2s var(--ease-out); }
.s-lit {
  background-size: cover; background-position: center; opacity: 0;
  -webkit-mask-image: radial-gradient(circle calc(var(--r) + .1px) at var(--x) var(--y), #000 30%, transparent 100%);
          mask-image: radial-gradient(circle calc(var(--r) + .1px) at var(--x) var(--y), #000 30%, transparent 100%);
  transition: --r .9s var(--ease-out), opacity .4s;
}
.s-item.has-img .s-lit { opacity: 1; }
.s-item.is-lit .s-lit { --r: 1400px; }
.s-item.is-lit .s-frame img { transform: scale(1.04); }
.s-vig { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(90% 90% at 50% 50%, transparent 45%, rgba(8,6,14,.7)); z-index: 3; }
.s-ph { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(60% 50% at 50% 35%, #2a2238, transparent 75%), #0d0b14; }
.s-ph span { color: rgba(250,219,216,.18); font-size: 1.6rem; }
.s-item figcaption { display: flex; align-items: baseline; gap: 14px; margin-top: 1rem; }
.s-item figcaption b { font-weight: 300; font-style: italic; font-size: 1.5rem; color: var(--pink); }
.s-item figcaption span { font-family: var(--font-sans); font-size: .62rem; letter-spacing: .4em; text-transform: uppercase; color: rgba(243,233,236,.65); }
.s-item:focus-visible .s-frame { outline: 2px solid var(--pink-deep); outline-offset: 5px; }
@media (min-width: 820px) {
  .s-item { width: min(62%, 640px); }
  .s-item:nth-child(even) .s-frame { aspect-ratio: 3 / 2; }
  .s-left { margin-left: 4%; } .s-right { margin-right: 4%; }
}

/* ---------- Lightbox ---------- */
html.is-overlay { overflow: hidden; }
.lightbox { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: rgba(253,241,239,.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: fadeIn .4s ease; }
.lightbox[data-theme="dark"] { background: rgba(10,8,16,.95); color: #f3e9ec; }
.lb__fig { margin: 0; text-align: center; max-width: 92vw; touch-action: pan-y; }
.lb__fig img { max-width: 92vw; max-height: 78dvh; border-radius: 6px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.5); opacity: 0; transform: scale(.98); transition: opacity .5s ease, transform .6s var(--ease-out); }
.lb__fig img.is-in { opacity: 1; transform: none; }
.lb__fig figcaption { margin-top: 1rem; font-family: var(--font-sans); font-size: .64rem; letter-spacing: .35em; text-transform: uppercase; color: var(--ink-soft); }
.lightbox[data-theme="dark"] .lb__fig figcaption { color: rgba(243,233,236,.65); }
.lb__close, .lb__nav, .carousel__ctrl button, .panel__head button {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; font-size: 1.6rem; line-height: 1; font-family: var(--font-serif);
  color: var(--ink); background: rgba(255,255,255,.75); border: 1px solid rgba(233,183,178,.7); transition: all .35s var(--ease-out);
}
.lb__close:hover, .lb__nav:hover, .carousel__ctrl button:hover, .panel__head button:hover { background: linear-gradient(120deg, var(--pink), var(--ice)); transform: scale(1.06); }
.lb__close { position: absolute; top: max(16px, env(safe-area-inset-top)); right: 16px; }
.lb__nav { position: absolute; top: 50%; margin-top: -22px; }
.lb__prev { left: 12px; } .lb__next { right: 12px; }
@media (max-width: 600px) { .lb__nav { top: auto; bottom: max(20px, env(safe-area-inset-bottom)); margin: 0; } .lb__prev { left: calc(50% - 60px); } .lb__next { right: calc(50% - 60px); } }

/* =========================================================
   ECHOES — carousel ucapan
   ========================================================= */
.carousel { position: relative; z-index: 2; max-width: 600px; margin: 2.6rem auto 0; text-align: center; }
.carousel__stage { display: grid; touch-action: pan-y; }
.wslide {
  grid-area: 1 / 1; padding: 2.2rem 1.6rem 1.7rem; border-radius: 28px; text-align: center;
  background: linear-gradient(160deg, rgba(255,255,255,.9), rgba(250,219,216,.45)); border: 1px solid #fff;
  box-shadow: 0 30px 60px -30px rgba(150,120,140,.5);
  opacity: 0; visibility: hidden; transform: translateX(40px) scale(.98);
  transition: opacity .9s ease, transform 1s var(--ease-out), visibility 0s linear .9s;
}
.wslide.is-past { transform: translateX(-40px) scale(.98); }
.wslide.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.wslide::before { content: "\201C"; display: block; font-size: 3.4rem; line-height: .6; color: var(--pink-deep); margin-bottom: .3rem; }
.wslide__msg { font-style: italic; font-weight: 300; font-size: clamp(1.15rem, 4.4vw, 1.4rem); line-height: 1.8; color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.wslide__name { margin-top: 1.4rem; font-family: var(--font-sans); font-size: .74rem; letter-spacing: .3em; text-transform: uppercase; color: var(--ink); }
.wslide__time { margin-top: .4rem; font-family: var(--font-sans); font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }
.carousel__bar { width: 120px; height: 2px; margin: 1.4rem auto 0; overflow: hidden; border-radius: 2px; background: rgba(188,211,230,.55); }
.carousel__bar i { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--pink-deep), var(--ice-deep)); }
@keyframes wprog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.carousel__ctrl { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 1rem; font-family: var(--font-sans); font-size: .7rem; letter-spacing: .25em; color: var(--ink-soft); }
.carousel__ctrl button { width: 40px; height: 40px; font-size: 1.4rem; }
.carousel__all { margin-top: 1.6rem; }
.wishes__empty { padding: 2rem 0; }

/* ---------- Panel semua ucapan ---------- */
.panel { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; background: rgba(40,30,45,.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fadeIn .35s ease; }
.panel__box { width: min(560px, 100%); max-height: 86dvh; display: flex; flex-direction: column; padding: 1.2rem 1.2rem 1rem; border-radius: 26px; background: linear-gradient(180deg, #fff, #fdf1ef); box-shadow: 0 40px 90px -30px rgba(0,0,0,.6); }
.panel__head { display: flex; align-items: center; justify-content: space-between; padding: 0 .3rem .8rem; font-family: var(--font-sans); font-size: .7rem; letter-spacing: .32em; text-transform: uppercase; color: var(--ink-soft); }
.panel__head button { width: 38px; height: 38px; font-size: 1.4rem; }
.panel .wishes { margin: 0; max-width: none; max-height: none; overflow-y: auto; flex: 1; }

/* =========================================================
   DIGITAL ENVELOPE — amplop yang bisa dibuka
   ========================================================= */
.envelope { background: linear-gradient(180deg, var(--ice), #fdf1ef 40%, var(--pink) 135%); padding-bottom: clamp(90px, 14vh, 150px); }
.env-wrap { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; text-align: center; }
.env { position: relative; display: block; width: min(300px, 80vw); aspect-ratio: 3 / 2; margin: 0 auto; padding: 0; border: 0; background: none; cursor: pointer; perspective: 900px; -webkit-tap-highlight-color: transparent; }
.env span { position: absolute; display: block; }
.env__body { inset: 0; border-radius: 8px; background: linear-gradient(160deg, #fff, #f8e3e0); box-shadow: 0 30px 60px -24px rgba(180,120,135,.65), 0 0 0 1px rgba(233,183,178,.5); }
.env__pocket { inset: 0; z-index: 2; border-radius: 8px; background: linear-gradient(180deg, #fdf3f1, #f5d9d5); clip-path: polygon(0 0, 50% 58%, 100% 0, 100% 100%, 0 100%); filter: drop-shadow(0 -2px 3px rgba(150,90,100,.15)); }
.env__flap { left: 0; right: 0; top: 0; height: 60%; z-index: 3; background: linear-gradient(180deg, #fff, #f9e5e2); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top center; transition: transform 1s var(--ease-out), z-index 0s linear .45s; }
.env.is-open .env__flap { transform: rotateX(180deg); z-index: 1; }
.env__seal { z-index: 4; left: 50%; top: 60%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; display: grid !important; place-items: center; font-family: var(--font-script); font-size: 1.35rem; color: #fff; background: radial-gradient(circle at 35% 30%, #f3c4be, #d99a95 72%); box-shadow: 0 10px 18px -6px rgba(150,80,90,.6), inset 0 0 0 3px rgba(255,255,255,.35); transition: opacity .5s ease, transform .9s var(--ease-out); animation: pulse 3.2s ease-in-out infinite; }
.env.is-open .env__seal { opacity: 0; transform: scale(.5) translateY(-24px); animation: none; }
@keyframes pulse { 0%, 100% { box-shadow: 0 10px 18px -6px rgba(150,80,90,.6), 0 0 0 0 rgba(250,219,216,.9); } 50% { box-shadow: 0 10px 18px -6px rgba(150,80,90,.6), 0 0 0 14px rgba(250,219,216,0); } }
.env:hover .env__flap:not(.x) { transform: rotateX(14deg); }
.env.is-open:hover .env__flap { transform: rotateX(180deg); }
.env:focus-visible { outline: 2px solid var(--ice-deep); outline-offset: 8px; border-radius: 10px; }
.env__hint { margin-top: 1.5rem; font-family: var(--font-sans); font-size: .64rem; letter-spacing: .35em; text-transform: uppercase; color: var(--ink-soft); transition: opacity .5s; }
.env__hint.is-off { opacity: 0; }
.env__reveal { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 1.2s var(--ease-out), opacity 1s ease .15s; }
.env__reveal.is-open { grid-template-rows: 1fr; opacity: 1; }
.env__inner { overflow: hidden; min-height: 0; }
.env__reveal .cards { padding: 2.2rem 4px 6px; }

@media (prefers-reduced-motion: reduce) {
  .soul.is-in .soul__photo, .env__seal, .cd b.bump { animation: none !important; }
  .wslide, .env__flap, .env__reveal { transition-duration: .01s; }
}

/* carousel: isi slide selalu di tengah agar tinggi kartu seragam */
.wslide { display: flex; flex-direction: column; justify-content: center; }