/* Kayon — undangan pernikahan adat Jawa bergaya lukisan cat air: sampul foto penuh layar, lalu kelir dengan gunungan
   (kayon) wayang di bawah cahaya blencong; gunungan bergetar dan dicabut ke samping, kelir memudar, pandangan turun
   dari langit ke pendhapa joglo dengan pelaminan gebyok, lampu gantung menyala, kembar mayang bergoyang, lalu kain
   batik judul digelar. Adegannya lapisan gambar (assets/img/*.webp) yang digerakkan CSS, tanpa pustaka. */
@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: #f4ecdf; --bg2: #fbf6ee; --deep: #8a6a4a; --deep2: #6b4d32; --ink: #4a3525; --soft: #7d6a58; --gold: #b58d48; --gold-hi: #e3cf9f;
  --aksen: #8c3b2e; --r1: #fbf3e4; --r2: #f0dfc2; --r3: #d9b98a; --sky1: #f6e7c8; --card: #fffaf1; --line: #e6d8c3;
  --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(70, 45, 20, .28); } }

/* Adegan: lapisan gambar selebar kolom halaman, di belakang isi; hanya bagian pembuka (.hero) yang tembus pandang.
   .stage berbanding 1536:2752 (ukuran lukisan) dan selalu menutup layar; semua lapisan memakai bingkai yang sama, jadi
   di skala 1 bertumpuk menjadi lukisan utuh: latar (langit, gunung) → tanah → pendhapa (+ lampu gantung dan sepasang
   kembar mayang) → beringin. Itu keadaan dasar. Sebelum dibuka (.js:not(.is-open)) seluruhnya tertutup kelir dengan
   gunungan di tengah, dan lapisan di baliknya digeser turun sehingga saat kelir memudar pandangan mulai dari langit. */
