/* Layangan — undangan khitanan, lukisan cat air bergerak: sawah terasering di sore keemasan, saung bambu, masjid di
   bukit, nyiur di kiri-kanan. Dibuka: kamera berjongkok di antara padi; padi turun dan menepi, pandangan berdiri melihat
   sawah, layang-layang naik satu per satu dari balik padi, lalu layangan hias besar terbang masuk membawa nama ananda
   (ekor pita dari CSS). Saat pembuka digulir kamera ikut naik ke langit: sawah turun, layang-layang terlewati, awan
   mendekat sampai layar memutih. Adegannya lapisan gambar (assets/img/*.webp) yang digerakkan CSS. */
@font-face { font-family: "Baloo 2"; src: url("fonts/baloo2.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("fonts/nunito.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("fonts/caveat.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Amiri"; src: url("fonts/amiri-bismillah.woff2") format("woff2"); font-display: swap; }

:root {
  --bg: #f5f7ec; --sky: #d7ebf1; --card: #fffdf6; --ink: #22352a; --soft: #5d6e60; --green: #3f7d3a; --deep: #24502c;
  --red: #cf4637; --gold: #e2a63b; --blue: #3d86a8; --line: #dfe5cf;
  --display: "Baloo 2", "Nunito", system-ui, sans-serif; --sans: "Nunito", system-ui, sans-serif; --hand: "Caveat", cursive;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--sky); }
body { margin: 0; background: var(--sky); color: var(--ink); font: 500 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
h1, h2, h3, p, figure { margin: 0; }
a { color: var(--green); }
: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(30, 60, 40, .22); } }

/* ---------- Adegan: .stage berbanding 1536:2752 dan selalu menutup layar; posisi dalam persen.
   Urutan dari belakang: sawah-langit (latar) → layang-layang di langit → padi di depan → awan dekat → putih.
   Keadaan dasar = adegan akhir; sebelum dibuka (.js:not(.is-open)) kamera berjongkok di balik padi. ---------- */
