/* Orbit — ucapan hari jadi (monthsary & anniversary): hati 3D dengan cahaya yang mengorbit, satu per bulan/tahun. */
@font-face { font-family: "Instrument Serif"; font-style: normal; src: url("fonts/instrument-serif.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Serif"; font-style: italic; src: url("fonts/instrument-serif-italic.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("fonts/plus-jakarta-sans.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }

/* --heart, --orb, --star juga dibaca orbit.js untuk warna adegan 3D. */
:root { --bg: #100c24; --bg2: #24123f; --ink: #fbeff4; --soft: #b9a8cc; --accent: #ff7fa1; --card: #1b1433; --line: #382a5c; --heart: #ff4d7d; --orb: #ffd89a; --star: #ffffff; --btn-ink: #2a0716; --serif: "Instrument Serif", Georgia, serif; --sans: "Plus Jakarta Sans", system-ui, sans-serif; }

/* Tone warna (field "tone"): malam = bawaan di atas. */
:root[data-tone="mawar"] { --bg: #2c0714; --bg2: #561029; --ink: #fff0f2; --soft: #dba9b6; --accent: #ffb3c1; --card: #3b0c1d; --line: #6b1f38; --heart: #e11d48; --orb: #ffd6a5; --star: #ffe3e8; }
:root[data-tone="lavender"] { --bg: #1b1136; --bg2: #3a2468; --ink: #f6f0ff; --soft: #b7a6d9; --accent: #cdb0ff; --card: #251848; --line: #45317a; --heart: #b388ff; --orb: #ffe29a; --star: #ffffff; --btn-ink: #1d0f3d; }
:root[data-tone="fajar"] { --bg: #fff1ec; --bg2: #ffd6de; --ink: #4a1526; --soft: #96586a; --accent: #d81e5b; --card: #ffffff; --line: #f6c3cf; --heart: #ef3f6b; --orb: #f5a524; --star: #e58aa4; --btn-ink: #ffffff; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; min-height: 100vh; background: linear-gradient(180deg, var(--bg), var(--bg2)) fixed; color: var(--ink); font: 500 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
h1, h2, p { margin: 0; }
h1, h2 { font-family: var(--serif); font-weight: 400; }
em { font-style: italic; color: var(--accent); }
a { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.js-only { display: none; }
.js .js-only { display: block; }
.js .clock.js-only { display: grid; }

/* Adegan 3D: kanvas menempel di layar, isi halaman bergulir di atasnya. Tanpa WebGL kanvas tetap tak terlihat. */
.scene { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .9s ease; }
.gl .scene { opacity: 1; }
main, footer { position: relative; z-index: 1; }
main { max-width: 480px; margin: 0 auto; padding: 0 22px; }

.hero { min-height: 100vh; min-height: 100svh; padding: 44px 0 40px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.kicker { font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.stagebox { flex: 1 1 auto; width: 100%; min-height: 240px; display: grid; place-items: center; }
.heart { width: 150px; height: 138px; color: var(--heart); filter: drop-shadow(0 18px 28px color-mix(in srgb, var(--heart) 45%, transparent)); animation: denyut 1.5s ease-in-out infinite; }
.gl .heart { visibility: hidden; } /* diganti hati 3D di kanvas */
.tease { font-size: 46px; line-height: 1.02; }
.count { display: flex; flex-direction: column; align-items: center; }
.count b { font: 400 132px/.86 var(--serif); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.count span { font: 400 30px/1.1 var(--serif); }
.names { margin-top: 14px; display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.names svg { flex: none; width: 16px; height: 15px; color: var(--heart); }
.since { margin-top: 4px; font-size: 13px; color: var(--soft); }
.hint { margin-top: 18px; min-height: 48px; padding: 0 24px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--card) 70%, transparent); color: var(--ink); font: 700 14px/1 var(--sans); cursor: pointer; animation: napas 2.2s ease-in-out infinite; }

/* Cara dibuka "amplop": hati diketuk dulu. Tanpa JS sampul dilewati dan semua isi langsung tampil. */
.cover-only { display: none; }
.js body[data-opener="amplop"]:not(.opened) .cover-only { display: block; }
.js body[data-opener="amplop"]:not(.opened) .open-only,
.js body[data-opener="amplop"]:not(.opened) .content,
.js body[data-opener="amplop"]:not(.opened) footer { display: none; }
.js body[data-opener="amplop"]:not(.opened) .hero { cursor: pointer; }
.opened .open-only { animation: naik .8s cubic-bezier(.2, .7, .2, 1) both; }

.content { display: flex; flex-direction: column; gap: 22px; padding-bottom: 56px; }
.card { padding: 26px 22px; border-radius: 26px; background: color-mix(in srgb, var(--card) 94%, transparent); border: 1px solid var(--line); box-shadow: 0 24px 50px rgb(0 0 0 / .18); }
.lbl { margin-bottom: 14px; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }

.timer { text-align: center; }
.clock { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.clock div { padding: 14px 2px 12px; border-radius: 16px; background: color-mix(in srgb, var(--ink) 7%, transparent); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.clock b { font: 400 34px/1 var(--serif); font-variant-numeric: tabular-nums; }
.clock span { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.static { font-size: 15px; color: var(--soft); }
.static b { font: 400 34px/1 var(--serif); color: var(--ink); }
.orbs { margin-top: 16px; font-size: 13px; color: var(--soft); }

.msg { font: 400 23px/1.4 var(--serif); white-space: pre-line; overflow-wrap: anywhere; }
.sign { margin-top: 20px; font: italic 400 26px/1.1 var(--serif); color: var(--accent); text-align: right; }
.sign::before { content: "— "; }

.album h2, .closing h2, .reply h2 { font-size: 38px; line-height: 1.05; }
.album h2 { margin: 18px 0 20px; text-align: center; }
.photos { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.photos figure { margin: 0; width: calc(50% - 6px); padding: 8px 8px 26px; border-radius: 6px; background: #fff; box-shadow: 0 14px 30px rgb(0 0 0 / .28); transform: rotate(-2deg); }
.photos figure:nth-child(2n) { transform: rotate(2.4deg) translateY(10px); }
.photos figure:nth-child(3n) { transform: rotate(-1deg); }
.photos figure:first-child:nth-last-child(odd) { width: 78%; transform: rotate(1.4deg); }
.photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 2px; }

.closing { padding: 46px 0 34px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.closing .mini { width: 34px; height: 31px; color: var(--heart); animation: denyut 1.5s ease-in-out infinite; }

.reply h2 { margin-bottom: 16px; }
.note { font-size: 14px; color: var(--soft); }
form { display: flex; flex-direction: column; gap: 12px; }
.quick { display: flex; flex-wrap: wrap; gap: 8px; }
.btn { min-height: 50px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--heart); color: var(--btn-ink); font: 800 15px/1.2 var(--sans); cursor: pointer; }
.btn.ghost { min-height: 44px; padding: 0 16px; border: 1px solid var(--line); background: transparent; color: var(--ink); font-weight: 600; font-size: 14px; }
.btn.ghost:hover { border-color: var(--accent); }
textarea { width: 100%; min-height: 96px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink); font: 500 15px/1.5 var(--sans); resize: vertical; }
textarea::placeholder { color: var(--soft); }

.music-toggle { position: fixed; top: 14px; right: 14px; z-index: 5; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: color-mix(in srgb, var(--card) 86%, transparent); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.music-toggle svg { width: 20px; height: 20px; }
.music-toggle[aria-pressed="true"] { background: var(--heart); border-color: var(--heart); color: var(--btn-ink); }

footer { padding: 8px 22px 34px; text-align: center; font-size: 12px; color: var(--soft); }

/* Isi muncul saat tergulir ke layar (kelas .anim hanya dipasang bila IntersectionObserver tersedia). */
.anim .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.anim .reveal.in { opacity: 1; transform: none; }

@keyframes denyut { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.1); } 28% { transform: scale(1); } 42% { transform: scale(1.06); } 56% { transform: scale(1); } }
@keyframes napas { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
@keyframes naik { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

@media (max-height: 640px) { .count b { font-size: 104px; } .tease { font-size: 38px; } .stagebox { min-height: 190px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

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