/* Hanami — undangan pernikahan bergaya lukisan cat air Jepang: dua daun pintu shoji bergeser ke samping, pandangan menyamping
   ke taman kolam dengan jembatan merah, pagoda, dan Gunung Fuji; gulungan kakejiku terbentang, nama digores kuas dan dicap hanko,
   koi berenang, shishi-odoshi memukul batu, bangau melintas; saat digulir badai kelopak lalu gerbang torii di danau terlewati.
   Saat digulir pandangan menyeberangi jembatan menuju Fuji. Adegannya lapisan gambar (assets/img/*.webp) yang digerakkan 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: #fbf3ee; --bg2: #fff9f5; --pink: #f4c6cc; --pink2: #e893a0; --merah: #c23a2b; --merah2: #96281d; --nila: #24345c; --nila2: #172342;
  --tinta: #2f3350; --soft: #6e6c80; --emas: #b8934a; --emas2: #e7d3a2; --kertas: #fffdf8; --garis: #eddcd2; --kayu: #7a5230; --sky1: #f8e6e2;
  --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(--nila2); }
body { margin: 0; background: var(--nila2); color: var(--tinta); font: 500 19px/1.55 var(--serif); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
h1, h2, h3, p, ol, figure { margin: 0; }
a { color: var(--merah2); }
:focus-visible { outline: 2px solid var(--emas); outline-offset: 3px; }
.js-only { display: none; }
.js .js-only { display: revert; }
.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(0, 0, 0, .4); } }

/* Adegan selebar kolom, di belakang isi. Keadaan dasar = pintu sudah terbuka dan semua lapisan di tempatnya; sebelum dibuka
   (.js:not(.is-open)) daun shoji rapat dan tiap lapisan bergeser ke samping dengan jarak berbeda supaya saat masuk ada kedalaman. */
