/* Swastamita — undangan pernikahan bergaya lukisan cat air: sampul foto penuh layar, lalu layar penuh pasir basah dari
   dekat; ombak menyapu seluruh layar lalu surut, dan pandangan naik ke cakrawala: altar kayu berkain tipis, dua kelapa,
   matahari senja. Nama tertulis di pasir tanpa wadah. Selama pembuka digulir pandangan melaju melewati altar menuju
   matahari sampai silaunya memutihkan layar. Adegannya lapisan gambar (assets/img/*.webp) + CSS. */
@font-face { font-family: "Cinzel"; src: url("fonts/cinzel.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-garamond.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-garamond-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Pinyon Script"; src: url("fonts/pinyon-script.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --bg: #fdf3e8; --bg2: #fff9f1; --deep: #b5476a; --deep2: #5f3468; --ink: #4a2c3a; --soft: #80606a; --gold: #d99a55; --gold-hi: #f7d9a6;
  --aksen: #b5476a; --coral: #ee7350; --kayu: #5a3a28; --sky1: #f7b48a; --sky2: #fbe3cf; --card: #fffaf2; --line: #f1dcc6;
  --display: "Cinzel", "Cormorant Garamond", Georgia, serif;
  --serif: "Cormorant Garamond", Georgia, serif;
  --script: "Pinyon Script", "Cormorant Garamond", cursive;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 500 19px/1.55 var(--serif); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
h1, h2, h3, p, ol { margin: 0; }
a { color: var(--deep2); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.page { position: relative; z-index: 1; max-width: 480px; margin: 0 auto; min-height: 100vh; overflow: hidden; }
@media (min-width: 560px) { .page { box-shadow: 0 30px 80px rgba(90, 40, 60, .28); } }

/* Adegan: lapisan gambar selebar kolom halaman, di belakang isi; hanya bagian pembuka (.hero) yang tembus pandang.
   .stage berbanding 940:1684 (ukuran lukisan) dan selalu menutup layar. Lapisan dari belakang: langit & laut (+ matahari
   yang terpotong cakrawala di 44,7%, perahu, kilau, burung) → pasir (+ bibir ombak, lilin) → altar (+ ekor kain) → dua
   kelapa → pasir dekat → sapuan ombak. Keadaan dasar = lukisan utuh. Sebelum dibuka (.js:not(.is-open)) pasir dekat
   menutup layar dan semua lapisan membesar dari tepi bawah, jadi pandangan seolah menunduk ke pasir. */
.scene { position: fixed; top: 0; left: 50%; width: min(100%, 480px); height: 100%; transform: translateX(-50%); z-index: 0; pointer-events: none; overflow: hidden; contain: strict; background: var(--sky1); display: none; }
.js .scene { display: block; }
.scene-off .scene { visibility: hidden; }
.stage { position: absolute; left: 50%; top: 50%; height: max(100%, calc(min(100vw, 480px) * 1.7915)); aspect-ratio: 940 / 1684; translate: -50% -50%; overflow: hidden; }
.ly { position: absolute; inset: 0; will-change: transform; transform-origin: 50% 100%; }
.ly > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.langit-h { position: absolute; left: 0; right: 0; top: 0; height: 44.7%; overflow: hidden; }
.surya { position: absolute; left: 34.1%; top: 72.3%; width: 31.3%; max-width: none; transform-origin: 50% 100%; }
.pijar { position: absolute; left: 50%; top: 40%; width: 110%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 216, 150, .6), rgba(255, 190, 130, .2) 48%, rgba(255, 190, 130, 0)); mix-blend-mode: screen; }
.kilau { position: absolute; inset: 0; }
.kilau i { position: absolute; background: #fff4d6; opacity: 0; clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%); }
.kilau i:nth-child(1) { left: 52.5%; top: 50.3%; width: 8px; height: 8px; animation-duration: 1.9s; animation-delay: -2.0s; }
.kilau i:nth-child(2) { left: 50.1%; top: 60.4%; width: 7px; height: 7px; animation-duration: 1.7s; animation-delay: -1.7s; }
.kilau i:nth-child(3) { left: 54.4%; top: 57.7%; width: 9px; height: 9px; animation-duration: 1.8s; animation-delay: -2.8s; }
.kilau i:nth-child(4) { left: 48.3%; top: 48.7%; width: 10px; height: 10px; animation-duration: 1.7s; animation-delay: -0.4s; }
.kilau i:nth-child(5) { left: 40.4%; top: 57.0%; width: 9px; height: 9px; animation-duration: 2.7s; animation-delay: -2.7s; }
.kilau i:nth-child(6) { left: 43.5%; top: 49.6%; width: 7px; height: 7px; animation-duration: 2.7s; animation-delay: -2.7s; }
.kilau i:nth-child(7) { left: 59.1%; top: 52.3%; width: 7px; height: 7px; animation-duration: 2.1s; animation-delay: -0.1s; }
.kilau i:nth-child(8) { left: 58.5%; top: 60.1%; width: 10px; height: 10px; animation-duration: 1.7s; animation-delay: -1.1s; }
.kilau i:nth-child(9) { left: 42.1%; top: 49.8%; width: 8px; height: 8px; animation-duration: 2.6s; animation-delay: -2.6s; }
.kilau i:nth-child(10) { left: 39.1%; top: 58.2%; width: 9px; height: 9px; animation-duration: 1.9s; animation-delay: -2.6s; }
.kilau i:nth-child(11) { left: 39.2%; top: 47.3%; width: 7px; height: 7px; animation-duration: 2.4s; animation-delay: -0.1s; }
.kilau i:nth-child(12) { left: 51.6%; top: 54.6%; width: 5px; height: 5px; animation-duration: 1.9s; animation-delay: -0.2s; }
.ly > img.perahu { inset: auto; left: 74%; top: 42.3%; width: 7.5%; height: auto; }
.camar { position: absolute; width: 4.2%; opacity: .75; color: #5f3468; } .camar.c1 { left: 20%; top: 20%; } .camar.c2 { left: 30%; top: 25%; width: 3.2%; }
/* Bibir ombak: salinan pasir yang hanya memperlihatkan garis busa, maju-mundur di atas aslinya. */
.bibir { position: absolute; inset: 0; background: url("img/pasir.webp") 0 0 / 100% 100% no-repeat; -webkit-mask-image: linear-gradient(transparent 64%, #000 67%, #000 73%, transparent 77%); mask-image: linear-gradient(transparent 64%, #000 67%, #000 73%, transparent 77%); }
/* Jilatan ombak saat mulai digulir: busa sapuan yang dibalik, turun dari bibir pantai dan menghapus nama di pasir. */
.jilat { position: absolute; left: -2%; right: -2%; top: 56%; height: 20%; opacity: 0; transform: scaleY(-1); background: url("img/sapuan.webp") 0 15% / 100% 340% no-repeat; -webkit-mask-image: linear-gradient(0deg, transparent, #000 45%); mask-image: linear-gradient(0deg, transparent, #000 45%); }
.lilin { position: absolute; inset: 0; }
.lilin i { position: absolute; aspect-ratio: 3 / 4; translate: -50% -50%; border-radius: 2px 2px 3px 3px; background: linear-gradient(#f6c98a, #dc8a4a); box-shadow: 0 2px 2px rgba(120, 60, 40, .35), 0 0 16px 8px rgba(255, 170, 80, .4); }
.lilin i::after { content: ""; position: absolute; left: 50%; top: -55%; width: 44%; height: 62%; translate: -50% 0; border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%; background: radial-gradient(circle at 50% 70%, #fff6c8, #ffc14d 60%, #f08a2c); }
.lilin i:nth-child(1) { left: 29%; top: 72.5%; width: 7px; animation-delay: -0.0s; }
.lilin i:nth-child(2) { left: 71%; top: 72.5%; width: 7px; animation-delay: -0.3s; }
.lilin i:nth-child(3) { left: 24%; top: 77%; width: 9px; animation-delay: -0.7s; }
.lilin i:nth-child(4) { left: 76%; top: 77%; width: 9px; animation-delay: -0.8s; }
.lilin i:nth-child(5) { left: 18%; top: 81.5%; width: 11px; animation-delay: -1.4s; }
.lilin i:nth-child(6) { left: 82%; top: 81.5%; width: 11px; animation-delay: -1.3s; }
/* Ekor kain altar: salinan altar yang terpotong di daerah kain, berayun dari simpul atasnya. */
.kb { position: absolute; inset: 0; background: url("img/altar.webp") 0 0 / 100% 100% no-repeat; }
.kb.l { clip-path: polygon(22% 54%, 34% 54%, 34% 69%, 22% 69%); transform-origin: 30% 54%; }
.kb.r { clip-path: polygon(58% 56%, 77% 56%, 77% 69%, 58% 69%); transform-origin: 62% 56%; }
.ly-kelapa > img { inset: auto; height: auto; }
.ly-kelapa > .kkr { left: 0; top: 34.8%; width: 30.4%; transform-origin: 0 100%; }
.ly-kelapa > .kkn { left: 68.1%; top: 30.3%; width: 31.9%; transform-origin: 100% 100%; }
/* Lapisan senja-malam: warna adegan digelapkan dengan multiply (langit, laut, pasir, altar, kelapa ikut berubah), dibuka
   oleh guliran. Bintang, bulan, dan nyala lilin ada di atasnya supaya tetap terang. */
.tint { position: absolute; inset: 0; opacity: 0; mix-blend-mode: multiply; }
.tint.t1 { background: linear-gradient(180deg, #b0447f, #dc6a7c 46%, #a9507f); }
.tint.t2 { background: linear-gradient(180deg, #17184c, #2a2a70 46%, #3a2f6e); }
.bintang { position: absolute; inset: 0; opacity: 0; }
.bintang i { position: absolute; border-radius: 50%; background: #fff6dc; box-shadow: 0 0 5px 1px rgba(255, 244, 214, .7); }
.bintang i:nth-child(1) { left: 27.0%; top: 16.0%; width: 4px; height: 4px; animation-duration: 3.5s; animation-delay: -3.4s; }
.bintang i:nth-child(2) { left: 5.7%; top: 20.2%; width: 4px; height: 4px; animation-duration: 4.1s; animation-delay: -2.6s; }
.bintang i:nth-child(3) { left: 13.6%; top: 20.3%; width: 2px; height: 2px; animation-duration: 2.4s; animation-delay: -2.2s; }
.bintang i:nth-child(4) { left: 26.4%; top: 30.5%; width: 4px; height: 4px; animation-duration: 2.8s; animation-delay: -0.7s; }
.bintang i:nth-child(5) { left: 18.0%; top: 33.1%; width: 3px; height: 3px; animation-duration: 2.1s; animation-delay: -2.5s; }
.bintang i:nth-child(6) { left: 15.4%; top: 39.9%; width: 2px; height: 2px; animation-duration: 1.8s; animation-delay: -3.1s; }
.bintang i:nth-child(7) { left: 85.0%; top: 13.3%; width: 2px; height: 2px; animation-duration: 4.1s; animation-delay: -2.2s; }
.bintang i:nth-child(8) { left: 20.1%; top: 39.8%; width: 2px; height: 2px; animation-duration: 2.3s; animation-delay: -3.9s; }
.bintang i:nth-child(9) { left: 31.1%; top: 16.1%; width: 3px; height: 3px; animation-duration: 2.2s; animation-delay: -0.6s; }
.bintang i:nth-child(10) { left: 34.2%; top: 33.9%; width: 2px; height: 2px; animation-duration: 3.2s; animation-delay: -2.4s; }
.bintang i:nth-child(11) { left: 9.2%; top: 15.9%; width: 3px; height: 3px; animation-duration: 2.5s; animation-delay: -2.8s; }
.bintang i:nth-child(12) { left: 48.2%; top: 29.5%; width: 2px; height: 2px; animation-duration: 1.9s; animation-delay: -3.9s; }
.bintang i:nth-child(13) { left: 92.2%; top: 15.9%; width: 2px; height: 2px; animation-duration: 2.8s; animation-delay: -2.2s; }
.bintang i:nth-child(14) { left: 37.4%; top: 24.6%; width: 3px; height: 3px; animation-duration: 1.8s; animation-delay: -0.2s; }
.bintang i:nth-child(15) { left: 61.6%; top: 39.2%; width: 2px; height: 2px; animation-duration: 2.1s; animation-delay: -1.0s; }
.bintang i:nth-child(16) { left: 35.4%; top: 15.8%; width: 3px; height: 3px; animation-duration: 3.1s; animation-delay: -3.1s; }
.bintang i:nth-child(17) { left: 58.4%; top: 32.5%; width: 2px; height: 2px; animation-duration: 2.7s; animation-delay: -1.2s; }
.bintang i:nth-child(18) { left: 91.9%; top: 5.6%; width: 3px; height: 3px; animation-duration: 2.6s; animation-delay: -2.4s; }
.bintang i:nth-child(19) { left: 35.0%; top: 38.0%; width: 2px; height: 2px; animation-duration: 3.1s; animation-delay: -1.2s; }
.bintang i:nth-child(20) { left: 31.8%; top: 33.2%; width: 3px; height: 3px; animation-duration: 3.3s; animation-delay: -2.9s; }
.bintang i:nth-child(21) { left: 96.7%; top: 8.3%; width: 3px; height: 3px; animation-duration: 1.9s; animation-delay: -3.9s; }
.bintang i:nth-child(22) { left: 89.8%; top: 3.2%; width: 4px; height: 4px; animation-duration: 3.6s; animation-delay: -1.4s; }
.bintang i:nth-child(23) { left: 45.8%; top: 18.4%; width: 3px; height: 3px; animation-duration: 1.9s; animation-delay: -3.7s; }
.bintang i:nth-child(24) { left: 78.4%; top: 15.0%; width: 2px; height: 2px; animation-duration: 2.3s; animation-delay: -3.9s; }
.bintang i:nth-child(25) { left: 92.3%; top: 26.6%; width: 4px; height: 4px; animation-duration: 3.7s; animation-delay: -0.4s; }
.bintang i:nth-child(26) { left: 38.1%; top: 4.3%; width: 3px; height: 3px; animation-duration: 2.8s; animation-delay: -0.6s; }
.bulan { position: absolute; left: 72%; top: 11%; width: 15%; aspect-ratio: 1; border-radius: 50%; opacity: 0; background: radial-gradient(circle at 42% 40%, #fffbe9, #f8e7b8 62%, #e9cf97); box-shadow: 0 0 34px 12px rgba(255, 240, 200, .4); }
.jalur { position: absolute; left: 79.5%; top: 44.8%; width: 15%; height: 19%; translate: -50% 0; opacity: 0; background: repeating-linear-gradient(180deg, rgba(255, 244, 210, .7) 0 2px, transparent 2px 9px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent), linear-gradient(#000, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent), linear-gradient(#000, transparent); mask-composite: intersect; }
.lampu { position: absolute; left: 47%; top: 59%; width: 66%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; opacity: 0; background: radial-gradient(closest-side, rgba(255, 190, 110, .55), rgba(255, 170, 90, .18) 55%, rgba(255, 170, 90, 0)); mix-blend-mode: screen; }
.ly-dekat { opacity: 0; }
.sapuan { position: absolute; left: 0; top: 0; width: 100%; height: 125%; transform: translateY(100%); }
.sapuan img { display: block; width: 100%; height: 100%; }
.js .ly { transition: transform 3.4s cubic-bezier(.45, 0, .2, 1) 1.75s; }
.js .ly-dekat { transition: opacity .01s linear 1.75s; }
.js:not(.is-open) .ly-dekat { opacity: 1; }
.js:not(.is-open) .ly-langit { transform: scale(1.35); }
.js:not(.is-open) .ly-pasir, .js:not(.is-open) .ly-nyala { transform: scale(2); }
.js:not(.is-open) .ly-altar { transform: scale(1.8); }
.js:not(.is-open) .ly-kelapa { transform: scale(1.6); }
.js.no-anim .ly, .js.no-anim .ly-dekat { transition: none; }
.strip { position: relative; width: calc(100% + 56px); margin: -64px -28px 0; -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 80%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 80%, transparent); }
.strip img { display: block; width: 100%; height: auto; }
.terang { position: absolute; inset: 0; background: radial-gradient(circle at 50% 42%, #fff 0, #fffaf0 55%, var(--bg) 100%); opacity: 0; }

.caps { font: 500 13px/1.4 var(--display); letter-spacing: .34em; text-transform: uppercase; }
.script { font: 400 50px/1.05 var(--script); color: var(--deep2); }
.lead { font-size: 18px; line-height: 1.6; color: var(--soft); max-width: 22em; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 26px; border: 1px solid var(--deep2); border-radius: 12px; background: var(--deep2); color: #fff; text-decoration: none; cursor: pointer; font: 600 13px/1 var(--display); letter-spacing: .22em; text-transform: uppercase; }
.btn-line { background: transparent; color: inherit; border-color: currentColor; }
.btn.copied { background: var(--gold); border-color: var(--gold); color: #fff; }

/* Rangkaian bunga lukisan: di sampul tanpa foto, dan buket di penutup. */
.cover-buket { position: absolute; left: 50%; bottom: 20%; width: 56%; max-width: none; translate: -50% 0; opacity: .92; pointer-events: none; }
.buket { position: relative; width: 230px; margin: -30px auto 0; pointer-events: none; }

/* ---------- Sampul: foto penuh layar dengan gradasi gelap, nama di atas, tamu dan tombol di bawah ---------- */
.cover { position: relative; min-height: 100vh; min-height: 100svh; padding: 54px 26px 44px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center; background: linear-gradient(180deg, var(--bg2), var(--bg) 55%, color-mix(in srgb, var(--deep) 45%, var(--bg))); color: var(--ink); overflow: hidden; }
.cover[hidden] { display: none; }
.cover-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover.has-photo { color: #fff; }
.cover.has-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 10, 12, .55) 0%, rgba(20, 10, 12, .05) 34%, rgba(20, 10, 12, .1) 56%, rgba(20, 10, 12, .78) 100%); }
.cover.has-photo .cover-art { display: none; }
.cover-art { position: absolute; inset: 0; }
.cover-top, .cover-bottom { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cover .names { font: 500 34px/1.15 var(--display); letter-spacing: .08em; text-transform: uppercase; overflow-wrap: anywhere; }
.names .amp { margin: 0 .25em; font: 400 40px/1 var(--script); text-transform: none; letter-spacing: 0; }
.cover:not(.has-photo) .cover-top { margin-top: 26vh; }
.to { font-size: 16px; line-height: 1.5; opacity: .9; }
.guest-name { font: 600 24px/1.2 var(--serif); overflow-wrap: anywhere; }
.cover .open { margin-top: 10px; min-width: 230px; min-height: 48px; border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .22); color: inherit; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cover:not(.has-photo) .open { border-color: var(--deep2); background: var(--deep2); color: #fff; }

/* Dengan JS: sampul menutup layar sampai tamu menekan "Buka undangan", lalu memudar dan taman terlihat. */
.js .cover { position: fixed; top: 0; bottom: 0; left: 50%; width: min(100%, 480px); transform: translateX(-50%); z-index: 40; overflow-y: auto; transition: opacity .9s ease; }
.js:not(.is-open) body { overflow: hidden; }
.js.is-open .cover { opacity: 0; pointer-events: none; }
.js.no-anim .cover { transition: none; }
html:not(.js) .cover .open { display: none; }

/* ---------- Pembuka: nama tertulis di pasir (lihat bagian akhir berkas) ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; padding: 44px 20px; display: grid; place-items: center; text-align: center; background: linear-gradient(180deg, var(--sky1), var(--sky2)); }
.js .hero { background: none; }
.frame-art { position: absolute; inset: 0; overflow: hidden; }
.pl-name { font: 500 40px/1.15 var(--display); letter-spacing: .14em; text-transform: uppercase; overflow-wrap: anywhere; }
.pl-name.small { font-size: 22px; margin-top: 10px; }
.pl-and { font: 400 34px/1 var(--script); color: var(--deep2); }
.pl-date { margin-top: 10px; font: 500 15px/1.4 var(--display); letter-spacing: .2em; text-transform: uppercase; }

/* ---------- Isi: bagian berlatar pasir, blok jingga-ungu senja ---------- */
main > section:not(.hero) { position: relative; padding: 64px 28px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; background: var(--bg); }
.verse { background: linear-gradient(180deg, var(--bg2), var(--bg)) !important; }
.quote { position: relative; font: italic 500 20px/1.6 var(--serif); max-width: 11.5em; }
main > section.verse { overflow: hidden; }
.vrang { width: 240px; margin: -8px auto -6px; transform-origin: 50% 0; }
.js .vrang { transition: scale 1.2s cubic-bezier(.3, 1.3, .4, 1) .2s, opacity .6s ease .2s; }
.js .verse:not(.buka) .vrang { scale: .3; opacity: 0; }




.source { font: 600 14px/1.4 var(--display); letter-spacing: .14em; }
.couple { display: flex; flex-direction: column; gap: 34px; width: 100%; margin-top: 8px; }
/* Tiap mempelai: potret bundar di atas cangkang kerang, teks di sisinya, berselang kiri-kanan. */
.person { position: relative; display: grid; grid-template-columns: 54% 1fr; column-gap: 14px; align-items: center; text-align: left; }
.person > * { grid-column: 2; }
.ckr, .portrait { grid-column: 1; grid-row: 1 / span 4; }
.ckr { display: block; width: 100%; height: auto; max-width: none; }
.portrait { justify-self: center; align-self: center; width: 64%; aspect-ratio: 1; margin-top: 2%; padding: 4px; border-radius: 50%; background: var(--card); display: flex; box-shadow: 0 6px 16px rgba(90, 40, 60, .3); z-index: 1; }
.portrait > * { flex: 1; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.portrait span { display: flex; align-items: center; justify-content: center; background: var(--bg2); font: 400 60px/1 var(--script); color: var(--deep2); }
.person:nth-child(even) { grid-template-columns: 1fr 54%; text-align: right; }
.person:nth-child(even) > * { grid-column: 1; }
.person:nth-child(even) .ckr, .person:nth-child(even) .portrait { grid-column: 2; }
.js .ckr { transition: scale 1.1s cubic-bezier(.3, 1.4, .45, 1) .15s, rotate 1.1s ease .15s, opacity .4s ease .15s; }
.js .person:not(.buka) .ckr { scale: .25; rotate: -50deg; opacity: 0; }
.js .person:nth-child(even):not(.buka) .ckr { rotate: 50deg; }
.person h3 { font: 400 30px/1.08 var(--script); color: var(--deep2); overflow-wrap: anywhere; }
.parents { font-size: 14.5px; line-height: 1.4; color: var(--soft); max-width: 16em; }
.ig { font-size: 14px; font-weight: 700; color: var(--deep2); }

main > section.count, main > section.rsvp { background: linear-gradient(180deg, #f39a6b, #dd5f6e 34%, #a23f77 68%, var(--deep2)); color: #fff; overflow: hidden; }
main > section.count { padding-bottom: 0; }
/* Matahari turun ke laut mendekati hari akad: --sisa 1 → 0 dipasang JS dari sisa waktu. */
.terbenam { --sisa: inherit; position: relative; width: calc(100% + 56px); height: 132px; margin: 8px -28px 0; overflow: hidden; }
.mt { position: absolute; left: 50%; top: calc(10px + (1 - var(--sisa, .6)) * 62px); width: 88px; height: 88px; margin-left: -44px; border-radius: 50%; background: radial-gradient(circle at 50% 42%, #ffe39b, #ffb757 62%, #f58a4b); box-shadow: 0 0 40px 14px rgba(255, 196, 120, .5); }
.laut { position: absolute; left: 0; right: 0; bottom: 0; height: 58px; background: linear-gradient(180deg, #6b3a78, #4a2c60); box-shadow: inset 0 2px 0 rgba(255, 215, 170, .4); }
.laut::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 70px; margin-left: -35px; background: repeating-linear-gradient(180deg, rgba(255, 210, 150, .75) 0 2px, transparent 2px 8px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent); mask-image: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent); }
.terbenam .pr { position: absolute; left: 12%; bottom: 46px; width: 58px; filter: brightness(.7); }
.count .script, .rsvp .script, .count .lead { color: #fff; }
.countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: 100%; }
.countdown div { aspect-ratio: 1; border: 1.5px solid var(--gold-hi); border-radius: 50%; box-shadow: inset 0 0 0 4px rgba(236, 217, 160, .18); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; }
.countdown b { font: 500 25px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.countdown span { font-size: 12.5px; }



html:not(.js) .countdown { display: none; }

.programme { gap: 44px !important; background: linear-gradient(180deg, var(--bg), var(--bg2)) !important; }
.programme { padding-top: 84px !important; }
.event { position: relative; width: 92%; margin-top: 30px; padding: 0 20px 26px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 16px 28px -16px rgba(90, 40, 60, .35); display: flex; flex-direction: column; align-items: center; gap: 12px; align-self: flex-start; }
.event:nth-of-type(even) { align-self: flex-end; }
/* Judul acara di papan kayu apung yang mengambang di tepi kartu. */
.event h2.script { display: flex; align-items: center; justify-content: center; width: 96%; aspect-ratio: 640 / 248; margin: -52px 0 0; padding: 0 15% 2% 12%; background: url("img/papan.webp") center / 100% 100% no-repeat; color: var(--kayu); font: 600 19px/1.1 var(--display); letter-spacing: .06em; white-space: nowrap; text-shadow: 0 1px 0 rgba(255, 240, 215, .55); }
.event h2.script::after { display: none !important; }
.when { font: 600 19px/1.5 var(--serif); }
.where { font-size: 17px; line-height: 1.5; color: var(--soft); max-width: 17em; overflow-wrap: anywhere; }
.where b { display: block; font: 600 12px/1.6 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.dress { font-size: 17px; font-style: italic; color: var(--soft); }

.chapters { list-style: none; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 40px; margin-top: 18px; text-align: left; }
/* Tiap kisah = surat dari botol: kertas sedikit miring, berselang kiri-kanan, botol hanyut di sudutnya. */
.chapters li { position: relative; width: 88%; padding: 22px 18px 18px; background: #fdf1da; border: 1px solid #efd9b4; border-radius: 3px; box-shadow: 0 12px 20px -14px rgba(90, 40, 60, .4); rotate: -.9deg; }
.chapters li:nth-child(even) { margin-left: auto; rotate: .9deg; }
.chapters li::after { content: ""; position: absolute; right: 8px; top: -24px; width: 104px; height: 38px; background: url("img/botol.webp") center / contain no-repeat; }
.chapters li:nth-child(even)::after { right: auto; left: 8px; scale: -1 1; }
.kisah-foto { margin: 0 0 12px; }
.kisah-foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; }
.chapters h3 { font: 400 34px/1.05 var(--script); color: var(--deep); margin-bottom: 6px; }
.chapters p { font-size: 17px; line-height: 1.55; color: var(--soft); }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.grid img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 3px; border: 6px solid var(--card); border-bottom-width: 24px; box-shadow: 0 10px 22px rgba(90, 40, 60, .14); }
.grid img:nth-child(3n+1) { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
.grid img:nth-child(3n+2) { rotate: -1.6deg; } .grid img:nth-child(3n) { rotate: 1.6deg; translate: 0 14px; }
.gallery .grid { padding-bottom: 14px; }

.gift-list { display: grid; gap: 12px; width: 100%; }
.gift-card { position: relative; overflow: hidden; padding: 16px 18px 16px 30px; border-radius: 6px; background: var(--card); border: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; }
.bank { font: 600 12px/1.4 var(--display); letter-spacing: .22em; text-transform: uppercase; color: var(--deep2); }
.number { font-size: 22px; font-weight: 700; letter-spacing: .04em; overflow-wrap: anywhere; }
.holder { font-size: 15px; color: var(--soft); }
.gift-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: linear-gradient(var(--coral), var(--deep2)); }
.gift-card .btn { flex-shrink: 0; min-height: 42px; padding: 0 16px; }
.address { width: 100%; padding: 14px 16px; border-radius: 14px; border: 1px dashed var(--line); font-size: 16px; line-height: 1.5; color: var(--soft); text-align: left; }

.note { width: 100%; padding: 14px 16px; border: 1px dashed rgba(255, 255, 255, .7); border-radius: 14px; font-size: 16px; }
.thanks { width: 100%; padding: 22px 18px; border-radius: 18px; background: rgba(255, 255, 255, .16); display: flex; flex-direction: column; gap: 6px; }
.thanks .big { font: 400 38px/1.1 var(--script); }
.form { width: 100%; display: flex; flex-direction: column; gap: 14px; text-align: left; }
.field { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; border: 0; font-size: 16px; font-weight: 700; }
.field legend { padding: 0 0 6px; }
.field input, .field textarea { width: 100%; min-height: 48px; padding: 0 14px; border: 0; border-radius: 12px; background: #fff; color: var(--ink); font: 500 18px/1.4 var(--serif); }
.field textarea { padding: 12px 14px; min-height: 110px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--gold-hi); outline-offset: 1px; }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opt { position: relative; }
.opt input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.opt span { display: flex; align-items: center; justify-content: center; min-height: 48px; border: 1.5px solid rgba(255, 255, 255, .8); border-radius: 12px; font: 600 13px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.opt input:checked + span { background: #fff; color: var(--deep2); }
.opt input:focus-visible + span { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.rsvp .btn { min-height: 50px; background: #fff; border-color: #fff; color: var(--deep2); }

main > section.wishes-box { align-items: stretch; text-align: left; gap: 0; padding-top: 30px; }
.wishes-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.wishes-head h2 { font: 400 36px/1.1 var(--script); color: var(--deep2); }
.wishes-head span { font-size: 15px; color: var(--soft); white-space: nowrap; }
.wishes { list-style: none; margin: 12px 0 0; padding: 0; max-height: 560px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.wishes li { padding: 14px 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.wish-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wish-head b { font-size: 18px; }
.tag { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--gold); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.status { font-size: 14px; font-weight: 700; color: var(--deep2); }
.wish-text { font-size: 17px; line-height: 1.5; color: var(--soft); overflow-wrap: anywhere; }
.wish-reply { margin-top: 6px; padding: 8px 12px; border-left: 2px solid var(--r2); font-style: italic; color: var(--soft); }

main > section.closing { padding-top: 90px; background: linear-gradient(180deg, var(--bg), var(--sky2)); }

/* Penutup: matahari benar-benar terbenam saat bagian ini terlihat. */
.tutup { position: relative; width: 64%; aspect-ratio: 1 / 1.15; margin-top: 10px; border: 6px solid #fff; border-radius: 999px 999px 4px 4px; overflow: hidden; background: linear-gradient(180deg, #8a4f8f, #e0627a 46%, #f7a064 74%, #fbd08f); box-shadow: 0 16px 30px -12px rgba(90, 40, 60, .4); }
.tm { position: absolute; left: 50%; top: 66%; width: 42%; aspect-ratio: 1; margin-left: -21%; border-radius: 50%; background: radial-gradient(circle at 50% 42%, #ffe6a3, #ffb45a 66%, #f4874a); box-shadow: 0 0 34px 12px rgba(255, 200, 130, .55); }
.tl { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(180deg, #7a3c7a, #4a2c60); box-shadow: inset 0 2px 0 rgba(255, 215, 170, .45); }
.js .tm { transition: top 6s cubic-bezier(.4, 0, .4, 1) .6s; }
.js .closing:not(.buka) .tm { top: 24%; }
.merci { font-size: 54px; }
.thanks-line { font-size: 17px; font-style: italic; color: var(--soft); }
footer { position: relative; padding: 18px 16px 26px; text-align: center; font-size: 14px; color: var(--soft); background: var(--sky2); }

.music-toggle { position: fixed; bottom: 16px; right: max(14px, calc(50% - 226px)); z-index: 50; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--deep2); color: #fff; cursor: pointer; box-shadow: 0 8px 18px rgba(90, 40, 60, .3); }
.music-toggle svg { width: 18px; height: 18px; }
.music-toggle[aria-pressed="false"]::after { content: ""; position: absolute; width: 24px; height: 1.5px; background: #fff; transform: rotate(-45deg); }
html:not(.js) .music-toggle, .js:not(.is-open) .music-toggle { display: none; }

/* ---------- Animasi ---------- */
/* Isi muncul bertahap saat digulir (kelas .rv dipasang swastamita.js): judul turun, foto membesar, mempelai dari kiri/kanan. */
.rv { opacity: 0; translate: 0 26px; }
.rv.script { translate: 0 -22px; }
.rv.portrait { translate: 0 0; scale: .86; }
.grid .rv { translate: 0 40px; scale: .8; }
.rv.event { translate: -40px 0; } .rv.event:nth-of-type(even) { translate: 40px 0; }
.chapters .rv { translate: -46px 22px; }
.countdown .rv { translate: 0 0; scale: .3; }
.gift-list .rv { translate: 40px 0; }
.person:nth-child(odd) .rv { translate: -30px 0; } .person:nth-child(even) .rv { translate: 30px 0; }
.rv.in { opacity: 1; translate: 0 0; scale: 1; transition: opacity .9s cubic-bezier(.2, .7, .2, 1) calc(var(--d, 0) * 1ms), translate .9s cubic-bezier(.2, .7, .2, 1) calc(var(--d, 0) * 1ms), scale .9s cubic-bezier(.2, .7, .2, 1) calc(var(--d, 0) * 1ms); }
@media (prefers-reduced-motion: no-preference) {
  /* Urutan sesudah .is-open: ombak menyapu layar (0,2–1,7 dtk) lalu surut sampai 3,6; pasir dekat hilang di balik ombak;
     pandangan naik ke cakrawala (1,75–5,1) → nama tergores di pasir (4,6–6,4) → jejak kaki (6,6). Berulang: bibir ombak,
     kelapa bergoyang, ekor kain berkibar, perahu & burung melintas, kilau di air, lilin berkedip, matahari berpijar. */
  .buket { animation: ayun 7s ease-in-out infinite; transform-origin: 50% 80%; }
  .cover-top { animation: turun 1.2s .2s both; } .cover-bottom { animation: naik 1.2s .5s both; }
  .cover .open { animation: denyut 2.8s 2s ease-in-out infinite; }
  .js.is-open:not(.no-anim) .sapuan { animation: sapu 3.4s cubic-bezier(.45, 0, .3, 1) .2s both; }
  .bibir { animation: bibirO 6s ease-in-out infinite; }
  .bintang i { animation: kelip2 3s ease-in-out infinite; }
  .lampu { animation: nyalaL 2.6s ease-in-out infinite alternate; }
  .ly-kelapa > .kkr { animation: goyangK 7s ease-in-out infinite alternate; }
  .ly-kelapa > .kkn { animation: goyangK 8.5s ease-in-out -2s infinite alternate-reverse; }
  .kb { animation: kibarK 3.6s ease-in-out infinite alternate; } .kb.r { animation-duration: 4.3s; animation-direction: alternate-reverse; }
  .perahu { animation: lintasP 80s linear infinite alternate; }
  .kilau i { animation: kelip2 2.4s ease-in-out infinite; }
  .pijar { animation: sinar 6s ease-in-out infinite alternate; }
  .lilin i { animation: lilinK 1.8s ease-in-out infinite alternate; }
  .camar.c1 { animation: terbang1 24s ease-in-out infinite; } .camar.c2 { animation: terbang2 30s ease-in-out infinite; }
  .camar path { animation: kepakC 1.4s ease-in-out infinite alternate; transform-origin: 50% 70%; }
  .vrang { animation: goyang 5s ease-in-out infinite alternate; }
  .js.is-open:not(.no-anim) .title-wrap .caps, .js.is-open:not(.no-anim) .pl-date { animation: naik 1s 4.6s both; }
  .js.is-open:not(.no-anim) .pl-date { animation-delay: 6s; }
  .js.is-open:not(.no-anim) .t-name { animation: gores 1s 4.8s ease-in-out both; }
  .js.is-open:not(.no-anim) .t-amp { animation: naik .5s 5.7s both; }
  .js.is-open:not(.no-anim) .t-name.t2 { animation-delay: 5.9s; }
  .js.is-open:not(.no-anim) .hero-pin > .tapak { animation: naik .6s 6.6s both; }
  .tapak i { animation: langkah 2.7s ease-in-out infinite; } .tapak i:nth-child(2) { animation-delay: .45s; } .tapak i:nth-child(3) { animation-delay: .9s; }
  .event h2.script { animation: apung 4.5s ease-in-out infinite alternate; }
  .event:nth-of-type(even) h2.script { animation-delay: -2s; }
  .chapters li::after { animation: apung 5s ease-in-out infinite alternate; }
  .terbenam .pr { animation: lintasK 26s linear -6s infinite; }

}
@keyframes geserS { from { scale: 1.16; translate: 0 5%; } to { scale: 1; translate: 0 -3%; } }
@keyframes putarK { to { rotate: 360deg; } }
@keyframes berlayar { from { translate: 0 0; } to { translate: -320% 6%; } }
@keyframes ayunK { from { rotate: -2deg; } to { rotate: 2.5deg; } }
@keyframes kepakC { from { scale: 1 1; } to { scale: 1 .45; } }
@keyframes turunU { from { translate: 0 -120%; opacity: 0; } 30% { opacity: 1; } }
@keyframes lintasK { from { left: -64px; } to { left: 100%; } }
@keyframes nyalaL { from { scale: 1; } to { scale: 1.08; } }
@keyframes sapu { 0% { transform: translateY(100%); } 45%, 58% { transform: translateY(-20.5%); } 100% { transform: translateY(100%); } }
@keyframes bibirO { 0%, 100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-1.4%) scaleY(1.03); } }
@keyframes goyangK { from { rotate: -.7deg; } to { rotate: 1.3deg; } }
@keyframes kibarK { from { transform: skewX(-1.3deg); } to { transform: skewX(1.6deg); } }
@keyframes lintasP { from { translate: 0 0; } to { translate: -780% 0; } }
@keyframes lilinK { from { opacity: 1; } to { opacity: .72; } }
@keyframes gores { from { clip-path: inset(-20% 100% -20% -5%); opacity: .4; } to { clip-path: inset(-20% -5% -20% -5%); opacity: 1; } }
@keyframes langkah { 0%, 60%, 100% { opacity: .25; } 25% { opacity: 1; } }
@keyframes apung { from { translate: 0 -3px; rotate: -.7deg; } to { translate: 0 4px; rotate: .7deg; } }
@keyframes goyangP { from { rotate: -1.6deg; } to { rotate: 1.8deg; } }
@keyframes goyang { from { rotate: -1.3deg; } to { rotate: 1.3deg; } }
@keyframes geserA { from { translate: -6% 0; } to { translate: 8% 0; } }
@keyframes asap { 0% { opacity: 0; transform: translate(0, 0) scale(.6, .4) rotate(0deg); } 20% { opacity: .8; } 100% { opacity: 0; transform: translate(14px, -46px) scale(2.2, 1.5) rotate(14deg); } }
@keyframes naikT { from { opacity: 0; translate: 0 34%; } to { opacity: 1; translate: 0 0; } }
@keyframes bukaT { from { scale: .1 1.18; } to { scale: 1 1; } }
@keyframes urai { from { clip-path: inset(0 -20px 100% -20px); } to { clip-path: inset(0 -20px -30px -20px); } }
@keyframes jatuhK { 0% { translate: -8px -10px; rotate: 0deg; opacity: 0; } 18% { opacity: 1; } 100% { translate: 8px 30px; rotate: 210deg; opacity: 0; } }
@keyframes gugur { from { translate: 0 0; } to { translate: 70px 112vh; } }
@keyframes kibar { from { rotate: -50deg; scale: 1 1; } to { rotate: 190deg; scale: .5 1; } }
@keyframes kelip { 0%, 100% { opacity: 0; translate: 0 0; } 50% { opacity: .75; translate: 6px -26px; } }
@keyframes kepak { from { scale: 1 1; } to { scale: .2 1; } }
@keyframes terbang1 { 0%, 100% { translate: 0 0; rotate: 20deg; } 25% { translate: 70px -60px; rotate: -10deg; } 50% { translate: 150px -20px; rotate: 30deg; } 75% { translate: 60px 30px; rotate: -25deg; } }
@keyframes terbang2 { 0%, 100% { translate: 0 0; rotate: -20deg; } 30% { translate: -90px 40px; rotate: 15deg; } 60% { translate: -150px -10px; rotate: -30deg; } 80% { translate: -50px -40px; rotate: 20deg; } }
@keyframes alir { to { stroke-dashoffset: -14; } }
@keyframes riak { from { scale: .4; opacity: .9; } to { scale: 2.6; opacity: 0; } }
@keyframes apung2 { from { translate: -1px 0; rotate: -.25deg; } to { translate: 1px 0; rotate: .25deg; } }
@keyframes kelip2 { 0%, 100% { scale: .3; opacity: 0; } 50% { scale: 1.1; opacity: .95; } }
@keyframes sinar { from { opacity: .55; } to { opacity: 1; } }
@keyframes napas { from { scale: 1; } to { scale: 1.035; } }
@keyframes silau { 0%, 100% { opacity: 0; } 50% { opacity: .5; } }
@keyframes mekarR { from { opacity: 0; scale: -.3 .3; } to { opacity: 1; scale: -1 1; } }
@keyframes naik2 { from { opacity: 0; translate: 0 50%; } to { opacity: 1; translate: 0 0; } }
@keyframes kabut { from { opacity: .9; } to { opacity: 0; } }
@keyframes toleh { from { rotate: -4deg; } to { rotate: 5deg; } }
@keyframes kibas { from { rotate: -1.2deg; } to { rotate: 1.2deg; } }
@keyframes plakat { from { opacity: 0; translate: 0 26px; scale: .94; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes mekar { from { opacity: 0; scale: .3; } to { opacity: 1; scale: 1; } }
@keyframes turun { from { opacity: 0; translate: 0 -18px; } to { opacity: 1; translate: 0 0; } }
@keyframes naik { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes denyut { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } 50% { box-shadow: 0 0 0 9px rgba(255, 255, 255, .18); } }
@keyframes ayun { 0%, 100% { rotate: -2deg; } 50% { rotate: 2deg; } }
@keyframes gulir { 0% { translate: 0 0; opacity: 1; } 70% { translate: 0 12px; opacity: 0; } 100% { translate: 0 0; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .rv { opacity: 1; translate: none; scale: none; } *, *::before, *::after { animation: none !important; } .js .ly, .js .ly-dekat, .js .ckr, .js .tm, .js .vrang { transition: none; } .sapuan { display: none; } }
.js body.locked { overflow: visible; }

/* ---------- Pembuka Swastamita: nama ditulis di pasir tanpa wadah (huruf cekung lewat bayangan dua arah), muncul seperti
   digores jari. Selama pembuka digulir (.ready, --p 0→1 dipasang swastamita.js) senja benar-benar berlalu: bibir ombak
   menjilat dan menghapus nama, kamera maju pelan sementara kelapa menyingkir, matahari tenggelam, langit jingga jadi
   magenta lalu malam, bintang dan bulan muncul, lilin menyala; terakhir ombak besar naik menutup layar sampai putih. ---------- */
.script, .person h3, .wishes-head h2 { color: var(--aksen); }
.count .script, .rsvp .script { color: #fff; }
.hero-pin { display: grid; place-items: start center; width: 100%; position: relative; }
.js .hero { display: block; padding: 0; }
.js .hero-pin { position: fixed; left: 50%; bottom: 0; width: min(100%, 480px); height: 100vh; height: 100svh; translate: -50% 0; pointer-events: none; overflow: hidden; }
.scene-off .hero-pin { visibility: hidden; }
.title-wrap { width: 100%; padding: 0 18px; text-align: center; color: #a4603f; }
.js .title-wrap { position: absolute; left: 0; bottom: 9.5vh; }
.title-wrap .caps { font-size: 10.5px; letter-spacing: .26em; color: #9a6248; }
.t-names { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 10px; margin: 2px 0 4px; }
.t-name { display: inline-block; padding: 0 .12em; font: 400 clamp(38px, 12vw, 50px)/1.1 var(--script); color: #a4603f; text-shadow: 0 1px 0 rgba(255, 244, 226, .95), 0 -1px 1px rgba(110, 55, 35, .45); overflow-wrap: anywhere; }
.t-amp { font: 400 26px/1 var(--script); color: var(--deep); text-shadow: 0 1px 0 rgba(255, 244, 226, .9); }
.title-wrap .pl-date { margin: 0; font: 600 11px/1.5 var(--display); letter-spacing: .16em; text-transform: uppercase; color: #8a5238; }
/* Penanda "gulir ke bawah": tiga jejak kaki bergantian. */
.tapak { position: absolute; left: 50%; bottom: 2.4vh; width: 46px; height: 40px; margin-left: -23px; }
.tapak i { position: absolute; width: 10px; height: 16px; background: #a4603f; border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%; opacity: .25; box-shadow: 0 1px 0 rgba(255, 244, 226, .8); }
.tapak i:nth-child(1) { left: 12px; bottom: 0; rotate: -8deg; } .tapak i:nth-child(2) { left: 25px; bottom: 11px; rotate: 8deg; } .tapak i:nth-child(3) { left: 12px; bottom: 23px; rotate: -8deg; }
html:not(.js) .title-wrap { padding: 40px 18px; } html:not(.js) .hero-pin > .tapak { display: none; }
main h2.script::after { content: ""; display: block; width: 200px; max-width: 70vw; height: 30px; margin: 8px auto 0; background: url("img/jejak.svg") center / contain no-repeat; }
.count h2.script::after, .rsvp h2.script::after { filter: brightness(0) invert(1); opacity: .6; }
/* Tepi atas blok senja bergerigi ombak. */
main > section.count::before, main > section.rsvp::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 12px; background: radial-gradient(14px 12px at 14px 0, var(--bg2) 13px, transparent 14px) 0 0 / 28px 12px repeat-x; }
.memuat .cover .open { pointer-events: none; opacity: .55; }
@media (prefers-reduced-motion: no-preference) {
  .js .hero { min-height: 480vh; min-height: 480svh; }
  /* Nilai di --p: 0 sama dengan keadaan akhir pembukaan supaya tidak melompat saat .ready dipasang.
     Tahap guliran: --hapus nama (.03–.3), --maju kamera (0–.82), --senja matahari tenggelam (.12–.55), --malam (.42–.78), --akhir ombak penutup (.8–1). */
  .ready .scene, .ready .hero-pin {
    --maju: clamp(0, var(--p, 0) / .82, 1);
    --senja: clamp(0, (var(--p, 0) - .12) / .43, 1);
    --malam: clamp(0, (var(--p, 0) - .42) / .36, 1);
    --akhir: clamp(0, (var(--p, 0) - .8) / .18, 1);
    --hapus: min(clamp(0, (var(--p, 0) - .03) / .11, 1), clamp(0, (.3 - var(--p, 0)) / .14, 1));
  }
  .ready .ly { transition: none; }
  .ready .ly-langit { transform-origin: 50% 44.7%; transform: scale(calc(1 + var(--maju) * .12)); }
  .ready .surya { transform: translateY(calc(var(--senja) * 106%)); }
  .ready .jilat { opacity: clamp(0, var(--hapus) * 4, 1); translate: 0 calc(var(--hapus) * 95%); }
  .ready .ly-pasir, .ready .ly-nyala { transform-origin: 50% 66%; transform: translateY(calc(var(--maju) * 7%)) scale(calc(1 + var(--maju) * .55)); }
  .ready .ly-altar { transform-origin: 50% 62%; transform: translateY(calc(var(--maju) * 3%)) scale(calc(1 + var(--maju) * .6)); }
  .ready .ly-kelapa { transform-origin: 50% 46%; transform: scale(calc(1 + var(--maju) * .45)); }
  .ready .ly-kelapa > .kkr { translate: calc(var(--maju) * -40%) 0; }
  .ready .ly-kelapa > .kkn { translate: calc(var(--maju) * 40%) 0; }
  .ready .tint.t1 { opacity: calc(var(--senja) * .78); }
  .ready .tint.t2 { opacity: calc(var(--malam) * .88); }
  .ready .bintang { opacity: var(--malam); }
  .ready .bulan { opacity: var(--malam); translate: 0 calc((1 - var(--malam)) * 60%); }
  .ready .jalur { opacity: calc(var(--malam) * .7); }
  .ready .lampu { opacity: calc(var(--malam) * .65); }
  .js.is-open.ready .sapuan, .js.is-open.ready:not(.no-anim) .sapuan { animation: none; transform: translateY(calc(100% - var(--akhir) * 120.5%)); }
  .ready .title-wrap { opacity: calc(1 - clamp(0, (var(--p, 0) - .05) / .08, 1)); translate: 0 calc(var(--p, 0) * 40px); }
  .ready .hero-pin > .tapak { opacity: calc(1 - var(--p, 0) * 12); }
  .ready .terang { opacity: clamp(0, (var(--p, 0) - .93) / .06, 1); }
}

/* Foto tiap kisah cinta (opsional, sub-field stories.photo): polaroid kecil di atas judul, miring bergantian. */
.kisah-foto { margin: 2px 0 14px; padding: 6px 6px 20px; background: #fff; border-radius: 3px; box-shadow: 0 10px 22px rgba(30, 20, 20, .16); rotate: -1.4deg; }
:nth-child(even) > .kisah-foto { rotate: 1.4deg; }
.kisah-foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; }