.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.7917)); aspect-ratio: 1536 / 2752; translate: -50% -50%; }
.ly { position: absolute; inset: 0; will-change: transform; transform-origin: 50% 60%; backface-visibility: hidden; }
.ly > img:not(.kembar) { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.fx { position: absolute; inset: 0; width: 100%; height: 100%; }
.js .ly { transition: transform 4.2s cubic-bezier(.6, 0, .2, 1) 2.4s; }
.js:not(.is-open) .ly-bg { transform: translateY(8%) scale(1.18); }
.js:not(.is-open) .ly-ground { transform: translateY(62%) scale(1.5); }
.js:not(.is-open) .ly-house { transform: translateY(40%) scale(1.5); }
.js:not(.is-open) .ly-trees { transform: translateY(26%) scale(1.75); }
.js.no-anim .ly, .js.no-anim .kelir, .js.no-anim .lampu i { transition: none; }
.kembar { position: absolute; top: 52%; width: 12.95%; height: auto; max-width: none; transform-origin: 50% 100%; } .kembar.l { left: 20.03%; } .kembar.r { left: 67.03%; scale: -1 1; }
.lampu { position: absolute; left: 45%; top: 44.5%; width: 10%; transform-origin: 50% 0; }
.lampu img { display: block; width: 100%; height: auto; max-width: none; }
.lampu i { position: absolute; left: 50%; top: 62%; width: 240%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 240, 190, .8), rgba(255, 214, 130, .3) 42%, transparent); transition: opacity .8s ease 6.2s; }
.js:not(.is-open) .lampu i { opacity: 0; }
.surya { position: absolute; left: 50%; top: 22%; width: 150%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 250, 228, .55), transparent 70%); }
.bw { fill: none; stroke: var(--ink); stroke-width: 4.4; stroke-linecap: round; stroke-linejoin: round; opacity: .5; transform-box: fill-box; transform-origin: 50% 100%; }
.birds { translate: -360px 700px; }
/* Kelir (layar wayang) dan gunungan: menutup adegan sampai dibuka. */
.kelir { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(120, 80, 40, .2), transparent 14%, transparent 86%, rgba(120, 80, 40, .2)), linear-gradient(180deg, #5a3a22 0, #5a3a22 3%, #f7ecd4 3.4%, #fbf3df 50%, #f3e4c4 96.6%, #5a3a22 97%); opacity: 0; transition: opacity 2.2s ease 2.3s; }
.js:not(.is-open) .kelir { opacity: 1; }
.blencong { position: absolute; left: 50%; top: 46%; width: 190%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 214, 130, .7), rgba(255, 190, 90, .25) 45%, transparent 70%); }
.kayon-w { position: absolute; left: 16.18%; top: 9%; width: 67.63%; transform-origin: 50% 96%; opacity: 0; }
.js:not(.is-open) .kayon-w { opacity: 1; }
.kayon { display: block; width: 100%; height: auto; max-width: none; } /* tanpa filter: drop-shadow pada gambar di dalam .scene (contain: strict) membuatnya tidak tergambar */
.petals { position: absolute; inset: 0; }
.petals i { position: absolute; top: -4%; border-radius: 60% 40% 60% 40%; background: radial-gradient(circle at 40% 40%, #fff, #f6ecd6); box-shadow: 0 1px 2px rgba(70, 45, 20, .25); display: none; }
.veil { position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, #fff8e0 0, rgba(255, 244, 210, .7) 40%, transparent 78%); opacity: 0; }
.terang { position: absolute; inset: 0; background: radial-gradient(circle at 50% 58%, #fff 0, #fffaf0 60%, var(--bg) 100%); opacity: 0; }
.strip { position: relative; width: calc(100% + 56px); margin: -64px -28px 0; -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 78%, transparent); mask-image: linear-gradient(transparent, #000 12%, #000 78%, transparent); }
.strip img { display: block; width: 100%; height: auto; }
.petals i:nth-child(1) { left: 30%; width: 7px; height: 11px; animation-duration: 13.4s, 4.4s; animation-delay: -5.7s, -3.7s; opacity: 0.7; }
.petals i:nth-child(2) { left: 48%; width: 8px; height: 9px; animation-duration: 13.1s, 2.4s; animation-delay: -7.6s, -1.8s; opacity: 0.7; }
.petals i:nth-child(3) { left: 16%; width: 8px; height: 10px; animation-duration: 11.6s, 3s; animation-delay: -10.9s, -1.7s; opacity: 0.9; }
.petals i:nth-child(4) { left: 75%; width: 10px; height: 7px; animation-duration: 14s, 3.8s; animation-delay: -12.3s, -2.2s; opacity: 0.6; }
.petals i:nth-child(5) { left: 62%; width: 11px; height: 8px; animation-duration: 12s, 3.1s; animation-delay: -11s, -1.7s; opacity: 0.8; }
.petals i:nth-child(6) { left: 87%; width: 10px; height: 11px; animation-duration: 10.2s, 2.4s; animation-delay: -9.2s, -2.1s; opacity: 0.8; }
.petals i:nth-child(7) { left: 17%; width: 7px; height: 8px; animation-duration: 10.6s, 3.7s; animation-delay: -3.1s, -0.8s; opacity: 0.8; }
.petals i:nth-child(8) { left: 5%; width: 11px; height: 8px; animation-duration: 15.2s, 4s; animation-delay: -2.1s, -3.8s; opacity: 0.9; }
.petals i:nth-child(9) { left: 68%; width: 10px; height: 11px; animation-duration: 16.7s, 4.1s; animation-delay: -3.3s, -2.7s; opacity: 0.9; }
.petals i:nth-child(10) { left: 92%; width: 10px; height: 11px; animation-duration: 16.4s, 2.8s; animation-delay: -9.4s, -3.3s; opacity: 0.6; }
.petals i:nth-child(11) { left: 75%; width: 7px; height: 9px; animation-duration: 11.8s, 3.3s; animation-delay: -1.8s, -3.7s; opacity: 0.6; }
.petals i:nth-child(12) { left: 90%; width: 11px; height: 10px; animation-duration: 13.5s, 3.8s; animation-delay: -2.1s, -1.8s; opacity: 0.6; }

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

/* Hiasan lukisan: rangkaian di bawah foto mempelai, gunungan di sampul tanpa foto, buket di penutup. */
.spray { position: relative; width: 220px; margin: -52px auto 0; pointer-events: none; }
.cover-kayon { position: absolute; left: 50%; bottom: 16%; width: 46%; max-width: none; translate: -50% 0; opacity: .9; pointer-events: none; }
.buket { position: relative; width: 200px; 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: judul di kain batik yang digelar (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; }
.mouse { display: block; margin-top: 18px; width: 22px; height: 36px; border: 1.5px solid var(--ink); border-radius: 12px; position: relative; opacity: .7; }
.mouse::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--ink); animation: gulir 1.6s ease-in-out infinite; }

/* ---------- Isi: bagian berlatar krem dan cokelat sogan bergantian ---------- */
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 { font: italic 500 21px/1.6 var(--serif); max-width: 20em; }
.source { font: 600 14px/1.4 var(--display); letter-spacing: .14em; }
.couple { display: flex; flex-direction: column; gap: 44px; width: 100%; margin-top: 8px; }
.person { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.portrait { width: 230px; height: 300px; padding: 7px; border: 1.5px solid var(--gold); border-radius: 999px 999px 18px 18px; background: var(--card); display: flex; }
.portrait > * { flex: 1; width: 100%; height: 100%; border-radius: 999px 999px 12px 12px; object-fit: cover; }
.portrait span { display: flex; align-items: center; justify-content: center; background: var(--bg2); font: 400 90px/1 var(--script); color: var(--deep2); }
.person h3 { font: 400 42px/1.05 var(--script); color: var(--deep2); overflow-wrap: anywhere; }
.parents { font-size: 17px; line-height: 1.45; color: var(--soft); max-width: 16em; }
.ig { font-size: 16px; font-weight: 700; color: var(--deep2); }

main > section.count, main > section.rsvp { background: linear-gradient(180deg, var(--deep), var(--deep2)); color: #fff; }
.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 { padding: 14px 0 12px; border: 1.5px solid rgba(255, 255, 255, .75); border-radius: 14px; display: flex; flex-direction: column; gap: 2px; }
.countdown b { font: 500 30px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.countdown span { font-size: 15px; }
html:not(.js) .countdown { display: none; }

.programme { gap: 26px !important; background: linear-gradient(180deg, var(--bg), var(--bg2)) !important; }
.event { width: 100%; padding: 34px 22px 30px; border-radius: 110px 110px 22px 22px; background: var(--card); border: 1.5px solid var(--gold); outline: 1px solid var(--gold-hi); outline-offset: -8px; box-shadow: 0 18px 40px rgba(70, 45, 20, .12); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.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: 18px; text-align: left; }
.chapters li { position: relative; padding: 20px 20px 20px 26px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.chapters li::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 4px; border-radius: 2px; background: var(--r2); }
.chapters h3 { font: 400 34px/1.05 var(--script); color: var(--deep2); 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: 16px; border: 4px solid var(--card); box-shadow: 0 10px 22px rgba(70, 45, 20, .14); }
.grid img:nth-child(3n+1) { grid-column: 1 / -1; aspect-ratio: 4 / 3; }

.gift-list { display: grid; gap: 12px; width: 100%; }
.gift-card { padding: 16px 18px; border-radius: 18px; 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 .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)); }

.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(70, 45, 20, .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 kayon.js): judul turun, foto membesar, mempelai dari kiri/kanan. */
.rv { opacity: 0; translate: 0 26px; }
.rv.script { translate: 0 -22px; }
.rv.portrait, .grid .rv, .rv.event { translate: 0 0; scale: .86; }
.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: gunungan bergetar lalu dicabut ke kiri (0,3–2,9 dtk) → kelir memudar (2,3–4,5) → pandangan turun dari
     langit ke pendhapa (2,4–6,6) → lampu gantung menyala → kain batik judul digelar (6,8).
     Berulang terus: kedip blencong, goyang kembar mayang & lampu, burung melintas, melati gugur. */
  .petals i { display: block; animation-name: gugur, kibar; animation-timing-function: linear, ease-in-out; animation-iteration-count: infinite; animation-direction: normal, alternate; }
  .blencong { animation: kedipB 1.7s ease-in-out infinite alternate; }
  .js:not(.is-open) .kayon-w { animation: ayunK 4s ease-in-out infinite alternate; }
  .js.is-open:not(.no-anim) .kayon-w { animation: cabut 2.6s .3s cubic-bezier(.5, 0, .4, 1) both; }
  .kembar.l { animation: goyangL 5s ease-in-out infinite alternate; } .kembar.r { animation: goyangL 6s ease-in-out infinite alternate-reverse; }
  .lampu { animation: goyangL 7s ease-in-out infinite alternate; }
  .js.is-open .lampu i { animation: nyalaL 2.6s 7.4s ease-in-out infinite alternate; }
  .birds { animation: lintas 28s 6s linear infinite; } .bw { animation: sayap .5s ease-in-out infinite alternate; } .bw.b2 { animation-delay: -.2s; } .bw.b3 { animation-delay: -.35s; }
  .js.is-open:not(.no-anim) .veil { animation: silau 3s 2.6s ease-in-out both; }
  .js.is-open:not(.no-anim) .kain { animation: gelar 1.5s 6.8s cubic-bezier(.3, .9, .4, 1) both; }
  .js.is-open:not(.no-anim) .kain-t { animation: naik 1s 7.7s both; }
  .js.is-open:not(.no-anim) .hero-pin > .mouse { animation: naik 1s 8.3s both; }
  .spray { animation: ayun 6s ease-in-out infinite; transform-origin: 50% 100%; } .buket { animation: ayun 7s ease-in-out infinite; transform-origin: 50% 20%; }
  .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; }
}
@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 apung { from { translate: -2px 1px; } to { translate: 2px -1px; } }
@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 .kelir, .js .lampu i { transition: none; } }
.js body.locked { overflow: visible; }

/* ---------- Pembuka Kayon: judul di kain batik (gambar kain.webp, teks HTML di panel gadingnya) yang digelar dari
   galahnya di langit atas pendhapa. Selama pembuka digulir (.ready, --p 0→1 dipasang kayon.js) pandangan menyusuri
   jalan batu, naik ke pendhapa, sampai ke depan gebyok, lalu layar memutih. ---------- */
.script, .person h3, .chapters 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; padding: 4.5vh 0 0; pointer-events: none; overflow: hidden; }
.scene-off .hero-pin { visibility: hidden; }
.title-wrap { width: min(74%, 300px); }
.kain { position: relative; }
.kain > img { display: block; width: 100%; height: auto; max-width: none; }
.kain-t { position: absolute; left: 24.03%; right: 23.72%; top: 30.3%; bottom: 25.45%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; text-align: center; color: var(--ink); }
.kain-t .caps { font-size: 7px; letter-spacing: .24em; color: var(--soft); }
.t-name { font: 400 clamp(19px, 6.3vw, 26px)/1.05 var(--script); color: var(--aksen); overflow-wrap: anywhere; }
.t-name .amp { font-size: .78em; color: var(--gold); }
.kain-t .pl-date { margin: 1px 0 0; font-size: 8px; letter-spacing: .12em; }
.hero-pin > .mouse { position: absolute; left: 50%; bottom: 5vh; margin: 0 0 0 -11px; border-color: #fff; opacity: .92; filter: drop-shadow(0 1px 3px rgba(70, 45, 20, .7)); } .hero-pin > .mouse::after { background: #fff; }
html:not(.js) .hero-pin { padding: 40px 0; } html:not(.js) .hero-pin > .mouse { display: none; }
main h2.script::after { content: ""; display: block; width: 230px; max-width: 80vw; height: 20px; margin: 8px auto 0; background: url("img/pembatas.webp") center / contain no-repeat; }
.memuat .cover .open { pointer-events: none; opacity: .55; }
@media (prefers-reduced-motion: no-preference) {
  .js .hero { min-height: 250vh; min-height: 250svh; }
  /* Perjalanan gulir: aktif setelah pembukaan selesai. Di --p: 0 semua nilainya sama dengan keadaan akhir pembukaan. */
  .ready .ly { transition: none; }
  .ready .ly-bg { transform: scale(calc(1 + var(--p, 0) * .25)); }
  .ready .ly-house { transform: scale(calc(1 + var(--p, 0) * var(--p, 0) * 3.8)); }
  .ready .ly-ground { transform: translateY(calc(var(--p, 0) * 34%)) scale(calc(1 + var(--p, 0) * 2.6)); }
  .ready .ly-trees { transform: scale(calc(1 + var(--p, 0) * 2.4)); opacity: calc(1 - (var(--p, 0) - .22) * 4); }
  .ready .title-wrap { opacity: calc(1 - var(--p, 0) * 5); translate: 0 calc(var(--p, 0) * -140px); }
  .ready .hero-pin > .mouse { opacity: calc(.92 - var(--p, 0) * 6); }
  .ready .terang { opacity: calc((var(--p, 0) - .64) * 3.2); }
  .ready .petals { opacity: calc(1 - var(--p, 0) * 2.5); }
}
@keyframes kedipB { from { opacity: .7; scale: .97; } to { opacity: 1; scale: 1.03; } }
@keyframes ayunK { from { rotate: -1.4deg; } to { rotate: 1.4deg; } }
@keyframes cabut { 0% { opacity: 1; translate: 0 0; rotate: 0deg; } 6% { rotate: -5deg; } 12% { rotate: 5deg; } 18% { rotate: -4deg; } 24% { rotate: 4deg; } 32% { rotate: 0deg; translate: 0 -3%; opacity: 1; } 100% { opacity: 0; translate: -135% -6%; rotate: -32deg; } }
@keyframes goyangL { from { rotate: -1.2deg; } to { rotate: 1.2deg; } }
@keyframes nyalaL { from { opacity: .6; } to { opacity: 1; } }
@keyframes lintas { from { translate: -360px 700px; } to { translate: 1800px 420px; } }
@keyframes sayap { from { scale: 1 1; } to { scale: 1 -.6; } }
@keyframes gelar { from { clip-path: inset(0 0 86% 0); opacity: 0; } 12% { opacity: 1; } to { clip-path: inset(0 0 -6% 0); opacity: 1; } }

/* Perjalanan gulir versi mulus: di peramban yang mendukung scroll-driven animation (kayon.js memasang .gulir-css),
   gerak lapisan dijalankan langsung oleh peramban mengikuti posisi gulir (0 → akhir pembuka, 150svh), bukan lewat
   variabel --p yang diperbarui JS tiap frame. Nilai awal dan akhirnya sama dengan rumus --p di atas. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    html.gulir-css.ready .ly-bg { animation: g-bg linear both; }
    html.gulir-css.ready .ly-house { animation: g-house cubic-bezier(.33, 0, .67, .33) both; }
    html.gulir-css.ready .ly-ground { animation: g-ground linear both; }
    html.gulir-css.ready .ly-trees { animation: g-trees linear both; }
    html.gulir-css.ready .terang { animation: g-terang linear both; }
    html.gulir-css.ready .petals { animation: g-pudar linear both; }
    html.gulir-css.ready .title-wrap { animation: g-judul linear both; }
    html.js.is-open.gulir-css.ready .hero-pin > .mouse { animation: g-mouse linear both; }
    html.gulir-css.ready .ly-bg, html.gulir-css.ready .ly-house, html.gulir-css.ready .ly-ground, html.gulir-css.ready .ly-trees, html.gulir-css.ready .terang, html.gulir-css.ready .petals, html.gulir-css.ready .title-wrap, html.js.is-open.gulir-css.ready .hero-pin > .mouse { animation-timeline: scroll(root block); animation-range: 0 150vh; animation-range: 0 150svh; }
  }
}
@keyframes g-bg { from { transform: scale(1); } to { transform: scale(1.25); } }
@keyframes g-house { from { transform: scale(1); } to { transform: scale(4.8); } }
@keyframes g-ground { from { transform: translateY(0) scale(1); } to { transform: translateY(34%) scale(3.6); } }
@keyframes g-trees { 0% { transform: scale(1); opacity: 1; } 22% { opacity: 1; } 47% { opacity: 0; } 100% { transform: scale(3.4); opacity: 0; } }
@keyframes g-terang { 0%, 64% { opacity: 0; } 95%, 100% { opacity: 1; } }
@keyframes g-pudar { 0% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes g-judul { 0% { opacity: 1; translate: 0 0; } 20% { opacity: 0; translate: 0 -28px; } 100% { opacity: 0; translate: 0 -140px; } }
@keyframes g-mouse { 0% { opacity: .92; } 15%, 100% { opacity: 0; } }

/* ---------- Bagian isi khas Kayon. Tata letaknya sengaja berbeda dari template lukisan lain: mempelai berselang
   kiri-kanan dengan potret berbentuk gunungan, hitung mundur berupa medali "gong" di pita parang, acara sebagai garis
   waktu beruntai melati, kisah cinta digeser menyamping, galeri mosaik, dan gunungan ditancapkan lagi di penutup.
   Ornamen (.orn) digerakkan saat bagiannya terlihat (.tampak dipasang kayon.js); keadaan dasarnya = sudah tampil. ---------- */
.orn { position: absolute; pointer-events: none; max-width: none; }
main > section:not(.hero) { overflow: hidden; background-color: var(--bg); background-image: radial-gradient(circle at 0 0, rgba(107, 77, 50, .04) 0 7px, transparent 7.5px), radial-gradient(circle at 100% 0, rgba(107, 77, 50, .04) 0 7px, transparent 7.5px), radial-gradient(circle at 0 100%, rgba(107, 77, 50, .04) 0 7px, transparent 7.5px), radial-gradient(circle at 100% 100%, rgba(107, 77, 50, .04) 0 7px, transparent 7.5px); background-size: 26px 26px; }
/* Kutipan: di atas kelir, diapit dua gunungan kecil. */
main > section.verse { padding: 96px 62px 84px !important; background: linear-gradient(180deg, var(--deep2) 0 10px, transparent 10px calc(100% - 10px), var(--deep2) calc(100% - 10px)), radial-gradient(closest-side at 50% 50%, rgba(255, 214, 130, .45), transparent), #f8eeda !important; }
.verse .kl, .verse .kr { top: 50%; width: 92px; translate: 0 -50%; opacity: .92; transition: translate 1.4s cubic-bezier(.2, .8, .3, 1) .2s, rotate 1.4s cubic-bezier(.2, .8, .3, 1) .2s, opacity 1s ease .2s; }
.verse .kl { left: -38px; rotate: 8deg; } .verse .kr { right: -38px; rotate: -8deg; }
/* Mempelai: berselang kiri-kanan, potret berbentuk daun gunungan. */
.couple { gap: 18px; }
.person { display: grid; grid-template-columns: 148px 1fr; grid-template-areas: "foto nama" "foto ortu" "foto ig" "bunga ."; column-gap: 16px; align-items: center; text-align: left; }
.person:nth-of-type(even) { grid-template-columns: 1fr 148px; grid-template-areas: "nama foto" "ortu foto" "ig foto" ". bunga"; text-align: right; }
.person .portrait { grid-area: foto; width: 148px; height: 204px; padding: 5px; border-radius: 50% 50% 14px 14px / 64% 64% 14px 14px; }
.person .portrait > * { border-radius: 50% 50% 10px 10px / 64% 64% 10px 10px; }
.person .spray { grid-area: bunga; width: 150px; margin: -34px 0 0; }
.person h3 { grid-area: nama; align-self: end; font-size: 36px; }
.person .parents { grid-area: ortu; max-width: none; font-size: 16px; }
.person .ig { grid-area: ig; align-self: start; }
.dan { font: 400 54px/1 var(--script); color: var(--gold); text-align: center; }
/* Hitung mundur: pita sogan bermotif parang, lampu gantung di atas, angka dalam medali gong. */
main > section.count { padding-top: 120px; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .06) 0 14px, transparent 14px 28px), linear-gradient(180deg, var(--deep), var(--deep2)); background-size: 200% 200%, auto; }
.gantung { top: -6px; left: 50%; width: 92px; margin-left: -46px; transform-origin: 50% 0; }
.gantung img { display: block; width: 100%; height: auto; }
.gantung i { position: absolute; left: 50%; top: 62%; width: 230%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 240, 190, .7), rgba(255, 214, 130, .28) 42%, transparent); }
.countdown { gap: 8px; }
.countdown div { aspect-ratio: 1; padding: 0; justify-content: center; border-radius: 50%; border: 2px solid var(--gold-hi); outline: 1px solid rgba(227, 207, 159, .6); outline-offset: 4px; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .22), rgba(255, 255, 255, .04) 60%); }
.countdown b { font-size: 26px; } .countdown span { font-size: 12px; }
/* Acara: garis waktu beruntai melati di kiri, kartu masuk dari kanan, gunungan samar di latar. */
main > section.programme { align-items: stretch; padding-left: 54px; gap: 22px !important; }
.programme::before { content: ""; position: absolute; left: 26px; top: 70px; bottom: 70px; width: 10px; background: radial-gradient(circle, #fff 0 3.4px, rgba(107, 77, 50, .35) 3.6px 4.4px, transparent 4.6px) 0 0 / 10px 14px repeat-y; }
/* Untai melati "tumbuh": penutup sewarna latar yang bergeser turun (transform, tidak menggambar ulang). */
.programme::after { content: ""; position: absolute; left: 22px; top: 62px; bottom: 62px; width: 18px; background: var(--bg); translate: 0 101%; transition: translate 2.2s cubic-bezier(.4, 0, .2, 1) .2s; }
.programme .wm { right: -70px; top: 50%; width: 250px; translate: 0 -50%; opacity: .1; }
.programme .event { position: relative; align-items: flex-start; text-align: left; padding: 22px 20px 22px 22px; border-radius: 6px 26px 26px 6px; border: 0; border-left: 4px solid var(--gold); outline: 0; }
.programme .event::before { content: ""; position: absolute; left: -35px; top: 30px; width: 16px; height: 16px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--gold); }
.programme .event h2.script { font-size: 38px; } .programme .event h2.script::after { margin-left: 0; width: 170px; background-position: left center; }
.programme .where { max-width: none; } .programme .dress { text-align: left; }
/* Kisah cinta: kartu digeser menyamping, bernomor, kembar mayang kecil di sudut. */
main > section.story { padding-left: 0; padding-right: 0; }
.story .km { bottom: -10px; width: 62px; opacity: .85; transform-origin: 50% 100%; } .story .km.l { left: 6px; } .story .km.r { right: 6px; scale: -1 1; }
.chapters { flex-direction: row; gap: 14px; width: 100%; padding: 6px 28px 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 28px; scrollbar-width: none; counter-reset: bab; -webkit-overflow-scrolling: touch; }
.chapters::-webkit-scrollbar { display: none; }
.chapters li { flex: 0 0 80%; scroll-snap-align: start; padding: 46px 20px 22px; border-radius: 22px; border: 1px solid var(--gold-hi); counter-increment: bab; text-align: center; }
.chapters li::before { content: counter(bab); position: absolute; left: 50%; top: 12px; bottom: auto; width: 28px; height: 28px; margin-left: -14px; border-radius: 50%; background: var(--deep2); color: #fff; font: 600 13px/28px var(--display); text-align: center; }
.story::after { content: "geser \2192"; font: 600 11px/1 var(--display); letter-spacing: .24em; text-transform: uppercase; color: var(--soft); }
/* Galeri: mosaik tiga kolom, foto pertama besar. */
.grid { grid-template-columns: repeat(3, 1fr); grid-auto-flow: dense; gap: 8px; }
.grid img { aspect-ratio: 1; border-radius: 10px; border: 0; outline: 1px solid var(--gold-hi); outline-offset: -5px; }
.grid img:first-child { grid-column: span 2; grid-row: span 2; }
/* Amplop: kartu berpita batik di atas. */
.gift-card { position: relative; padding-top: 26px; overflow: hidden; }
.gift-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: repeating-linear-gradient(135deg, var(--deep2) 0 6px, var(--gold) 6px 8px, var(--deep) 8px 14px, var(--gold-hi) 14px 16px); }
main > section.rsvp { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .06) 0 14px, transparent 14px 28px), linear-gradient(180deg, var(--deep), var(--deep2)); }
/* Penutup: gunungan ditancapkan lagi (tancep kayon), buket di depannya. */
main > section.closing { padding-top: 250px; }
.closing .tancep { left: 50%; top: 26px; width: 150px; margin-left: -75px; transform-origin: 50% 96%; opacity: .95; transition: translate 1.6s cubic-bezier(.2, .9, .3, 1) .2s, rotate 1.6s cubic-bezier(.2, .9, .3, 1) .2s, opacity 1s ease .2s; }
.closing .buket { width: 150px; margin-top: -62px; }

