/* Hanok — undangan pernikahan bergaya lukisan cat air Korea: sampul foto penuh layar, lalu sepasang pintu kisi berkertas
   hanji bergeser ke samping dan memperlihatkan halaman hanok di akhir musim gugur; kain perca jogakbo membawa nama mempelai
   dan cap merah inisial. Selama pembuka digulir daun ginkgo terakhir rontok, salju pertama turun, atap dan halaman memutih,
   pandangan naik ke langit, lalu salju memenuhi layar. Adegannya lapisan gambar (assets/img/*.webp) + CSS. */
@font-face { font-family: "Marcellus"; src: url("fonts/marcellus.woff2") format("woff2"); font-weight: 400; 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; }

:root {
  --bg: #faf3e4; --bg2: #fffaf0; --deep: #7a2230; --deep2: #1f3358; --ink: #2f2a2c; --soft: #6c5f5a; --gold: #c8921e; --gold-hi: #f2d283;
  --aksen: #7a2230; --giok: #44705e; --kayu: #4a2f22; --sky1: #f3e3b8; --sky2: #eef0ef; --card: #fffaf0; --line: #ecdfc4;
  --display: "Marcellus", "Cormorant Garamond", Georgia, serif;
  --serif: "Cormorant Garamond", Georgia, serif;
  --script: "Cormorant Garamond", Georgia, serif;
}
*, *::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(31, 51, 88, .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: rumah & halaman (+ versi
   bersalju .sj, lentera, cahaya lentera, sepasang bebek wonang) → dua ginkgo (+ versi bersalju) → daun gugur → tiga lapis
   salju → daun pintu kisi → putih. Keadaan dasar = pintu sudah terbuka. Sebelum dibuka (.js:not(.is-open)) daun pintu
   menutup layar dan kamera sedikit lebih dekat ke rumah. */
.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% 62%; }
.ly > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.ly > img.sj { opacity: 0; }
/* Langit tambahan di atas lukisan (pantulan tepi atasnya) supaya tidak ada celah saat kamera naik. */
.atas { position: absolute; left: 0; right: 0; bottom: 100%; height: 22%; transform: scaleY(-1); background: url("img/rumah.webp") 50% 0 / 100% 454.5% no-repeat; }
.atas::after { content: ""; position: absolute; inset: 0; background: url("img/rumahsalju.webp") 50% 0 / 100% 454.5% no-repeat; opacity: var(--salju, 0); }
/* Lentera: salinan lukisan yang terpotong di bentuk lentera, berayun dari titik gantungnya. */
.lt { position: absolute; inset: 0; background: url("img/rumah.webp") 0 0 / 100% 100% no-repeat; }
.lt::after { content: ""; position: absolute; inset: 0; background: url("img/rumahsalju.webp") 0 0 / 100% 100% no-repeat; opacity: var(--salju, 0); }
.lt.l { clip-path: polygon(28.4% 50.8%, 33.9% 50.8%, 33.9% 58.2%, 28.4% 58.2%); transform-origin: 31.1% 50.6%; }
.lt.r { clip-path: polygon(66.7% 50.8%, 72.3% 50.8%, 72.3% 58.2%, 66.7% 58.2%); transform-origin: 69.5% 50.6%; }
.cahaya { position: absolute; top: 54.6%; width: 26%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; opacity: .3; background: radial-gradient(closest-side, rgba(255, 196, 120, .8), rgba(255, 170, 90, 0)); mix-blend-mode: screen; }
.cahaya.l { left: 31.1%; } .cahaya.r { left: 69.5%; }
.ly > img.wonang { inset: auto; left: 50%; top: 68.8%; width: 15%; height: auto; translate: -50% 0; }
.daun-gugur { position: absolute; inset: 0; overflow: hidden; }
.daun-gugur i { position: absolute; top: -6%; aspect-ratio: 120 / 138; background: url("img/daun.webp") center / contain no-repeat; }
.daun-gugur i:nth-child(1) { left: 42.3%; width: 16px; animation-duration: 8.9s; animation-delay: -2.6s; }
.daun-gugur i:nth-child(2) { left: 63.7%; width: 16px; animation-duration: 10.5s; animation-delay: -12.6s; }
.daun-gugur i:nth-child(3) { left: 4.1%; width: 19px; animation-duration: 13.6s; animation-delay: -9.8s; }
.daun-gugur i:nth-child(4) { left: 68.8%; width: 13px; animation-duration: 11.9s; animation-delay: -6.3s; }
.daun-gugur i:nth-child(5) { left: 68.5%; width: 13px; animation-duration: 8.2s; animation-delay: -0.7s; }
.daun-gugur i:nth-child(6) { left: 9.2%; width: 20px; animation-duration: 7.4s; animation-delay: -9.6s; }
.daun-gugur i:nth-child(7) { left: 75.0%; width: 12px; animation-duration: 13.4s; animation-delay: -2.9s; }
.daun-gugur i:nth-child(8) { left: 18.4%; width: 17px; animation-duration: 13.2s; animation-delay: -10.8s; }
.daun-gugur i:nth-child(9) { left: 87.1%; width: 17px; animation-duration: 9.0s; animation-delay: -11.3s; }
.daun-gugur i:nth-child(10) { left: 15.9%; width: 11px; animation-duration: 13.2s; animation-delay: -0.8s; }
.daun-gugur i:nth-child(11) { left: 33.9%; width: 18px; animation-duration: 8.0s; animation-delay: -3.3s; }
.daun-gugur i:nth-child(12) { left: 69.6%; width: 12px; animation-duration: 13.7s; animation-delay: -0.1s; }
.daun-gugur i:nth-child(13) { left: 72.4%; width: 14px; animation-duration: 13.3s; animation-delay: -2.8s; }
.daun-gugur i:nth-child(14) { left: -3.2%; width: 12px; animation-duration: 7.9s; animation-delay: -12.8s; }
.salju { position: absolute; left: 0; right: 0; opacity: 0; will-change: transform; }
.s1 { top: -420px; bottom: 0; background: url("img/salju1.svg") 0 0 / 420px 420px; }
.s2 { top: -360px; bottom: 0; background: url("img/salju2.svg") 0 0 / 360px 360px; }
.s3 { top: -480px; bottom: 0; background: url("img/salju3.svg") 0 0 / 480px 480px; }
/* Pintu kisi: satu gambar dibelah dua, tiap daun bergeser ke sisinya. */
.pn { position: absolute; top: 0; bottom: 0; width: 50%; background: url("img/pintu.webp") 0 0 / 200% 100% no-repeat; box-shadow: 0 0 24px rgba(40, 24, 16, .45); }
.pn.l { left: 0; transform: translateX(-104%); }
.pn.r { right: 0; background-position: 100% 0; transform: translateX(104%); }
.js .pn { transition: transform 2.7s cubic-bezier(.5, 0, .2, 1) .5s; }
.js:not(.is-open) .pn { transform: none; }
.js .ly { transition: transform 3.8s cubic-bezier(.3, 0, .2, 1) .5s; }
.js:not(.is-open) .ly-rumah { transform: scale(1.14); }
.js:not(.is-open) .ly-pohon { transform: scale(1.3); }
.js.no-anim .ly, .js.no-anim .pn { transition: none; }
.terang { position: absolute; inset: 0; background: #fff; opacity: 0; }
.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; }

