/* Lembayung — merah muda lembut & merah bata, ornamen bunga, nuansa islami. */
@font-face { font-family: "Instrument Serif"; font-style: normal; src: url("fonts/instrument-serif.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Instrument Serif"; font-style: italic; src: url("fonts/instrument-serif-italic.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 400 800; src: url("fonts/plus-jakarta-sans.woff2") format("woff2"); font-display: swap; }

:root {
  --bg: #f1e4e1;
  --paper: #fbf5f3;
  --ink: #5a2a2a;
  --rose: #b5676f;
  --line: #e5d3cf;
}

/* Tone warna (field "tone"): merah-muda = bawaan di atas. */
:root[data-tone="toska-muda"] { --bg: #e1f0f1; --ink: #2a5a55; --rose: #67b5a5; --line: #cfe3e5; }
:root[data-tone="lavender"] { --bg: #eae1f1; --ink: #3d2a5a; --rose: #7e67b5; --line: #dccfe5; }
:root[data-tone="biru-langit"] { --bg: #e1e8f1; --ink: #2a475a; --rose: #679eb5; --line: #cfd8e5; }

* { box-sizing: border-box; }
.sprite { position: absolute; width: 0; height: 0; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.65 "Plus Jakarta Sans", system-ui, sans-serif; }
main { max-width: 480px; margin: 0 auto; background: var(--paper); box-shadow: 0 0 0 1px var(--line); }
section { padding: 50px 26px; text-align: center; border-bottom: 1px solid var(--line); }
h1, h2, h3 { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; margin: 0; }
h3 { font-size: 34px; margin-bottom: 18px; }
p { margin: 0 0 10px; }
.eyebrow { font-size: 12px; letter-spacing: 4px; text-transform: uppercase; color: var(--rose); margin: 0; }

.cover { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; background: radial-gradient(90% 60% at 50% 45%, var(--paper), var(--bg)); }
.ornament { width: 140px; height: 70px; color: var(--rose); }
.ornament.bottom { transform: scaleY(-1); }
.bismillah { font-size: 24px; margin: 0; }
h1 { font-size: 62px; line-height: 1; font-style: italic; margin: 6px 0; }
h1 span { display: block; font-size: 32px; color: var(--rose); }
.date { letter-spacing: 3px; text-transform: uppercase; font-size: 13px; margin: 0; }
.to p { margin: 0; font-size: 13px; }
.to .guest { font-family: "Instrument Serif", Georgia, serif; font-size: 28px; margin-top: 4px; }

.verse .quote { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: 19px; line-height: 1.5; }
.verse .source { font-size: 12px; letter-spacing: 2px; color: var(--rose); text-transform: uppercase; }

.opening { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: 22px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 120px 120px 18px 18px; padding: 34px 18px 22px; margin-top: 18px; }
.card h2 { font-size: 32px; line-height: 1.1; }
.parents { font-size: 13px; opacity: 0.85; margin: 8px 0 0; }
.amp { font-family: "Instrument Serif", Georgia, serif; font-size: 38px; font-style: italic; color: var(--rose); margin: 14px 0 0; }

.countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.countdown div { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 0; }
.countdown b { display: block; font-size: 24px; }
.countdown span { font-size: 11px; color: var(--rose); }

.events article { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px 18px; margin-bottom: 14px; }
.events .when { font-size: 18px; font-weight: 700; margin: 8px 0; }
.story p { font-family: "Instrument Serif", Georgia, serif; font-size: 20px; font-style: italic; line-height: 1.5; }
.gallery .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.gallery img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px; background: var(--bg); }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; margin-top: 8px; border: 0; border-radius: 999px; background: var(--ink); color: var(--paper); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.gift-card { display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px; }
.gift-card p { margin: 0; }
.gift-card .number { font-size: 20px; font-weight: 800; }

.rsvp form { display: flex; flex-direction: column; gap: 14px; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 20px; }
.rsvp label { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: 14px; }
.rsvp input:not([type=radio]), .rsvp textarea { font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); }
.rsvp textarea { min-height: 96px; }
.rsvp fieldset { border: 0; padding: 0; margin: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.rsvp fieldset label { flex-direction: row; align-items: center; font-weight: 600; }
.rsvp legend { font-weight: 700; margin-bottom: 6px; }
.note { font-size: 13px; color: var(--rose); }
.closing .names { font-family: "Instrument Serif", Georgia, serif; font-size: 34px; font-style: italic; margin: 0; }
footer { padding: 24px; text-align: center; font-size: 12px; opacity: 0.6; }
footer a { color: inherit; }
.music-toggle { position: fixed; right: 16px; bottom: 16px; z-index: 20; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: 22px; line-height: 1; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); }
.music-toggle[aria-pressed=true] span { display: inline-block; animation: putar 3s linear infinite; }
@keyframes putar { to { transform: rotate(360deg); } }

/* Buku ucapan & simpan ke kalender (Fase 2) */
.wishes { list-style: none; padding: 0; margin: 22px 0 0; text-align: left; display: flex; flex-direction: column; gap: 10px; }
.wishes li { padding: 14px 16px; border-radius: 14px; background: rgba(127, 127, 127, 0.1); }
.wishes li.pinned { box-shadow: inset 3px 0 0 currentColor; }
.wishes li span { font-size: 13px; opacity: 0.75; }
.wishes p { margin: 6px 0 0; }
.wishes .wish-reply { font-size: 13px; opacity: 0.8; }
.cal { display: inline-block; margin: 10px 0 0 10px; font-size: 13px; font-weight: 700; color: inherit; }

/* Amplop: beberapa rekening/e-wallet */
.gift-list { display: grid; gap: 14px; width: 100%; }

/* ---------- Animasi ---------- */
:root { --rv-dur: 1300; }
.rv { opacity: 0; scale: .9; rotate: -2deg; filter: blur(8px) brightness(1.1); }
.rv.in { opacity: 1; translate: 0 0; scale: 1; rotate: 0deg; filter: blur(0) brightness(1); clip-path: none; transition: opacity 1.3s cubic-bezier(.2,.7,.2,1) calc(var(--d, 0) * 1ms), translate 1.3s cubic-bezier(.2,.7,.2,1) calc(var(--d, 0) * 1ms), scale 1.3s cubic-bezier(.2,.7,.2,1) calc(var(--d, 0) * 1ms), rotate 1.3s cubic-bezier(.2,.7,.2,1) calc(var(--d, 0) * 1ms), filter 1.3s cubic-bezier(.2,.7,.2,1) calc(var(--d, 0) * 1ms), clip-path 1.3s cubic-bezier(.2,.7,.2,1) calc(var(--d, 0) * 1ms); }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; translate: none; scale: none; rotate: none; filter: none; clip-path: none; } }

@media (prefers-reduced-motion: no-preference) {
  .cover :is(.eyebrow,.opening,.bismillah,.verse) { animation: mo-blur 1.2s cubic-bezier(.2,.7,.2,1) .15s both; }
  .cover :is(.names,h1,.n1,.n2) { animation: mo-blur 1.2s cubic-bezier(.2,.7,.2,1) .4s both; }
  .cover :is(.amp,.amp-line) { animation: mo-blur 1.2s cubic-bezier(.2,.7,.2,1) .55s both; }
  .cover :is(.date,.cover-date) { animation: mo-blur 1.2s cubic-bezier(.2,.7,.2,1) .8s both; }
  .cover :is(.guest) { animation: mo-blur 1.2s cubic-bezier(.2,.7,.2,1) 1s both; }
  .cover :is(.btn) { animation: mo-blur 1.2s cubic-bezier(.2,.7,.2,1) 1.2s both; }
  .ornament { transform-origin: 50% 0; animation: mo-ayun 8s ease-in-out infinite alternate; }
  .amp { display: inline-block; animation: mo-denyut 4s ease-in-out infinite; }
  .card { transition: translate .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s; }
  .card:hover { translate: 0 -5px; }
}
@keyframes mo-denyut { 0%, 100% { scale: 1; } 50% { scale: 1.08; } }
@keyframes mo-ambang { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@keyframes mo-ayun { from { rotate: -2.2deg; } to { rotate: 2.2deg; } }
@keyframes mo-putar { to { rotate: 360deg; } }
@keyframes mo-kerlip { 0%, 100% { opacity: 1; scale: 1; } 50% { opacity: .35; scale: .72; } }
@keyframes mo-kilau { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes mo-geser { from { translate: -26px 0; } to { translate: 26px 0; } }
@keyframes mo-garis { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes mo-naik { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
@keyframes mo-blur { from { opacity: 0; filter: blur(10px); scale: 1.05; } to { opacity: 1; filter: blur(0); scale: 1; } }
@keyframes mo-pop { from { opacity: 0; scale: .55; rotate: -8deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes mo-nudge { 0%, 100% { translate: 0 0; } 50% { translate: 5px 0; } }
@keyframes mo-hujan { to { background-position: 0 520px, 0 520px, 0 520px, 0 780px, 0 780px; } }

/* Sampul "Buka undangan": gulir terkunci sampai tamu menekan tombol. Tanpa JS semua isi tetap tampil. */
.cover .to { margin-top: 6px; }
.cover .to .sorry { margin: 8px auto 0; max-width: 28ch; font-size: 12px; font-style: italic; opacity: 0.75; }
.cover .btn.open { margin-top: 18px; gap: 8px; text-transform: uppercase; letter-spacing: 0.12em; font-size: 12.5px; }
.cover .btn.open svg { width: 16px; height: 16px; }
.js body.locked main > :not(.cover) { display: none; }
.js body.locked .music-toggle { opacity: 0; pointer-events: none; }
.js body.opened .cover .open { visibility: hidden; }

/* Foto sampul (opsional): lengkung seperti jendela; tinggi menyesuaikan layar supaya tombol "Buka undangan" tetap terjangkau. */
.cover-photo { position: relative; z-index: 1; flex: none; display: block; width: auto; height: clamp(96px, 17svh, 150px); aspect-ratio: 4 / 5; margin: 8px auto 6px; border-radius: 999px 999px 16px 16px; overflow: hidden; border: 3px solid rgba(255, 255, 255, 0.85); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22); }
.cover-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Cover lebih tinggi dari layar (foto sampul + layar pendek): tetap bisa digulir ke tombol "Buka undangan". */
.js body.locked { overflow: visible; }
/* Bentuk foto sampul khas Lembayung: oval dengan garis mawar tipis. */
.cover-photo { aspect-ratio: 3 / 4; border: 4px solid var(--paper); border-radius: 50%; box-shadow: 0 0 0 1.5px var(--rose), 0 10px 26px rgba(90, 42, 42, 0.18); }
@media (max-height: 700px) { .cover-photo { display: none; } } /* layar pendek: sampul seperti semula supaya tombol tetap terlihat */