/* Piringan — undangan pernikahan bertema musik, lukisan cat air bergerak: ruang musik klasik saat senja (jendela
   lengkung bercahaya, tirai beludru, lampu kristal, grand piano, pemutar piringan hitam di meja bundar). Dibuka:
   layar tertutup piringan hitam raksasa yang berputar; lengan pemutar terangkat, piringan itu mengecil dan mendarat
   tepat di pemutar di meja sementara ruangan tampak mundur, lalu kartu partitur berbingkai emas turun membawa nama.
   Saat pembuka digulir kamera melaju ke jendela bercahaya sampai layar memutih. Isinya bergaya album: liner notes,
   Side A/Side B, rilis perdana, tracklist. Adegannya lapisan gambar (assets/img/*.webp) yang digerakkan CSS. */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300 700; src: url("fonts/fraunces.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 300 700; src: url("fonts/fraunces-italic.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Special Elite"; src: url("fonts/special-elite.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("fonts/plus-jakarta-sans.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }

:root {
  --bg: #f6efe4; --bg2: #fbf7f0; --ink: #2a1f1d; --soft: #75625c; --wine: #7a1f2b; --wine2: #5a141e; --gold: #b98a3e; --gold-hi: #e9cf96;
  --card: #fffaf2; --line: #e6d7c2; --vinyl: #161214;
  --display: "Fraunces", Georgia, serif; --type: "Special Elite", "Courier New", monospace; --sans: "Plus Jakarta Sans", system-ui, sans-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 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
h1, h2, h3, p, ol { margin: 0; }
a { color: var(--wine); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.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(60, 30, 30, .25); } }

/* ---------- Adegan: .stage berbanding 1536:2752 (ukuran lukisan) dan selalu menutup layar; posisi dalam persen.
   Urutan dari belakang: ruang (jendela, lampu, lantai) → tirai → grand piano → meja + pemutar → bunga sudut →
   piringan raksasa → lengan pemutar. Keadaan dasar = adegan akhir; sebelum dibuka (.js:not(.is-open)) layar tertutup
   piringan raksasa dan ruangan sedikit diperbesar. ---------- */
.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: #f3e4cc; 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% 55%; backface-visibility: hidden; }
.ly-bg > img, .ly-tirai > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.piano { position: absolute; left: -7%; top: 44.5%; width: 62%; height: auto; max-width: none; }
.meja { position: absolute; left: 30%; top: 60.5%; width: 40%; height: auto; max-width: none; }
.bunga { position: absolute; bottom: -1.5%; width: 68%; height: auto; max-width: none; }
.bunga.l { left: -16%; } .bunga.r { right: -16%; transform: scaleX(-1); }
.lampu { position: absolute; left: 50%; top: 11%; width: 56%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 238, 190, .75), rgba(255, 214, 140, .25) 45%, transparent); }
.sinar { position: absolute; left: 22%; top: 30%; width: 56%; height: 62%; background: linear-gradient(180deg, rgba(255, 233, 186, .5), rgba(255, 226, 170, .12) 70%, transparent); clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%); opacity: .7; }
.debu i { position: absolute; width: .5%; aspect-ratio: 1; border-radius: 50%; background: #fff4d6; box-shadow: 0 0 6px 2px rgba(255, 238, 190, .7); opacity: .8; }
.debu i:nth-child(1) { left: 38%; top: 40%; } .debu i:nth-child(2) { left: 46%; top: 52%; } .debu i:nth-child(3) { left: 58%; top: 44%; } .debu i:nth-child(4) { left: 62%; top: 58%; }
.debu i:nth-child(5) { left: 41%; top: 63%; } .debu i:nth-child(6) { left: 53%; top: 36%; } .debu i:nth-child(7) { left: 35%; top: 55%; } .debu i:nth-child(8) { left: 66%; top: 49%; }
.debu i:nth-child(9) { left: 50%; top: 61%; } .debu i:nth-child(10) { left: 44%; top: 47%; }
/* Not balok yang melayang naik dari pemutar. */
.nada { position: absolute; left: 49%; top: 70%; width: 0; height: 0; }
.nada i { position: absolute; left: 0; top: 0; width: 4.4vmin; max-width: 22px; aspect-ratio: 1; color: var(--wine); opacity: 0; }
.nada i:nth-child(even) { color: var(--gold); }
.nada svg { width: 100%; height: 100%; }
/* Piringan raksasa: ukuran & posisi akhirnya = piringan di pemutar (pusat 49,1% 73,1%, lebar 21,1%, elips 0,53). */
.vinyl-besar { position: absolute; left: 49.1%; top: 73.1%; width: 21.1%; aspect-ratio: 1; margin: -10.55% 0 0 -10.55%; transform: scaleY(.53); opacity: 0; }
.vb { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, transparent 0 17%, #050405 17.5% 18.5%, transparent 19%), repeating-radial-gradient(circle, #19151a 0 .55%, #0d0b0d .55% 1.1%), var(--vinyl); box-shadow: 0 0 0 .6% #050405; }
.kilau { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 20deg, transparent 0 8%, rgba(255, 240, 210, .28) 12%, transparent 18% 50%, rgba(255, 240, 210, .22) 62%, transparent 68%); }
.lbl { position: absolute; left: 32%; top: 32%; width: 36%; aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; text-align: center; background: radial-gradient(circle, #1a1314 0 6%, transparent 6.5%), radial-gradient(circle at 40% 35%, #a33242, var(--wine) 60%, var(--wine2)); color: var(--gold-hi); }
.lbl b { font: italic 600 1.4vmin/1 var(--display); letter-spacing: .02em; }
.lbl b em { margin: 0 .15em; font-weight: 400; }
.lbl small { margin-top: .4em; font: 600 .5vmin/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.lengan { position: absolute; left: 74%; top: 26%; width: 22%; height: auto; overflow: visible; transform-origin: 58% 9.5%; opacity: 0; transform: rotate(18deg); }
.lengan circle { fill: #c9c3b8; stroke: #6f6a63; stroke-width: 3; } .lengan circle.in { fill: #8b857c; }
.lengan path { fill: none; stroke: #d8d2c7; stroke-width: 9; stroke-linecap: round; }
.lengan rect { fill: #2a2628; stroke: #8b857c; stroke-width: 2; }
.terang { position: absolute; inset: 0; background: radial-gradient(circle at 50% 42%, #fffdf6, #fff6e6 55%, var(--bg) 100%); opacity: 0; }

/* Pembukaan: lengan terangkat (0–0,7 dtk) → piringan raksasa mengecil dan mendarat di pemutar (0,3–3,1) lalu
   memudar ke piringan lukisan (3,0–3,6) → ruangan mundur ke ukuran asli (0,5–3,6) → kartu judul turun (3,4). */
.js .vinyl-besar { transition: transform 2.8s cubic-bezier(.65, 0, .25, 1) .3s, opacity .6s ease 3s; }
.js .lengan { transition: transform .8s cubic-bezier(.4, 0, .2, 1), opacity .5s ease .35s; }
.js .ly { transition: transform 3.1s cubic-bezier(.5, 0, .2, 1) .5s; }
.js .lampu, .js .sinar { transition: opacity 1.4s ease 2.6s; }
.js:not(.is-open) .vinyl-besar { transform: translate(4%, -196%) scale(10); opacity: 1; }
.js:not(.is-open) .lengan { transform: none; opacity: 1; }
.js:not(.is-open) .ly { transform: scale(1.18); }
.js:not(.is-open) .lampu, .js:not(.is-open) .sinar { opacity: 0; }
.js.no-anim .vinyl-besar, .js.no-anim .lengan, .js.no-anim .ly, .js.no-anim .lampu, .js.no-anim .sinar { transition: none; }
.js.no-anim .kartu, .js.no-anim .kartu-isi > *, .js.no-anim .hero-pin > .mouse { animation: none !important; }

/* ---------- Sampul ---------- */
.caps { font: 700 11px/1.4 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--wine); color: #fff8ea; text-decoration: none; cursor: pointer; font: 700 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 10px 24px rgba(122, 31, 43, .3); }
.btn svg { width: 14px; height: 14px; }
.btn-line { min-height: 40px; padding: 0 18px; border: 1px solid var(--wine); background: transparent; color: var(--wine); box-shadow: none; font-size: 12px; }
.btn.copied { background: var(--gold); color: #fff; border-color: var(--gold); }
.cover { position: relative; min-height: 100vh; min-height: 100svh; padding: 60px 26px 50px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center; overflow: hidden;
  background: radial-gradient(90% 60% at 50% 30%, var(--bg2), var(--bg) 60%, #ead8bd); }
.js .cover { position: fixed; inset: 0; z-index: 40; max-width: 480px; margin: 0 auto; transition: opacity .7s ease .3s; }
.js:not(.is-open) body { overflow: hidden; }
.js.is-open .cover { opacity: 0; pointer-events: none; }
.js.no-anim .cover { transition: none; }
.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(30, 10, 14, .62) 0%, rgba(30, 10, 14, .08) 36%, rgba(30, 10, 14, .1) 55%, rgba(30, 10, 14, .82) 100%); }
.cover-top, .cover-bottom { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cover .caps { color: var(--gold-hi); } .cover:not(.has-photo) .caps { color: var(--gold); }
.names { font: italic 500 54px/1.02 var(--display); overflow-wrap: anywhere; }
.names .amp { display: block; font-size: .5em; color: var(--gold); }
.cover-date { font: 600 13px/1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase; opacity: .9; }
.to { font: 400 14px/1.4 var(--type); opacity: .85; }
.guest-name { font: italic 600 26px/1.2 var(--display); overflow-wrap: anywhere; }
.cv-bunga { position: absolute; z-index: 1; bottom: -18px; width: 62%; pointer-events: none; } .cv-bunga.l { left: -16%; } .cv-bunga.r { right: -16%; transform: scaleX(-1); }
.cover.has-photo .cv-bunga { opacity: .9; }
.cv-vinyl { position: relative; width: 74px; aspect-ratio: 1; margin-bottom: 4px; border-radius: 50%; background: repeating-radial-gradient(circle, #1b161b 0 1.5px, #0d0b0d 1.5px 3px); box-shadow: 0 6px 16px rgba(0, 0, 0, .35); }
.cv-vinyl i { position: absolute; inset: 33%; border-radius: 50%; background: radial-gradient(circle, #111 0 10%, var(--wine) 12%); }
.memuat .cover .open { opacity: .55; pointer-events: none; }

/* ---------- Pembuka: judul di kartu partitur berbingkai emas, menempel selama pembuka digulir. ---------- */
.js .hero { min-height: 260vh; min-height: 260svh; }
.hero-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; justify-content: center; padding-top: 9vh; }
.scene-off .hero-pin { visibility: hidden; }
.title-wrap { width: min(70%, 300px); }
.kartu { position: relative; transform-origin: 50% 0; }
.kartu > img { width: 100%; height: auto; }
.kartu-isi { position: absolute; left: 14%; right: 14%; top: 14%; bottom: 20%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.kartu-isi .caps { font-size: 9px; color: var(--gold); }
.t-name { font: italic 500 clamp(30px, 10vw, 40px)/1.05 var(--display); color: var(--wine2); overflow-wrap: anywhere; }
.t-name .amp { display: block; font-size: .55em; color: var(--gold); }
.t-date { font: 400 12px/1.3 var(--type); color: var(--soft); }
.mouse { position: absolute; left: 50%; bottom: 3vh; width: 22px; height: 36px; margin-left: -11px; border: 2px solid var(--wine); border-radius: 12px; opacity: .8; }
.mouse::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--wine); animation: gulir 1.6s ease-in-out infinite; }
html:not(.js) .hero-pin { position: relative; height: auto; padding: 40px 0; } html:not(.js) .mouse { display: none; }

/* ---------- Isi: halaman krem bergaris paranada samar ---------- */
main > section:not(.hero) { position: relative; overflow: hidden; padding: 70px 24px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center;
  background-color: var(--bg); background-image: repeating-linear-gradient(180deg, transparent 0 34px, rgba(185, 138, 62, .1) 34px 35px, transparent 35px 41px, rgba(185, 138, 62, .1) 41px 42px, transparent 42px 48px, rgba(185, 138, 62, .1) 48px 49px, transparent 49px 96px); }
.orn { pointer-events: none; }
.title { font: italic 500 34px/1.12 var(--display); color: var(--wine2); }
.title::after { content: ""; display: block; width: 240px; max-width: 76vw; height: 32px; margin: 8px auto 0; background: url("img/pembatas.webp") center / contain no-repeat; }
.lead { font-size: 15px; line-height: 1.7; color: var(--soft); max-width: 24em; }

.liner { padding-top: 40px !important; }
.rangkai { width: 86%; margin-bottom: -18px; }
.note-card { position: relative; width: 100%; padding: 30px 24px 26px; background: var(--card); border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 16px 34px rgba(90, 40, 30, .1); text-align: left; }
.note-card::before { content: ""; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px; border-radius: 50%; background: repeating-radial-gradient(circle, #1b161b 0 2px, #0d0b0d 2px 4px); opacity: .08; }
.type { margin-top: 12px; font: 400 15px/1.75 var(--type); color: var(--ink); }
.sign { margin-top: 16px; font: italic 500 26px/1.2 var(--display); color: var(--wine); text-align: right; }
.wave { width: 100%; height: 30px; margin-top: 10px; }
.wave path { fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-dasharray: 600; stroke-dashoffset: 0; }

/* Mempelai: sampul album dengan piringan menyembul keluar (Side A kiri, Side B kanan). */
.couple { gap: 22px !important; }
.person { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sleeve { position: relative; width: 74%; aspect-ratio: 1; margin: 0 0 12px -18%; }
.person.b .sleeve { margin: 0 -18% 12px 0; }
.disc { position: absolute; top: 4%; left: 30%; width: 92%; aspect-ratio: 1; border-radius: 50%; background: repeating-radial-gradient(circle, #1b161b 0 2px, #0d0b0d 2px 4px); box-shadow: 0 10px 20px rgba(0, 0, 0, .25); transition: translate 1.2s cubic-bezier(.3, 1.2, .4, 1) .3s; }
.disc i { position: absolute; inset: 33%; border-radius: 50%; background: radial-gradient(circle, #111 0 8%, var(--gold) 9% 11%, var(--wine) 12%); }
.person.b .disc { left: auto; right: 30%; }
.art { position: absolute; inset: 0; overflow: hidden; border-radius: 4px; background: linear-gradient(135deg, var(--wine), var(--wine2)); box-shadow: 0 16px 30px rgba(60, 20, 20, .25); }
.art img { width: 100%; height: 100%; object-fit: cover; }
.art span { position: absolute; inset: 0; display: grid; place-items: center; font: italic 500 90px/1 var(--display); color: var(--gold-hi); }
.side { position: absolute; left: 10px; top: 10px; padding: 4px 9px; border-radius: 3px; background: rgba(255, 250, 242, .9); color: var(--wine); font: 700 10px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.person h2 { font: italic 600 28px/1.15 var(--display); color: var(--wine2); overflow-wrap: anywhere; }
.parents { font-size: 14px; line-height: 1.5; color: var(--soft); }
.ig { font: 400 14px/1.4 var(--type); color: var(--gold); overflow-wrap: anywhere; }
.feat { font: italic 400 30px/1 var(--display); color: var(--gold); }

/* Rilis perdana: angka di layar LED, bilah putar. */
.countdown { display: flex; gap: 8px; justify-content: center; padding: 14px; border-radius: 14px; background: var(--vinyl); box-shadow: inset 0 0 0 1px rgba(233, 207, 150, .2), 0 14px 28px rgba(40, 20, 20, .25); }
.countdown div { width: 64px; display: flex; flex-direction: column; align-items: center; }
.countdown b { font: 500 32px/1 var(--display); color: var(--gold-hi); font-variant-numeric: tabular-nums; text-shadow: 0 0 12px rgba(233, 207, 150, .5); }
.countdown span { margin-top: 6px; font: 600 9px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #b9a99a; }
.progress { width: 100%; display: flex; align-items: center; gap: 10px; font: 400 12px/1 var(--type); color: var(--soft); }
.progress i { position: relative; flex: 1; height: 3px; border-radius: 3px; background: var(--line); }
.progress b { position: absolute; left: 0; top: 0; bottom: 0; width: 68%; border-radius: 3px; background: var(--wine); }
.progress b::after { content: ""; position: absolute; right: -6px; top: -4.5px; width: 12px; height: 12px; border-radius: 50%; background: var(--wine); box-shadow: 0 0 0 3px rgba(122, 31, 43, .2); }

/* Tracklist. */
.tracklist { width: 100%; list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; text-align: left; }
.track { display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: start; padding: 18px 16px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 10px 24px rgba(90, 40, 30, .08); }
.no { font: italic 600 26px/1 var(--display); color: var(--gold); }
.tt h3 { font: italic 600 24px/1.15 var(--display); color: var(--wine2); }
.meta { margin-top: 4px; font-weight: 700; font-size: 14px; }
.place { margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--soft); overflow-wrap: anywhere; }
.tt .btn { margin-top: 10px; }
.dur { font: 400 15px/1 var(--type); color: var(--wine); padding-top: 6px; }
.dress { font: 400 14px/1.5 var(--type); color: var(--soft); }

.grid { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 3px; box-shadow: 0 10px 22px rgba(60, 20, 20, .18); border: 6px solid #fffaf2; }
.grid img:nth-child(odd) { rotate: -1.6deg; } .grid img:nth-child(even) { rotate: 1.6deg; translate: 0 10px; }
.grid img:nth-child(5n+1) { grid-column: 1 / -1; aspect-ratio: 4 / 3; rotate: 0deg; }

.gift-list { width: 100%; display: grid; gap: 12px; }
.gift-card { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); text-align: left; }
.gift-card > div { flex: 1; min-width: 0; }
.mini-disc { flex: none; width: 46px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #111 0 8%, var(--wine) 9% 30%, transparent 31%), repeating-radial-gradient(circle, #1b161b 0 1.5px, #0d0b0d 1.5px 3px); }
.bank { font: 700 11px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.number { font: 400 20px/1.3 var(--type); overflow-wrap: anywhere; }
.holder, .address { font-size: 13px; color: var(--soft); overflow-wrap: anywhere; }

.form { width: 100%; display: grid; gap: 14px; padding: 22px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); text-align: left; }
.field { display: grid; gap: 6px; border: 0; margin: 0; padding: 0; font-size: 14px; font-weight: 600; color: var(--soft); }
.field input, .field textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font: 500 16px/1.4 var(--sans); }
.opts { display: flex; gap: 10px; } .opt { flex: 1; } .opt input { position: absolute; opacity: 0; }
.opt span { display: block; padding: 11px; border: 1px solid var(--line); border-radius: 10px; text-align: center; color: var(--ink); cursor: pointer; background: #fff; }
.opt input:checked + span { border-color: var(--wine); background: rgba(122, 31, 43, .08); color: var(--wine); }
.opt input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.thanks .big { font: italic 600 28px/1.2 var(--display); color: var(--wine); }
.note { color: var(--soft); font-size: 14px; }
.wishes-box { padding-top: 0 !important; }
.wishes-head { width: 100%; display: flex; justify-content: space-between; align-items: baseline; }
.wishes-head h2 { font: italic 600 24px/1.2 var(--display); color: var(--wine2); } .wishes-head span { font-size: 13px; color: var(--soft); }
.wishes { width: 100%; list-style: none; margin: 0; padding: 0; max-height: 520px; overflow-y: auto; display: grid; gap: 10px; text-align: left; }
.wishes li { padding: 14px 16px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.wish-head { display: flex; gap: 8px; align-items: center; } .wish-head svg { width: 14px; height: 14px; color: var(--gold); }
.tag { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(185, 138, 62, .18); }
.status { font-size: 12px; font-weight: 700; color: var(--wine); } .wish-text { font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.wish-reply { margin-top: 6px; padding-left: 10px; border-left: 2px solid var(--gold); font-size: 14px; color: var(--soft); }

.closing { padding-bottom: 120px !important; }
.buket { width: 46%; margin-bottom: -40px; position: relative; z-index: 1; }
.end-disc .vinyl { position: relative; display: block; width: 150px; aspect-ratio: 1; border-radius: 50%; background: repeating-radial-gradient(circle, #1b161b 0 2px, #0d0b0d 2px 4px); box-shadow: 0 14px 30px rgba(0, 0, 0, .3); }
.end-disc .sheen { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 20deg, transparent 0 8%, rgba(255, 240, 210, .25) 12%, transparent 18% 50%, rgba(255, 240, 210, .2) 62%, transparent 68%); }
.end-disc .lbl { inset: 33%; left: 33%; top: 33%; width: auto; display: grid; place-items: center; }
.end-disc .lbl svg { width: 20px; height: 18px; color: var(--gold-hi); }
.merci { font: italic 500 46px/1.1 var(--display); color: var(--wine2); }
.thanks-line { color: var(--soft); max-width: 20em; }
.closing .sign { text-align: center; }
footer { position: relative; z-index: 1; padding: 0 16px 100px; text-align: center; font-size: 12px; color: var(--soft); background: var(--bg); }

/* Pemutar mini: piringan kecil berputar dan equalizer bergerak selama musik diputar. */
.player { position: fixed; left: 50%; bottom: 14px; z-index: 50; width: min(calc(100% - 28px), 452px); translate: -50% 0; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 10px; border-radius: 999px; background: rgba(26, 18, 20, .92); color: #f4ead8; box-shadow: 0 12px 28px rgba(0, 0, 0, .3); }
.js:not(.is-open) .player { display: none; }
.mini-vinyl { flex: none; width: 38px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #111 0 8%, var(--gold) 9% 11%, var(--wine) 12% 30%, transparent 31%), repeating-radial-gradient(circle, #2a2428 0 1.5px, #141114 1.5px 3px); }
.np { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.np small { font: 700 9px/1.2 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-hi); }
.np b { font: italic 500 14px/1.3 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player .eq { display: flex; align-items: flex-end; gap: 3px; height: 18px; }
.player .eq i { width: 3px; height: 30%; border-radius: 2px; background: var(--gold-hi); }
.music-toggle { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--wine); color: #fff8ea; cursor: pointer; }
.music-toggle svg { width: 16px; height: 16px; }
.music-toggle .i-pause, .music-toggle[aria-pressed="true"] .i-play { display: none; }
.music-toggle[aria-pressed="true"] .i-pause { display: block; }

/* ---------- Gerak ---------- */
.rv { opacity: 0; translate: 0 24px; }
.rv.in { opacity: 1; translate: 0 0; 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); }
@media (prefers-reduced-motion: no-preference) {
  /* Berulang: piringan raksasa berputar, lampu kristal berpendar, sinar jendela, debu cahaya, tirai bergoyang, not
     balok melayang dari pemutar, bunga bergoyang. */
  .vb { animation: putar 1.8s linear infinite; }
  .lampu { animation: pendar 3.2s ease-in-out infinite alternate; }
  .js.is-open .sinar { animation: kelip 5s ease-in-out 4s infinite alternate; }
  .debu i { animation: debu 7s ease-in-out infinite alternate; } .debu i:nth-child(2n) { animation-duration: 9s; animation-delay: -3s; } .debu i:nth-child(3n) { animation-duration: 11s; animation-delay: -6s; }
  .ly-tirai > img { animation: goyang 6s ease-in-out infinite alternate; transform-origin: 50% 0; }
  .js.is-open .nada i { animation: nada 4.2s ease-out infinite; }
  .js.is-open .nada i:nth-child(1) { animation-delay: 3.4s; } .js.is-open .nada i:nth-child(2) { animation-delay: 4.1s; --x: -60px; } .js.is-open .nada i:nth-child(3) { animation-delay: 4.8s; --x: 50px; }
  .js.is-open .nada i:nth-child(4) { animation-delay: 5.5s; --x: -30px; } .js.is-open .nada i:nth-child(5) { animation-delay: 6.2s; --x: 70px; } .js.is-open .nada i:nth-child(6) { animation-delay: 6.9s; --x: -80px; }
  .bunga.l { animation: ayun 5s ease-in-out infinite alternate; transform-origin: 30% 100%; }
  .js.is-open .kartu { animation: turunKartu 1.4s 3.3s cubic-bezier(.3, 1.3, .5, 1) both; }
  .js.is-open .kartu-isi > * { animation: naik .9s both; } .js.is-open .kartu-isi > :nth-child(1) { animation-delay: 4.2s; } .js.is-open .kartu-isi > :nth-child(2) { animation-delay: 4.4s; } .js.is-open .kartu-isi > :nth-child(3) { animation-delay: 4.7s; }
  .js.is-open .hero-pin > .mouse { animation: naik 1s 5.2s both; }
  .cv-vinyl { animation: putar 4s linear infinite; }
  .player:has([aria-pressed="true"]) .mini-vinyl { animation: putar 2.4s linear infinite; }
  .player:has([aria-pressed="true"]) .eq i { animation: eq .9s ease-in-out infinite alternate; }
  .player .eq i:nth-child(2) { animation-delay: -.3s !important; } .player .eq i:nth-child(3) { animation-delay: -.6s !important; } .player .eq i:nth-child(4) { animation-delay: -.15s !important; }
  .end-disc .vinyl { animation: putar 3.6s linear infinite; }
  /* Bagian isi: ornamen bergerak saat bagiannya terlihat (.tampak). */
  .js .liner:not(.tampak) .rangkai { scale: .6; opacity: 0; }
  .rangkai { transition: scale 1.2s cubic-bezier(.3, 1.3, .4, 1), opacity .7s ease; }
  .js .liner:not(.tampak) .wave path { stroke-dashoffset: 600; }
  .wave path { transition: stroke-dashoffset 2.4s ease .6s; }
  .js .couple:not(.tampak) .disc { translate: -32% 0; }
  .js .couple:not(.tampak) .person.b .disc { translate: 32% 0; }
  .couple.tampak .disc { animation: putar 6s linear 1.6s infinite; }
  .js .count:not(.tampak) .progress b { width: 0; }
  .progress b { transition: width 2.2s cubic-bezier(.3, 0, .2, 1) .4s; }
  .js .closing:not(.tampak) .buket { translate: 0 40px; opacity: 0; }
  .buket { transition: translate 1.1s cubic-bezier(.3, 1.3, .4, 1), opacity .6s ease; }
  .js .events:not(.tampak) .track { translate: 40px 0; opacity: 0; }
  .track { transition: translate .9s cubic-bezier(.2, .7, .2, 1), opacity .6s ease; } .track:nth-child(2) { transition-delay: .2s; }
  .kisah.tampak .lagu::before { animation: putar 3.2s linear infinite; }
  .js .kisah:not(.tampak) .lagu { translate: 36px 0; opacity: 0; }
  .lagu { transition: translate .9s cubic-bezier(.2, .7, .2, 1), opacity .6s ease; }
  .lagu:nth-child(2) { transition-delay: .15s; } .lagu:nth-child(3) { transition-delay: .3s; } .lagu:nth-child(4) { transition-delay: .45s; } .lagu:nth-child(n+5) { transition-delay: .6s; }
  .js .kisah:not(.tampak) .wave path { stroke-dashoffset: 600; }
}
/* Kisah kami: tiap bab = satu lagu di Side B (nomor B1, B2, …), piringan kecil berputar di sisinya, foto bab
   (opsional) sebagai polaroid. */
.kisah-list { width: 100%; list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; text-align: left; counter-reset: lagu; }
.lagu { position: relative; counter-increment: lagu; padding: 18px 18px 20px 76px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 10px 24px rgba(90, 40, 30, .08); }
.lagu::before { content: ""; position: absolute; left: 14px; top: 18px; width: 48px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #111 0 7%, var(--gold) 8% 10%, var(--wine) 11% 30%, transparent 31%), repeating-radial-gradient(circle, #2a2428 0 1.5px, #141114 1.5px 3px); box-shadow: 0 4px 10px rgba(0, 0, 0, .25); }
.lagu:has(.kisah-foto)::before { top: auto; bottom: 20px; }
.lagu-no { font: 400 13px/1.3 var(--type); color: var(--gold); letter-spacing: .08em; }
.lagu-no::before { content: "B" counter(lagu) " · Side B"; }
.lagu h3 { margin-top: 2px; font: italic 600 23px/1.2 var(--display); color: var(--wine2); }
.lagu p:not(.lagu-no) { margin-top: 6px; font-size: 14.5px; line-height: 1.65; color: var(--soft); white-space: pre-line; }
.kisah-foto { margin: 0 0 12px -58px; padding: 6px 6px 20px; background: #fff; border-radius: 3px; box-shadow: 0 10px 22px rgba(60, 20, 20, .16); rotate: -1.4deg; }
.lagu: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; }
@keyframes putar { to { rotate: 360deg; } }
@keyframes pendar { from { opacity: .65; scale: .94; } to { opacity: 1; scale: 1.06; } }
@keyframes kelip { from { opacity: .55; } to { opacity: .85; } }
@keyframes debu { from { translate: 0 0; opacity: .3; } to { translate: 14px -28px; opacity: .9; } }
@keyframes goyang { from { transform: skewX(-.6deg); } to { transform: skewX(.6deg); } }
@keyframes nada { 0% { opacity: 0; transform: translate(0, 0) scale(.6) rotate(-10deg); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x, 20px), -170px) scale(1.15) rotate(14deg); } }
@keyframes ayun { from { rotate: -1.2deg; } to { rotate: 1.2deg; } }
@keyframes turunKartu { from { opacity: 0; transform: translateY(-60px) rotate(-4deg); } to { opacity: 1; transform: none; } }
@keyframes naik { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@keyframes gulir { 0% { translate: 0 0; opacity: 1; } 70% { translate: 0 12px; opacity: 0; } 100% { translate: 0 0; opacity: 0; } }
@keyframes eq { from { height: 25%; } to { height: 100%; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .rv { opacity: 1; translate: none; } *, *::before, *::after { animation: none !important; } .js .vinyl-besar, .js .lengan, .js .ly, .js .lampu, .js .sinar { transition: none; } }

@media (prefers-reduced-motion: no-preference) {
  /* Perjalanan gulir: --p (0→1) dipasang piringan.js setelah pembukaan; di p = 0 sama dengan keadaan akhir pembukaan.
     Kamera melaju ke jendela bercahaya (titik 50% 40%): tirai tersibak ke samping, piano ke kiri, meja dan bunga
     terlewati ke bawah, cahaya jendela memenuhi layar. */
  .ready .ly { transition: none; }
  .js.is-open.ready .ly-bg { transform-origin: 50% 40%; transform: scale(calc(1 + var(--p, 0) * 1.3)); }
  .js.is-open.ready .ly-tirai { transform-origin: 50% 40%; transform: scale(calc(1 + var(--p, 0) * 2.4)); }
  .js.is-open.ready .ly-piano { transform-origin: 20% 60%; transform: translateX(calc(var(--p, 0) * -55%)) scale(calc(1 + var(--p, 0) * 1.6)); }
  .js.is-open.ready .ly-meja { transform-origin: 50% 70%; transform: translateY(calc(var(--p, 0) * 45%)) scale(calc(1 + var(--p, 0) * 2.2)); }
  .js.is-open.ready .ly-bunga { transform-origin: 50% 100%; transform: translateY(calc(var(--p, 0) * 35%)) scale(calc(1 + var(--p, 0) * 1.6)); }
  .ready .title-wrap { opacity: calc(1 - var(--p, 0) * 5); translate: 0 calc(var(--p, 0) * -140px); }
  .ready .hero-pin > .mouse { opacity: calc(.8 - var(--p, 0) * 6); }
  .ready .terang { opacity: calc((var(--p, 0) - .62) * 3.2); }
  @supports (animation-timeline: scroll()) {
    html.gulir-css.ready .ly-bg { animation: g-bg linear both; }
    html.gulir-css.ready .ly-tirai { animation: g-tirai linear both; }
    html.gulir-css.ready .ly-piano { animation: g-piano linear both; }
    html.gulir-css.ready .ly-meja { animation: g-meja linear both; }
    html.gulir-css.ready .ly-bunga { animation: g-bunga linear both; }
    html.gulir-css.ready .terang { animation: g-terang linear both; }
    html.gulir-css.ready .title-wrap { animation: g-judul linear both; }
    html.gulir-css.ready .ly-bg, html.gulir-css.ready .ly-tirai, html.gulir-css.ready .ly-piano, html.gulir-css.ready .ly-meja, html.gulir-css.ready .ly-bunga, html.gulir-css.ready .terang, html.gulir-css.ready .title-wrap { animation-timeline: scroll(root block); animation-range: 0 160vh; animation-range: 0 160svh; }
  }
}
@keyframes g-bg { from { transform: scale(1); } to { transform: scale(2.3); } }
@keyframes g-tirai { from { transform: scale(1); } to { transform: scale(3.4); } }
@keyframes g-piano { from { transform: none; } to { transform: translateX(-55%) scale(2.6); } }
@keyframes g-meja { from { transform: none; } to { transform: translateY(45%) scale(3.2); } }
@keyframes g-bunga { from { transform: none; } to { transform: translateY(35%) scale(2.6); } }
@keyframes g-terang { from, 62% { opacity: 0; } to { opacity: 1.2; } }
@keyframes g-judul { from { opacity: 1; translate: 0 0; } 20%, to { opacity: 0; translate: 0 -28px; } }
.js body.locked { overflow: visible; }