.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%; }
.ly > img { position: absolute; max-width: none; }
.ly-bg > img { inset: 0; width: 100%; height: 100%; }
.ly-bg { transform-origin: 50% 31%; }
.ly-br { transform-origin: 50% 36%; }
.pagoda { left: 17.6%; top: 37.4%; width: 14.7%; }
.jembatan { left: 10.4%; top: 52.3%; width: 79.2%; }
.sj { position: absolute; top: 0; height: 100%; width: 50%; z-index: 3; } .sj.l { left: 0; transform: translateX(-102%); } .sj.r { right: 0; transform: translateX(102%); }
.petals { position: absolute; inset: 0; transition: opacity 1.4s ease 2.4s; }
.petals i { position: absolute; top: -4%; border-radius: 90% 10% 80% 20%; background: linear-gradient(135deg, #fff, var(--pink) 60%, var(--pink2)); display: none; }
.petals i:nth-child(1) { left: 48%; width: 12px; height: 10px; animation-duration: 13.9s, 2.6s; animation-delay: -5.3s, -1.2s; opacity: .8; }
.petals i:nth-child(2) { left: 68%; width: 8px; height: 6px; animation-duration: 10.1s, 3.5s; animation-delay: -13.9s, -2.8s; opacity: .9; }
.petals i:nth-child(3) { left: 27%; width: 13px; height: 8px; animation-duration: 11.5s, 3.1s; animation-delay: -4s, -.6s; opacity: .9; }
.petals i:nth-child(4) { left: 71%; width: 8px; height: 8px; animation-duration: 15.7s, 2.6s; animation-delay: -8.8s, -3.9s; opacity: .7; }
.petals i:nth-child(5) { left: 45%; width: 8px; height: 9px; animation-duration: 12.3s, 2.8s; animation-delay: -1.8s, -3s; opacity: .9; }
.petals i:nth-child(6) { left: 3%; width: 13px; height: 9px; animation-duration: 14s, 4s; animation-delay: -9.7s, -3.4s; opacity: .9; }
.petals i:nth-child(7) { left: 39%; width: 11px; height: 9px; animation-duration: 13.1s, 3.5s; animation-delay: -3.3s, -1.8s; opacity: .9; }
.petals i:nth-child(8) { left: 83%; width: 10px; height: 10px; animation-duration: 14.7s, 4.2s; animation-delay: -.6s, -.6s; opacity: .8; }
.petals i:nth-child(9) { left: 57%; width: 12px; height: 10px; animation-duration: 13.5s, 3.5s; animation-delay: -13.9s, -1.4s; opacity: .8; }
.petals i:nth-child(10) { left: 10%; width: 10px; height: 8px; animation-duration: 9.8s, 2.9s; animation-delay: -10s, -4s; opacity: .9; }
.petals i:nth-child(11) { left: 91%; width: 12px; height: 9px; animation-duration: 9.9s, 2.8s; animation-delay: -9s, -3.3s; opacity: .8; }
.petals i:nth-child(12) { left: 33%; width: 13px; height: 6px; animation-duration: 10.9s, 2.4s; animation-delay: -3.8s, -2.8s; opacity: .9; }
.petals i:nth-child(13) { left: 21%; width: 9px; height: 8px; animation-duration: 12.9s, 3s; animation-delay: -7.1s, -2s; opacity: .8; }
.petals i:nth-child(14) { left: 62%; width: 11px; height: 8px; animation-duration: 11.1s, 3.7s; animation-delay: -2.2s, -1s; opacity: .9; }
.terang { position: absolute; inset: 0; background: radial-gradient(circle at 50% 34%, #fff 0, #fffaf6 60%, var(--bg) 100%); opacity: 0; }

/* Pembukaan: surat memudar, pintu bergeser, lapisan meluncur menyamping ke tempatnya. */
.js .sj { transition: transform 2.1s cubic-bezier(.65, 0, .25, 1) .55s; }
.js .ly { transition: transform 3.6s cubic-bezier(.3, 0, .15, 1) .75s; }
.js:not(.is-open) .sj { transform: none; }
.js:not(.is-open) .ly-bg { transform: translateX(2.5%) scale(1.07); }
.js:not(.is-open) .ly-pg { transform: translateX(4%) scale(1.08); }
.js:not(.is-open) .ly-br { transform: translateX(8%) scale(1.14); }
.js:not(.is-open) .ly-sk { transform: translateX(15%) scale(1.26); }
.js:not(.is-open) .ly-sh { transform: translateX(12%) scale(1.2); }
.js.no-anim .ly, .js.no-anim .sj, .js.no-anim .petals { transition: none; }

.caps { font: 500 12px/1.4 var(--display); letter-spacing: .3em; text-transform: uppercase; color: var(--emas); }
.script { font: 400 50px/1.05 var(--script); color: var(--merah2); }
.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(--merah); border-radius: 2px; background: var(--merah); color: #fff; text-decoration: none; cursor: pointer; font: 600 13px/1 var(--display); letter-spacing: .2em; text-transform: uppercase; }
.btn-line { background: transparent; color: inherit; border-color: currentColor; }
.btn.copied { background: var(--emas); border-color: var(--emas); color: #fff; }

/* ---------- Sampul: surat washi menempel di pintu shoji, jendela bundar berisi foto atau matahari merah ---------- */
.cover { position: relative; min-height: 100vh; min-height: 100svh; padding: 24px 20px; display: grid; place-items: center; text-align: center; background: linear-gradient(var(--sky1), var(--pink)); }
.cover[hidden] { display: none; }
.surat { width: min(100%, 340px); padding: 26px 22px 28px; display: flex; flex-direction: column; align-items: center; gap: 8px; background: rgba(255, 253, 248, .95); box-shadow: 0 0 0 1px var(--emas2), 0 18px 44px rgba(70, 40, 20, .28); }
.mado { width: 62%; aspect-ratio: 1; margin-bottom: 8px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 40% 36%, #e0594a, var(--merah) 62%, var(--merah2)); box-shadow: 0 0 0 5px var(--kertas), 0 0 0 7px var(--kayu); }
.mado img { width: 100%; height: 100%; object-fit: cover; }
.names { font: 400 40px/1.1 var(--script); color: var(--nila); overflow-wrap: anywhere; }
.names .amp { margin: 0 .22em; color: var(--merah); }
.to { margin-top: 4px; font-size: 15px; line-height: 1.4; color: var(--soft); }
.guest-name { font: 600 22px/1.2 var(--serif); overflow-wrap: anywhere; }
.cover .btn.open { margin-top: 12px; min-width: 210px; min-height: 48px; }
.js .cover { position: fixed; top: 0; bottom: 0; left: 50%; width: min(100%, 480px); transform: translateX(-50%); z-index: 40; overflow-y: auto; background: none; transition: opacity .6s 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; }
.memuat .cover .open { pointer-events: none; opacity: .6; }

/* ---------- Pembuka: kakejiku tergantung di sisi kanan, terbentang dari atas ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; padding: 30px 20px; display: grid; place-items: center; text-align: center; background: linear-gradient(var(--sky1), var(--pink)); }
.js .hero { display: block; padding: 0; background: none; }
.hero-pin { display: grid; place-items: start end; width: 100%; position: relative; }
.js .hero-pin { position: fixed; left: 50%; bottom: 0; width: min(100%, 480px); height: 100vh; height: 100svh; translate: -50% 0; padding-right: 4%; pointer-events: none; overflow: hidden; }
.scene-off .hero-pin { visibility: hidden; }
html:not(.js) .hero-pin { place-items: center; }
.title-wrap { width: min(46%, 200px); }
.papan { position: relative; transform-origin: 50% 0; }
.papan > img { width: 100%; height: auto; max-width: none; }
.papan-t { position: absolute; left: 19%; right: 19%; top: 35.5%; bottom: 19.5%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; color: var(--nila); }
.papan .cap { position: absolute; right: 21.5%; bottom: 21.5%; width: 13%; max-width: none; height: auto; rotate: -4deg; }
.papan-t .caps { font-size: 7px; letter-spacing: .2em; color: var(--merah2); }
.t-name { font: 400 clamp(25px, 8vw, 32px)/1 var(--script); overflow-wrap: anywhere; }
.t-name .amp { display: block; margin: 2px 0; font-size: .7em; color: var(--merah); }
.pl-date { margin-top: 4px; font: 600 7px/1.4 var(--display); letter-spacing: .02em; text-transform: uppercase; }
.mouse { position: absolute; left: 50%; bottom: 5vh; margin-left: -11px; width: 22px; height: 36px; border: 1.5px solid #fff; border-radius: 12px; opacity: .9; }
.mouse::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: #fff; animation: gulir 1.6s ease-in-out infinite; }
html:not(.js) .mouse { display: none; }

/* ---------- Isi ---------- */
main > section:not(.hero) { position: relative; padding: 64px 26px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; background: var(--bg); }
main h2.script::after { content: ""; display: block; width: 92px; height: 52px; margin: 6px auto 0; background: url("img/mizuhiki.webp") center / contain no-repeat; }
main > section.verse { padding-top: 176px; overflow: hidden; background: linear-gradient(var(--bg2), var(--bg)); }
.ranting { position: absolute; left: 0; top: 0; width: 126px; pointer-events: none; }
.quote { font: italic 500 21px/1.6 var(--serif); max-width: 20em; }
.source { font: 600 14px/1.4 var(--display); letter-spacing: .14em; }

/* Mempelai: dua lembar tanzaku berdampingan, foto di jendela bundar, cap hanko merah di sudut. */
.couple { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: calc(100% + 16px); margin-top: 10px; }
.person { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 10px 44px; background: var(--kertas); box-shadow: 0 0 0 1px var(--garis), 0 12px 24px rgba(90, 50, 40, .1); }
.person:nth-child(even) { margin-top: 34px; }
.bundar { width: 92%; max-width: 150px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px var(--kertas), 0 0 0 5px var(--kayu); }
.bundar > * { width: 100%; height: 100%; object-fit: cover; }
.bundar span { display: flex; align-items: center; justify-content: center; background: var(--pink); font: 400 62px/1 var(--script); color: var(--merah2); }
.person h3 { margin-top: 8px; font: 600 20px/1.15 var(--serif); color: var(--nila); overflow-wrap: anywhere; }
.parents { font-size: 15px; line-height: 1.35; color: var(--soft); overflow-wrap: anywhere; }
.ig { font-size: 14px; font-weight: 700; color: var(--merah2); overflow-wrap: anywhere; }
.hanko { position: absolute; right: 10px; bottom: 10px; width: 28px; height: 28px; display: grid; place-items: center; border: 2px solid var(--merah); border-radius: 3px; color: var(--merah); font: 700 15px/1 var(--display); text-transform: uppercase; rotate: -6deg; }

/* Menuju hari H: biru nila bermotif ombak seigaiha, angka di dalam lingkaran. */
main > section.count, main > section.rsvp { background: radial-gradient(circle at 50% 100%, transparent 24%, rgba(255, 255, 255, .09) 25% 28%, transparent 29% 42%, rgba(255, 255, 255, .09) 43% 46%, transparent 47% 60%, rgba(255, 255, 255, .09) 61% 64%, transparent 65%) 0 0 / 64px 32px, radial-gradient(circle at 50% 100%, transparent 24%, rgba(255, 255, 255, .09) 25% 28%, transparent 29% 42%, rgba(255, 255, 255, .09) 43% 46%, transparent 47% 60%, rgba(255, 255, 255, .09) 61% 64%, transparent 65%) 32px 16px / 64px 32px, var(--nila); color: #f5eee6; }
.count .script, .rsvp .script, .count .lead { color: #fff; }
.count h2.script::after, .rsvp h2.script::after { filter: brightness(1.5); }
.countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; }
.countdown div { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: var(--kertas); color: var(--tinta); }
.countdown b { font: 600 24px/1 var(--display); font-variant-numeric: tabular-nums; color: var(--merah2); }
.countdown span { font-size: 13px; line-height: 1.2; }
html:not(.js) .countdown { display: none; }

/* Acara: kartu di bawah tirai noren. */
main > section.programme { gap: 30px; background: linear-gradient(var(--bg), var(--bg2)); }
.event { width: 100%; padding: 0 20px 26px; background: var(--kertas); box-shadow: 0 0 0 1px var(--garis), 0 14px 30px rgba(90, 50, 40, .1); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.noren { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; width: calc(100% + 40px); height: 70px; margin-bottom: 8px; border-top: 7px solid var(--kayu); transform-origin: 50% 0; }
.noren i { position: relative; background: linear-gradient(var(--nila), var(--nila2)); box-shadow: inset 0 -3px 0 var(--emas); }
.noren i:nth-child(2) { background: linear-gradient(var(--merah), var(--merah2)); }
.noren i:nth-child(2)::after { content: ""; position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; translate: -50% -50%; border-radius: 50%; background: var(--kertas); }
.when { font: 600 19px/1.5 var(--serif); }
.where { font-size: 17px; line-height: 1.5; color: var(--soft); overflow-wrap: anywhere; }
.dress { font-size: 17px; font-style: italic; color: var(--soft); }

/* Kisah: papan ema kayu tergantung tali merah, bergoyang pelan bergantian. */
.chapters { list-style: none; padding: 26px 0 0; width: 100%; display: flex; flex-direction: column; gap: 46px; }
.chapters li { position: relative; isolation: isolate; width: 92%; padding: 62px 22px 26px; filter: drop-shadow(0 10px 14px rgba(90, 55, 25, .25)); transform-origin: 50% -20px; }
.chapters li:nth-child(even) { margin-left: auto; }
.chapters li::before { content: ""; position: absolute; z-index: -1; inset: 0; clip-path: polygon(50% 0, 100% 42px, 100% 100%, 0 100%, 0 42px); background: url("img/kayu.webp") center / cover; }
.chapters li::after { content: ""; position: absolute; left: 50%; top: -24px; width: 12px; height: 52px; margin-left: -6px; border: 2px solid var(--merah); border-bottom-width: 4px; border-radius: 6px; }
.chapters h3 { font: 400 34px/1.05 var(--script); color: #5b2e16; margin-bottom: 6px; }
.chapters p { font-size: 17px; line-height: 1.5; color: #4c3320; }
.kisah-foto { margin: 0 0 12px; padding: 5px; background: #fff; box-shadow: 0 6px 12px rgba(60, 35, 15, .25); }
.kisah-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Galeri: layar lipat byobu, panel berselang menghadap kiri-kanan, digeser menyamping. */
.byobu { display: flex; width: calc(100% + 52px); padding: 14px 26px 18px; overflow-x: auto; scroll-snap-type: x proximity; perspective: 900px; scrollbar-width: none; }
.byobu::-webkit-scrollbar { display: none; }
.byobu figure { flex: 0 0 52%; aspect-ratio: 3 / 5; scroll-snap-align: center; border: 5px solid var(--emas); box-shadow: inset 0 0 0 1px var(--emas2); background: var(--nila); transform: rotateY(9deg); }
.byobu figure:nth-child(even) { transform: rotateY(-9deg); }
.byobu img { width: 100%; height: 100%; object-fit: cover; }
.geser { font: 600 11px/1 var(--display); letter-spacing: .24em; text-transform: uppercase; color: var(--soft); }

/* Tanda kasih: amplop shugi-bukuro dengan simpul mizuhiki. */
.gift-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; width: 100%; }
.gift-card { padding: 16px 12px 18px; display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--kertas); box-shadow: 0 0 0 1px var(--garis), 0 12px 24px rgba(90, 50, 40, .1); }
.tali { width: 120px; margin-bottom: 8px; }
.bank { font: 600 12px/1.4 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--nila); }
.number { font-size: 20px; font-weight: 700; letter-spacing: .03em; overflow-wrap: anywhere; }
.holder { font-size: 15px; color: var(--soft); }
.gift-card .btn { margin-top: 8px; min-height: 40px; padding: 0 16px; color: var(--merah2); }
.address { width: 100%; padding: 14px 16px; border: 1px dashed var(--garis); 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, .6); font-size: 16px; }
.thanks { width: 100%; padding: 20px 18px; background: rgba(255, 255, 255, .12); display: flex; flex-direction: column; gap: 6px; }
.thanks .big { font: 400 36px/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: 2px; background: var(--kertas); color: var(--tinta); 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(--emas2); 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, .7); border-radius: 2px; font: 600 12px/1.2 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.opt input:checked + span { background: var(--kertas); color: var(--nila); }
.opt input:focus-visible + span { outline: 2px solid var(--emas2); outline-offset: 2px; }
.rsvp .btn { min-height: 50px; }

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(--merah2); }
.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; background: var(--kertas); border: 1px solid var(--garis); 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: 1px solid var(--emas); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--emas); }
.status { font-size: 14px; font-weight: 700; color: var(--merah2); }
.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(--pink2); font-style: italic; color: var(--soft); }

main > section.closing { padding-top: 60px; background: linear-gradient(var(--bg), var(--pink)); }
.toro-tutup { width: 112px; }
.merci { font-size: 54px; }
.thanks-line { font-size: 17px; font-style: italic; color: var(--soft); }
.pl-name.small { font: 500 21px/1.2 var(--display); letter-spacing: .12em; text-transform: uppercase; overflow-wrap: anywhere; }
footer { position: relative; padding: 18px 16px 26px; text-align: center; font-size: 14px; color: #d8d3e4; background: var(--nila2); }
footer a { color: var(--emas2); }

.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(--merah); color: #fff; cursor: pointer; box-shadow: 0 8px 18px rgba(0, 0, 0, .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; }

/* Isi muncul bertahap (.rv dipasang hanami.js); bagian yang terlihat mendapat .tampak. */
.rv { opacity: 0; translate: 0 26px; }
.rv.script { translate: 0 -20px; }
.rv.event { translate: 0 0; scale: .92; }
.couple .rv:nth-child(odd) { translate: -30px 0; } .couple .rv:nth-child(even) { translate: 30px 0; }
.chapters .rv { translate: 0 -40px; }
.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) {
  .petals i { display: block; animation-name: gugur, kibar; animation-timing-function: linear, ease-in-out; animation-iteration-count: infinite; animation-direction: normal, alternate; }
  .js .papan { animation: goyang 6s ease-in-out infinite alternate; }
  .js:not(.is-open) .title-wrap { clip-path: inset(0 0 100% 0); }
  .js.is-open:not(.no-anim) .title-wrap { animation: bentang 1.7s 3.1s cubic-bezier(.4, 0, .2, 1) both; }
  .js.is-open:not(.no-anim) .mouse { animation: naik 1s 6.5s both; }
  /* Nama digoreskan kuas dari kiri ke kanan lalu dicap hanko. */
  .js.is-open:not(.no-anim) .t-name { -webkit-mask: linear-gradient(105deg, #000 42%, transparent 58%) 100% 0 / 280% 100% no-repeat; mask: linear-gradient(105deg, #000 42%, transparent 58%) 100% 0 / 280% 100% no-repeat; animation: kuas 1.6s 4.5s ease-in-out both; }
  .js.is-open:not(.no-anim) .papan .cap { animation: capan .45s cubic-bezier(.3, 1.5, .5, 1) 6.1s both; }
  .bambu { animation: bambuT 7s ease-in-out infinite; }
  .tetes { animation: tetes 1.1s ease-in infinite; }
  .fubuki i { animation: fubuki 2.4s linear infinite; }
  .js .noren { transition: scale .9s cubic-bezier(.3, 1.2, .5, 1) .15s; }
  .js .programme:not(.tampak) .noren { scale: 1 .2; }
  .chapters li.tampak { animation: ayun 5.4s ease-in-out infinite alternate; }
  .chapters li:nth-child(even).tampak { animation-delay: -2.2s; }
  .js .ranting { transition: translate 1.2s cubic-bezier(.2, .8, .3, 1), opacity 1s ease; }
  .js .verse:not(.tampak) .ranting { translate: -40px -30px; opacity: 0; }
  .js .hero { min-height: 460vh; min-height: 460svh; }
  /* Perjalanan gulir: menyeberangi jembatan, badai kelopak, lalu melewati gerbang torii di danau menuju Fuji. --p = seberapa jauh
     pembuka digulir; letak tiap torii dihitung hanami.js. */
  .ready .ly { transition: none; }
  .ready .ly-sk { transform: scale(calc(1 + var(--p, 0) * 2.8)); opacity: calc(1 - var(--p, 0) * 2.2); }
  .ready .air { opacity: calc(1 - var(--p, 0) * 3.2); }
  .ready .kabut { opacity: calc(1 - (var(--p, 0) - .4) * 3); }
  .ready .ly-br { transform: scale(calc(1 + var(--p, 0) * 3.4)); opacity: calc(1 - (var(--p, 0) - .36) * 5); }
  .ready .ly-pg { transform: translateX(calc(var(--p, 0) * -34%)) scale(calc(1 + var(--p, 0) * 1.4)); opacity: calc(1 - (var(--p, 0) - .5) * 5); }
  .ready .ly-bg { transform: scale(calc(1 + var(--p, 0) * var(--p, 0) * 1.1)); }
  .ready .title-wrap { opacity: calc(1 - var(--p, 0) * 5); translate: 0 calc(var(--p, 0) * -170px); }
  .ready .mouse { opacity: calc(.9 - var(--p, 0) * 6); }
  .ready .terang { opacity: calc((var(--p, 0) - .86) * 8); }
  .ready .ly-sh { transition: none; opacity: calc(1 - var(--p, 0) * 5); transform: scale(calc(1 + var(--p, 0) * 2.4)); }
  .ready .fubuki { opacity: min(calc((var(--p, 0) - .1) * 7), calc((.74 - var(--p, 0)) * 7)); }
}
@keyframes kuas { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
@keyframes capan { from { opacity: 0; scale: 2.4; } to { opacity: 1; scale: 1; } }
@keyframes bambuT { 0% { rotate: 13deg; } 3% { rotate: 10deg; } 7% { rotate: 13deg; } 74% { rotate: 7deg; } 80% { rotate: -24deg; } 87% { rotate: -24deg; } 97.5% { rotate: 14deg; } 100% { rotate: 13deg; } }
@keyframes tetes { 0% { opacity: 0; translate: 0 0; } 15% { opacity: .9; } 100% { opacity: .7; translate: 0 26px; } }
@keyframes fubuki { from { translate: 0 -10px; rotate: 0deg; } to { translate: 118vw 46px; rotate: 720deg; } }
@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 bentang { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 -5% 0); } }
@keyframes naik { from { opacity: 0; translate: 0 18px; } to { opacity: .9; translate: 0 0; } }
@keyframes goyang { from { rotate: -.7deg; } to { rotate: .7deg; } }
@keyframes ayun { from { rotate: -1.3deg; } to { rotate: 1.3deg; } }
@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 .sj { transition: none; } }

/* ---------- Air: kanvas kolam (hanami.js) menumpang lapisan latar supaya ikut bergerak bersamanya ---------- */
.air { position: absolute; left: 0; top: 64.5%; width: 100%; height: 35.5%; -webkit-mask-image: linear-gradient(transparent, #000 7%); mask-image: linear-gradient(transparent, #000 7%); }
.fajar { position: absolute; left: 50%; top: 24%; width: 120%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 232, 196, .75), rgba(255, 214, 196, .3) 46%, transparent); }

/* Kabut melintasi kaki gunung, tiga gumpal dengan laju berbeda. */
.kabut { position: absolute; left: 0; right: 0; top: 40%; height: 24%; overflow: hidden; pointer-events: none; }
.kabut i { position: absolute; width: 90%; height: 52%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .4), rgba(255, 255, 255, .14) 58%, transparent); }
.kabut i:nth-child(1) { left: -30%; top: 6%; } .kabut i:nth-child(2) { left: 40%; top: 34%; width: 110%; } .kabut i:nth-child(3) { left: -10%; top: 58%; width: 70%; }

/* Gerbang torii berdiri di danau, dengan pantulannya; ukuran dan letaknya dihitung hanami.js dari --p. */
.torii { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.tr { position: absolute; left: 50%; top: 0; width: 66%; aspect-ratio: 1; opacity: 0; transform-origin: 50% 100%; will-change: transform; }
.tr:nth-child(1) { z-index: 5; } .tr:nth-child(2) { z-index: 4; } .tr:nth-child(3) { z-index: 3; } .tr:nth-child(4) { z-index: 2; }
.tr img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.tr .pantul { top: 100%; bottom: auto; transform: scaleY(-.8); transform-origin: 50% 0; opacity: .32; -webkit-mask-image: linear-gradient(0deg, transparent 20%, #000); mask-image: linear-gradient(0deg, transparent 20%, #000); }

/* Shishi-odoshi di tepi kolam: air mengisi bambu, bambu menukik menumpahkannya, lalu kembali memukul batu. */
.shishi { position: absolute; left: 9%; top: 75%; width: 27%; aspect-ratio: 420 / 443; }
.shishi > img:first-child { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.bambu { position: absolute; left: 16%; top: 22%; width: 74%; max-width: none; height: auto; rotate: 13deg; transform-origin: 39% 50%; }
.tetes { position: absolute; left: 29%; top: 17%; width: 3px; height: 6px; border-radius: 50%; background: #dfeaf4; opacity: 0; }

/* Badai kelopak (hanafubuki) saat menyeberang jembatan. */
.fubuki { position: absolute; inset: 0; overflow: hidden; opacity: 0; pointer-events: none; }
.fubuki i { position: absolute; left: -8%; width: 13px; height: 9px; border-radius: 90% 10% 80% 20%; background: linear-gradient(135deg, #fff, var(--pink2)); }
.fubuki i:nth-child(1) { top: 59%; animation-duration: 2.8s; animation-delay: -2.4s; } .fubuki i:nth-child(2) { top: 87%; animation-duration: 2.8s; animation-delay: -2.8s; } .fubuki i:nth-child(3) { top: 7%; animation-duration: 2.5s; animation-delay: -2.8s; } .fubuki i:nth-child(4) { top: 61%; animation-duration: 3.1s; animation-delay: -0.3s; } .fubuki i:nth-child(5) { top: 45%; animation-duration: 2.1s; animation-delay: -1.6s; } .fubuki i:nth-child(6) { top: 55%; animation-duration: 1.8s; animation-delay: -0.7s; } .fubuki i:nth-child(7) { top: 29%; animation-duration: 3.1s; animation-delay: -2.3s; } .fubuki i:nth-child(8) { top: 18%; animation-duration: 2.9s; animation-delay: -0.4s; } .fubuki i:nth-child(9) { top: 58%; animation-duration: 2.0s; animation-delay: -0.0s; } .fubuki i:nth-child(10) { top: 81%; animation-duration: 2.1s; animation-delay: -0.6s; } .fubuki i:nth-child(11) { top: 90%; animation-duration: 3.0s; animation-delay: -0.9s; } .fubuki i:nth-child(12) { top: 89%; animation-duration: 2.6s; animation-delay: -2.0s; } .fubuki i:nth-child(13) { top: 22%; animation-duration: 3.1s; animation-delay: -2.1s; } .fubuki i:nth-child(14) { top: 89%; animation-duration: 3.1s; animation-delay: -0.9s; } .fubuki i:nth-child(15) { top: 36%; animation-duration: 2.0s; animation-delay: -0.4s; } .fubuki i:nth-child(16) { top: 10%; animation-duration: 2.2s; animation-delay: -1.8s; }

/* Ranting: dua sisi terpisah supaya bisa bergoyang berlawanan. */
.sk { position: absolute; top: 0; height: 100%; width: 50%; overflow: hidden; } .sk.l { left: 0; transform-origin: 0 20%; } .sk.r { right: 0; transform-origin: 100% 20%; }
.sk img { position: absolute; top: 0; width: 200%; height: 100%; max-width: none; } .sk.l img { left: 0; } .sk.r img { left: -100%; }

/* Kawanan bangau: tiga ekor, sayap dibuat naik-turun. */
.kawanan { position: absolute; left: -46%; top: 12%; width: 44%; aspect-ratio: 1.5; opacity: 0; }
.bg { position: absolute; height: auto; max-width: none; scale: -1 1; transform-origin: 50% 60%; }
.b1 { left: 40%; top: 0; width: 56%; } .b2 { left: 12%; top: 34%; width: 44%; } .b3 { left: 0; top: 2%; width: 34%; }

/* Pintu: kertas bercahaya → bayangan ranting (satu gambar, dipakai dua daun) → siluet kelopak → kisi kayu. */
.sj { background: linear-gradient(170deg, #fff4dd, #fbe7c6 46%, #f5ddb8); overflow: hidden; }
.kisi { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.cahaya { position: absolute; top: 0; bottom: 0; left: -60%; width: 90%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .85) 50%, transparent); }
.sj.r .cahaya { animation-delay: 1.6s; }
.teduh { position: absolute; left: 0; top: 0; width: 200%; height: 46%; transform-origin: 100% 0; }
.sj.r .teduh { left: -100%; }
.teduh img { width: 100%; height: 100%; max-width: none; }
.siluet i { position: absolute; top: -6%; width: 15px; height: 12px; border-radius: 90% 10% 80% 20%; background: rgba(120, 132, 165, .55); }
.siluet i:nth-child(1) { left: 18%; animation-delay: -1s; } .siluet i:nth-child(2) { left: 62%; animation-delay: -5s; width: 11px; height: 9px; } .siluet i:nth-child(3) { left: 40%; animation-delay: -8.4s; } .siluet i:nth-child(4) { left: 82%; animation-delay: -3.2s; width: 12px; height: 9px; }
.celah { position: absolute; z-index: 4; left: 50%; top: 0; bottom: 0; width: 60%; translate: -50% 0; background: linear-gradient(90deg, transparent, rgba(255, 250, 232, .95) 50%, transparent); opacity: 0; scale: .03 1; pointer-events: none; }

/* Embusan: sekumpulan kelopak terbang menyamping tiap beberapa detik. */
.hembus { position: absolute; inset: 0; }
.hembus i { position: absolute; left: -6%; width: 12px; height: 9px; border-radius: 90% 10% 80% 20%; background: linear-gradient(135deg, #fff, var(--pink2)); opacity: 0; }
.hembus i:nth-child(1) { top: 12%; animation-delay: 0s; } .hembus i:nth-child(2) { top: 22%; animation-delay: .25s; } .hembus i:nth-child(3) { top: 30%; animation-delay: .1s; } .hembus i:nth-child(4) { top: 38%; animation-delay: .5s; } .hembus i:nth-child(5) { top: 16%; animation-delay: .7s; } .hembus i:nth-child(6) { top: 46%; animation-delay: .35s; } .hembus i:nth-child(7) { top: 26%; animation-delay: .9s; } .hembus i:nth-child(8) { top: 54%; animation-delay: .6s; } .hembus i:nth-child(9) { top: 34%; animation-delay: 1.1s; } .hembus i:nth-child(10) { top: 8%; animation-delay: .45s; }
.ketuk { position: absolute; left: 0; right: 0; bottom: 15vh; text-align: center; font: italic 500 16px/1.3 var(--serif); color: #fff; text-shadow: 0 1px 8px rgba(30, 40, 80, .6); opacity: 0; transition: opacity .6s ease; }
html:not(.js) .ketuk { display: none; }
.ketuk.hilang { opacity: 0 !important; animation: none !important; }

@media (prefers-reduced-motion: no-preference) {
  /* Layar depan sebelum dibuka: angin menggoyang bayangan, cahaya pagi menyapu kertas, kelopak jatuh di balik kertas. */
  .js:not(.is-open) .teduh { animation: desir 4.6s ease-in-out infinite alternate; }
  .js:not(.is-open) .cahaya { animation: sapu 7s ease-in-out infinite; }
  .js:not(.is-open) .siluet i { animation: jatuh 10s linear infinite; }
  .js:not(.is-open) .surat { animation: tempel 1.1s .25s cubic-bezier(.2, .9, .3, 1) both; }
  .js:not(.is-open) .mado { animation: mentari 3.6s ease-in-out infinite alternate; }
  .js:not(.is-open) .cover .btn.open { animation: ajak 2.4s 1.4s ease-in-out infinite; }
  /* Saat dibuka: garis cahaya di celah pintu melebar lalu lenyap. */
  .js.is-open:not(.no-anim) .celah { animation: celah 1.9s .35s ease-out both; }
  /* Setelah terbuka. */
  .js.is-open .fajar { animation: fajar 7s ease-in-out infinite alternate; }
  .js.is-open .kabut i { animation: kabut 34s ease-in-out infinite alternate; } .js.is-open .kabut i:nth-child(2) { animation-duration: 46s; animation-direction: alternate-reverse; } .js.is-open .kabut i:nth-child(3) { animation-duration: 27s; }
  .js.is-open .sk.l { animation: goyang-k 5.2s ease-in-out infinite alternate; } .js.is-open .sk.r { animation: goyang-n 4.4s ease-in-out infinite alternate; }
  .js.is-open .kawanan { animation: kawanan 19s 2.4s linear infinite; }
  .js.is-open .bg { animation: kepak .9s ease-in-out infinite alternate; } .js.is-open .b2 { animation-delay: -.3s; } .js.is-open .b3 { animation-delay: -.55s; }
  .js.is-open .hembus i { animation-name: hembus; animation-duration: 11s; animation-timing-function: ease-in; animation-iteration-count: infinite; }
  .js.is-open:not(.no-anim) .ketuk { animation: muncul-ketuk 5s 7.4s ease both; }
  .js.is-open.no-anim .ketuk { animation: muncul-ketuk 5s 1s ease both; }
}
@keyframes desir { from { rotate: -1.6deg; } to { rotate: 1.8deg; } }
@keyframes sapu { 0% { left: -90%; opacity: 0; } 25% { opacity: .9; } 70%, 100% { left: 110%; opacity: 0; } }
@keyframes jatuh { from { translate: 0 0; rotate: 0deg; } to { translate: 46px 112vh; rotate: 320deg; } }
@keyframes tempel { from { opacity: 0; translate: 0 -24px; rotate: -1.6deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
@keyframes mentari { from { box-shadow: 0 0 0 5px var(--kertas), 0 0 0 7px var(--kayu), 0 0 0 7px rgba(194, 58, 43, .25); } to { box-shadow: 0 0 0 5px var(--kertas), 0 0 0 7px var(--kayu), 0 0 0 17px rgba(194, 58, 43, 0); } }
@keyframes ajak { 0%, 100% { scale: 1; } 50% { scale: 1.04; } }
@keyframes celah { 0% { opacity: 0; scale: .03 1; } 22% { opacity: 1; scale: .08 1; } 100% { opacity: 0; scale: 1.7 1; } }
@keyframes fajar { from { opacity: .45; scale: .96; } to { opacity: 1; scale: 1.05; } }
@keyframes kabut { from { translate: -14% 0; } to { translate: 26% 0; } }
@keyframes goyang-k { from { rotate: -.9deg; } to { rotate: 1deg; } }
@keyframes goyang-n { from { rotate: 1deg; } to { rotate: -1deg; } }
@keyframes kawanan { 0% { opacity: 0; left: -46%; top: 20%; } 3% { opacity: 1; } 42% { opacity: 1; } 46%, 100% { opacity: 0; left: 108%; top: 5%; } }
@keyframes kepak { from { transform: scaleY(1) rotate(-2deg); } to { transform: scaleY(.8) rotate(3deg); } }
@keyframes hembus { 0%, 62% { opacity: 0; translate: 0 0; rotate: 0deg; } 64% { opacity: .95; } 86% { opacity: .9; } 92%, 100% { opacity: 0; translate: 125vw 15vh; rotate: 620deg; } }
@keyframes muncul-ketuk { 0%, 100% { opacity: 0; } 12%, 80% { opacity: 1; } }