/* Rasi — undangan pernikahan bertema galaksi & rasi bintang. Latar 3D (scene.js, three.js): galaksi spiral ribuan
   bintang yang berputar, sepasang bintang kembar yang saling mengorbit, dan bintang jatuh. Saat dibuka kamera menembus
   inti galaksi (kilat putih), lalu galaksi menjadi langit yang ikut berputar saat digulir; di penutup kedua bintang
   menyatu jadi satu. Isi halaman berupa kartu kaca di atas langit, dihiasi rasi bintang SVG yang tergambar saat
   bagiannya terlihat. Tanpa JS/WebGL: langit bintang CSS dan semua isi tetap terbaca. */
@font-face { font-family: "Space Grotesk"; font-weight: 300 700; src: url("fonts/space-grotesk.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; font-weight: 400 600; src: url("fonts/cormorant.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400 600; src: url("fonts/cormorant-italic.woff2") format("woff2"); font-display: swap; }

/* --bg, --core, --arm1, --arm2, --star-a, --star-b juga dibaca scene.js untuk warna galaksi & bintang kembar. */
:root {
  --bg: #05060f; --bg2: #0b0f27; --ink: #eef0ff; --soft: #a9afd3; --accent: #f3d58a; --accent2: #ffefc2;
  --core: #ffe6b0; --arm1: #7aa8ff; --arm2: #c78bff; --star-a: #ffb8d4; --star-b: #a9d4ff;
  --glass: rgba(14, 18, 44, .58); --line: rgba(180, 190, 255, .2);
  --serif: "Cormorant Garamond", Georgia, serif; --sans: "Space Grotesk", system-ui, sans-serif;
}
:root[data-tone="ungu"] { --bg: #0a0414; --bg2: #1a0a2e; --soft: #c2a9d8; --accent: #ffb3d9; --accent2: #ffe0f0; --core: #ffd9f0; --arm1: #c78bff; --arm2: #ff6fb5; --star-a: #ff9fd0; --star-b: #b9a8ff; --glass: rgba(30, 12, 50, .58); --line: rgba(220, 180, 255, .22); }
:root[data-tone="aurora"] { --bg: #03100f; --bg2: #072420; --soft: #9fcfc4; --accent: #f3e7a8; --accent2: #fff7d2; --core: #f0ffe8; --arm1: #5ff0c8; --arm2: #6fa8ff; --star-a: #b9ffe4; --star-b: #9fd0ff; --glass: rgba(8, 34, 34, .58); --line: rgba(160, 255, 220, .2); }
:root[data-tone="senja"] { --bg: #100608; --bg2: #26100f; --soft: #e0b6a6; --accent: #ffd59a; --accent2: #fff0d6; --core: #fff0d0; --arm1: #ff9a6b; --arm2: #ff6f91; --star-a: #ffc09a; --star-b: #ffe28a; --glass: rgba(44, 16, 16, .58); --line: rgba(255, 200, 170, .22); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; color: var(--ink); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden;
  background:
    radial-gradient(1px 1px at 20px 30px, #fff, transparent) 0 0 / 120px 140px,
    radial-gradient(1.4px 1.4px at 70px 90px, rgba(255, 255, 255, .8), transparent) 0 0 / 160px 170px,
    radial-gradient(1px 1px at 100px 20px, color-mix(in srgb, var(--arm1) 70%, #fff), transparent) 0 0 / 210px 190px,
    radial-gradient(60% 40% at 80% 20%, color-mix(in srgb, var(--arm2) 22%, transparent), transparent 70%),
    radial-gradient(70% 50% at 10% 70%, color-mix(in srgb, var(--arm1) 18%, transparent), transparent 70%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  background-attachment: fixed; }
img { max-width: 100%; display: block; }
h1, h2, h3, p { margin: 0; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Kanvas 3D menutup langit CSS begitu WebGL siap (.gl). */
.scene { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
.gl .scene { opacity: 1; }
.kilat { position: fixed; inset: 0; z-index: 45; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 45%, #fff, color-mix(in srgb, var(--core) 80%, #fff) 35%, color-mix(in srgb, var(--arm1) 40%, transparent) 75%); }
.kilat.nyala { animation: kilat 1.6s ease-out both; }
.page { position: relative; z-index: 1; max-width: 480px; margin: 0 auto; min-height: 100vh; overflow: hidden; }

.caps { font: 600 12px/1.4 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--accent); }
.lead { font-size: 16px; line-height: 1.7; color: var(--soft); max-width: 24em; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 26px; border: 1px solid color-mix(in srgb, var(--accent) 70%, transparent); border-radius: 999px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, transparent), color-mix(in srgb, var(--arm2) 18%, transparent)); color: var(--ink); text-decoration: none; cursor: pointer;
  font: 600 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 22%, transparent), inset 0 1px 0 rgba(255, 255, 255, .18); }
.btn svg { width: 14px; height: 14px; color: var(--accent); }
.btn-line { min-height: 42px; padding: 0 20px; background: transparent; box-shadow: none; font-size: 12px; }
.btn.copied { background: var(--accent); color: var(--bg); }

/* ---------- Sampul ---------- */
.cover { position: relative; min-height: 100vh; min-height: 100svh; padding: 0 26px 9svh; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 12px; text-align: center; }
.js .cover { position: fixed; inset: 0; z-index: 40; max-width: 480px; margin: 0 auto; overflow-y: auto; transition: opacity .5s ease 1.6s; }
/* Dibuka: isi sampul terurai ke atas satu per satu (tombol dulu, lalu nama tamu, tanggal, nama), foto melebur ke depan
   mengikuti galaksi yang menembus kamera. */
.js .cover > * { transition: opacity .55s ease, translate .9s cubic-bezier(.5, 0, .75, 0), filter .6s ease, scale 1.2s cubic-bezier(.5, 0, .75, 0); }
.js.is-open .cover > * { opacity: 0; translate: 0 -46px; filter: blur(6px); animation: none; }
.js.is-open .cover > .cover-sky { translate: none; scale: 2.4; filter: blur(3px); transition-delay: .35s; }
.js.is-open .cover > .open { transition-delay: 0s; scale: 1.15; } .js.is-open .cover > .guest { transition-delay: .08s; }
.js.is-open .cover > .cover-date { transition-delay: .16s; } .js.is-open .cover > .names { transition-delay: .24s; } .js.is-open .cover > .caps { transition-delay: .32s; }
.js:not(.is-open) body { overflow: hidden; }
.js.is-open .cover { opacity: 0; pointer-events: none; }
.js.no-anim .cover, .js.no-anim .cover > * { transition: none; }
.cover-sky { flex: 1 1 auto; width: 100%; min-height: 220px; display: grid; place-items: center; }
.galaxy-2d { width: 120px; height: 120px; color: var(--accent2); filter: drop-shadow(0 0 18px var(--accent)); animation: kedip 3s ease-in-out infinite; }
.gl .galaxy-2d { visibility: hidden; }
.orbit-photo { position: relative; width: min(52vw, 200px); aspect-ratio: 1; }
.orbit-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--accent) 70%, transparent); box-shadow: 0 0 40px color-mix(in srgb, var(--arm1) 45%, transparent); }
.orbit-photo .ring, .portrait .ring { position: absolute; inset: -14%; border: 1px dashed color-mix(in srgb, var(--accent) 50%, transparent); border-radius: 50%; }
.orbit-photo .moon { position: absolute; inset: -14%; border-radius: 50%; }
.orbit-photo .moon::after { content: ""; position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--accent2); box-shadow: 0 0 12px 3px var(--accent); }
.names { font: italic 500 clamp(52px, 16vw, 68px)/1 var(--serif); color: #fff; text-shadow: 0 0 24px color-mix(in srgb, var(--arm1) 60%, transparent), 0 0 2px rgba(255, 255, 255, .6); overflow-wrap: anywhere; }
.names .amp { display: block; margin: 4px 0; font-size: .55em; color: var(--accent); }
.cover-date { font: 500 14px/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--soft); }
.guest { margin-top: 10px; padding: 12px 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--glass); }
.guest p:first-child { font-size: 13px; color: var(--soft); }
.guest-name { font: italic 600 24px/1.25 var(--serif); overflow-wrap: anywhere; }
.cover .open { margin-top: 14px; }

/* ---------- Isi: kartu kaca di atas langit ---------- */
main > section { position: relative; padding: 64px 22px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.title { font: italic 500 36px/1.15 var(--serif); }
.rg path { fill: none; stroke: color-mix(in srgb, var(--accent2) 70%, transparent); stroke-width: 1; stroke-dasharray: 220; stroke-dashoffset: 0; }
.rb circle { fill: var(--accent2); }
.intro { min-height: 92vh; min-height: 92svh; justify-content: flex-end; padding-bottom: 72px; }
.binary { width: 100%; height: 44vh; min-height: 220px; display: grid; place-items: center; position: relative; }
.binary i { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #fff; }
.binary .s1 { box-shadow: 0 0 22px 8px var(--star-a); translate: -26px 0; } .binary .s2 { box-shadow: 0 0 22px 8px var(--star-b); translate: 26px 0; }
.gl .binary i { visibility: hidden; }
.verse { font: italic 500 30px/1.25 var(--serif); max-width: 13em; }

.couple { gap: 8px; }
.person { width: 100%; padding: 30px 22px 28px; border: 1px solid var(--line); border-radius: 26px; background: var(--glass); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.person .rasi { width: 150px; height: 75px; margin-bottom: -6px; }
.portrait { position: relative; width: 150px; aspect-ratio: 1; margin: 6px 0 10px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--arm1) 50%, transparent), var(--bg2)); }
.portrait img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); }
.portrait span { font: italic 500 64px/1 var(--serif); color: var(--accent2); }
.portrait .ring { inset: -10%; }
.role { font: 600 11px/1.4 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--accent); }
.person h2 { font: italic 600 30px/1.15 var(--serif); overflow-wrap: anywhere; }
.parents { font-size: 15px; line-height: 1.5; color: var(--soft); }
.ig { font-size: 14px; font-weight: 600; color: var(--accent2); overflow-wrap: anywhere; }
.and { font: italic 500 54px/1 var(--serif); color: var(--accent); text-shadow: 0 0 18px var(--accent); }

