/* Galaksi — template ucapan ulang tahun: langit malam, bintang, permohonan. */
@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; }

:root { --night: #080b22; --deep: #11163a; --ink: #eef0ff; --muted: #b3b8dc; --lilac: #b9a8ff; --gold: #f3d58a; --gold2: #ffefc2; --line: rgba(185, 168, 255, 0.35);
 /* warna hasil tone (dulu ditulis langsung) */ --tn-1: #785adc; --tn-2: #070a1f; --tn-3: #0d1234; --tn-4: #16153f; --tn-5: #0a0d28; --tn-6: #12123a; --tn-7: #b9a8ff; --tn-8: #1a1b48; --tn-9: #9298c4; --tn-10: #23285e; --tn-11: #141842; --tn-12: #1d2152; --tn-13: #10133a; --tn-14: #2b3170; --tn-15: #1e2358;
}

/* Tone warna (field "tone"): biru-malam = bawaan di atas. */
:root[data-tone="cokelat"] { --night: #220e08; --deep: #3a1a11; --muted: #dcbcb3; --lilac: #ffd7a8; --tn-1: #dca45a; --tn-2: #1f0c07; --tn-3: #34150d; --tn-4: #3f2415; --tn-5: #28110a; --tn-6: #3a2012; --tn-7: #ffd7a8; --tn-8: #48291a; --tn-9: #c49d92; --tn-10: #5e3223; --tn-11: #422014; --tn-12: #522b1d; --tn-13: #3a1b10; --tn-14: #703d2b; --tn-15: #582d1e; }
:root[data-tone="hijau-zamrud"] { --night: #082213; --deep: #113a22; --muted: #b3dcc4; --lilac: #a8ffe8; --tn-1: #5adcbe; --tn-2: #071f11; --tn-3: #0d341d; --tn-4: #153f2d; --tn-5: #0a2817; --tn-6: #123a28; --tn-7: #a8ffe8; --tn-8: #1a4832; --tn-9: #92c4a7; --tn-10: #235e3e; --tn-11: #144229; --tn-12: #1d5236; --tn-13: #103a24; --tn-14: #2b704a; --tn-15: #1e5838; }
:root[data-tone="marun"] { --night: #22080d; --deep: #3a111a; --muted: #dcb3bc; --lilac: #ffb1a8; --tn-1: #dc6c5a; --tn-2: #1f070c; --tn-3: #340d16; --tn-4: #3f1518; --tn-5: #280a10; --tn-6: #3a1216; --tn-7: #ffb1a8; --tn-8: #481a1f; --tn-9: #c4929d; --tn-10: #5e232d; --tn-11: #42141c; --tn-12: #521d26; --tn-13: #3a1017; --tn-14: #702b37; --tn-15: #581e28; }
* { box-sizing: border-box; }
html { background: var(--night); }
body {
  margin: 0; min-height: 100vh; color: var(--ink); font: 400 16px/1.65 "Space Grotesk", system-ui, sans-serif; -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(ellipse 70% 50% at 85% 10%, color-mix(in srgb, var(--tn-1) 32%, transparent), transparent 70%),
    radial-gradient(ellipse 60% 45% at 10% 75%, rgba(40, 140, 190, 0.22), transparent 70%),
    radial-gradient(ellipse 90% 60% at 50% 110%, rgba(190, 90, 160, 0.22), transparent 70%),
    linear-gradient(180deg, var(--tn-2) 0%, var(--tn-3) 55%, var(--tn-4) 100%);
  background-attachment: fixed;
}
.sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: url("img/stars-a.svg") 0 0 / 360px 360px, url("img/stars-b.svg") 120px 60px / 520px 520px; }
.twinkles { position: absolute; inset: 0; }
.tw { transform-box: fill-box; transform-origin: center; animation: kerlip 3.2s ease-in-out infinite; }
.t1 { animation-duration: 4.1s; animation-delay: -1.3s; }
.t2 { animation-duration: 2.7s; animation-delay: -2s; }
.t3 { animation-duration: 5s; animation-delay: -0.6s; }
@keyframes kerlip { 0%, 100% { opacity: 0.25; transform: scale(0.6); } 50% { opacity: 1; transform: scale(1.1); } }
.shoot { position: absolute; top: 12%; left: 70%; width: 140px; height: 1.5px; border-radius: 2px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 85%, #fff); transform: rotate(-28deg) translateX(0); opacity: 0; animation: melesat 11s ease-in 2s infinite; }
.shoot::after { content: ""; position: absolute; right: -2px; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 3px rgba(255, 239, 194, 0.8); }
.shoot.s2 { top: 48%; left: 30%; width: 100px; animation-duration: 15s; animation-delay: 8s; }
@keyframes melesat { 0% { opacity: 0; transform: rotate(152deg) translateX(0); } 1% { opacity: 1; } 7% { opacity: 0; transform: rotate(152deg) translateX(420px); } 100% { opacity: 0; transform: rotate(152deg) translateX(420px); } }

main { position: relative; z-index: 1; max-width: 480px; margin: 0 auto; }
@media (min-width: 560px) {
  main { background: linear-gradient(180deg, color-mix(in srgb, var(--tn-5) 55%, transparent), color-mix(in srgb, var(--tn-6) 55%, transparent)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--tn-7) 12%, transparent), 0 40px 120px rgba(0, 0, 0, 0.5); }
}
section { min-height: 100vh; min-height: 100svh; padding: 64px 30px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px; text-align: center; position: relative; }
h1, h2 { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; letter-spacing: -0.5px; }
h1 em, h2 em, .env-title em { font-style: italic; color: var(--gold); }
p { margin: 0; }
.eyebrow { font-size: 12px; font-weight: 500; letter-spacing: 4px; text-transform: uppercase; color: var(--lilac); }
.hint { font-size: 13px; color: var(--muted); letter-spacing: 0.5px; }
.js-only { display: none; }

/* Hero */
.constellation { width: min(100%, 320px); height: auto; margin-bottom: 4px; overflow: visible; }
.constellation .line { stroke: var(--line); stroke-width: 1; stroke-dasharray: 600; stroke-dashoffset: 0; animation: gambar 4s ease-out both; }
.constellation .l2 { animation-delay: 1.4s; }
.constellation .dots circle { fill: #fff8e6; filter: drop-shadow(0 0 4px rgba(255, 239, 194, 0.9)); transform-box: fill-box; transform-origin: center; animation: kerlip 3.6s ease-in-out infinite; }
.constellation .dots circle:nth-child(odd) { animation-delay: -1.8s; animation-duration: 2.8s; }
.constellation .dots .big { fill: var(--gold); }
@keyframes gambar { from { stroke-dashoffset: 600; } to { stroke-dashoffset: 0; } }
.hero h1 { font-size: 38px; line-height: 1.1; }
.hero h1 em { display: block; font-size: 68px; line-height: 1.1; margin-top: 4px; overflow-wrap: anywhere; background: linear-gradient(180deg, var(--gold2), var(--gold) 55%, #d9a948); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 6px; }
.orbit { position: relative; width: 132px; height: 132px; margin-top: 18px; display: grid; place-items: center; }
.ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--line); animation: putar 14s linear infinite; }
.ring::before { content: ""; position: absolute; inset: 14px; border-radius: 50%; border: 1px dashed rgba(243, 213, 138, 0.3); }
.planet { position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px 3px rgba(243, 213, 138, 0.6); }
.age { font: 500 60px/1 "Cormorant Garamond", serif; color: var(--gold2); }
.orbit-note { max-width: 18em; font-size: 15px; color: var(--muted); }

/* Pesan */
.spark { width: 26px; height: 26px; fill: var(--gold); filter: drop-shadow(0 0 8px rgba(243, 213, 138, 0.8)); animation: kerlip 3s ease-in-out infinite; }
.message .text { white-space: pre-line; font: italic 400 24px/1.5 "Cormorant Garamond", Georgia, serif; color: #f6f3ff; text-wrap: pretty; }
.from { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 14px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); }
.from span { width: 34px; height: 1px; background: currentColor; opacity: 0.6; }

/* Galeri */
.photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.photos img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 120px 120px 14px 14px; border: 1px solid rgba(243, 213, 138, 0.45); padding: 4px; }
.photos img:first-child:last-child, .photos img:nth-child(3):last-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; }

/* Balasan */
.moon { width: 46px; height: 46px; fill: var(--gold); filter: drop-shadow(0 0 14px rgba(243, 213, 138, 0.55)); }
.reply h2 { font-size: 42px; line-height: 1.08; }
.reply h2 em { display: block; }
.lead { color: var(--muted); margin-top: 8px; }
.reply form { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.quick { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: linear-gradient(180deg, var(--gold2), var(--gold)); color: var(--tn-8); font: 600 15px/1 "Space Grotesk", sans-serif; cursor: pointer; box-shadow: 0 0 24px rgba(243, 213, 138, 0.25); }
.btn.ghost { background: rgba(255, 255, 255, 0.04); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tn-7) 45%, transparent); font-weight: 500; }
.btn:focus-visible, textarea:focus-visible, .envelope:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
textarea { font: inherit; padding: 14px 16px; border: 0; border-radius: 16px; background: rgba(255, 255, 255, 0.06); color: var(--ink); min-height: 96px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tn-7) 35%, transparent); resize: vertical; }
textarea::placeholder { color: var(--tn-9); }
.note { color: var(--gold); font-weight: 500; }

