/* Sakura — ucapan bertema bunga sakura: ranting berbunga, kelopak gugur, surat kertas washi, gantungan doa. */
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-garamond.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-garamond-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Italiana"; src: url("fonts/italiana.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root { --bg: #fdf1f3; --bg2: #f9dbe2; --ink: #4b2a33; --soft: #9a7480; --accent: #d9628a; --petal: #f5a9bd; --wood: #7a4b57; --card: #fffafa; --line: #f1cdd6; --btn-ink: #ffffff; --serif: "Cormorant Garamond", Georgia, serif; --display: "Italiana", "Cormorant Garamond", serif; }
/* Tone warna (field "tone"): pagi = bawaan di atas. */
:root[data-tone="malam"] { --bg: #151a30; --bg2: #2a2148; --ink: #f6eef2; --soft: #a9a3c2; --accent: #ffb3c8; --petal: #ffc4d4; --wood: #c9b8a8; --card: #1f2540; --line: #353c62; --btn-ink: #151a30; }
:root[data-tone="daun"] { --bg: #f3f7ee; --bg2: #dfead3; --ink: #2f3f2b; --soft: #71866b; --accent: #d6708c; --petal: #f2a6b8; --wood: #6a8f5b; --card: #ffffff; --line: #d3e0c8; }

body { margin: 0; min-height: 100vh; background: linear-gradient(180deg, var(--bg), var(--bg2)) fixed; color: var(--ink); font: 500 19px/1.5 var(--serif); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
em { font-style: italic; color: var(--accent); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.kicker, .lbl { font: 400 13px/1.4 var(--display); letter-spacing: .28em; text-transform: uppercase; color: var(--accent); }

/* Kelopak gugur: lapisan tetap di belakang isi; tiap kelopak dibuat sakura.js. */
.petals { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.petals i { position: absolute; top: -24px; left: var(--x); width: 14px; height: 10px; border-radius: 80% 20% 70% 30% / 70% 30% 70% 30%; background: var(--petal); opacity: .85; animation: gugur linear both; }
@keyframes gugur { from { transform: translate(0, -5vh) rotate(var(--r)) scale(var(--s)); } to { transform: translate(var(--drift), 108vh) rotate(calc(var(--r) + 540deg)) scale(var(--s)); } }

.cover h1 { font: 400 44px/1.05 var(--display); }
.cover h1 em { display: block; font: italic 500 40px/1.1 var(--serif); }
.branch { position: relative; width: 260px; height: 164px; }
.twig { width: 100%; height: 100%; stroke: var(--wood); }
.b { position: absolute; width: 44px; height: 44px; color: var(--petal); transition: transform .9s cubic-bezier(.3, 1.4, .5, 1); }
.b1 { left: 84px; top: 6px; } .b2 { left: 150px; top: 20px; width: 52px; height: 52px; } .b3 { left: 196px; top: 4px; width: 38px; height: 38px; }
.b4 { left: 44px; top: 86px; width: 36px; height: 36px; } .b5 { left: 112px; top: 62px; width: 40px; height: 40px; } .b6 { left: 190px; top: 66px; width: 34px; height: 34px; }
.opening .b { transform: rotate(40deg) scale(1.2); }
.open { min-height: 50px; padding: 0 28px; border: 1px solid var(--accent); border-radius: 999px; background: var(--accent); color: var(--btn-ink); font: 400 14px/1 var(--display); letter-spacing: .2em; text-transform: uppercase; cursor: pointer; animation: napas 2.4s ease-in-out infinite; }

.hero { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.crest { width: 54px; height: 54px; color: var(--petal); }
/* Dengan 3D aktif kelopak dan bunga digambar scene.js: kelopak CSS dimatikan, bunga SVG diganti bunga 3D. */
.stage3d { display: grid; place-items: center; }
.wind { display: none; }
.gl .stage3d { width: 100%; height: 150px; }
.gl .crest, .gl .petals { visibility: hidden; }
.gl .wind { display: block; font-size: 15px; font-style: italic; color: var(--soft); }
.hero h1 { font: 400 78px/.95 var(--display); overflow-wrap: anywhere; }
/* Surat: kertas washi dengan serat halus dan bingkai tipis. */
.washi { padding: 34px 26px; background: repeating-linear-gradient(115deg, transparent 0 9px, color-mix(in srgb, var(--petal) 9%, transparent) 9px 10px), var(--card); border: 1px solid var(--line); box-shadow: 0 18px 40px rgb(120 60 80 / .12); outline: 1px solid var(--line); outline-offset: -8px; }
.msg { font: 500 23px/1.5 var(--serif); }
.sign { margin-top: 18px; font: italic 500 30px/1.1 var(--serif); color: var(--accent); text-align: right; }
.lbl { margin-bottom: 16px; text-align: center; }
/* Gantungan doa: kertas kecil dengan tali, digantung berjajar. */
.tags { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 14px; padding-top: 6px; }
.tags li { position: relative; padding: 22px 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 4px 4px 14px 14px; text-align: center; font-size: 17px; line-height: 1.3; box-shadow: 0 8px 18px rgb(120 60 80 / .1); transform-origin: 50% -18px; animation: ayun 4s ease-in-out infinite; }
.tags li:nth-child(even) { animation-delay: -2s; margin-top: 14px; }
.tags li::before { content: ""; position: absolute; left: 50%; top: -18px; height: 26px; border-left: 2px solid var(--wood); }
.tags li::after { content: ""; position: absolute; left: 50%; top: 6px; width: 8px; height: 8px; margin-left: -3px; border-radius: 50%; background: var(--bg2); border: 1px solid var(--line); }
@keyframes ayun { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }

.photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.photos figure { margin: 0; border-radius: 999px 999px 6px 6px; overflow: hidden; border: 6px solid var(--card); box-shadow: 0 10px 24px rgb(120 60 80 / .14); }
.photos figure:first-child:nth-last-child(odd) { grid-column: 1 / -1; justify-self: center; width: 70%; }
.photos img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.card { padding: 28px 24px; background: var(--card); border: 1px solid var(--line); border-radius: 4px; text-align: center; }
.reply h2 { margin-bottom: 16px; font: 400 32px/1.1 var(--display); }
.hint { font-size: 16px; font-style: italic; color: var(--soft); }
.quick { justify-content: center; }
.btn { min-height: 50px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--accent); color: var(--btn-ink); font: 400 13px/1.2 var(--display); letter-spacing: .18em; text-transform: uppercase; cursor: pointer; }
.btn.ghost { min-height: 44px; padding: 0 16px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: italic 500 18px/1.2 var(--serif); letter-spacing: 0; text-transform: none; }
textarea { border: 1px solid var(--line); border-radius: 4px; background: var(--bg); color: var(--ink); font: 500 18px/1.4 var(--serif); }
textarea::placeholder { color: var(--soft); font-style: italic; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
img { max-width: 100%; display: block; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.js-only { display: none; }
.js .js-only { display: block; }
main { position: relative; z-index: 1; max-width: 480px; margin: 0 auto; padding: 0 22px; }

/* Cara dibuka "amplop": sampul diketuk dulu. Tanpa JS sampul dilewati dan semua isi langsung tampil. */
.cover { display: none; min-height: 100vh; min-height: 100svh; padding: 48px 0 40px; flex-direction: column; align-items: center; justify-content: center; gap: 22px; text-align: center; cursor: pointer; }
.js body[data-opener="amplop"]:not(.opened) .cover { display: flex; }
.js body[data-opener="amplop"]:not(.opened) .content,
.js body[data-opener="amplop"]:not(.opened) .foot { display: none; }
.content { display: flex; flex-direction: column; gap: 28px; padding: 40px 0 54px; }
.opened .content { animation: masuk .7s cubic-bezier(.2, .7, .2, 1) both; }
form { display: flex; flex-direction: column; gap: 12px; }
.quick { display: flex; flex-wrap: wrap; gap: 8px; }
textarea { width: 100%; min-height: 96px; padding: 14px 16px; resize: vertical; }
.msg { white-space: pre-line; overflow-wrap: anywhere; }
.music-toggle { position: fixed; top: 14px; right: 14px; z-index: 5; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.music-toggle svg { width: 20px; height: 20px; }
.music-toggle[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--btn-ink); }
.foot { position: relative; z-index: 1; padding: 8px 22px 34px; text-align: center; font-size: 12px; color: var(--soft); }
.anim .reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.anim .reveal.in { opacity: 1; transform: none; }
@keyframes masuk { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes napas { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Adegan 3D (scene.js + three.js): kanvas menempel di layar di belakang isi. Tanpa WebGL kanvas tetap tak terlihat
   dan gambar CSS/SVG biasa yang tampil. */
.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; }

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