/* Roket — ucapan ulang tahun berupa peluncuran roket 3D: tutup pengaman dibuka, tombol ditekan, hitung mundur, roket menembus awan ke luar angkasa lalu mendarat di planet bernama penerima. */
@font-face { font-family: "Bagel Fat One"; src: url("fonts/bagel-fat-one.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Fredoka"; src: url("fonts/fredoka.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("fonts/nunito.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }

/* --malam = angkasa; --koral/--teal = warna roket; --krem = kertas log misi. */
:root { --malam: #15143f; --malam2: #26235f; --ungu: #8e7fbf; --koral: #f2766b; --koral2: #ffd2cb; --teal: #4fb7ad; --teal2: #c9efe9; --krem: #fff7ea; --tinta: #2a2558; --soft: #6f6a99; --bagel: "Bagel Fat One", "Fredoka", system-ui, sans-serif; --round: "Fredoka", "Nunito", system-ui, sans-serif; --sans: "Nunito", system-ui, sans-serif; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--malam); }
body { margin: 0; min-height: 100vh; background: var(--malam); color: var(--tinta); font: 500 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
p, h1, h2, figure, ol, ul { margin: 0; }
em { font-style: normal; color: var(--koral); }
button { -webkit-tap-highlight-color: transparent; }
main { position: relative; display: flow-root; width: 100%; max-width: 480px; margin: 0 auto; overflow-x: clip; background: radial-gradient(1.5px 1.5px at 20% 30%, #fff 50%, transparent 51%) 0 0 / 90px 110px, radial-gradient(1px 1px at 70% 60%, #cfc8ff 50%, transparent 51%) 0 0 / 70px 80px, linear-gradient(var(--malam), var(--malam2)); }
.lbl { font: 600 13px/1.3 var(--round); letter-spacing: .16em; text-transform: uppercase; color: #b9b2ec; text-align: center; }
.js-only { display: none; }
.js .js-only { display: revert; }

/* ---------- Adegan peluncuran. Keadaan dasar = sudah mendarat (tanpa JS tetap benar). ---------- */
.misi { position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: var(--malam); }
.stage { position: absolute; left: 50%; top: 50%; width: max(100%, 100svh * 1536 / 2752); aspect-ratio: 1536 / 2752; transform: translate(-50%, -50%); container-type: inline-size; }
.dunia { position: absolute; left: 0; top: 0; width: 100%; will-change: transform; }
.dunia > img, .peralihan { width: 100%; aspect-ratio: 1536 / 2752; }
.peralihan { position: relative; background: radial-gradient(1.5px 1.5px at 30% 20%, #fff 50%, transparent 51%) 0 0 / 60px 70px, linear-gradient(rgb(16 17 53), #2b2a6e 28%, #5d4f9a 55%, #a99bd0 85%, rgb(171 164 205)); }
.peralihan .awan { position: absolute; width: 46%; opacity: .95; }
.a1 { left: -10%; top: 52%; }
.a2 { left: 58%; top: 64%; width: 52%; }
.a3 { left: 18%; top: 78%; width: 40%; }
.a4 { left: 70%; top: 40%; width: 30%; opacity: .7; }
.sat-lewat { position: absolute; left: 12%; top: 14%; width: 22%; transform: rotate(-14deg); }
.awan-cepat { position: absolute; inset: 0; pointer-events: none; }
.awan-cepat img { position: absolute; top: -40%; width: 70%; opacity: 0; }
.awan-cepat img:nth-child(1) { left: -20%; }
.awan-cepat img:nth-child(2) { left: 55%; width: 80%; }
.awan-cepat img:nth-child(3) { left: 15%; width: 60%; }
.planet { position: absolute; left: 0; bottom: 0; width: 100%; }
.asap { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.asap img { position: absolute; left: 50%; bottom: 26%; width: 34%; opacity: 0; transform: translate(-50%, 30%) scale(.3); }

.roket { position: absolute; left: 50%; bottom: 27.5%; width: 26%; transform: translate(-50%, 0); }
.roket-badan { position: relative; }
.roket-img { position: relative; width: 100%; }
.api { --sy: 1; position: absolute; left: 50%; top: 86%; width: 34%; opacity: 0; transform: translateX(-50%) scaleY(0); transform-origin: 50% 0; transition: opacity .3s ease, transform .4s ease; }
.nyala .api, .nyala-kecil .api { opacity: 1; transform: translateX(-50%) scaleY(var(--sy)); }
.nyala-kecil .api { --sy: .45; }
.astro { position: absolute; left: 13%; bottom: 23%; width: 18%; transition: transform .8s cubic-bezier(.3, 1.5, .5, 1), opacity .4s ease; }
.bendera { position: absolute; left: 70%; bottom: 26.5%; width: 17%; transform-origin: 10% 100%; transition: transform .9s cubic-bezier(.3, 1.4, .5, 1) .25s; }
.bendera img { width: 100%; }
.bendera span { position: absolute; left: 20%; top: 25%; width: 76%; height: 34%; display: grid; place-items: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 700 3.2cqw/1 var(--round); color: #fff; text-shadow: 0 1px 2px rgb(160 50 40 / .5); transform: rotate(-4deg); }

.judul { position: absolute; left: 0; right: 0; top: 7%; padding: 0 8%; text-align: center; transition: opacity .7s ease, transform .9s cubic-bezier(.3, 1.4, .5, 1); }
.patch { position: relative; width: 40%; margin: 0 auto; }
.patch img { width: 100%; }
.patch-teks { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.patch-teks text { font: 700 14px var(--round); letter-spacing: 1.5px; fill: #f4fffc; text-transform: uppercase; }
.patch-isi { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: var(--koral); }
.patch-isi b { font: 400 12cqw/1 var(--bagel); }
.patch-isi small { font: 700 2.8cqw/1.2 var(--round); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta); }
.judul h1 { margin-top: 2.6cqw; font: 400 8.4cqw/1.08 var(--bagel); color: #fff; text-shadow: 0 .5cqw 0 rgb(40 30 110 / .55), 0 0 4cqw rgb(255 160 200 / .45); }
.judul h1 em { color: #ffc2b8; }
.tiba { margin-top: 1.8cqw; font: 600 3.6cqw/1.3 var(--round); color: #dcd6ff; }

/* HUD, hitung mundur, panel kendali. */
.hud { position: absolute; z-index: 5; left: 14px; top: 14px; padding: 8px 14px; border-radius: 14px; background: rgb(14 12 44 / .6); border: 1px solid rgb(255 255 255 / .2); color: #e8e4ff; font: 600 13px/1.35 var(--round); opacity: 0; transition: opacity .4s ease; }
.hud-t { font: 700 18px/1.1 var(--round); color: var(--teal2); letter-spacing: .08em; }
.hud-alt b { font-variant-numeric: tabular-nums; color: #fff; }
.hud-on .hud { opacity: 1; }
.hitung { position: absolute; z-index: 5; left: 0; right: 0; top: 24%; text-align: center; font: 400 min(34vw, 150px)/1 var(--bagel); color: #fff; text-shadow: 0 6px 0 rgb(80 50 140 / .5), 0 0 30px rgb(255 170 120 / .6); pointer-events: none; }
.hitung.pop { animation: pop .9s cubic-bezier(.2, .8, .3, 1) both; }
.hitung.kecil { font-size: min(13vw, 56px); }
.panel { position: absolute; z-index: 6; left: 14px; right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); max-width: 440px; margin: 0 auto; padding: 14px 16px 16px; border-radius: 24px; background: rgb(22 19 62 / .86); border: 1px solid rgb(255 255 255 / .16); box-shadow: 0 18px 40px rgb(10 6 40 / .45); color: #ece9ff; text-align: center; transition: transform .6s cubic-bezier(.5, 0, .7, .4), opacity .4s ease .2s; }
.pn-judul { font: 600 15px/1.3 var(--round); }
.pn-judul b { color: #ffc2b8; }
.pn-cek { display: flex; justify-content: center; gap: 14px; padding: 0; margin: 10px 0 12px; list-style: none; font: 600 12px/1.2 var(--round); color: #b9b2ec; }
.pn-cek li::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; background: #6ee7b7; box-shadow: 0 0 8px #6ee7b7; vertical-align: 0; }
.pn-tombol { position: relative; perspective: 500px; }
.luncur { width: 100%; height: 64px; border: 0; border-radius: 18px; background: linear-gradient(#ff8a7e, #e2483d); color: #fff; font: 400 24px/1 var(--bagel); letter-spacing: .04em; box-shadow: 0 6px 0 #a3241b, inset 0 2px 0 rgb(255 255 255 / .35); cursor: pointer; }
.luncur:disabled { cursor: default; filter: saturate(.7) brightness(.85); }
.luncur:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 2px 0 #a3241b; }
.tutup { position: absolute; inset: -5px -5px -10px; border: 2px solid rgb(255 255 255 / .55); border-radius: 22px; background: repeating-linear-gradient(-45deg, rgb(250 204 21 / .55) 0 14px, rgb(30 26 70 / .55) 14px 28px); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); transform-origin: 50% 0; cursor: pointer; transition: transform .55s cubic-bezier(.3, 1.4, .5, 1), opacity .3s ease .25s; }
.tutup span { display: inline-block; padding: 6px 14px; border-radius: 999px; background: rgb(20 16 60 / .85); color: #fff; font: 700 14px/1.2 var(--round); }
.terbuka .tutup { transform: rotateX(110deg); opacity: 0; pointer-events: none; }
.pn-hint { margin-top: 12px; font-size: 13px; color: #b9b2ec; }
.meluncur .panel { transform: translateY(140%); opacity: 0; pointer-events: none; }
.selesai .panel, .selesai .hitung { display: none; }
.gulir { position: absolute; z-index: 4; left: 0; right: 0; bottom: 18px; text-align: center; font: 600 14px/1 var(--round); color: #fff; text-shadow: 0 2px 8px rgb(0 0 0 / .5); transition: opacity .6s ease; }

/* Keadaan sebelum & selama peluncuran (hanya dengan JS). */
.pra .dunia, .angkat .dunia { transform: translateY(-66.6667%); }
.terbang .dunia { transform: translateY(0); transition: transform 5.4s cubic-bezier(.62, 0, .32, 1); }
.pra .planet, .angkat .planet, .terbang .planet { transform: translateY(105%); }
.mendarat .planet { transition: transform 2.6s cubic-bezier(.2, .7, .3, 1); }
.pra .roket { transform: translate(-50%, -8%); }
.angkat .roket { transform: translate(-50%, -99%); transition: transform 1.6s cubic-bezier(.55, 0, .6, 1); }
.terbang .roket { transform: translate(-50%, -71%); transition: transform 2.4s ease-in-out; }
.mendarat .roket { transition: transform 2.6s cubic-bezier(.3, .2, .3, 1); }
.js body:not(.kru) .astro { opacity: 0; transform: translateY(40%) scale(.4); }
.js body:not(.kru) .bendera { transform: scaleY(0); }
.js body:not(.t-judul) .judul { opacity: 0; transform: translateY(-24px) scale(.85); }
.js body:not(.selesai) .gulir { opacity: 0; }

/* ---------- Bagian isi ---------- */
.log { position: relative; padding: 70px 18px 20px; }
.log-patch { position: absolute; left: 50%; top: 22px; width: 86px; margin-left: -43px; transform: rotate(-8deg); z-index: 2; }
.lembar { position: relative; padding: 52px 24px 22px; border-radius: 6px 6px 18px 18px; background: linear-gradient(rgb(79 183 173 / .13) 1px, transparent 1px) 0 0 / 100% 28px, linear-gradient(90deg, rgb(79 183 173 / .13) 1px, transparent 1px) 0 0 / 28px 100%, var(--krem); box-shadow: 0 18px 40px rgb(5 3 30 / .4); }
.lb-atas { display: flex; justify-content: space-between; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 2px solid var(--tinta); font: 700 13px/1.3 var(--round); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta); }
.pesan { white-space: pre-line; font-size: 16px; line-height: 1.75; }
.ttd { margin-top: 14px; text-align: right; font: 600 17px/1.3 var(--round); color: var(--koral); }

.tujuan { position: relative; padding: 70px 18px 20px; text-align: center; }
.tj-satelit { position: absolute; left: 10px; top: 18px; width: 92px; transform: rotate(-12deg); }
.tujuan h2, .jendela h2, .balas h2 { margin: 6px 0; font: 400 28px/1.15 var(--bagel); color: #fff; }
.sub { color: #b9b2ec; font-size: 15px; }
.orbit { position: relative; display: grid; gap: 10px; padding: 18px 0 0; list-style: none; }
.orbit::before { content: ""; position: absolute; left: 50%; top: 30px; bottom: 30px; border-left: 2px dashed rgb(185 178 236 / .35); }
.orbit li { position: relative; display: flex; }
.orbit li:nth-child(even) { justify-content: flex-end; }
.pl { display: flex; align-items: center; gap: 12px; width: 78%; padding: 8px; border: 0; background: none; color: #fff; text-align: left; font: 600 15px/1.35 var(--round); cursor: pointer; }
.orbit li:nth-child(even) .pl { flex-direction: row-reverse; text-align: right; }
.bola { --c1: #ffd2cb; --c2: #f2766b; position: relative; flex: none; width: 84px; height: 84px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #fff 0 6%, var(--c1) 22%, var(--c2) 70%, color-mix(in srgb, var(--c2), #000 30%)); box-shadow: 0 0 24px color-mix(in srgb, var(--c2), transparent 50%); transition: transform .5s cubic-bezier(.3, 1.5, .5, 1); }
.bola::after { content: ""; position: absolute; left: -22%; top: 38%; width: 144%; height: 26%; border: 4px solid rgb(255 255 255 / .55); border-radius: 50%; transform: rotate(-16deg); }
.orbit li:nth-child(4n+2) .bola { --c1: #c9efe9; --c2: #4fb7ad; }
.orbit li:nth-child(4n+3) .bola { --c1: #e6dcff; --c2: #8e7fbf; }
.orbit li:nth-child(4n+4) .bola { --c1: #fff1bf; --c2: #f0b33c; }
.orbit li:nth-child(odd) .bola::after { display: none; }
.pl-isi { padding: 10px 14px; border-radius: 16px; background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .18); }
.js .pl:not(.buka) .pl-isi { visibility: hidden; }
.js .pl:not(.buka)::after { content: "Ketuk"; position: absolute; font: 600 12px/1 var(--round); color: #b9b2ec; }
.pl { position: relative; }
.js .pl:not(.buka)::after { left: 104px; }
.js .orbit li:nth-child(even) .pl:not(.buka)::after { left: auto; right: 104px; }
.pl.buka .bola { transform: scale(1.08) rotate(20deg); }
.pl.buka .pl-isi { animation: slip .5s cubic-bezier(.3, 1.5, .5, 1); }

.transmisi { padding: 64px 18px 20px; }
.monitor { position: relative; margin-top: 14px; padding: 36px 12px 12px; border-radius: 24px; background: #0e0c2c; box-shadow: 0 0 0 5px var(--teal), 0 0 0 9px var(--krem), 0 0 34px 8px rgb(79 183 173 / .35); }
.sinyal { position: absolute; left: 16px; top: 12px; display: flex; align-items: flex-end; gap: 3px; font: 700 12px/1 var(--round); color: var(--teal2); letter-spacing: .08em; }
.sinyal i { width: 4px; background: var(--teal2); border-radius: 1px; }
.sinyal i:nth-child(1) { height: 5px; } .sinyal i:nth-child(2) { height: 8px; } .sinyal i:nth-child(3) { height: 11px; } .sinyal i:nth-child(4) { height: 14px; margin-right: 6px; }
.monitor video { display: block; width: 100%; max-height: 70vh; border-radius: 12px; background: #000; }

.jendela { padding: 64px 18px 20px; text-align: center; }
.portal { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; margin-top: 20px; }
.portal figure { position: relative; aspect-ratio: 1; border-radius: 50%; padding: 9%; background: radial-gradient(circle, transparent 62%, rgb(0 0 0 / .25) 66%), linear-gradient(145deg, #a9ece3, var(--teal) 55%, #2f857d); box-shadow: 0 12px 26px rgb(5 3 30 / .45); }
.portal figure:nth-child(even) { margin-top: 34px; }
.portal img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; box-shadow: inset 0 0 20px rgb(0 0 0 / .5); }
.portal figure::after { content: ""; position: absolute; inset: 9%; border-radius: 50%; background: linear-gradient(140deg, rgb(255 255 255 / .35), transparent 40%); pointer-events: none; }

.balas { position: relative; margin: 100px 18px 24px; padding: 70px 20px 24px; border-radius: 28px; background: var(--krem); text-align: center; box-shadow: 0 18px 40px rgb(5 3 30 / .4); }
.balas h2 { color: var(--tinta); }
.balas-sat { position: absolute; left: 50%; top: -58px; width: 150px; margin-left: -75px; }
.hint { color: var(--soft); font-size: 15px; }
.balas form { display: grid; gap: 12px; margin-top: 14px; text-align: left; }
.quick { display: flex; flex-wrap: wrap; gap: 8px; }
.btn { min-height: 50px; padding: 0 24px; border: 0; border-radius: 999px; background: linear-gradient(180deg, #ff8a7e, #e2483d); color: #fff; font: 600 16px/1.2 var(--round); cursor: pointer; box-shadow: 0 5px 0 #a3241b; }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #a3241b; }
.btn.ghost { min-height: 42px; padding: 8px 14px; background: #fff; color: var(--tinta); border: 2px dashed var(--teal2); box-shadow: none; font-size: 14px; text-align: left; border-radius: 14px; }
textarea { width: 100%; min-height: 96px; padding: 14px 16px; resize: vertical; border: 2px solid var(--teal2); border-radius: 16px; background: #fff; color: var(--tinta); font: 500 15px/1.5 var(--sans); }

.music-toggle { position: fixed; top: 12px; right: 12px; z-index: 70; width: 46px; height: 46px; border-radius: 50%; border: 2px solid #fff; background: var(--koral); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 16px rgb(0 0 0 / .3); }
.music-toggle svg { width: 20px; height: 20px; }
.music-toggle[aria-pressed="true"] { background: var(--teal); }
.foot { max-width: 480px; margin: 0 auto; padding: 30px 22px 30px; background: var(--malam2); text-align: center; font-size: 13px; color: #b9b2ec; }
.foot a { color: #ffc2b8; }
.foot-astro { width: 84px; margin: 0 auto 10px; }

/* Sebelum mendarat hanya adegan yang tampil. */
.js body[data-opener="amplop"]:not(.opened) main > section:not(.misi),
.js body[data-opener="amplop"]:not(.opened) .foot { display: none; }

@keyframes slip { from { transform: translateY(-10px) scale(.85); opacity: 0; } }
@keyframes pop { 0% { transform: scale(2.2); opacity: 0; } 25% { transform: scale(1); opacity: 1; } 75% { opacity: 1; } 100% { transform: scale(.7); opacity: 0; } }

@media (prefers-reduced-motion: no-preference) {
  .nyala .api, .nyala-kecil .api { animation: kobar .11s linear infinite alternate; }
  .getar .roket-badan { animation: getar .09s linear infinite; }
  .asap-on .asap img { animation: kepul 3.2s cubic-bezier(.2, .7, .3, 1) forwards; }
  .asap-on .asap .s1 { --dx: -150%; --dy: 10%; }
  .asap-on .asap .s2 { --dx: 150%; --dy: 5%; animation-delay: .15s; }
  .asap-on .asap .s3 { --dx: -80%; --dy: -30%; animation-delay: .3s; }
  .asap-on .asap .s4 { --dx: 90%; --dy: -40%; animation-delay: .45s; }
  .asap-on .asap .s5 { --dx: 0%; --dy: -10%; animation-delay: .1s; }
  .terbang .awan-cepat img { animation: lewat 1.5s linear 2 both; }
  .terbang .awan-cepat img:nth-child(2) { animation-delay: .5s; }
  .terbang .awan-cepat img:nth-child(3) { animation-delay: 1s; }
  .terbang .roket-badan { animation: goyang 1.4s ease-in-out infinite; }
  .kru .astro { animation: lambai 2.6s ease-in-out 1s infinite; }
  .selesai .roket-badan { animation: napas 4s ease-in-out infinite; }
  .selesai .gulir { animation: turun 1.6s ease-in-out infinite; }
  .tj-satelit, .balas-sat { animation: melayang 6s ease-in-out infinite; }
  .foot-astro { animation: melayang 5s ease-in-out infinite; }
  .bola { animation: putar-pelan 9s ease-in-out infinite; }
  .orbit li:nth-child(even) .bola { animation-delay: -4s; }
}
@keyframes kobar { from { transform: translateX(-50%) scaleY(var(--sy)) scaleX(1); } to { transform: translateX(-50%) scaleY(calc(var(--sy) * 1.14)) scaleX(.92); } }
@keyframes getar { 25% { transform: translate(-1.2%, .4%); } 75% { transform: translate(1.2%, -.4%); } }
@keyframes kepul { 0% { opacity: 0; transform: translate(-50%, 30%) scale(.3); } 20% { opacity: .95; } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), var(--dy)) scale(1.6); } }
@keyframes lewat { 0% { top: -45%; opacity: 0; } 15% { opacity: .9; } 85% { opacity: .9; } 100% { top: 115%; opacity: 0; } }
@keyframes goyang { 50% { transform: rotate(1.5deg); } }
@keyframes lambai { 50% { transform: translateY(-4%) rotate(-4deg); } }
@keyframes napas { 50% { transform: translateY(-1.2%); } }
@keyframes turun { 50% { transform: translateY(6px); } }
@keyframes melayang { 50% { transform: translateY(-10px) rotate(-8deg); } }
@keyframes putar-pelan { 50% { transform: rotate(14deg) translateY(-4px); } }

.anim .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.anim .reveal.in { opacity: 1; transform: none; }