/* Jawab Hati — ungkapan cinta: hati 3D mengilap dari dua belahan (three.js) yang retak tiap "Nggak" ditekan dan menyatu
   saat "Mau!", tombol "Nggak" yang kabur, lalu sertifikat jadian. Tanpa JS/WebGL hati SVG berdenyut yang tampil. */
@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; }

/* --rose dan --heart juga dibaca jawab-hati.js untuk warna hati 3D. */
:root { --blush: #ffe4ea; --ink: #3a0a18; --rose: #b0123d; --rose-deep: #8e0f33; --heart: #e8285a; --glow: #ffb3c6; --line: #e9a6b6; --soft: #8e4a5c; --serif: "Instrument Serif", Georgia, serif; --sans: "Plus Jakarta Sans", system-ui, sans-serif;
 /* warna hasil tone (dulu ditulis langsung) */ --tn-1: #b0123d;
}

/* Tone warna (field "tone"): merah = bawaan di atas. */
:root[data-tone="hijau"] { --ink: #0a3a21; --rose: #12b061; --rose-deep: #0f8e4d; --heart: #1fc06f; --glow: #b4f0d2; --line: #a6e9ca; --soft: #4a8e6c; --tn-1: #12b061; }
:root[data-tone="ungu"] { --ink: #210a3a; --rose: #6112b0; --rose-deep: #4d0f8e; --heart: #8a3be0; --glow: #d9bdfb; --line: #caa6e9; --soft: #6c4a8e; --tn-1: #6112b0; }
:root[data-tone="biru"] { --ink: #0a1f3a; --rose: #1254b0; --rose-deep: #0f468e; --heart: #2a74e0; --glow: #b9d3fb; --line: #a6c0e9; --soft: #4a668e; --tn-1: #1254b0; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--blush); }
body { margin: 0; background: var(--blush); color: var(--ink); font: 500 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
h1, h2, p { margin: 0; }
a { color: var(--rose-deep); }
:focus-visible { outline: 3px solid var(--rose); outline-offset: 3px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Latar: pendar warna lembut yang bergeser pelan, dua hati besar samar, dan kanvas 3D di atasnya. */
.aura { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.aura i { position: absolute; width: 90vmax; height: 90vmax; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--glow) 70%, transparent), transparent); }
.aura i:nth-child(1) { left: -40vmax; top: -30vmax; }
.aura i:nth-child(2) { right: -45vmax; top: 20vh; background: radial-gradient(closest-side, rgba(255, 255, 255, .85), transparent); }
.aura i:nth-child(3) { left: -20vmax; bottom: -55vmax; background: radial-gradient(closest-side, color-mix(in srgb, var(--rose) 22%, transparent), transparent); }
.bg-heart { position: fixed; z-index: 0; color: var(--rose); pointer-events: none; }
.bg-heart.h1 { top: -18px; right: -24px; width: 120px; height: 110px; opacity: .12; transform: rotate(18deg); }
.bg-heart.h2 { bottom: 40px; left: -20px; width: 90px; height: 82px; opacity: .1; transform: rotate(-16deg); }
.scene { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .8s ease; }
.gl .scene { opacity: 1; }
main { position: relative; z-index: 1; max-width: 480px; margin: 0 auto; padding: 28px 22px; }
.js-only { display: none; }
.js .js-only { display: inline-flex; }
.js p.js-only { display: block; }

.stage { min-height: 88vh; min-height: 88svh; padding: 16px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; text-align: center; }
.lead { display: flex; flex-direction: column; gap: 4px; }
.lead span:first-child { font-size: 12px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--rose); }
.lead span:last-child { font: italic 400 30px/1.1 var(--serif); }

/* Kotak hati: tempat hati 3D digambar (kanvas mengikuti posisinya). Tanpa WebGL hati SVG di dalamnya yang tampil. */
.heartbox { position: relative; width: 100%; height: 230px; display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.heartbox.small { height: 130px; }
.heart { width: 110px; height: 100px; color: var(--rose); }
.heartbox.small .heart { width: 72px; height: 66px; }
.gl .heartbox .heart { visibility: hidden; }
.pulse { animation: denyut 1.4s ease-in-out infinite; }
.pulse.fast { animation-duration: 1s; }
.quote { position: relative; max-width: 15em; font: 400 30px/1.2 var(--serif); }
.quote::before, .quote::after { position: absolute; font: italic 400 64px/1 var(--serif); color: color-mix(in srgb, var(--rose) 30%, transparent); }
.quote::before { content: "“"; left: -26px; top: -14px; } .quote::after { content: "”"; right: -22px; bottom: -40px; }
.btn { min-height: 54px; padding: 0 30px; border: 0; border-radius: 999px; background: linear-gradient(135deg, var(--rose), var(--rose-deep)); color: #fff; font: 700 16px/1.2 var(--sans); cursor: pointer; align-items: center; justify-content: center; box-shadow: 0 12px 26px color-mix(in srgb, var(--tn-1) 35%, transparent), inset 0 1px 0 rgba(255, 255, 255, .3); }
.tap { font-size: 12px; color: var(--soft); opacity: .8; }

/* Pertanyaan: foto bertumpuk seperti polaroid, hati kecil menempel di bawahnya. */
.ask-top { position: relative; width: 100%; }
.ask-top:has(.photos) .heartbox.small { height: 104px; margin-top: 4px; }
.photos { position: relative; height: 172px; }
.photos figure { position: absolute; left: 50%; top: 6px; width: 124px; margin: 0 0 0 -62px; padding: 7px 7px 26px; background: #fff; border-radius: 3px; box-shadow: 0 14px 28px color-mix(in srgb, var(--ink) 22%, transparent); rotate: -3deg; }
.photos figure::before { content: ""; position: absolute; left: 50%; top: -9px; width: 56px; height: 18px; translate: -50% 0; rotate: 4deg; background: color-mix(in srgb, var(--glow) 75%, rgba(255, 255, 255, .6)); }
.photos figure:nth-child(1):not(:last-child) { translate: -56px 10px; rotate: -10deg; }
.photos figure:nth-child(2) { translate: 54px 4px; rotate: 8deg; z-index: 1; }
.photos figure:nth-child(2):last-child { translate: 40px 0; }
.photos figure:nth-child(1):nth-last-child(2) { translate: -40px 8px; }
.photos figure:nth-child(3) { translate: 0 18px; rotate: -2deg; z-index: 1; }
.photos img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.question { font: 400 54px/.98 var(--serif); overflow-wrap: anywhere; }
.question em { font-style: italic; color: var(--rose); background: linear-gradient(transparent 64%, color-mix(in srgb, var(--glow) 70%, transparent) 64% 92%, transparent 92%); padding: 0 .06em; }
.msg { max-width: 24em; font-size: 15px; line-height: 1.6; color: var(--soft); }
.teaser { min-height: 22px; font-size: 15px; font-weight: 700; color: var(--rose-deep); }
.answers { position: relative; width: 100%; min-height: 70px; text-align: left; }
.js .answers { min-height: 240px; }
.yes { position: absolute; left: 0; top: 20px; min-height: 52px; padding: 0 28px; border-radius: 999px; border: 0; background: linear-gradient(135deg, var(--heart), var(--rose-deep)); color: #fff; font: 800 17px/1.2 var(--sans); cursor: pointer; box-shadow: 0 12px 26px color-mix(in srgb, var(--tn-1) 38%, transparent), inset 0 1px 0 rgba(255, 255, 255, .35); z-index: 2; transition: font-size .3s ease, min-height .3s ease, padding .3s ease; }
.answers form { position: static; }
.no { display: flex; align-items: center; justify-content: center; position: absolute; left: 56%; top: 28px; min-height: 44px; max-width: 42%; padding: 0 16px; border-radius: 22px; border: 1px solid var(--line); background: rgba(255, 255, 255, .85); color: var(--ink); font: 600 14px/1.2 var(--sans); cursor: pointer; z-index: 1; transition: left .25s cubic-bezier(.3, 1.4, .5, 1), top .25s cubic-bezier(.3, 1.4, .5, 1); }
.hint { font-size: 13px; color: var(--soft); }

/* Jawaban: sertifikat jadian dengan cap "sah". */
.done h2 { font: 400 60px/.95 var(--serif); }
.done h2 em { font-style: italic; color: var(--rose); }
.sertifikat { position: relative; width: min(100%, 340px); padding: 26px 22px 24px; border-radius: 6px; background: #fffdfb; box-shadow: 0 18px 40px color-mix(in srgb, var(--ink) 16%, transparent), inset 0 0 0 1px var(--line), inset 0 0 0 7px #fffdfb, inset 0 0 0 8px color-mix(in srgb, var(--rose) 45%, transparent); }
.s-label { font-size: 11px; font-weight: 800; letter-spacing: .3em; text-transform: uppercase; color: var(--rose); }
.s-nama { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; font: italic 400 34px/1.1 var(--serif); overflow-wrap: anywhere; }
.s-nama svg { width: 20px; height: 18px; color: var(--heart); }
.s-teks { margin-top: 10px; font-size: 13px; color: var(--soft); }
.s-tanggal { margin-top: 2px; font-size: 18px; font-weight: 800; }
.s-cap { position: absolute; right: -14px; bottom: -18px; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; border: 2.5px solid var(--rose); color: var(--rose); background: color-mix(in srgb, #fff 80%, var(--glow)); rotate: -14deg; font: 800 13px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 5.5px var(--rose); }
.s-cap svg { width: 18px; height: 16px; margin-bottom: -18px; }
.sent-note { font-size: 15px; font-weight: 600; }
.again { min-height: 44px; padding: 0 16px; border: 0; background: transparent; color: var(--rose-deep); font: 700 14px/1 var(--sans); text-decoration: underline; cursor: pointer; }

/* Dengan JS: satu layar per tahap. Tanpa JS semuanya berurutan, layar jawaban hanya setelah terkirim. */
.js body[data-stage="intro"] .stage:not(.intro), .js body[data-stage="ask"] .stage:not(.ask), .js body[data-stage="done"] .stage:not(.done) { display: none; }
html:not(.js) .stage.sent { display: none; }
.stage[hidden] { display: none; }
footer { position: relative; z-index: 1; padding: 8px 16px 24px; text-align: center; font-size: 12px; color: var(--soft); }

.rain { position: fixed; top: -30px; z-index: 5; color: var(--rose); font-style: normal; pointer-events: none; animation: jatuh 3.4s ease-in forwards; }
@keyframes jatuh { to { transform: translateY(110vh) rotate(40deg); opacity: .6; } }
@keyframes denyut { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

.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: #fff; color: var(--rose); box-shadow: 0 8px 20px color-mix(in srgb, var(--tn-1) 25%, transparent); cursor: pointer; }
.music-toggle svg { width: 18px; height: 18px; }
.music-toggle[aria-pressed="false"]::after { content: ""; position: absolute; width: 24px; height: 1.5px; background: var(--rose); transform: rotate(-45deg); }
html:not(.js) .music-toggle { display: none; }

@media (prefers-reduced-motion: reduce) {
  .pulse { animation: none; }
  .no, .yes { transition: none; }
}

/* ---------- Animasi ---------- */
@media (prefers-reduced-motion: no-preference) {
  .stage { animation: masuk .7s cubic-bezier(.2, .7, .2, 1) both; }
  .stage > * { animation: naik .7s cubic-bezier(.2, .7, .2, 1) both; }
  .stage > :nth-child(2) { animation-delay: .1s; }
  .stage > :nth-child(3) { animation-delay: .2s; }
  .stage > :nth-child(4) { animation-delay: .3s; }
  .stage > :nth-child(5) { animation-delay: .4s; }
  .stage > :nth-child(6) { animation-delay: .5s; }
  .photos figure { animation: jatuhFoto .8s cubic-bezier(.3, 1.3, .5, 1) both; }
  .photos figure:nth-child(2) { animation-delay: .15s; }
  .photos figure:nth-child(3) { animation-delay: .3s; }
  .yes { animation: napas 1.8s ease-in-out infinite; }
  .no:active { scale: .9; }
  .goyang .no { animation: geleng .4s ease; }
  .bg-heart { animation: melayang 7s ease-in-out infinite; }
  .bg-heart.h2 { animation-delay: -3s; }
  .aura i { animation: bergeser 18s ease-in-out infinite alternate; }
  .aura i:nth-child(2) { animation-duration: 23s; animation-direction: alternate-reverse; }
  .aura i:nth-child(3) { animation-duration: 27s; }
  .btn { transition: transform .15s; }
  .btn:active { transform: scale(.96); }
  .tap { animation: kedip 2.4s ease-in-out infinite; }
  .done .sertifikat { animation: naik .8s .35s cubic-bezier(.2, .7, .2, 1) both; }
  .done .s-cap { animation: cap .5s 1.3s cubic-bezier(.3, 1.6, .5, 1) both; }
}
@keyframes masuk { from { opacity: 0; } to { opacity: 1; } }
@keyframes naik { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
@keyframes jatuhFoto { from { opacity: 0; scale: 1.4; } to { opacity: 1; scale: 1; } }
@keyframes napas { 0%, 100% { scale: 1; } 50% { scale: 1.06; } }
@keyframes melayang { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes bergeser { from { transform: translate(0, 0); } to { transform: translate(8vmax, 6vmax); } }
@keyframes kedip { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }
@keyframes geleng { 0%, 100% { rotate: 0deg; } 25% { rotate: -8deg; } 75% { rotate: 8deg; } }
@keyframes cap { from { opacity: 0; scale: 2.4; } to { opacity: 1; scale: 1; } }

/* Video opsional (field "video"). */
.vk { width: min(100%, 440px); margin: 34px auto; padding: 0 20px; text-align: center; flex-direction: column; align-items: center; justify-content: center; }
.vk-judul { margin: 0 0 12px; font-weight: 700; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; opacity: .85; }
.vk-layar { position: relative; width: 100%; 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; }
.vk-intro { max-width: 340px; margin: 4px auto 18px; }
.vk-intro .vk-judul { margin-bottom: 8px; }
.vk-intro video { max-height: 38vh; }