.countdown { display: flex; gap: 10px; justify-content: center; }
.countdown div { width: 72px; aspect-ratio: 1; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--line);
  background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--arm1) 35%, transparent), var(--glass) 70%); box-shadow: inset -6px -8px 14px rgba(0, 0, 0, .35), 0 0 18px color-mix(in srgb, var(--arm1) 18%, transparent); }
.countdown div:nth-child(even) { translate: 0 12px; background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--arm2) 38%, transparent), var(--glass) 70%); }
.countdown b { font: 600 24px/1 var(--sans); font-variant-numeric: tabular-nums; }
.countdown span { margin-top: 4px; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--soft); }
.count .btn { margin-top: 14px; }

.orbits { width: 100%; display: grid; gap: 18px; }
.event { position: relative; overflow: hidden; padding: 30px 22px 26px; border: 1px solid var(--line); border-radius: 26px; background: var(--glass); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.event::before { content: ""; position: absolute; left: 50%; top: -120px; width: 300px; height: 300px; margin-left: -150px; border: 1px solid var(--line); border-radius: 50%; }
.planet { position: relative; width: 46px; height: 46px; margin-bottom: 8px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, var(--accent2), var(--accent) 45%, color-mix(in srgb, var(--accent) 40%, #000)); box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 45%, transparent); }
.planet::after { content: ""; position: absolute; left: -14px; right: -14px; top: 50%; height: 12px; margin-top: -6px; border: 2px solid color-mix(in srgb, var(--accent2) 70%, transparent); border-radius: 50%; rotate: -18deg; }
.planet.b { background: radial-gradient(circle at 32% 28%, #fff, var(--arm1) 45%, color-mix(in srgb, var(--arm1) 40%, #000)); box-shadow: 0 0 24px color-mix(in srgb, var(--arm1) 50%, transparent); }
.event h3 { font: italic 600 30px/1.1 var(--serif); }
.when { font-weight: 600; }
.time { font: 600 22px/1.2 var(--sans); color: var(--accent); letter-spacing: .06em; }
.place { font-size: 15px; line-height: 1.5; color: var(--soft); max-width: 22em; overflow-wrap: anywhere; }
.event .btn { margin-top: 10px; }
.dress { font-size: 15px; color: var(--soft); }

.grid { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 16px; border: 1px solid var(--line); box-shadow: 0 0 22px color-mix(in srgb, var(--arm1) 18%, transparent); }
.grid img:nth-child(3n+1) { grid-column: 1 / -1; aspect-ratio: 4 / 3; }

.gift-list { display: grid; gap: 12px; width: 100%; }
.gift-card { padding: 16px 18px; border-radius: 20px; border: 1px solid var(--line); background: var(--glass); display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; }
.bank { font: 600 12px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.number { font: 600 21px/1.3 var(--sans); letter-spacing: .05em; overflow-wrap: anywhere; }
.holder, .address { font-size: 14px; color: var(--soft); overflow-wrap: anywhere; }

.form { width: 100%; display: grid; gap: 14px; text-align: left; padding: 22px; border: 1px solid var(--line); border-radius: 24px; background: var(--glass); }
.field { display: grid; gap: 6px; border: 0; margin: 0; padding: 0; font-size: 14px; color: var(--soft); }
.field input, .field textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, .06); color: var(--ink); font: inherit; font-size: 16px; }
.field legend { margin-bottom: 6px; }
.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: 14px; text-align: center; color: var(--ink); cursor: pointer; }
.opt input:checked + span { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 22%, transparent); }
.opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.thanks .big { font: italic 600 30px/1.2 var(--serif); color: var(--accent); }
.note { color: var(--soft); font-size: 15px; }
.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 26px/1.2 var(--serif); } .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: 1px solid var(--line); border-radius: 18px; background: var(--glass); }
.wish-head { display: flex; gap: 8px; align-items: center; } .tag { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 25%, transparent); }
.status { font-size: 12px; color: var(--accent); } .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(--accent); font-size: 14px; color: var(--soft); }