/* Muncul bertahap (.rv dipasang kayon.js): lapisan disiapkan dulu (will-change) supaya geraknya tidak tersendat di
   awal, bayangan kartu/foto baru dipasang setelah gerak selesai, dan kurvanya dibuat melambat halus di akhir. */
.rv { will-change: transform, opacity; }
.rv.event { scale: 1; translate: 64px 0; box-shadow: none; } .countdown .rv { scale: .3; translate: 0 0; } .chapters .rv { translate: 40px 0; } .grid .rv { scale: .72; box-shadow: none; } .rv.dan { scale: .2; translate: 0 0; }
.rv.in { transition: opacity 1.1s ease calc(var(--d, 0) * 1ms), translate 1.3s cubic-bezier(.22, 1, .36, 1) calc(var(--d, 0) * 1ms), scale 1.3s cubic-bezier(.22, 1, .36, 1) calc(var(--d, 0) * 1ms); }
.event, .grid img { transition: box-shadow .8s ease; }
@media (prefers-reduced-motion: no-preference) {
  .js .verse:not(.tampak) .kl { translate: -130% -50%; rotate: -30deg; opacity: 0; } .js .verse:not(.tampak) .kr { translate: 130% -50%; rotate: 30deg; opacity: 0; }
  .js .programme:not(.tampak)::after { translate: 0 0; }
  .js .closing:not(.tampak) .tancep { translate: 150% -10%; rotate: 34deg; opacity: 0; }
  .gantung { animation: goyangL 6s ease-in-out infinite alternate; } .gantung i { animation: nyalaL 2.4s ease-in-out infinite alternate; }
  .tampak .countdown div { animation: gong 3.2s ease-in-out infinite; } .tampak .countdown div:nth-child(2) { animation-delay: .4s; } .tampak .countdown div:nth-child(3) { animation-delay: .8s; } .tampak .countdown div:nth-child(4) { animation-delay: 1.2s; }
  .story .km { animation: goyangL 5s ease-in-out infinite alternate; }
  .tampak .tancep { animation: ayunK 5s 2s ease-in-out infinite alternate; }
  .person .portrait { transition: box-shadow .6s ease; } .tampak .person .portrait { box-shadow: 0 14px 30px rgba(70, 45, 20, .22); }
}
/* Gerak terikat gulir (peramban yang mendukung): potongan lukisan dan gunungan samar bergeser pelan saat dilewati. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .strip img { animation: geserY linear both; animation-timeline: view(); }
    .programme .wm { animation: putarWm linear both; animation-timeline: view(); }
  }
}
@keyframes gong { 0%, 100% { scale: 1; } 50% { scale: 1.06; } }
@keyframes geserY { from { translate: 0 -6%; scale: 1.08; } to { translate: 0 6%; scale: 1.08; } }
@keyframes putarWm { from { rotate: -10deg; translate: 0 -40%; } to { rotate: 10deg; translate: 0 -60%; } }

/* ---------- Kayon 1.1: isi di atas latar lukisan yang tetap. Setelah pembuka lewat (.scene-off), langit-gunung dan
   sepasang beringin (.latar-isi) memudar masuk dan terus terlihat di belakang semua bagian; bagian isi tembus pandang
   di tepinya sehingga pohon tetap tampak, foto mempelai selebar layar memudar ke latar, hitung mundur di atas foto
   sampul, acara di lengkung tinggi yang diapit buket. ---------- */