/* Amplop */
.envelope { display: none; }
.js [data-opener=amplop] .envelope { display: flex; cursor: pointer; }
.js [data-opener=amplop] main > section:not(.envelope) { display: none; }
.js [data-opener=amplop].opened .envelope { display: none; }
.js [data-opener=amplop].opened main > section:not(.envelope) { display: flex; animation: muncul 0.9s ease both; }
.env-title { font: 400 34px/1.15 "Cormorant Garamond", serif; margin-bottom: 22px; }
.flap { width: 250px; height: 166px; position: relative; border-radius: 10px; background: linear-gradient(160deg, var(--tn-10), var(--tn-11)); box-shadow: 0 0 0 1px rgba(243, 213, 138, 0.35), 0 30px 70px rgba(0, 0, 0, 0.55), 0 0 60px color-mix(in srgb, var(--tn-1) 25%, transparent); overflow: hidden; animation: melayang 4s ease-in-out infinite; }
.flap::before { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, var(--tn-12), var(--tn-13)); clip-path: polygon(0 100%, 50% 46%, 100% 100%); }
.flap::after { content: ""; position: absolute; inset: 0 0 auto; height: 98px; background: linear-gradient(180deg, var(--tn-14), var(--tn-15)); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.seal { position: absolute; left: 50%; top: 72px; width: 48px; height: 48px; margin-left: -24px; border-radius: 50%; z-index: 1; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, var(--gold2), var(--gold) 55%, #c99a3c); box-shadow: 0 0 22px rgba(243, 213, 138, 0.6); }
.seal svg { width: 24px; height: 24px; }
.envelope .hint { margin-top: 26px; }
@keyframes melayang { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Story */
.bars { display: none; }
.js [data-opener=story] .bars { display: flex; position: fixed; top: 12px; left: 50%; transform: translateX(-50%); width: min(452px, calc(100% - 28px)); gap: 4px; z-index: 5; }
.bars span { flex: 1; height: 2px; border-radius: 2px; background: var(--ink); opacity: 0.22; }
.bars span.done { opacity: 0.9; background: var(--gold); }
.js [data-opener=story] [data-step] { display: none; cursor: pointer; }
.js [data-opener=story] [data-step].active { display: flex; animation: muncul 0.6s ease both; }
.js [data-opener=story] footer { display: none; }
.js [data-opener=story] .js-only { display: block; }

footer { position: relative; z-index: 1; padding: 24px 24px 36px; text-align: center; font-size: 12px; letter-spacing: 1px; color: var(--muted); }
footer a { color: var(--gold); }
.music-toggle { position: fixed; right: 16px; bottom: 16px; z-index: 20; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(243, 213, 138, 0.15); color: var(--gold); font-size: 20px; line-height: 1; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(243, 213, 138, 0.5); backdrop-filter: blur(6px); }
.music-toggle[aria-pressed=true] span { display: inline-block; animation: putar 3s linear infinite; }
@keyframes putar { to { transform: rotate(360deg); } }
@keyframes muncul { from { opacity: 0; transform: translateY(12px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .shoot { display: none; } }
.message, .gallery, .reply { min-height: 0; padding: 72px 30px; }
.reply { padding-bottom: 80px; }
.js [data-opener=story] .message, .js [data-opener=story] .gallery, .js [data-opener=story] .reply { min-height: 100vh; min-height: 100svh; }

/* ---------- Animasi ---------- */
@media (prefers-reduced-motion: no-preference) {
  main > section:not(.envelope) :where(.eyebrow) { animation: mo-blur .8s var(--mo-e) .05s both; }
  main > section:not(.envelope) :where(h1, h2) { animation: mo-blur .9s var(--mo-e) .16s both; }
  main > section:not(.envelope) :where(.text, .lead, .letter) { animation: mo-blur .9s var(--mo-e) .34s both; }
  main > section:not(.envelope) :where(.from) { animation: mo-blur .8s var(--mo-e) .52s both; }
  main > section:not(.envelope) :where(.photos) { animation: mo-blur .9s var(--mo-e) .46s both; }
  main > section:not(.envelope) :where(.quick, form, .note) { animation: mo-blur .8s var(--mo-e) .62s both; }
  main > section:not(.envelope) :where(.hint) { animation: mo-blur .8s var(--mo-e) .75s both; }
  :root { --mo-e: cubic-bezier(.2,.7,.2,1); }

  .opening .envelope .flap { translate: 0 -34px; scale: 1.12; opacity: 0; transition: translate .7s ease-in, scale .7s ease-in, opacity .55s ease-in .12s; }
  .opening .envelope :is(.eyebrow, .hint, .env-title, h1) { opacity: 0; transition: opacity .3s; }

  .moon { animation: mo-ambang 10s ease-in-out infinite; }
  main .photos figure { animation: mo-blur 1s .5s both; }
}
@keyframes mo-denyut { 0%, 100% { scale: 1; } 50% { scale: 1.08; } }
@keyframes mo-ambang { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@keyframes mo-ayun { from { rotate: -2.2deg; } to { rotate: 2.2deg; } }
@keyframes mo-putar { to { rotate: 360deg; } }
@keyframes mo-kerlip { 0%, 100% { opacity: 1; scale: 1; } 50% { opacity: .35; scale: .72; } }
@keyframes mo-kilau { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes mo-geser { from { translate: -26px 0; } to { translate: 26px 0; } }
@keyframes mo-garis { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes mo-naik { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
@keyframes mo-blur { from { opacity: 0; filter: blur(10px); scale: 1.05; } to { opacity: 1; filter: blur(0); scale: 1; } }
@keyframes mo-pop { from { opacity: 0; scale: .55; rotate: -8deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes mo-nudge { 0%, 100% { translate: 0 0; } 50% { translate: 5px 0; } }
@keyframes mo-hujan { to { background-position: 0 520px, 0 520px, 0 520px, 0 780px, 0 780px; } }
@keyframes mo-wiggle { 0%, 100% { rotate: -3deg; } 50% { rotate: 3deg; } }


/* Kado kejutan: tema (bentuk & perilaku di kado.css). */
.kado-sec, .kartu-kado { --k-judul: "Cormorant Garamond", Georgia, serif; --k-judul-w: 600; --k-teks: "Space Grotesk", system-ui, sans-serif; --k-aksen: var(--lilac); --k-aksen2: var(--gold); --k-kertas: var(--deep); --k-tinta: var(--ink); --k-judul-tinta: var(--ink); --k-tag: rgba(255, 255, 255, .1); --k-tag-tinta: var(--ink); --k-tombol-tinta: var(--night); --k-latar: rgba(4, 6, 20, .72); }

/* Video unggahan (field video): ditaruh sebelum galeri, bingkai mengikuti warna teks template (currentColor). */
.vk { width: min(100%, 440px); margin: 34px auto; padding: 0 20px; text-align: center; flex-direction: column; align-items: center; justify-content: center; }
.vk-layar { width: 100%; }
.vk-judul { margin: 0 0 12px; font-weight: 700; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; opacity: .85; }
.vk-layar { position: relative; margin: 0; padding: 10px; border-radius: 20px; border: 1px solid color-mix(in srgb, currentColor 28%, transparent); background: color-mix(in srgb, currentColor 7%, transparent); box-shadow: 0 16px 34px rgba(0, 0, 0, .16); }
.vk-layar video { display: block; width: 100%; max-height: 70vh; border-radius: 12px; background: #000; }
.vk-layar figcaption { margin-top: 10px; font-size: 14px; font-style: italic; opacity: .75; }