.closing { min-height: 96vh; min-height: 96svh; justify-content: flex-end; padding-bottom: 80px !important; }
.merge { width: 100%; height: 42vh; min-height: 220px; display: grid; place-items: center; }
.rasi-hati { width: 170px; height: 153px; }
.merci { font: italic 500 46px/1.1 var(--serif); text-shadow: 0 0 22px color-mix(in srgb, var(--arm1) 50%, transparent); }
.merci span { color: var(--accent); }
.thanks-line { color: var(--soft); max-width: 20em; }
footer { position: relative; z-index: 1; padding: 0 16px 30px; text-align: center; font-size: 12px; color: var(--soft); }

.music-toggle { position: fixed; right: max(14px, calc(50% - 226px)); bottom: 16px; z-index: 50; width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--glass); color: var(--accent); cursor: pointer; }
.music-toggle svg { width: 18px; height: 18px; }
.music-toggle[aria-pressed="true"] svg { animation: putar 4s linear infinite; }
.js:not(.is-open) .music-toggle { display: none; }

/* ---------- Gerak ---------- */
.rv { opacity: 0; translate: 0 26px; scale: .96; }
.rv.in { opacity: 1; translate: 0 0; scale: 1; transition: opacity .9s cubic-bezier(.2, .7, .2, 1) calc(var(--d, 0) * 1ms), translate .9s cubic-bezier(.2, .7, .2, 1) calc(var(--d, 0) * 1ms), scale .9s cubic-bezier(.2, .7, .2, 1) calc(var(--d, 0) * 1ms); }
/* Rasi bintang tergambar garis demi garis saat bagiannya terlihat; titiknya menyala menyusul. */
.gerak section:not(.tampak) .rg path { stroke-dashoffset: 220; }
.gerak section:not(.tampak) .rb circle { opacity: 0; }
.gerak .rg path { transition: stroke-dashoffset 2.2s cubic-bezier(.4, 0, .2, 1) .3s; }
.gerak .rb circle { transition: opacity .6s ease 1.4s; }
@media (prefers-reduced-motion: no-preference) {
  .rb circle { animation: kedip 2.6s ease-in-out infinite; } .rb circle:nth-child(2n) { animation-delay: -1.1s; } .rb circle:nth-child(3n) { animation-duration: 3.4s; }
  .orbit-photo .ring, .portrait .ring { animation: putar 40s linear infinite; }
  .orbit-photo .moon { animation: putar 9s linear infinite; }
  .planet::after { animation: miring 6s ease-in-out infinite alternate; }
  .event::before { animation: putar 60s linear infinite; }
  .and { animation: kedip 3s ease-in-out infinite; }
  .names { animation: masuk 1.6s cubic-bezier(.2, .7, .2, 1) both; }
}
@keyframes kedip { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes putar { to { rotate: 360deg; } }
@keyframes miring { from { rotate: -18deg; } to { rotate: -8deg; } }
@keyframes masuk { from { opacity: 0; letter-spacing: .2em; filter: blur(8px); } to { opacity: 1; letter-spacing: 0; filter: none; } }
@keyframes kilat { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; translate: none; scale: none; } *, *::before, *::after { animation: none !important; transition: none !important; } }
.js body.locked { overflow: visible; }