.latar-isi { position: fixed; top: 0; left: 50%; width: min(100%, 480px); height: 100%; translate: -50% 0; z-index: 0; overflow: hidden; contain: strict; pointer-events: none; background: var(--bg); transition: opacity 1.2s ease; }
.latar-isi img { position: absolute; top: 0; height: 100%; max-width: none; }
.li-langit { left: 0; width: 100%; object-fit: cover; object-position: 50% 30%; }
.li-pohon { width: auto; aspect-ratio: 940 / 1684; transform-origin: 50% 0; } .li-pohon.l { left: -2%; } .li-pohon.r { right: -2%; }
.li-kabut { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(244, 236, 223, .2), rgba(244, 236, 223, .05) 35%, rgba(244, 236, 223, .5)); }
.js:not(.scene-off) .latar-isi { opacity: 0; }

/* Bagian isi: krem pekat di tengah, tembus pandang di tepi (beringin terlihat), tanpa batas tegas antarbagian. */
main > section:not(.hero) { background: linear-gradient(90deg, rgba(244, 236, 223, .15), rgba(251, 246, 238, .86) 17%, rgba(251, 246, 238, .86) 83%, rgba(244, 236, 223, .15)); }
main > section.verse { background: linear-gradient(180deg, var(--deep2) 0 10px, transparent 10px calc(100% - 10px), var(--deep2) calc(100% - 10px)), radial-gradient(closest-side at 50% 50%, rgba(255, 214, 130, .4), transparent), rgba(248, 238, 218, .8) !important; }
main > section.programme { background: linear-gradient(90deg, rgba(244, 236, 223, .15), rgba(251, 246, 238, .7) 20%, rgba(251, 246, 238, .7) 80%, rgba(244, 236, 223, .15)) !important; }
main > section.count, main > section.rsvp { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .06) 0 14px, transparent 14px 28px), linear-gradient(180deg, rgba(107, 77, 50, 0), rgba(107, 77, 50, .9) 110px, rgba(107, 77, 50, .92) calc(100% - 110px), rgba(107, 77, 50, 0)); }
main > section.closing { background: linear-gradient(180deg, rgba(251, 246, 238, .3), rgba(251, 246, 238, .8) 40%, #f3e6cf); }
footer { background: #f3e6cf; }

/* Mempelai: foto selebar layar yang memudar atas-bawah, nama di atas bagian pudarnya, buket besar keluar tepi layar. */
.couple { gap: 30px; margin-top: 14px; }
.person, .person:nth-of-type(even) { position: relative; display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.person:nth-of-type(even) { align-items: flex-end; text-align: right; }
.couple .person .portrait { width: calc(100% + 56px); height: 470px; margin: 0 -28px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 60%, transparent 94%); mask-image: linear-gradient(180deg, transparent, #000 12%, #000 60%, transparent 94%); }
.couple .person .portrait > * { border-radius: 0; }
.couple .person .portrait:has(> span) { height: 300px; }
.couple .person .portrait span { background: radial-gradient(circle at 50% 45%, var(--card), var(--r2)); font-size: 120px; }
.person .info { position: relative; z-index: 1; margin-top: -118px; display: flex; flex-direction: column; gap: 4px; align-items: inherit; max-width: 88%; }
.person h3 { font-size: 42px; text-shadow: 0 0 18px var(--bg2), 0 0 6px var(--bg2); }
.person .parents { font-size: 16px; }
.person .sudut { z-index: 2; top: 18px; right: -64px; width: 170px; rotate: -16deg; transform-origin: 70% 20%; }
.person:nth-of-type(even) .sudut { right: auto; left: -64px; rotate: 16deg; scale: -1 1; transform-origin: 30% 20%; }
.dan { margin: -6px 0; }
.couple > .person.rv:nth-of-type(1) { translate: -60px 0; } .couple > .person.rv:nth-of-type(2) { translate: 60px 0; }

/* Hitung mundur di atas foto sampul (bila ada) yang memudar ke latar. */
main > section.count.berfoto { background: none; }
.count .latar-foto { inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; -webkit-mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent); }
.count.berfoto::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(60, 38, 22, .1), rgba(60, 38, 22, .62) 30%, rgba(60, 38, 22, .72) 70%, rgba(60, 38, 22, .1)); }
.count > :not(.latar-foto) { position: relative; z-index: 2; } .count > .gantung { position: absolute; }
.count.berfoto .countdown div { background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .26), rgba(40, 24, 12, .35) 60%); }

