/* Telaga — undangan pernikahan bergaya lukisan cat air bergerak: danau berkabut saat fajar, gazebo putih berkubah
   berselimut wisteria dan mawar di pulau kecil, dibingkai dedalu dan wisteria. Saat dibuka kabut tersibak ke dua sisi
   seperti tirai sutra, juntaian dedalu merenggang, sepasang angsa berenang dari kiri-kanan sampai lehernya membentuk
   hati, lilin di gazebo menyala, lalu cermin oval berbingkai emas turun membawa nama. Selama pembuka digulir kamera
   meluncur di atas air menuju gazebo sampai layar memutih. 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: #f6f2f7; --bg2: #fcfafd; --ink: #3c3446; --soft: #776d82; --lilac: #8d75b5; --deep: #5b4a7d; --deep2: #46395f;
  --gold: #b89b5e; --gold-hi: #e6d6a8; --blush: #ecc9cf; --sage: #a9b8a0; --card: #fffdfd; --line: #e7deea; --sky: #efe8f2;
  --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(--deep); }
:focus-visible { outline: 2px solid var(--lilac); 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, 57, 95, .25); } }

/* Adegan: .stage berbanding 1116:2000 dan selalu menutup layar; posisi dalam persen. Urutan dari belakang: latar
   (langit fajar, bukit, danau) → gazebo (+ pantulannya di air, cahaya lilin) → sepasang angsa (satu gambar, yang
   kanan dicerminkan) → teratai dan mawar di depan → juntaian dedalu kiri dan kanan (satu gambar dicerminkan) → kabut.
   Keadaan dasar = adegan akhir; sebelum dibuka (.js:not(.is-open)) kabut tebal menutup, dedalu merapat ke tengah, dan
   angsa masih di luar layar. */