.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: #cfe3ea; display: none; }
.js .scene { display: block; }
.scene-off .scene { visibility: hidden; }
.stage { position: absolute; left: 50%; top: 50%; height: max(100%, calc(min(100vw, 480px) * 1.7917)); aspect-ratio: 1536 / 2752; translate: -50% -50%; }
.ly { position: absolute; inset: 0; will-change: transform; transform-origin: 50% 60%; backface-visibility: hidden; }
.ly-bg > img, .ly-depan > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.ly-depan { transform: translateY(17%); }
.mentari { position: absolute; left: 50%; top: 47%; width: 90%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 236, 180, .7), rgba(255, 222, 150, .2) 50%, transparent); }
.awan i { position: absolute; height: 4%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0)); }
.awan i:nth-child(1) { left: 4%; top: 15%; width: 36%; } .awan i:nth-child(2) { left: 58%; top: 7%; width: 30%; } .awan i:nth-child(3) { left: 30%; top: 33%; width: 26%; height: 3%; }
/* Layang-layang: satu gambar, warnanya digeser per salinan. Benang (::after) turun ke sawah. */
.lg { position: absolute; transform-origin: 50% 30%; }
.lg img { width: 100%; height: auto; max-width: none; }
.lg::after { content: ""; position: absolute; left: 50%; top: 25%; width: 1px; height: 340%; background: linear-gradient(rgba(255, 255, 255, .85), rgba(255, 255, 255, 0)); transform-origin: 0 0; rotate: 16deg; z-index: -1; }
.lg1 { left: 8%; top: 9%; width: 14%; rotate: -8deg; }
.lg2 { left: 74%; top: 5%; width: 12%; rotate: 9deg; } .lg2 img { filter: hue-rotate(190deg) saturate(1.1); } .lg2::after { rotate: -14deg; }
.lg3 { left: 57%; top: 21%; width: 9%; rotate: 4deg; } .lg3 img { filter: hue-rotate(95deg); } .lg3::after { rotate: -8deg; }
.lg4 { left: 27%; top: 26%; width: 7%; rotate: -5deg; } .lg4 img { filter: hue-rotate(40deg) saturate(1.2); }
.burung { position: absolute; left: 40%; top: 18%; width: 10%; height: 4%; }
.burung i { position: absolute; width: 22%; height: 22%; border-top: 2px solid rgba(50, 60, 70, .55); border-radius: 50% 50% 0 0; }
.burung i::after { content: ""; position: absolute; left: 95%; top: -2px; width: 100%; height: 100%; border-top: 2px solid rgba(50, 60, 70, .55); border-radius: 50% 50% 0 0; }
.burung i:nth-child(1) { left: 0; top: 30%; } .burung i:nth-child(2) { left: 40%; top: 0; } .burung i:nth-child(3) { left: 70%; top: 55%; scale: .7; }
.awan-dekat { position: absolute; inset: 0; opacity: 0; }
.awan-dekat i { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, #fff 30%, rgba(255, 255, 255, 0)); }
.awan-dekat i:nth-child(1) { left: -30%; top: 10%; width: 90%; height: 30%; } .awan-dekat i:nth-child(2) { left: 40%; top: 4%; width: 90%; height: 26%; }
.awan-dekat i:nth-child(3) { left: -10%; top: 46%; width: 70%; height: 22%; } .awan-dekat i:nth-child(4) { left: 46%; top: 54%; width: 80%; height: 26%; }
.terang { position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, #fff, #fbfdf8 60%, var(--sky)); opacity: 0; }

/* Pembukaan: padi turun & menepi (0,2–2,8 dtk), sawah mundur ke ukuran asli (0–3), layang-layang naik bergiliran
   dari balik padi (1,0–4,2), layangan judul terbang masuk (2,6–4,4). */
.js .ly-depan { transition: transform 2.6s cubic-bezier(.55, 0, .2, 1) .2s; transform-origin: 50% 100%; }
.js .ly-bg { transition: transform 3s cubic-bezier(.5, 0, .2, 1); }
.js .lg { transition: translate 2.2s cubic-bezier(.25, .8, .3, 1), opacity .8s ease; }
.js .lg1 { transition-delay: 1s; } .js .lg2 { transition-delay: 1.4s; } .js .lg3 { transition-delay: 1.8s; } .js .lg4 { transition-delay: 2.1s; }
.js:not(.is-open) .ly-depan { transform: translateY(-34%) scale(1.9); }
.js:not(.is-open) .ly-bg { transform: scale(1.22) translateY(5%); }
.js:not(.is-open) .lg { translate: 0 260%; opacity: 0; }
.js.no-anim .ly, .js.no-anim .lg { transition: none; }
.js.no-anim .kartu, .js.no-anim .kartu-isi > *, .js.no-anim .hero-pin > .mouse { animation: none !important; }

/* ---------- Sampul ---------- */
.caps { font: 800 11px/1.4 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--green); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border: 0; border-radius: 16px; background: var(--red); color: #fffaf0; text-decoration: none; cursor: pointer; font: 800 14px/1 var(--sans); letter-spacing: .04em; box-shadow: 0 6px 0 #9c2f24, 0 14px 24px rgba(160, 50, 40, .25); }
.btn svg { width: 16px; height: 18px; }
.btn.ghost { min-height: 40px; padding: 0 16px; background: transparent; color: var(--green); border: 2px solid var(--green); box-shadow: none; font-size: 13px; }
.btn.copied { background: var(--green); color: #fff; border-color: var(--green); }
.cover { position: relative; min-height: 100vh; min-height: 100svh; padding: 64px 26px 56px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center; overflow: hidden;
  background: linear-gradient(180deg, #bfe0ec, #e6f2e8 55%, #cfe3b5); }
.js .cover { position: fixed; inset: 0; z-index: 40; max-width: 480px; margin: 0 auto; transition: opacity .7s ease .2s; }
.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(14, 34, 22, .6), rgba(14, 34, 22, .05) 38%, rgba(14, 34, 22, .1) 55%, rgba(14, 34, 22, .8)); }
.cover-top, .cover-bottom { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cover.has-photo .caps { color: #ffe3a6; }
.names { font: 800 66px/1 var(--display); color: var(--deep); overflow-wrap: anywhere; }
.cover.has-photo .names { color: #fff; text-shadow: 0 4px 18px rgba(0, 0, 0, .35); }
.cover-date { font: 700 15px/1.4 var(--sans); opacity: .9; }
.to { font-size: 14px; opacity: .85; }
.guest-name { font: 700 30px/1.15 var(--hand); overflow-wrap: anywhere; }
.cv-layang { position: absolute; z-index: 1; right: 6%; top: 24%; width: 22%; rotate: 12deg; opacity: .95; }
.memuat .cover .open { opacity: .55; pointer-events: none; }

/* ---------- Pembuka: nama di layangan hias, 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: 7vh; }
.scene-off .hero-pin { visibility: hidden; }
.title-wrap { width: min(64%, 270px); }
.kartu { position: relative; transform-origin: 50% 20%; }
.kartu > img { width: 100%; height: auto; }
.kartu-isi { position: absolute; left: 22%; right: 22%; top: 24%; bottom: 24%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; }
.kartu-isi .caps { font-size: 9px; letter-spacing: .18em; color: var(--red); }
.t-name { font: 800 clamp(30px, 10vw, 42px)/1 var(--display); color: var(--deep); overflow-wrap: anywhere; }
.t-date { font: 700 11px/1.3 var(--sans); color: var(--soft); }
/* Ekor pita layangan: simpul kecil berselang warna yang melambai. */
.ekor { position: absolute; left: 50%; top: 97%; width: 0; height: 110px; }
.ekor i { position: absolute; left: -9px; width: 18px; height: 10px; background: conic-gradient(from 90deg at 50% 50%, var(--c, var(--red)) 0 25%, transparent 0 50%, var(--c, var(--red)) 0 75%, transparent 0); }
.ekor i:nth-child(1) { top: 4px; } .ekor i:nth-child(2) { top: 22px; --c: var(--gold); left: -6px; } .ekor i:nth-child(3) { top: 40px; --c: var(--green); left: -12px; }
.ekor i:nth-child(4) { top: 58px; --c: var(--blue); left: -5px; } .ekor i:nth-child(5) { top: 76px; left: -12px; } .ekor i:nth-child(6) { top: 94px; --c: var(--gold); left: -7px; }
.mouse { position: absolute; left: 50%; bottom: 3vh; width: 22px; height: 36px; margin-left: -11px; border: 2px solid #fff; border-radius: 12px; opacity: .9; }
.mouse::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: #fff; animation: gulir 1.6s ease-in-out infinite; }
html:not(.js) .hero-pin { position: relative; height: auto; padding: 40px 0 150px; } html:not(.js) .mouse { display: none; }

/* ---------- Isi: kertas pucat bermotif anyaman bambu samar ---------- */
main > section:not(.hero) { position: relative; overflow: hidden; padding: 64px 24px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
  background-color: var(--bg); background-image: repeating-linear-gradient(45deg, rgba(63, 125, 58, .045) 0 2px, transparent 2px 14px), repeating-linear-gradient(-45deg, rgba(226, 166, 59, .05) 0 2px, transparent 2px 14px); }
.orn { pointer-events: none; }
.title { font: 800 32px/1.1 var(--display); color: var(--deep); }
.lead { font-size: 15.5px; line-height: 1.75; color: var(--soft); max-width: 24em; }
.bismillah { font: 400 30px/1.9 "Amiri", serif; color: var(--green); direction: rtl; }
.opening { font: 800 20px/1.3 var(--display); color: var(--ink); }

.salam { padding-top: 34px !important; }
.rangkai { width: 92%; margin-bottom: -6px; }

/* Ananda: foto di dalam layangan hias (bingkai = gambar judul, foto dipotong wajik), benang menjuntai. */
.anak { gap: 8px !important; }
.bingkai { position: relative; width: 78%; aspect-ratio: 760 / 978; margin-bottom: 64px; transform-origin: 50% 0; }
.bingkai .foto { position: absolute; inset: 0; clip-path: polygon(50% 12.5%, 87% 50%, 50% 87.5%, 13% 50%); background: linear-gradient(160deg, #9fd0b1, var(--green)); display: grid; place-items: center; }
.bingkai .foto img { width: 100%; height: 100%; object-fit: cover; }
.bingkai .foto span { font: 800 110px/1 var(--display); color: #fff; }
.kerangka { position: absolute; inset: 0; width: 100%; height: 100%; }
.benang { position: absolute; left: 50%; top: 96%; width: 2px; height: 70px; background: linear-gradient(var(--soft), rgba(93, 110, 96, 0)); }
.anak h2 { font: 800 30px/1.15 var(--display); color: var(--deep); overflow-wrap: anywhere; }
.parents { font-size: 15px; line-height: 1.6; color: var(--soft); } .parents b { color: var(--ink); }

/* Hitung mundur: empat layangan kecil bertali. */
.countdown { position: relative; display: flex; gap: 14px; justify-content: center; padding: 18px 0 8px; }
.countdown::before { content: ""; position: absolute; left: 4%; right: 4%; top: 50%; border-top: 2px dashed rgba(93, 110, 96, .4); }
.countdown div { position: relative; width: 62px; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.countdown div::before { content: ""; position: absolute; inset: 6px; rotate: 45deg; border-radius: 6px; background: var(--c, var(--red)); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .45), 0 8px 16px rgba(40, 60, 40, .18); }
.countdown div:nth-child(2) { --c: var(--gold); } .countdown div:nth-child(3) { --c: var(--green); } .countdown div:nth-child(4) { --c: var(--blue); }
.countdown b, .countdown span { position: relative; color: #fff; }
.countdown b { font: 800 22px/1 var(--display); font-variant-numeric: tabular-nums; }
.countdown span { font: 800 8px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; }

/* Acara: kartu tergantung di seutas benang layangan. */
.tali { position: relative; width: 100%; display: grid; gap: 26px; padding: 12px 0 0 26px; text-align: left; }
.tali::before { content: ""; position: absolute; left: 8px; top: -20px; bottom: 20px; border-left: 2px dashed rgba(93, 110, 96, .45); }
.ev { position: relative; padding: 20px 18px; border-radius: 18px; background: var(--card); border: 2px solid var(--line); box-shadow: 0 12px 26px rgba(40, 70, 40, .1); }
.simpul { position: absolute; left: -30px; top: 18px; width: 22px; height: 28px; color: var(--red); }
.ev:nth-child(2) .simpul { color: var(--blue); }
.tag { display: inline-block; padding: 4px 12px; border-radius: 999px; background: rgba(207, 70, 55, .12); color: var(--red); font: 800 12px/1.4 var(--sans); letter-spacing: .06em; }
.when { margin-top: 8px; font: 800 22px/1.2 var(--display); color: var(--deep); }
.time { font-weight: 700; font-size: 14px; color: var(--soft); }
.place { margin-top: 8px; display: flex; gap: 8px; font-size: 14px; line-height: 1.5; color: var(--soft); }
.place svg { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--red); }
.aksi { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; }
.aksi .btn { min-height: 40px; padding: 0 16px; font-size: 13px; box-shadow: 0 4px 0 #9c2f24; }
.aksi .btn.ghost { box-shadow: none; }
.aksi svg { width: 15px; height: 15px; }

/* Doa: surat bergaris yang disematkan layangan kecil. */
.surat { position: relative; width: 100%; padding: 30px 22px 24px; border-radius: 6px; background: repeating-linear-gradient(180deg, transparent 0 29px, rgba(61, 134, 168, .16) 29px 30px), var(--card); box-shadow: 0 14px 30px rgba(40, 70, 40, .12); rotate: -1deg; }
.surat::before { content: ""; position: absolute; left: 50%; top: -16px; width: 34px; height: 40px; translate: -50% 0; background: var(--red); clip-path: polygon(50% 0, 100% 42%, 50% 100%, 0 42%); }
.story { margin-top: 10px; font: 600 25px/1.2 var(--hand); color: var(--ink); white-space: pre-line; }
.ayat { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line); }
.ayat blockquote { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--soft); }
.ayat .latin { font: 700 17px/1.4 var(--display); color: var(--green); }
.ayat figcaption { margin-top: 6px; font: 800 11px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }

/* Galeri: polaroid bertumpuk dua kolom, disemat selotip. */
.grid { width: 100%; columns: 2; column-gap: 12px; }
.grid figure { position: relative; break-inside: avoid; margin: 0 0 14px; padding: 6px 6px 18px; background: #fff; border-radius: 3px; box-shadow: 0 10px 20px rgba(40, 60, 40, .16); rotate: -1.5deg; }
.grid figure:nth-child(even) { rotate: 1.8deg; }
.grid figure::before { content: ""; position: absolute; left: 50%; top: -8px; width: 46px; height: 16px; translate: -50% 0; rotate: -3deg; background: rgba(226, 166, 59, .55); }
.grid img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; }
.grid figure:nth-child(3n+2) img { aspect-ratio: 1; }

.gift-list { width: 100%; display: grid; gap: 12px; }
.gift-card { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 18px; background: var(--card); border: 2px solid var(--line); text-align: left; }
.gift-card > div { flex: 1; min-width: 0; }
.gift-ic { flex: none; width: 32px; height: 40px; color: var(--gold); }
.bank { font: 800 11px/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--green); }
.number { font: 800 20px/1.3 var(--display); overflow-wrap: anywhere; }
.holder { font-size: 13px; color: var(--soft); overflow-wrap: anywhere; }

.form { width: 100%; display: grid; gap: 14px; padding: 22px; border-radius: 20px; background: var(--card); border: 2px solid var(--line); text-align: left; }
.field { display: grid; gap: 6px; border: 0; margin: 0; padding: 0; font-size: 14px; font-weight: 700; color: var(--soft); }
.field input, .field textarea { width: 100%; padding: 12px 14px; border: 2px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); font: 600 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: 2px solid var(--line); border-radius: 12px; text-align: center; color: var(--ink); cursor: pointer; background: #fff; }
.opt input:checked + span { border-color: var(--green); background: rgba(63, 125, 58, .1); color: var(--deep); }
.opt input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.thanks .big { font: 800 28px/1.2 var(--display); color: var(--green); }
.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: 800 24px/1.2 var(--display); color: var(--deep); } .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: 14px; background: var(--card); border: 2px solid var(--line); }
.wish-head { display: flex; gap: 8px; align-items: center; } .wish-head svg { width: 12px; height: 15px; color: var(--red); }
.wishes .tag { font-size: 10px; padding: 2px 8px; }
.status { font-size: 12px; font-weight: 800; color: var(--green); } .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: 110px !important; background: linear-gradient(180deg, var(--bg), #d6ebf0) !important; }
.terbang { position: relative; width: 100%; height: 150px; }
.terbang img { position: absolute; width: 64px; }
.terbang .t1 { left: 22%; top: 10px; rotate: -10deg; } .terbang .t2 { right: 20%; top: 40px; width: 50px; rotate: 8deg; filter: hue-rotate(190deg); }
.merci { font: 800 46px/1.05 var(--display); color: var(--deep); }
.thanks-line { color: var(--soft); max-width: 20em; }
.sign { font: 700 26px/1.2 var(--hand); color: var(--green); }
.closing .rangkai { width: 80%; margin-top: 10px; rotate: 180deg; }
footer { position: relative; z-index: 1; padding: 0 16px 90px; text-align: center; font-size: 12px; color: var(--soft); background: #d6ebf0; }

.music-toggle { position: fixed; right: max(14px, calc(50% - 226px)); bottom: 16px; z-index: 50; width: 48px; height: 48px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: #fff; cursor: pointer; box-shadow: 0 8px 20px rgba(30, 60, 30, .3); }
.music-toggle svg { width: 20px; height: 20px; }
.js:not(.is-open) .music-toggle { display: none; }

/* ---------- 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: layang-layang meliuk, awan bergeser, burung melintas, mentari berpendar, padi bergoyang, ekor pita melambai. */
  .lg img { animation: liuk 3.4s ease-in-out infinite alternate; transform-origin: 50% 25%; }
  .lg2 img { animation-duration: 2.8s; animation-delay: -1s; } .lg3 img { animation-duration: 4s; animation-delay: -2s; } .lg4 img { animation-duration: 3s; animation-delay: -.6s; }
  .lg { animation: melayang 7s ease-in-out infinite alternate; } .lg2 { animation-duration: 9s; } .lg3 { animation-duration: 6s; animation-delay: -3s; }
  .awan i { animation: geser 22s ease-in-out infinite alternate; } .awan i:nth-child(2) { animation-duration: 28s; animation-delay: -9s; } .awan i:nth-child(3) { animation-duration: 18s; }
  .burung { animation: burung 16s linear infinite; } .burung i, .burung i::after { animation: kepak .5s ease-in-out infinite alternate; }
  .mentari { animation: pendar 4s ease-in-out infinite alternate; }
  .ly-depan > img { animation: padi 5s ease-in-out infinite alternate; transform-origin: 50% 100%; }
  .ekor { animation: kibas 1.6s ease-in-out infinite alternate; transform-origin: 0 0; }
  .ekor i { animation: kepak .7s ease-in-out infinite alternate; } .ekor i:nth-child(even) { animation-delay: -.35s; }
  .js.is-open .kartu { animation: terbangMasuk 1.9s 2.6s cubic-bezier(.25, .9, .3, 1) both, liuk 3.6s 4.6s ease-in-out infinite alternate; }
  .js.is-open .kartu-isi > * { animation: naik .8s both; } .js.is-open .kartu-isi > :nth-child(1) { animation-delay: 4.1s; } .js.is-open .kartu-isi > :nth-child(2) { animation-delay: 4.3s; } .js.is-open .kartu-isi > :nth-child(3) { animation-delay: 4.6s; }
  .js.is-open .hero-pin > .mouse { animation: naik 1s 5s both; }
  .cv-layang { animation: liuk 3s ease-in-out infinite alternate; }
  .music-toggle[aria-pressed="true"] svg { animation: kepak .6s ease-in-out infinite alternate; }
  /* Bagian isi: ornamen bergerak saat bagiannya terlihat (.tampak). */
  .js .salam:not(.tampak) .rangkai { scale: .5; opacity: 0; }
  .rangkai { transition: scale 1.2s cubic-bezier(.3, 1.3, .4, 1), opacity .7s ease; }
  .js .anak:not(.tampak) .bingkai { translate: 0 120px; rotate: -12deg; opacity: 0; }
  .bingkai { transition: translate 1.6s cubic-bezier(.25, .9, .3, 1), rotate 1.6s cubic-bezier(.25, .9, .3, 1), opacity .8s ease; }
  .anak.tampak .bingkai { animation: ayun 3.8s 1.6s ease-in-out infinite alternate; }
  .js .hitung:not(.tampak) .countdown div { translate: 0 60px; opacity: 0; }
  .countdown div { transition: translate 1s cubic-bezier(.3, 1.4, .4, 1), opacity .5s ease; }
  .countdown div:nth-child(2) { transition-delay: .12s; } .countdown div:nth-child(3) { transition-delay: .24s; } .countdown div:nth-child(4) { transition-delay: .36s; }
  .hitung.tampak .countdown div::before { animation: ayun 2.6s 1.2s ease-in-out infinite alternate; }
  .hitung.tampak .countdown div:nth-child(even)::before { animation-delay: 1.5s; }
  .js .acara:not(.tampak) .ev { translate: 60px 0; rotate: 4deg; opacity: 0; }
  .ev { transition: translate 1s cubic-bezier(.25, .9, .3, 1), rotate 1s cubic-bezier(.25, .9, .3, 1), opacity .6s ease; transform-origin: 0 0; } .ev:nth-child(2) { transition-delay: .2s; }
  .js .doa:not(.tampak) .surat { translate: 0 50px; rotate: 6deg; opacity: 0; }
  .surat { transition: translate 1.1s cubic-bezier(.25, .9, .3, 1), rotate 1.1s cubic-bezier(.25, .9, .3, 1), opacity .6s ease; }
  .closing.tampak .terbang img { animation: naikTerbang 5s ease-in-out infinite alternate; } .closing.tampak .terbang .t2 { animation-duration: 4s; animation-delay: -2s; }
  @supports (animation-timeline: view()) {
    .grid figure { animation: polaroid linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
  }
}
@keyframes liuk { from { rotate: -5deg; translate: -3px 0; } to { rotate: 5deg; translate: 3px -4px; } }
@keyframes melayang { from { transform: none; } to { transform: translate(12px, -18px); } }
@keyframes geser { from { translate: -6% 0; } to { translate: 8% 0; } }
@keyframes burung { from { translate: -500% 40%; } to { translate: 900% -60%; } }
@keyframes kepak { from { scale: 1 1; } to { scale: 1 .55; } }
@keyframes pendar { from { opacity: .7; scale: .95; } to { opacity: 1; scale: 1.05; } }
@keyframes padi { from { transform: skewX(-1deg); } to { transform: skewX(1deg); } }
@keyframes ayun { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes kibas { from { rotate: -8deg; } to { rotate: 10deg; } }
@keyframes terbangMasuk { from { opacity: 0; transform: translate(-30px, 80vh) rotate(-24deg) scale(.5); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes naik { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@keyframes naikTerbang { from { translate: 0 20px; rotate: -8deg; } to { translate: 10px -16px; rotate: 8deg; } }
@keyframes polaroid { from { opacity: 0; scale: .85; translate: 0 30px; } to { opacity: 1; scale: 1; translate: 0 0; } }
@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; } *, *::before, *::after { animation: none !important; } .js .ly, .js .lg { transition: none; } }

@media (prefers-reduced-motion: no-preference) {
  /* Perjalanan gulir: --p (0→1) dipasang layangan.js setelah pembukaan; di p = 0 sama dengan keadaan akhir pembukaan.
     Kamera naik ke langit: sawah & padi turun keluar layar, layang-layang membesar terlewati, awan dekat memenuhi
     layar, lalu memutih. */
  .ready .ly { transition: none; }
  .js.is-open.ready .ly-bg { transform-origin: 50% 100%; transform: translateY(calc(var(--p, 0) * 30%)) scale(calc(1 + var(--p, 0) * .6)); }
  .js.is-open.ready .ly-depan { transform: translateY(calc(17% + var(--p, 0) * 55%)); }
  .js.is-open.ready .ly-langit { transform-origin: 50% 15%; transform: translateY(calc(var(--p, 0) * 48%)) scale(calc(1 + var(--p, 0) * 1.2)); }
  .ready .awan-dekat { opacity: calc(var(--p, 0) * 2.4 - .5); transform: scale(calc(1.6 - var(--p, 0) * .6)); }
  .ready .title-wrap { opacity: calc(1 - var(--p, 0) * 5); translate: 0 calc(var(--p, 0) * -160px); }
  .ready .hero-pin > .mouse { opacity: calc(.9 - var(--p, 0) * 6); }
  .ready .terang { opacity: calc((var(--p, 0) - .6) * 3); }
  @supports (animation-timeline: scroll()) {
    html.gulir-css.ready .ly-bg { animation: g-bg linear both; transform-origin: 50% 100%; }
    html.gulir-css.ready .ly-depan { animation: g-depan linear both; }
    html.gulir-css.ready .ly-langit { animation: g-langit linear both; }
    html.gulir-css.ready .awan-dekat { animation: g-awan 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 .hero-pin > .mouse { animation: g-judul linear both; animation-timeline: scroll(root block); animation-range: 0 60vh; }
    html.gulir-css.ready .ly-bg, html.gulir-css.ready .ly-depan, html.gulir-css.ready .ly-langit, html.gulir-css.ready .awan-dekat, 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: none; } to { transform: translateY(30%) scale(1.6); } }
@keyframes g-depan { from { transform: translateY(17%); } to { transform: translateY(72%); } }
@keyframes g-langit { from { transform: none; } to { transform: translateY(48%) scale(2.2); } }
@keyframes g-awan { from { opacity: 0; transform: scale(1.6); } 20% { opacity: 0; } to { opacity: 1.9; transform: scale(1); } }
@keyframes g-terang { from, 60% { opacity: 0; } to { opacity: 1.2; } }
@keyframes g-judul { from { opacity: 1; translate: 0 0; } 20%, to { opacity: 0; translate: 0 -32px; } }