/* Acara: lengkung tinggi bergaya gebyok, sepasang buket di kaki lengkung. */
main > section.programme { align-items: center; padding-left: 28px; gap: 64px !important; padding-bottom: 90px; }
.programme::before, .programme::after { content: none; }
.programme .event { position: relative; width: min(100%, 320px); align-items: center; text-align: center; padding: 76px 26px 46px; border-radius: 999px 999px 18px 18px / 210px 210px 18px 18px; background: rgba(255, 250, 241, .95); border: 1.5px solid var(--gold); outline: 1px solid var(--gold-hi); outline-offset: -9px; box-shadow: 0 22px 40px rgba(70, 45, 20, .16); }
.programme .event::before { content: none; }
.programme .event h2.script::after { margin: 8px auto 0; width: 190px; background-position: center; }
.programme .where { max-width: 15em; } .programme .dress { text-align: center; }
.event .mawar { z-index: 1; bottom: -46px; width: 118px; } .event .mawar.l { left: -64px; rotate: -16deg; transform-origin: 50% 100%; } .event .mawar.r { right: -64px; rotate: 16deg; scale: -1 1; transform-origin: 50% 100%; }
.rv.event { translate: 0 50px; scale: .94; }

@media (prefers-reduced-motion: no-preference) {
  .person .sudut { transition: scale 1.2s cubic-bezier(.3, 1.3, .4, 1) .5s, rotate 1.2s cubic-bezier(.3, 1.3, .4, 1) .5s, opacity .6s ease .5s; }
  .js .person:not(.tampak) .sudut { scale: .3; rotate: -50deg; opacity: 0; }
  .js .person:nth-of-type(even):not(.tampak) .sudut { scale: -.3 .3; rotate: 50deg; }
  .couple .person .portrait { transition: clip-path 1.5s cubic-bezier(.6, 0, .2, 1); clip-path: inset(0); }
  .js .person:not(.tampak) .portrait { clip-path: inset(0 100% 0 0); } .js .person:nth-of-type(even):not(.tampak) .portrait { clip-path: inset(0 0 0 100%); }
  .event .mawar { transition: scale 1.1s cubic-bezier(.3, 1.3, .4, 1) .35s, opacity .6s ease .35s; }
  .js .event:not(.tampak) .mawar.l { scale: .2; opacity: 0; } .js .event:not(.tampak) .mawar.r { scale: -.2 .2; opacity: 0; }
  .event .mawar.l { animation: ayun 6s 1.6s ease-in-out infinite; } .event .mawar.r { animation: ayun 7s 1.6s ease-in-out infinite reverse; }
  .count .latar-foto { transition: scale 2.4s cubic-bezier(.2, .7, .2, 1); } .js .count:not(.tampak) .latar-foto { scale: 1.15; }
}
/* Latar tetap ikut bergerak pelan saat isi digulir: beringin mendekat, langit turun sedikit. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .li-pohon { animation: pohonG linear both; animation-timeline: scroll(root block); }
    .li-langit { animation: langitG linear both; animation-timeline: scroll(root block); }
  }
}
@keyframes pohonG { from { scale: 1.18; } to { scale: 1; } }
@keyframes langitG { from { translate: 0 -3%; scale: 1.08; } to { translate: 0 3%; scale: 1.08; } }
.person .info > * { align-self: auto; }

/* 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; }