.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(--sky); 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.7922)); aspect-ratio: 1116 / 2000; translate: -50% -50%; }
.ly { position: absolute; inset: 0; will-change: transform; transform-origin: 50% 55%; }
.ly img { display: block; max-width: none; }
.latar { position: absolute; inset: 0; width: 100%; height: 100%; }
.fx { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fajar { position: absolute; left: 50%; top: 44%; width: 80%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 246, 214, .75), rgba(255, 228, 190, .28) 50%, transparent); mix-blend-mode: screen; }
.kilau-air { position: absolute; left: 0; right: 0; top: 58%; bottom: 0; background: repeating-linear-gradient(180deg, transparent 0 11px, rgba(255, 255, 255, .26) 11px 12px, transparent 12px 27px); background-size: 160% 100%; -webkit-mask-image: radial-gradient(60% 70% at 50% 20%, #000, transparent); mask-image: radial-gradient(60% 70% at 50% 20%, #000, transparent); mix-blend-mode: screen; opacity: .7; }
.bw { fill: none; stroke: #8a7f93; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; opacity: .55; transform-box: fill-box; transform-origin: 50% 100%; }
.burung { translate: -300px 640px; }
.gz { position: absolute; left: 25%; top: 33.5%; width: 50%; }
.gz-img { position: relative; width: 100%; height: auto; }
.gz-pantul { position: absolute; left: 0; top: 93%; width: 100%; height: auto; transform: scaleY(-.62); transform-origin: 50% 0; opacity: .26; -webkit-mask-image: linear-gradient(0deg, #000, transparent 75%); mask-image: linear-gradient(0deg, #000, transparent 75%); }
.lilin { position: absolute; left: 49%; top: 78%; width: 46%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 238, 180, .95), rgba(255, 210, 140, .35) 45%, transparent); mix-blend-mode: screen; }
.angsa { position: absolute; top: 79%; width: 21%; }
.angsa.l { left: 27%; } .angsa.r { left: 52%; }
.angsa img { width: 100%; height: auto; }
.angsa.r img { transform: scaleX(-1); }
.depan { position: absolute; left: 0; top: 84.5%; width: 100%; height: auto; }
.ly-tirai img { position: absolute; top: 0; width: 84%; height: auto; transform-origin: 50% 0; }
.ly-tirai.l img { left: -16%; } .ly-tirai.r img { right: -16%; scale: -1 1; }
.kabut { position: absolute; inset: 0; }
.kabut i { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .96), rgba(250, 246, 252, .75) 55%, transparent); }
.kabut .k1 { left: -40%; top: 10%; width: 110%; height: 90%; opacity: 0; } .kabut .k2 { right: -40%; top: 12%; width: 110%; height: 88%; opacity: 0; }
.kabut .k3 { left: -20%; right: -20%; top: 50%; height: 16%; opacity: .55; }
.kunang { position: absolute; inset: 0; }
.kunang i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle, #fffbe6, rgba(255, 240, 190, .6) 50%, transparent 70%); box-shadow: 0 0 8px 2px rgba(255, 244, 200, .55); opacity: 0; }
.kunang i:nth-child(1) { left: 18%; top: 62%; } .kunang i:nth-child(2) { left: 32%; top: 70%; } .kunang i:nth-child(3) { left: 44%; top: 58%; } .kunang i:nth-child(4) { left: 58%; top: 66%; } .kunang i:nth-child(5) { left: 71%; top: 61%; }
.kunang i:nth-child(6) { left: 82%; top: 72%; } .kunang i:nth-child(7) { left: 25%; top: 77%; } .kunang i:nth-child(8) { left: 66%; top: 76%; } .kunang i:nth-child(9) { left: 52%; top: 52%; } .kunang i:nth-child(10) { left: 38%; top: 82%; }
.kelopak { position: absolute; inset: 0; }
.kelopak i { position: absolute; top: -4%; width: 9px; height: 7px; border-radius: 70% 0 70% 0; background: #b9a3d9; display: none; }
.kelopak i:nth-child(3n) { background: #f2d6dc; } .kelopak i:nth-child(4n) { background: #fffafc; } .kelopak i:nth-child(5n) { background: #a58cc9; }
.kelopak i:nth-child(1) { left: 76%; animation-duration: 12.2s, 3.6s; animation-delay: -12.6s, -2.6s; }
.kelopak i:nth-child(2) { left: 56%; animation-duration: 13.9s, 4s; animation-delay: -1.7s, -1.9s; }
.kelopak i:nth-child(3) { left: 45%; animation-duration: 12.4s, 2.4s; animation-delay: -3.3s, -1.1s; }
.kelopak i:nth-child(4) { left: 12%; animation-duration: 10.8s, 3.5s; animation-delay: -1.9s, 0s; }
.kelopak i:nth-child(5) { left: 23%; animation-duration: 14.8s, 2.7s; animation-delay: -2.5s, -1.3s; }
.kelopak i:nth-child(6) { left: 66%; animation-duration: 11.2s, 4.1s; animation-delay: -10.4s, -3.9s; }
.kelopak i:nth-child(7) { left: 35%; animation-duration: 12.5s, 4.1s; animation-delay: -4s, -1.3s; }
.kelopak i:nth-child(8) { left: 88%; animation-duration: 12s, 3s; animation-delay: -12.3s, -1.9s; }
.kelopak i:nth-child(9) { left: 6%; animation-duration: 13.2s, 2.5s; animation-delay: -14.6s, -.1s; }
.kelopak i:nth-child(10) { left: 48%; animation-duration: 13.7s, 3.1s; animation-delay: -8.7s, 0s; }
.kelopak i:nth-child(11) { left: 82%; animation-duration: 14.7s, 2.8s; animation-delay: -11.3s, -3.7s; }
.kelopak i:nth-child(12) { left: 41%; animation-duration: 14.4s, 2.9s; animation-delay: -6.9s, -2.4s; }
.kelopak i:nth-child(13) { left: 18%; animation-duration: 14.7s, 2.6s; animation-delay: -5.1s, -2.4s; }
.kelopak i:nth-child(14) { left: 60%; animation-duration: 12.3s, 3s; animation-delay: -4.8s, -.7s; }
.terang { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, #fffdfb 0, #faf6fb 55%, var(--bg) 100%); opacity: 0; }

/* Efek & ornamen adegan tambahan: berkas sinar fajar di balik gazebo, merpati yang terbang keluar dari gazebo (sekali,
   saat dibuka), riak lingkaran di tempat kedua angsa bertemu, juntaian wisteria di tepi atas, bintang subuh, kupu-kupu,
   semburan kelopak saat dibuka, dan lapisan langit subuh yang memudar menjadi fajar. */
.sinar { position: absolute; left: 50%; top: 46%; width: 170%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255, 246, 214, .42) 0 3.5deg, transparent 3.5deg 13deg); -webkit-mask-image: radial-gradient(closest-side, #000 8%, rgba(0, 0, 0, .55) 35%, transparent 70%); mask-image: radial-gradient(closest-side, #000 8%, rgba(0, 0, 0, .55) 35%, transparent 70%); mix-blend-mode: screen; opacity: .55; }
.merpati { pointer-events: none; }
.mp { fill: #fffefc; stroke: #a99cb4; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.riak-hati { position: absolute; left: 50%; top: 87%; width: 0; height: 0; }
.riak-hati i { position: absolute; left: 0; top: 0; width: 150px; height: 46px; margin: -23px 0 0 -75px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .75); opacity: 0; }
.ly-juntai .jt { position: absolute; height: auto; transform-origin: 50% 0; }
.jt.a { left: 3%; top: -3%; width: 10%; } .jt.b { left: 16%; top: -6%; width: 7.5%; } .jt.c { left: 76.5%; top: -6%; width: 7.5%; scale: -1 1; } .jt.d { left: 87%; top: -3%; width: 10%; scale: -1 1; }
.bintang { position: absolute; inset: 0 0 50% 0; opacity: 0; }
.bintang i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px 1px rgba(255, 255, 255, .8); }
.bintang i:nth-child(1) { left: 12%; top: 14%; } .bintang i:nth-child(2) { left: 27%; top: 30%; } .bintang i:nth-child(3) { left: 41%; top: 9%; } .bintang i:nth-child(4) { left: 58%; top: 22%; }
.bintang i:nth-child(5) { left: 72%; top: 12%; } .bintang i:nth-child(6) { left: 86%; top: 34%; } .bintang i:nth-child(7) { left: 20%; top: 52%; } .bintang i:nth-child(8) { left: 64%; top: 46%; }
.bintang i:nth-child(9) { left: 48%; top: 38%; } .bintang i:nth-child(10) { left: 34%; top: 66%; } .bintang i:nth-child(11) { left: 80%; top: 60%; } .bintang i:nth-child(12) { left: 6%; top: 40%; }
.subuh { position: absolute; inset: 0; background: linear-gradient(180deg, #262b57, #463b70 55%, #3a3456); mix-blend-mode: multiply; opacity: 0; }
.kupu { position: absolute; inset: 0; pointer-events: none; }
.kupu i { position: absolute; width: 22px; height: 18px; }
.kupu i::before, .kupu i::after { content: ""; position: absolute; top: 0; width: 11px; height: 16px; background: radial-gradient(circle at 60% 35%, #e9defa, #b39bd8 60%, #8d75b5); border-radius: 60% 40% 50% 50%; opacity: .9; }
.kupu i::before { left: 0; transform-origin: 100% 50%; } .kupu i::after { right: 0; transform-origin: 0 50%; border-radius: 40% 60% 50% 50%; }
.kupu b { position: absolute; left: 10px; top: 2px; width: 2px; height: 13px; border-radius: 1px; background: #5b4a7d; }
.kupu i:nth-child(1) { left: 18%; top: 58%; } .kupu i:nth-child(2) { left: 70%; top: 50%; scale: .8; } .kupu i:nth-child(3) { left: 42%; top: 70%; scale: .7; }
.semburan { position: absolute; inset: 0; }
.semburan i { position: absolute; top: -6%; width: 11px; height: 8px; border-radius: 70% 0 70% 0; background: #b9a3d9; opacity: 0; }
.semburan i:nth-child(3n) { background: #f2d6dc; } .semburan i:nth-child(4n) { background: #fffafc; } .semburan i:nth-child(5n) { background: #9f86c6; }
.semburan i:nth-child(1) { left: 6%; } .semburan i:nth-child(2) { left: 13%; } .semburan i:nth-child(3) { left: 19%; } .semburan i:nth-child(4) { left: 25%; }
.semburan i:nth-child(5) { left: 31%; } .semburan i:nth-child(6) { left: 37%; } .semburan i:nth-child(7) { left: 43%; } .semburan i:nth-child(8) { left: 49%; }
.semburan i:nth-child(9) { left: 55%; } .semburan i:nth-child(10) { left: 61%; } .semburan i:nth-child(11) { left: 67%; } .semburan i:nth-child(12) { left: 73%; }
.semburan i:nth-child(13) { left: 79%; } .semburan i:nth-child(14) { left: 85%; } .semburan i:nth-child(15) { left: 91%; } .semburan i:nth-child(16) { left: 96%; }

/* Pembukaan (±7,5 dtk): masih subuh — langit biru keunguan berbintang, kamera rendah dekat permukaan air, kabut tebal,
   dedalu merapat → kabut tersibak (0,3–3,6) dan dedalu merenggang (0,5–4,1), juntaian wisteria di tepi atas turun
   (1–3,6) → langit memudar menjadi fajar (0,7–4,1), bintang hilang, berkas sinar muncul di balik gazebo (1,6) → kamera
   naik dan mundur (0,4–5) → semburan kelopak (0,8–5) → merpati terbang keluar dari gazebo (3) → angsa berenang dan
   bertemu (2–5,2), riak lingkaran di air (5) → lilin menyala dan kunang-kunang muncul (4,4) → cermin judul turun (5,2),
   lalu kerlip bintang di sekelilingnya (6,8). */
.ly-bg, .ly-gazebo, .ly-depan { transform-origin: 50% 90%; }
.js .kabut .k1, .js .kabut .k2 { transition: transform 3.3s cubic-bezier(.5, 0, .2, 1) .3s, opacity 2.8s ease .8s; }
.js .kabut .k1 { transform: translateX(-75%); } .js .kabut .k2 { transform: translateX(75%); }
.js:not(.is-open) .kabut .k1, .js:not(.is-open) .kabut .k2 { opacity: 1; transform: none; }
.js .ly-tirai { transition: transform 3.6s cubic-bezier(.45, 0, .2, 1) .5s; }
.js:not(.is-open) .ly-tirai.l { transform: translateX(30%); } .js:not(.is-open) .ly-tirai.r { transform: translateX(-30%); }
.js .ly-juntai .jt { transition: clip-path 2.6s cubic-bezier(.4, 0, .2, 1) 1s; clip-path: inset(0); }
.js:not(.is-open) .ly-juntai .jt { clip-path: inset(0 0 100% 0); }
.js .ly-bg, .js .ly-gazebo, .js .ly-depan { transition: transform 4.6s cubic-bezier(.45, 0, .15, 1) .4s; }
.js:not(.is-open) .ly-bg, .js:not(.is-open) .ly-gazebo, .js:not(.is-open) .ly-depan { transform: scale(1.24); }
.js .subuh { transition: opacity 3.4s ease .7s; } .js:not(.is-open) .subuh { opacity: .74; }
.js .bintang { transition: opacity 2.2s ease .6s; } .js:not(.is-open) .bintang { opacity: 1; }
.js .sinar { transition: opacity 2.4s ease 1.6s; } .js:not(.is-open) .sinar { opacity: 0; }
.js .angsa { transition: translate 3.2s cubic-bezier(.2, .6, .3, 1) 2s; }
.js:not(.is-open) .angsa.l { translate: -170% 0; } .js:not(.is-open) .angsa.r { translate: 170% 0; }
.js .lilin { transition: opacity 1.2s ease 4.4s; } .js:not(.is-open) .lilin { opacity: 0; }
.js .kunang { transition: opacity 1.6s ease 4.4s; } .js:not(.is-open) .kunang { opacity: 0; }
.js.no-anim .kabut i, .js.no-anim .ly, .js.no-anim .angsa, .js.no-anim .lilin, .js.no-anim .subuh, .js.no-anim .bintang, .js.no-anim .sinar, .js.no-anim .kunang, .js.no-anim .ly-juntai .jt { transition: none; }

.caps { font: 500 13px/1.4 var(--display); letter-spacing: .3em; text-transform: uppercase; }
.script { font: 400 50px/1.1 var(--script); color: var(--deep); }
.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(--deep); border-radius: 999px; background: var(--deep); 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(--gold); border-color: var(--gold); color: #fff; }

/* ---------- Sampul ---------- */
.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: radial-gradient(90% 60% at 50% 35%, var(--bg2), var(--bg) 60%, #e6dcec); 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(40, 30, 55, .55) 0%, rgba(40, 30, 55, .05) 34%, rgba(40, 30, 55, .1) 56%, rgba(40, 30, 55, .78) 100%); }
.cover.has-photo .cover-art { display: none; }
.cover-art { position: absolute; inset: 0; }
.cover-rangkai { position: absolute; left: 50%; top: 14vh; width: 86%; max-width: none; translate: -50% 0; }
.cover-angsa { position: absolute; left: 50%; bottom: 26%; width: 46%; translate: -50% 0; }
.cover-top, .cover-bottom { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cover .names { font: 400 52px/1.15 var(--script); overflow-wrap: break-word; }
.cover:not(.has-photo) .names { color: var(--deep); }
.names .amp { display: block; font-size: 34px; line-height: 1; color: var(--gold); }
.cover:not(.has-photo) .cover-top { margin-top: 30vh; }
.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, .6); background: rgba(255, 255, 255, .2); color: inherit; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cover:not(.has-photo) .open { border-color: var(--deep); background: var(--deep); color: #fff; }
.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; }
.memuat .cover .open { pointer-events: none; opacity: .55; }

/* ---------- Pembuka: judul di cermin oval berbingkai emas yang tergantung dari dahan wisteria (cermin.webp) ---------- */
.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(--sky), var(--bg)); }
.js .hero { background: none; display: block; padding: 0; }
.hero-pin { display: grid; place-items: start center; 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: 0; pointer-events: none; overflow: hidden; }
.scene-off .hero-pin { visibility: hidden; }
.title-wrap { width: min(54%, 230px); }
.cermin { position: relative; transform-origin: 50% 0; }
.cermin > img { display: block; width: 100%; height: auto; max-width: none; }
.kilat { position: absolute; left: 16%; right: 16%; top: 27%; bottom: 17%; border-radius: 50%; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .7) 48%, transparent 58%) 0 0 / 300% 100% no-repeat; background-position: 160% 0; mix-blend-mode: screen; }
.kerlip { position: absolute; width: 16px; height: 16px; background: #fffbe8; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); opacity: 0; }
.kerlip.k1 { left: 6%; top: 30%; } .kerlip.k2 { right: 4%; top: 42%; width: 12px; height: 12px; } .kerlip.k3 { left: 12%; bottom: 14%; width: 10px; height: 10px; } .kerlip.k4 { right: 10%; bottom: 20%; } .kerlip.k5 { left: 48%; top: 12%; width: 11px; height: 11px; }
.cermin-t { position: absolute; left: 21%; right: 21%; top: 35%; bottom: 24%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; container-type: inline-size; }
.cermin-t .caps { font-size: max(6.5px, 6.4cqw); letter-spacing: .2em; color: var(--soft); }
.t-name { font: 400 max(22px, 19cqw)/1.02 var(--script); color: var(--deep); overflow-wrap: break-word; max-width: 100%; }
.t-name .amp { display: block; font-size: .6em; line-height: .95; color: var(--gold); }
.pl-date { margin-top: 3px; font: 600 max(7px, 6cqw)/1.3 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--deep2); }
.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; }
.hero-pin > .mouse { position: absolute; left: 50%; bottom: 4vh; margin: 0 0 0 -11px; border-color: #fff; opacity: .9; }
.hero-pin > .mouse::after { background: #fff; }
html:not(.js) .hero-pin { padding: 40px 0; } html:not(.js) .hero-pin > .mouse { display: none; }

/* ---------- Isi: latar danau tetap di belakang (.latar-isi muncul setelah pembuka lewat), dedalu di kedua tepi,
   bagian lavender pucat tembus pandang di tepi. ---------- */
.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; max-width: none; }
.li-langit { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.li-tirai { top: -4%; height: 92%; width: auto; aspect-ratio: 940 / 1684; opacity: .9; } .li-tirai.l { left: -42%; } .li-tirai.r { right: -42%; scale: -1 1; }
.li-kabut { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(246, 242, 247, .3), rgba(246, 242, 247, .08) 40%, rgba(246, 242, 247, .5)); }
.js:not(.scene-off) .latar-isi { opacity: 0; }
.orn { pointer-events: none; max-width: none; }
main > section:not(.hero) { position: relative; padding: 64px 28px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; overflow: hidden; background: linear-gradient(90deg, rgba(246, 242, 247, .15), rgba(252, 250, 253, .86) 17%, rgba(252, 250, 253, .86) 83%, rgba(246, 242, 247, .15)); }
main h2.script::after { content: ""; display: block; width: 250px; max-width: 76vw; height: 20px; margin: 6px auto 0; background: url("img/pembatas.webp") center / contain no-repeat; }

/* Ornamen tambahan bagian isi: buket di sudut bagian, juntaian wisteria di tepi atas, teratai mengapung di sisi hitung
   mundur, untaian bunga di atas acara dan galeri, kelopak gugur dan kupu-kupu di latar sepanjang halaman. */
.pojok { position: absolute; top: -6px; width: 118px; z-index: 0; } .pojok.l { left: -18px; } .pojok.r { right: -18px; scale: -1 1; }
.pojok.bawah { top: auto; bottom: -6px; } .pojok.l.bawah { scale: 1 -1; } .pojok.r.bawah { scale: -1 -1; }
.juntai { position: absolute; top: -8px; width: 62px; z-index: 0; transform-origin: 50% 0; } .juntai.l { left: 10px; } .juntai.r { right: 10px; scale: -1 1; }
.teratai-sisi { position: absolute; bottom: 70px; width: 86px; } .teratai-sisi.l { left: -20px; } .teratai-sisi.r { right: -20px; scale: -1 1; }
.untai-atas { width: 330px; margin: -34px auto -12px; transform-origin: 50% 0; }
main > section > :not(.orn) { position: relative; z-index: 1; }
.kelopak-isi i { display: none; }
.kupu-isi i:nth-child(1) { left: 12%; top: 34%; } .kupu-isi i:nth-child(2) { left: 74%; top: 62%; scale: .8; }

/* Kutipan */
.rangkai-atas { width: 310px; margin: -26px auto -8px; transform-origin: 50% 0; }
.quote { font: italic 500 21px/1.6 var(--serif); max-width: 20em; }
.source { font: 600 14px/1.4 var(--display); letter-spacing: .14em; color: var(--deep); }

/* Mempelai: "jendela gazebo": foto besar berkubah bergaris emas ganda, untaian mawar-wisteria di atas kubah dengan
   wisteria tergantung dari kedua ujungnya, dan pantulan foto di bawahnya seperti di permukaan danau. */
.couple { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; margin-top: 6px; }
.person { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
.jendela { position: relative; width: min(76%, 270px); margin: 78px auto 40px; }
.portrait { position: relative; aspect-ratio: 5 / 7; padding: 7px; border: 1.5px solid var(--gold); border-radius: 50% 50% 10px 10px / 34% 34% 10px 10px; background: rgba(255, 253, 253, .92); display: flex; box-shadow: 0 18px 36px rgba(70, 57, 95, .16); -webkit-box-reflect: below 6px linear-gradient(transparent 78%, rgba(255, 255, 255, .16)); }
.portrait::after { content: ""; position: absolute; inset: 3px; border: 1px solid var(--gold-hi); border-radius: inherit; pointer-events: none; }
.portrait > * { flex: 1; width: 100%; height: 100%; border-radius: 50% 50% 6px 6px / 33% 33% 6px 6px; object-fit: cover; }
.portrait span { display: flex; align-items: center; justify-content: center; font: 400 110px/1 var(--script); color: var(--deep); background: radial-gradient(circle at 50% 40%, #fff, #e6dcef); }
.untai { position: absolute; left: 50%; top: -74px; width: 124%; translate: -50% 0; z-index: 1; transform-origin: 50% 0; }
.wisteria { position: absolute; top: -34px; width: 58px; z-index: 1; transform-origin: 50% 0; } .wisteria.l { left: -34px; } .wisteria.r { right: -34px; scale: -1 1; }
.person h3 { margin-top: 4px; font: 400 42px/1.1 var(--script); color: var(--deep); overflow-wrap: anywhere; }
.parents { font-size: 17px; line-height: 1.45; color: var(--soft); max-width: 17em; }
.ig { font: 600 14px/1.4 var(--display); letter-spacing: .08em; color: var(--lilac); }
.dan { margin: 18px 0 10px; } .dan img { width: 130px; margin: 0 auto; }

/* Save the Date: angka di daun teratai yang mengapung. */
main > section.count { background: linear-gradient(180deg, rgba(246, 242, 247, .2), rgba(226, 218, 236, .9) 90px, rgba(226, 218, 236, .9) calc(100% - 90px), rgba(246, 242, 247, .2)); padding-top: 90px; padding-bottom: 90px; }
.countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; }
.countdown div { position: relative; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #c9d6bd, #9fb394 70%, #889f7d); box-shadow: inset 0 -4px 0 rgba(60, 80, 50, .15), 0 8px 14px rgba(70, 57, 95, .15); -webkit-mask: radial-gradient(circle, #000 0 60%, transparent 60.5%), conic-gradient(from 18deg, transparent 0 24deg, #000 24deg); mask: radial-gradient(circle, #000 0 60%, transparent 60.5%), conic-gradient(from 18deg, transparent 0 24deg, #000 24deg); }
.countdown b { font: 600 24px/1.1 var(--display); font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 1px 2px rgba(40, 60, 30, .35); }
.countdown span { font: 600 9px/1.4 var(--display); letter-spacing: .12em; text-transform: uppercase; color: #f5f9ef; }
html:not(.js) .countdown { display: none; }

/* Acara: kartu berkubah seperti atap gazebo, buket sudut di kedua bahu. */
main > section.programme { gap: 54px; padding-top: 80px; }
.event { position: relative; width: min(100%, 330px); padding: 70px 26px 34px; border-radius: 170px 170px 26px 26px / 130px 130px 26px 26px; background: rgba(255, 253, 253, .95); border: 1.5px solid var(--gold-hi); outline: 1px solid var(--line); outline-offset: -9px; box-shadow: 0 20px 40px rgba(70, 57, 95, .12); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.event .script { font-size: 42px; } .event h2.script::after { width: 180px; }
.sudut { position: absolute; top: -34px; width: 110px; } .sudut.l { left: -34px; } .sudut.r { right: -34px; scale: -1 1; }
.when { font: 600 18px/1.5 var(--serif); color: var(--deep2); }
.where { font-size: 16px; line-height: 1.5; color: var(--soft); overflow-wrap: anywhere; }
.where b { display: block; font: 600 11px/1.6 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.event .btn { min-height: 42px; padding: 0 20px; }
.dress { font-size: 17px; font-style: italic; color: var(--soft); }

/* Kisah: aliran sungai kecil berkelok di kiri, tiap bab ditandai bunga teratai. */
.chapters { list-style: none; padding: 0 0 0 58px; position: relative; width: 100%; display: flex; flex-direction: column; gap: 26px; text-align: left; }
.chapters::before { content: ""; position: absolute; left: 20px; top: 0; bottom: 0; width: 14px; border-radius: 7px; background: linear-gradient(90deg, rgba(196, 210, 230, .4), rgba(214, 205, 236, .9) 50%, rgba(196, 210, 230, .4)), repeating-linear-gradient(180deg, rgba(255, 255, 255, .7) 0 2px, transparent 2px 16px); }
.chapters li { position: relative; padding: 16px 18px; border-radius: 22px; background: rgba(255, 253, 253, .92); border: 1px solid var(--line); box-shadow: 0 8px 18px rgba(70, 57, 95, .08); }
.teratai { position: absolute; left: -64px; top: 4px; width: 62px; }
.chapters h3 { font: 400 32px/1.1 var(--script); color: var(--deep); margin-bottom: 4px; }
.chapters p { font-size: 17px; line-height: 1.55; color: var(--soft); }

/* Galeri: dua kolom bertingkat seperti deretan jendela gazebo; tinggi foto bergantian, kubah bergaris emas tipis. */
.grid { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 0 12px; width: 100%; padding-bottom: 30px; }
.grid img { width: 100%; margin: 0 0 14px; aspect-ratio: 3 / 4; object-fit: cover; padding: 4px; border: 1px solid var(--gold); border-radius: 50% 50% 8px 8px / 26% 26% 8px 8px; background: rgba(255, 253, 253, .9); box-shadow: 0 10px 20px rgba(70, 57, 95, .12); }
.grid img:nth-child(even) { margin: 46px 0 -32px; } .grid img:nth-child(4n+1), .grid img:nth-child(4n) { aspect-ratio: 2 / 3; }

/* Amplop */
.gift-list { display: grid; gap: 12px; width: 100%; }
.gift-card { position: relative; padding: 16px 18px 16px 24px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; overflow: hidden; }
.gift-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: linear-gradient(180deg, var(--blush), var(--lilac)); }
.bank { font: 600 12px/1.4 var(--display); letter-spacing: .22em; text-transform: uppercase; color: var(--deep); }
.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: 40px; padding: 0 16px; color: var(--deep); }
.address { width: 100%; padding: 14px 16px; border-radius: 16px; border: 1px dashed var(--lilac); font-size: 16px; line-height: 1.5; color: var(--soft); text-align: left; background: rgba(255, 253, 253, .8); }

/* Ucapan */
main > section.rsvp { color: #fff; background: linear-gradient(180deg, rgba(91, 74, 125, 0), rgba(91, 74, 125, .93) 90px, rgba(70, 57, 95, .95) calc(100% - 90px), rgba(70, 57, 95, 0)); padding-top: 100px; padding-bottom: 100px; }
.rsvp .script { color: #fff; }
.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, .14); 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: 14px; 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: 14px; 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(--deep); }
.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(--lilac); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--lilac); }
.status { font-size: 14px; font-weight: 700; color: var(--deep); }
.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(--lilac); font-style: italic; color: var(--soft); }

/* Penutup */
main > section.closing { padding-top: 70px; background: linear-gradient(180deg, rgba(252, 250, 253, .3), rgba(252, 250, 253, .86) 40%, #ece4f0); }
.angsa-tutup { width: 190px; }
.closing .buket { width: 170px; margin-top: -10px; }
.merci { font-size: 54px; }
.thanks-line { font-size: 17px; font-style: italic; color: var(--soft); max-width: 20em; }
.pl-name { font: 500 22px/1.3 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--deep); }
footer { position: relative; padding: 18px 16px 26px; text-align: center; font-size: 14px; color: var(--soft); background: #ece4f0; }

.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(--deep); color: #fff; cursor: pointer; box-shadow: 0 8px 18px rgba(70, 57, 95, .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 ---------- */
.rv { opacity: 0; translate: 0 26px; }
.rv.script { translate: 0 -22px; }
.couple > .rv.person { translate: 0 0; scale: .86; } .countdown .rv { translate: 0 30px; scale: .6; } .rv.event { translate: 0 40px; } .grid .rv { scale: .86; translate: 0 0; } .chapters .rv { translate: -30px 0; }
.rv.in { opacity: 1; translate: 0 0; scale: 1; 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); }
@media (prefers-reduced-motion: no-preference) {
  /* Berulang: kelopak wisteria gugur, kunang-kunang berkedip di atas air, dedalu berayun, angsa mengapung, riak dan
     kilau air, pantulan gazebo bergoyang, lilin berkedip, merpati melintas, kilat di cermin, cermin berayun. */
  .kelopak i { display: block; animation-name: gugur, kibar; animation-timing-function: linear, ease-in-out; animation-iteration-count: infinite; animation-direction: normal, alternate; }
  .kunang i { animation: kunang 4s ease-in-out infinite; } .kunang i:nth-child(2n) { animation-duration: 5.2s; animation-delay: -1.8s; } .kunang i:nth-child(3n) { animation-duration: 3.4s; animation-delay: -2.6s; }
  .ly-tirai img { animation: ayunT 7s ease-in-out infinite alternate; } .ly-tirai.r img { animation-duration: 8s; animation-delay: -3s; }
  .angsa img { animation: apung 3.4s ease-in-out infinite alternate; } .angsa.r img { animation-delay: -1.7s; }
  .kilau-air { animation: riak 8s linear infinite; }
  .gz-pantul { animation: pantul 3.6s ease-in-out infinite alternate; }
  .js.is-open .lilin { animation: kedip 1.6s 5s ease-in-out infinite alternate; }
  .fajar { animation: napas 6s ease-in-out infinite alternate; }
  .burung { animation: lintas 30s 4s linear infinite; } .bw { animation: sayap .5s ease-in-out infinite alternate; } .bw.b2 { animation-delay: -.2s; } .bw.b3 { animation-delay: -.35s; }
  .cermin { animation: ayun 6s ease-in-out infinite; }
  .sinar { animation: putar 90s linear infinite; }
  .bintang i { animation: kedip 1.8s ease-in-out infinite alternate; } .bintang i:nth-child(odd) { animation-duration: 2.6s; animation-delay: -1s; }
  .ly-juntai .jt { animation: ayunT 6s ease-in-out infinite alternate; } .jt.b, .jt.c { animation-duration: 7.5s; animation-delay: -2s; }
  .kupu i { animation: terbangK 14s ease-in-out infinite; } .kupu i:nth-child(2) { animation-duration: 18s; animation-delay: -6s; } .kupu i:nth-child(3) { animation-duration: 16s; animation-delay: -11s; }
  .kupu i::before { animation: kepakL .28s ease-in-out infinite alternate; } .kupu i::after { animation: kepakR .28s ease-in-out infinite alternate; }
  .riak-hati i { animation: riakH 4.2s ease-out infinite; } .riak-hati i:nth-child(2) { animation-delay: 1.4s; } .riak-hati i:nth-child(3) { animation-delay: 2.8s; }
  .js.is-open:not(.no-anim) .riak-hati i { animation-delay: 5s; } .js.is-open:not(.no-anim) .riak-hati i:nth-child(2) { animation-delay: 6.4s; } .js.is-open:not(.no-anim) .riak-hati i:nth-child(3) { animation-delay: 7.8s; }
  .js.is-open:not(.no-anim) .semburan i { animation: sembur 4.2s linear both; }
  .js.is-open:not(.no-anim) .semburan i:nth-child(odd) { animation-duration: 3.6s; }
  .js.is-open:not(.no-anim) .semburan i:nth-child(4n+1) { animation-delay: .8s; } .js.is-open:not(.no-anim) .semburan i:nth-child(4n+2) { animation-delay: 1.3s; }
  .js.is-open:not(.no-anim) .semburan i:nth-child(4n+3) { animation-delay: 1.8s; } .js.is-open:not(.no-anim) .semburan i:nth-child(4n) { animation-delay: 2.3s; }
  .js.is-open:not(.no-anim) .mp.m1 { animation: merpati1 3.4s 3s cubic-bezier(.3, .1, .4, 1) both; }
  .js.is-open:not(.no-anim) .mp.m2 { animation: merpati2 3.6s 3.2s cubic-bezier(.3, .1, .4, 1) both; }
  .js.is-open:not(.no-anim) .mp.m3 { animation: merpati3 3.8s 3.4s cubic-bezier(.3, .1, .4, 1) both; }
  .kerlip { animation: kerlip 2.4s ease-in-out infinite; } .kerlip.k2 { animation-delay: -.6s; } .kerlip.k3 { animation-delay: -1.2s; } .kerlip.k4 { animation-delay: -1.8s; } .kerlip.k5 { animation-delay: -.9s; }
  .js.is-open:not(.no-anim) .kerlip { animation-delay: 6.8s; } .js.is-open:not(.no-anim) .kerlip.k2 { animation-delay: 7.2s; } .js.is-open:not(.no-anim) .kerlip.k3 { animation-delay: 7.6s; } .js.is-open:not(.no-anim) .kerlip.k4 { animation-delay: 8s; } .js.is-open:not(.no-anim) .kerlip.k5 { animation-delay: 7.4s; }
  .juntai { animation: ayunT 5.5s ease-in-out infinite alternate; } .juntai.r { animation-delay: -2.4s; }
  .teratai-sisi { animation: apungD 3.8s ease-in-out infinite alternate; } .teratai-sisi.r { animation-delay: -1.9s; }
  .kilat { animation: kilat 6s 6s ease-in-out infinite; }
  .js.is-open:not(.no-anim) .cermin { animation: turunC 1.7s 5.2s cubic-bezier(.3, 1.25, .4, 1) both, ayun 6s 6.9s ease-in-out infinite; }
  .js.is-open:not(.no-anim) .hero-pin > .mouse { animation: naik 1s 6.9s both; }
  .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; }
  .cover-rangkai { animation: turun 1.4s .1s both; } .cover-angsa { animation: apung 3.4s ease-in-out infinite alternate; }
  .wisteria { animation: ayunT 5s ease-in-out infinite alternate; }
  .closing .buket { animation: ayun 7s ease-in-out infinite; transform-origin: 50% 10%; }
  .countdown div { animation: apungD 3.6s ease-in-out infinite alternate; } .countdown div:nth-child(2) { animation-delay: -.9s; } .countdown div:nth-child(3) { animation-delay: -1.8s; } .countdown div:nth-child(4) { animation-delay: -2.7s; }
}
@keyframes putar { to { rotate: 360deg; } }
@keyframes terbangK { 0%, 100% { translate: 0 0; } 25% { translate: 60px -50px; } 50% { translate: 120px 10px; } 75% { translate: 40px 50px; } }
@keyframes kepakL { from { transform: rotateY(0); } to { transform: rotateY(70deg); } }
@keyframes kepakR { from { transform: rotateY(0); } to { transform: rotateY(-70deg); } }
@keyframes riakH { 0% { opacity: 0; scale: .3; } 15% { opacity: .9; } 100% { opacity: 0; scale: 2.4; } }
@keyframes sembur { 0% { opacity: 0; translate: 0 0; rotate: 0deg; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; translate: 50px 108vh; rotate: 540deg; } }
@keyframes merpati1 { 0% { opacity: 0; translate: 0 0; scale: .5; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; translate: -520px -760px; scale: 1.4; } }
@keyframes merpati2 { 0% { opacity: 0; translate: 0 0; scale: .5; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; translate: 560px -700px; scale: 1.3; } }
@keyframes merpati3 { 0% { opacity: 0; translate: 0 0; scale: .5; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; translate: -120px -980px; scale: 1.2; } }
@keyframes kerlip { 0%, 100% { opacity: 0; scale: .3; rotate: 0deg; } 50% { opacity: 1; scale: 1; rotate: 45deg; } }
@keyframes gugur { from { translate: 0 0; } to { translate: 60px 112vh; } }
@keyframes kibar { from { rotate: -50deg; scale: 1 1; } to { rotate: 190deg; scale: .4 1; } }
@keyframes kunang { 0%, 100% { opacity: 0; translate: 0 0; } 50% { opacity: .95; translate: 8px -22px; } }
@keyframes ayunT { from { rotate: -1.2deg; } to { rotate: 1.2deg; } }
@keyframes apung { from { translate: 0 0; } to { translate: 0 -3%; } }
@keyframes apungD { from { translate: 0 0; } to { translate: 0 -6px; } }
@keyframes riak { from { background-position: 0 0; } to { background-position: 160% 0; } }
@keyframes pantul { from { transform: scaleY(-.62) skewX(-1.5deg); } to { transform: scaleY(-.6) skewX(1.5deg); } }
@keyframes kedip { from { opacity: .7; scale: .94; } to { opacity: 1; scale: 1.06; } }
@keyframes napas { from { opacity: .75; scale: .96; } to { opacity: 1; scale: 1.04; } }
@keyframes lintas { from { translate: -300px 640px; } to { translate: 1800px 380px; } }
@keyframes sayap { from { scale: 1 1; } to { scale: 1 -.6; } }
@keyframes kilat { 0% { background-position: 160% 0; } 35%, 100% { background-position: -60% 0; } }
@keyframes turunC { from { opacity: 0; translate: 0 -105%; rotate: 5deg; } to { opacity: 1; translate: 0 0; rotate: -1deg; } }
@keyframes ayun { 0%, 100% { rotate: -1.2deg; } 50% { rotate: 1.2deg; } }
@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(141, 117, 181, 0); } 50% { box-shadow: 0 0 0 9px rgba(141, 117, 181, .22); } }
@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 .kabut i, .js .angsa, .js .lilin, .js .subuh, .js .bintang, .js .sinar, .js .kunang, .js .ly-juntai .jt { transition: none; } }

@media (prefers-reduced-motion: no-preference) {
  .js .hero { min-height: 260vh; min-height: 260svh; }
  /* Perjalanan gulir: --p (0→1) dipasang telaga.js setelah pembukaan; di p = 0 sama dengan keadaan akhir pembukaan.
     Kamera meluncur di atas air menuju gazebo: dedalu tersibak ke luar, angsa dan teratai lewat di bawah. */
  .ready .ly { transition: none; }
  .js.is-open.ready .ly-bg { transform-origin: 50% 46%; transform: scale(calc(1 + var(--p, 0) * .5)); }
  .js.is-open.ready .ly-gazebo { transform-origin: 50% 52%; transform: scale(calc(1 + var(--p, 0) * var(--p, 0) * 2.8)); opacity: calc(1 - (var(--p, 0) - .6) * 4); }
  .js.is-open.ready .ly-angsa { transform-origin: 50% 85%; transform: translateY(calc(var(--p, 0) * 22%)) scale(calc(1 + var(--p, 0) * .9)); opacity: calc(1 - (var(--p, 0) - .3) * 3); }
  .js.is-open.ready .ly-depan { transform-origin: 50% 100%; transform: translateY(calc(var(--p, 0) * 26%)) scale(calc(1 + var(--p, 0) * .6)); }
  .js.is-open.ready .ly-tirai.l { transform-origin: 0 0; transform: translateX(calc(var(--p, 0) * -48%)) scale(calc(1 + var(--p, 0) * .35)); }
  .js.is-open.ready .ly-tirai.r { transform-origin: 100% 0; transform: translateX(calc(var(--p, 0) * 48%)) scale(calc(1 + var(--p, 0) * .35)); }
  .ready .title-wrap { opacity: calc(1 - var(--p, 0) * 5); translate: 0 calc(var(--p, 0) * -140px); }
  .ready .hero-pin > .mouse { opacity: calc(.9 - var(--p, 0) * 6); }
  .ready .terang { opacity: calc((var(--p, 0) - .68) * 3.4); }
  .ready .kelopak, .ready .kunang { opacity: calc(1 - var(--p, 0) * 2.5); }

  /* Ornamen isi (.tampak dipasang telaga.js saat bagian/elemen masuk layar; keadaan dasar = sudah tampil). */
  .rangkai-atas { transition: scale 1.1s cubic-bezier(.3, 1.3, .4, 1), opacity .6s ease; }
  .gerak .verse:not(.tampak) .rangkai-atas { scale: .2 1; opacity: 0; }
  .jendela .portrait { transition: clip-path 1.5s cubic-bezier(.5, 0, .2, 1) .2s, translate 1.2s cubic-bezier(.2, .8, .2, 1) .2s; clip-path: inset(-12px -12px -40% -12px); }
  .gerak .person:not(.tampak) .jendela .portrait { clip-path: inset(100% -12px -40% -12px); translate: 0 30px; }
  .untai { transition: scale 1.2s cubic-bezier(.3, 1.3, .4, 1) .9s, opacity .6s ease .9s; }
  .gerak .person:not(.tampak) .untai { scale: .3 1; opacity: 0; }
  .wisteria { transition: scale 1.2s cubic-bezier(.3, 1.2, .4, 1) 1.3s; }
  .gerak .person:not(.tampak) .wisteria.l { scale: 1 0; } .gerak .person:not(.tampak) .wisteria.r { scale: -1 0; }
  .sudut { transition: scale 1s cubic-bezier(.3, 1.3, .4, 1) .3s, opacity .5s ease .3s; }
  .gerak .event:not(.tampak) .sudut.l { scale: .2; opacity: 0; } .gerak .event:not(.tampak) .sudut.r { scale: -.2 .2; opacity: 0; }
  .teratai { transition: scale .9s cubic-bezier(.3, 1.5, .4, 1) .3s; }
  .gerak .chapters li:not(.tampak) .teratai { scale: 0; }
  .chapters::before { transition: clip-path 2.4s ease; clip-path: inset(0); }
  .gerak .story:not(.tampak) .chapters::before { clip-path: inset(0 0 100% 0); }
  .pojok, .juntai { transition: scale 1.2s cubic-bezier(.3, 1.25, .4, 1) .2s, opacity .6s ease .2s; }
  .gerak section:not(.tampak) > .pojok.l { scale: .3; opacity: 0; } .gerak section:not(.tampak) > .pojok.r { scale: -.3 .3; opacity: 0; }
  .gerak section:not(.tampak) > .pojok.l.bawah { scale: .3 -.3; } .gerak section:not(.tampak) > .pojok.r.bawah { scale: -.3 -.3; }
  .gerak section:not(.tampak) > .juntai.l { scale: 1 0; opacity: 1; } .gerak section:not(.tampak) > .juntai.r { scale: -1 0; opacity: 1; }
  .untai-atas { transition: scale 1.1s cubic-bezier(.3, 1.3, .4, 1), opacity .6s ease; }
  .gerak section:not(.tampak) > .untai-atas { scale: .2 1; opacity: 0; }
  .teratai-sisi { transition: translate 1.4s cubic-bezier(.2, .8, .2, 1) .3s, opacity .8s ease .3s; }
  .gerak .count:not(.tampak) .teratai-sisi { translate: 0 60px; opacity: 0; }
  .kelopak-isi i { display: block; animation-name: gugur, kibar; animation-timing-function: linear, ease-in-out; animation-iteration-count: infinite; animation-direction: normal, alternate; }
  .angsa-tutup { transition: translate 1.4s cubic-bezier(.2, .8, .2, 1), opacity .8s ease; }
  .gerak .closing:not(.tampak) .angsa-tutup { translate: 0 40px; opacity: 0; }
}
.js body.locked { overflow: visible; }

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