.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; }

.cover-buket { position: absolute; left: 50%; bottom: 22%; width: 42%; max-width: none; translate: -50% 0; pointer-events: none; }
.buket { position: relative; width: 170px; margin: -24px 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 ---------- */
.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; }
.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-date { margin-top: 6px; font: 400 11.5px/1.4 var(--display); letter-spacing: .14em; text-transform: uppercase; }

/* ---------- Isi ---------- */
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: 13em; }
main > section.verse { overflow: hidden; }
.vrang { width: 260px; 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: 400 14px/1.4 var(--display); letter-spacing: .14em; }
.couple { display: flex; flex-direction: column; gap: 34px; width: 100%; margin-top: 8px; }
/* Tiap mempelai: potret di balik sepasang pintu kisi kecil yang bergeser terbuka saat masuk layar, berselang kiri-kanan. */
.person { position: relative; display: grid; grid-template-columns: 46% 1fr; column-gap: 16px; align-items: center; text-align: left; }
.person > * { grid-column: 2; }
.portrait { position: relative; grid-column: 1; grid-row: 1 / span 4; width: 100%; aspect-ratio: 4 / 5; padding: 7px; overflow: hidden; background: var(--kayu); box-shadow: 0 10px 20px -8px rgba(40, 24, 16, .5), inset 0 0 0 2px #6b4a35; }
.portrait > img, .portrait > span { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; object-fit: cover; background: var(--bg2); font: italic 400 60px/1 var(--serif); color: var(--deep); }
.dn { position: absolute; top: 7px; bottom: 7px; width: calc(50% - 7px); background: url("img/pintu.webp") 0 0 / 200% 100% no-repeat; }
.dn.l { left: 7px; transform: translateX(-101%); }
.dn.r { right: 7px; background-position: 100% 0; transform: translateX(101%); }
.js .dn { transition: transform 1.5s cubic-bezier(.5, 0, .2, 1) .35s; }
.js .person:not(.buka) .dn { transform: none; }
.person:nth-child(even) { grid-template-columns: 1fr 46%; text-align: right; }
.person:nth-child(even) > * { grid-column: 1; }
.person:nth-child(even) .portrait { grid-column: 2; }
.person h3 { font: italic 500 30px/1.08 var(--serif); color: var(--deep); 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, #1f3358, #17264a); color: #fff; overflow: hidden; }
main > section.count { padding-bottom: 0; }
main > section.count::after, main > section.rsvp::after { content: ""; position: absolute; left: 0; right: 0; top: -420px; bottom: 0; background: url("img/salju1.svg") 0 0 / 420px 420px; opacity: .3; pointer-events: none; }
main > section.count > *, main > section.rsvp > * { position: relative; z-index: 1; }
/* Sepasang wonang saling mendekat seiring hari akad: --sisa 1 → 0 dipasang JS dari sisa waktu. */
.sepasang { position: relative; width: 240px; height: 100px; margin-top: 12px; }
.dk { position: absolute; bottom: 8px; width: 50%; }
.dk.l { left: 0; translate: calc(var(--sisa, .6) * -42%) 0; }
.dk.r { right: 0; translate: calc(var(--sisa, .6) * 42%) 0; }
.count .script, .rsvp .script, .count .lead { color: #fff; }
.countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; }
.countdown div { aspect-ratio: 1; border: 1px solid var(--gold-hi); outline: 1px dashed rgba(242, 210, 131, .5); outline-offset: -5px; background: rgba(255, 255, 255, .05); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.countdown b { font: 400 25px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.countdown span { font-size: 12.5px; }
html:not(.js) .countdown { display: none; }

.programme { gap: 34px !important; background: linear-gradient(180deg, var(--bg), var(--bg2)) !important; }
/* Kartu acara: kertas hanji dengan pita perca jogakbo di atasnya. */
.event { position: relative; width: 100%; padding: 34px 20px 26px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 16px 28px -18px rgba(40, 24, 16, .4); display: flex; flex-direction: column; align-items: center; gap: 12px; overflow: hidden; }
.event::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: url("img/tepi.webp") 0 0 / auto 100% repeat-x; }
.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: 400 12px/1.6 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.dress { font-size: 17px; font-style: italic; color: var(--soft); }

/* Love Story: tiap kisah sehelai perca yang dijahit menyambung jadi satu kain jogakbo. */
.chapters { list-style: none; padding: 0; width: 100%; display: flex; flex-direction: column; margin-top: 18px; text-align: left; box-shadow: 0 18px 30px -20px rgba(40, 24, 16, .5); }
.chapters li { position: relative; padding: 24px 22px 24px; overflow: hidden; background: var(--deep); color: #fff; outline: 1px dashed rgba(255, 255, 255, .45); outline-offset: -7px; }
.chapters li::before { content: ""; position: absolute; right: 0; top: 0; width: 46px; height: 46px; clip-path: polygon(0 0, 100% 0, 100% 100%); background: var(--gold); }
.chapters li:nth-child(5n+2) { background: #f4e9d2; color: var(--ink); outline-color: rgba(122, 34, 48, .4); }
.chapters li:nth-child(5n+2)::before { background: var(--deep2); }
.chapters li:nth-child(5n+3) { background: var(--deep2); }
.chapters li:nth-child(5n+3)::before { background: var(--deep); }
.chapters li:nth-child(5n+4) { background: #e3b64c; color: var(--ink); outline-color: rgba(47, 42, 44, .4); }
.chapters li:nth-child(5n+4)::before { background: var(--giok); }
.chapters li:nth-child(5n) { background: var(--giok); }
.chapters li:nth-child(5n)::before { background: #f4e9d2; }
.kisah-foto { margin: 2px 0 14px; padding: 5px; background: #fff; }
.kisah-foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.chapters h3 { font: italic 500 29px/1.1 var(--serif); margin-bottom: 6px; padding-right: 26px; }
.chapters p { font-size: 17px; line-height: 1.5; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.grid img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border: 5px solid var(--kayu); box-shadow: 0 10px 22px rgba(40, 24, 16, .16); }
.grid img:nth-child(3n+1) { grid-column: 1 / -1; aspect-ratio: 4 / 3; }

.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(--deep), 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(--gold); font-style: italic; color: var(--soft); }

main > section.closing { padding-top: 80px; background: linear-gradient(180deg, var(--bg), var(--sky2)); }
.merci { font-size: 46px; }
.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(40, 24, 16, .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; }

/* ---------- Kain jogakbo pembawa nama ---------- */
.script { font: italic 500 42px/1.1 var(--serif); color: var(--aksen); }
.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%; text-align: center; color: var(--ink); }
.js .title-wrap { position: absolute; left: 0; top: 6.5vh; }
.bo { position: relative; width: min(82%, 350px); margin: 0 auto; }
/* Dua tali menggantung kain dari atas layar. */
.bo::before, .bo::after { content: ""; position: absolute; bottom: 100%; top: -40vh; width: 1.5px; background: #5a3a28; }
.bo::before { left: 13%; } .bo::after { right: 13%; }
.bo-kain { width: 100%; height: auto; transform-origin: 50% 0; }
.bo-isi { position: absolute; left: 22.5%; right: 22.5%; top: 18.5%; bottom: 16.5%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.bo-isi .caps { font-size: 8.5px; letter-spacing: .2em; color: var(--soft); }
.t-names { display: flex; flex-direction: column; align-items: center; margin: 2px 0; max-width: 100%; }
.t-name { max-width: 100%; font: italic 500 clamp(27px, 8.4vw, 34px)/1 var(--serif); color: var(--deep); overflow-wrap: anywhere; }
.t-amp { font: italic 400 19px/1.05 var(--serif); color: var(--gold); }
.bo-isi .pl-date { margin-top: 3px; font-size: 8px; letter-spacing: .08em; color: var(--soft); white-space: nowrap; }
.cap { position: absolute; right: -2%; bottom: -3%; width: 25px; height: 25px; display: flex; align-items: center; justify-content: center; border-radius: 3px; background: #a8242c; color: #fbeee0; font: 400 10px/1 var(--display); letter-spacing: .02em; rotate: -4deg; box-shadow: inset 0 0 0 1.5px #fbeee0; }
/* Penanda "gulir ke bawah": sehelai daun ginkgo yang berayun jatuh. */
.jatuh { position: absolute; left: 50%; bottom: 3vh; width: 22px; height: 26px; margin-left: -11px; background: url("img/daun.webp") center / contain no-repeat; }
html:not(.js) .title-wrap { padding: 30px 0; } html:not(.js) .jatuh { display: none; }
html:not(.js) .bo::before, html:not(.js) .bo::after { display: none; }
main h2.script::after { content: ""; display: block; width: 190px; max-width: 70vw; height: 24px; margin: 8px auto 0; background: url("img/daun.webp") center / auto 22px no-repeat, linear-gradient(90deg, transparent, var(--gold) 30%, transparent 44%, transparent 56%, var(--gold) 70%, transparent) center / 100% 1px no-repeat; }
.memuat .cover .open { pointer-events: none; opacity: .55; }

/* ---------- Animasi ---------- */
.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; } 
.chapters .rv { translate: 0 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: pintu bergeser (0,5–3,2 dtk) sambil kamera mundur ke halaman → kain terurai dari batangnya
     (2,9–4,4) → nama muncul (4,0–5,0) → cap merah menempel (5,2) → daun penanda gulir (5,6). Berulang: daun gugur, salju,
     lentera berayun, cahaya lentera berkedip, kain tertiup angin, bebek wonang mengangguk. */
  .buket, .cover-buket { animation: ayun 7s ease-in-out infinite; transform-origin: 50% 90%; }
  .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; }
  .daun-gugur i { animation: gugurD 10s linear infinite; }
  .salju { animation: turunS 15s linear infinite; }
  .s2 { animation-duration: 10s; } .s3 { animation-duration: 7s; }
  main > section.count::after, main > section.rsvp::after { animation: turunS 24s linear infinite; }
  .lt { animation: ayunL 4.4s ease-in-out infinite alternate; } .lt.r { animation-duration: 5.2s; animation-direction: alternate-reverse; }
  .cahaya { animation: kedip 2.8s ease-in-out infinite alternate; } .cahaya.r { animation-delay: -1s; }
  .ly > img.wonang { animation: angguk 5s ease-in-out infinite alternate; transform-origin: 50% 100%; }
  .bo { animation: kibas 5.5s ease-in-out infinite alternate; transform-origin: 50% -40vh; }
  .vrang { animation: goyang 5s ease-in-out infinite alternate; }
  .jatuh { animation: jatuhD 2.8s ease-in-out infinite; }
  .dk { animation: angguk 4s ease-in-out infinite alternate; transform-origin: 50% 100%; } .dk.r { animation-delay: -2s; }
  .js:not(.is-open) .bo-kain, .js:not(.is-open) .bo-isi, .js:not(.is-open) .bo::before, .js:not(.is-open) .bo::after { visibility: hidden; }
  .js.is-open:not(.no-anim) .bo-kain { animation: urai 1.5s cubic-bezier(.4, 0, .2, 1) 2.9s both; }
  .js.is-open:not(.no-anim) .bo::before, .js.is-open:not(.no-anim) .bo::after { animation: naik .8s 2.5s both; }
  .js.is-open:not(.no-anim) .bo-isi .caps, .js.is-open:not(.no-anim) .pl-date { animation: naik .9s 4s both; }
  .js.is-open:not(.no-anim) .t-name, .js.is-open:not(.no-anim) .t-amp { animation: naik 1s 4.2s both; }
  .js.is-open:not(.no-anim) .cap { animation: capan .5s cubic-bezier(.3, 1.5, .5, 1) 5.2s both; }
  .js.is-open:not(.no-anim) .hero-pin > .jatuh { animation: naik .6s 5.6s both, jatuhD 2.8s ease-in-out 6.2s infinite; }
}
@keyframes gugurD { from { translate: 0 0; rotate: 0deg; } 50% { translate: 34px 56vh; rotate: 260deg; } to { translate: -8px 116vh; rotate: 560deg; } }
@keyframes turunS { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, var(--tile, 420px), 0); } }
@keyframes ayunL { from { rotate: -1.4deg; } to { rotate: 1.4deg; } }
@keyframes kedip { from { scale: 1; } to { scale: 1.1; } }
@keyframes angguk { from { rotate: -1deg; } to { rotate: 1.2deg; } }
@keyframes kibas { from { rotate: -.5deg; } to { rotate: .5deg; } }
@keyframes goyang { from { rotate: -1.3deg; } to { rotate: 1.3deg; } }
@keyframes jatuhD { 0% { translate: -6px -10px; rotate: -18deg; opacity: 0; } 25% { opacity: 1; } 75% { opacity: 1; } 100% { translate: 6px 12px; rotate: 18deg; opacity: 0; } }
@keyframes urai { from { clip-path: inset(0 -10px 86% -10px); } to { clip-path: inset(0 -10px -10px -10px); } }
@keyframes capan { from { opacity: 0; scale: 2; } 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: -1.5deg; } 50% { rotate: 1.5deg; } }
.s2 { --tile: 360px; } .s3 { --tile: 480px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .rv { opacity: 1; translate: none; scale: none; } *, *::before, *::after { animation: none !important; } .js .ly, .js .pn, .js .dn, .js .vrang { transition: none; } }

/* ---------- Perjalanan gulir: musim gugur berakhir jadi salju pertama ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .hero { min-height: 440vh; min-height: 440svh; }
  /* --p: 0 sama dengan keadaan akhir pembukaan supaya tidak melompat saat .ready dipasang.
     Tahap: kain tergulung naik (.04–.14), --naik kamera naik ke langit (0–.86), daun rontok habis (.14–.36),
     --salju atap & halaman memutih (.18–.58), --lebat salju menebal (.52–.8), --akhir layar memutih (.8–.98). */
  .ready .scene, .ready .hero-pin {
    --naik: clamp(0, var(--p, 0) / .86, 1);
    --salju: clamp(0, (var(--p, 0) - .18) / .4, 1);
    --lebat: clamp(0, (var(--p, 0) - .52) / .28, 1);
    --akhir: clamp(0, (var(--p, 0) - .8) / .18, 1);
    --gulung: clamp(0, (var(--p, 0) - .04) / .1, 1);
  }
  .ready .ly { transition: none; }
  .ready .ly-rumah { transform-origin: 50% 38%; transform: translateY(calc(var(--naik) * 18%)) scale(calc(1 + var(--naik) * .2)); }
  .ready .ly-pohon { transform-origin: 50% 38%; transform: translateY(calc(var(--naik) * 24%)) scale(calc(1 + var(--naik) * .42)); }
  .ready .ly > img.sj { opacity: var(--salju); }
  .ready .ly-pohon > img:not(.sj) { opacity: calc(1 - var(--salju)); }
  .ready .cahaya { opacity: calc(.3 + var(--salju) * .55); }
  .ready .daun-gugur { opacity: calc(1 - clamp(0, (var(--p, 0) - .14) / .22, 1)); }
  .ready .s1 { opacity: clamp(0, (var(--p, 0) - .14) / .1, 1); }
  .ready .s2 { opacity: var(--salju); }
  .ready .s3 { opacity: var(--lebat); }
  .ready .terang { opacity: var(--akhir); }
  .js.is-open.ready .bo-kain, .js.is-open.ready:not(.no-anim) .bo-kain { animation: none; clip-path: inset(0 -10px calc(var(--gulung) * 86%) -10px); }
  .ready .bo-isi { opacity: calc(1 - var(--gulung) * 2.4); }
  .ready .title-wrap { translate: 0 calc(var(--gulung) * -46vh); }
  .js.is-open.ready .hero-pin > .jatuh, .js.is-open.ready:not(.no-anim) .hero-pin > .jatuh { opacity: calc(1 - var(--p, 0) * 12); animation: none; }
}