/* Versi RINGAN — 3D murni CSS, tanpa Three.js.
   Semua gerak mengikuti satu variabel: --p (progres scroll 0..1) yang di-set
   oleh skrip ~300 byte di halaman. Sisanya transform CSS + keyframes. */

.panggung {
  position: fixed;
  inset: 0;
  z-index: 0;
  perspective: 1100px;
  perspective-origin: 50% 42%;
  pointer-events: none;
  /* JANGAN pakai overflow (selain visible) di sini. Properti itu membuat elemen
     ini jadi "grouping" dan MERATAKAN seluruh 3D di dalamnya — itulah yang tadinya
     membuat silinder mangkuk kehilangan kedalaman dan menumpuk jadi kotak datar. */
}

.dunia {
  position: absolute;
  left: 50%;
  top: 56%;
  transform-style: preserve-3d;
  /* rotateX sengaja cukup besar supaya kita MELIHAT KE DALAM mangkuk (kuah dan
     topping), bukan menatap dindingnya dari samping. */
  transform: translate3d(-50%, -50%, calc(var(--p, 0) * 260px))
    rotateY(calc(var(--p, 0) * 52deg))
    rotateX(calc(26deg + var(--p, 0) * 4deg));
  transition: transform 140ms linear;
}

/* --- Mangkuk: silinder 18 bilah + dasar + kuah ------------------------ */
.mangkuk {
  position: absolute;
  transform-style: preserve-3d;
  transform: translate3d(calc(var(--p, 0) * -210px), 0, 0);
}

/* Badan mangkuk: SILUET mangkuk (menyempit ke bawah), bukan silinder bilah.
   Dipilih setelah uji visual: silinder bilah yang tertutup justru menutupi kuah
   dan topping dari sudut pandang mana pun, sehingga tampak seperti dinding datar.
   Siluet + bibir elips membuat isi mangkuk benar-benar terlihat. */
.mangkuk .badan {
  position: absolute;
  width: 236px;
  height: 150px;
  left: -118px;
  top: -50px;
  border-radius: 6px 6px 48% 48% / 6px 6px 100% 100%;
  background: radial-gradient(125% 85% at 30% 0%, #fdfaf4 0%, #eadcc4 42%, #bfa87f 100%);
  box-shadow:
    inset -20px 0 36px rgba(0, 0, 0, 0.32),
    inset 20px 0 30px rgba(255, 246, 226, 0.3),
    0 26px 52px rgba(0, 0, 0, 0.55);
}

/* DIBUANG: dulu ada lapisan ::after sebagai "pegas cahaya", tetapi bentuknya
   bidang datar 226x132 px yang melayang DI DEPAN mangkuk — hasilnya kotak abu-abu
   (justru itu yang terlihat di uji pertama). Penggantinya: tiap bilah diberi
   kecerahan sendiri lewat --terang yang dihitung di ringan.astro dari sudut
   bilahnya, sehingga bayangan mengikuti bentuk silinder. */

/* CATATAN geometri: setelah rotateX(90deg), sumbu lokal ikut berputar sehingga
   translateZ tidak lagi berarti "naik". Jadi tinggi tiap cakram diatur lewat
   `top`, dan transform hanya untuk memutar. Rumus: cakram ukuran S yang
   berpusat di tinggi V  ->  top = V - S/2. */

/* Kuah: cakram mendatar, berpusat 38px di atas titik tengah mangkuk. */
/* Kuah: elips di mulut mangkuk (BUKAN cakram 3D).
   Catatan uji: cakram yang diputar rotateX(90deg) ternyata tertutup badan mangkuk
   karena urutan z — kuahnya tak pernah terlihat. Sebagai elips, isi mangkuk
   dijamin tampak dan tetap terbaca sebagai "dilihat dari atas-depan". */
.mangkuk .kuah {
  position: absolute;
  width: 208px;
  height: 86px;
  left: -104px;
  top: -96px;
  border-radius: 50%;
  /* Berlapis: kilau di kiri-atas, pantulan hangat, bagian gelap di kanan, lalu
     warna dasar kuah — supaya permukaannya terasa seperti sup, bukan bidang rata. */
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 236, 196, 0.5) 0%, rgba(255, 236, 196, 0) 40%),
    radial-gradient(circle at 70% 66%, rgba(255, 214, 150, 0.28) 0%, rgba(255, 214, 150, 0) 26%),
    radial-gradient(circle at 74% 30%, rgba(96, 46, 6, 0.45) 0%, rgba(96, 46, 6, 0) 34%),
    radial-gradient(circle at 36% 26%, #f0b977 0%, #c8863f 55%, #8a5322 100%);
  box-shadow: inset 0 -6px 22px rgba(60, 26, 4, 0.55), 0 0 26px rgba(255, 160, 70, 0.25);
  /* Mie di dalamnya dipotong mengikuti bentuk mangkuk. */
  overflow: hidden;
}

/* Mie: untaian tipis di dalam kuah (terpotong oleh bentuk mangkuk). */
.mangkuk .mie {
  position: absolute;
  width: 150px;
  height: 7px;
  border-radius: 4px;
  background: linear-gradient(to right, #f3dfa4, #e8cd85 55%, #d8b96b);
  box-shadow: 0 1px 2px rgba(80, 44, 6, 0.45);
}

/* Dasar mangkuk (S=226, V=+64). */
.mangkuk .dasar {
  position: absolute;
  width: 226px;
  height: 226px;
  left: -113px;
  top: -49px;
  border-radius: 50%;
  background: #b09b78;
  transform: rotateX(90deg);
}

/* Bibir mangkuk: cincin (S=230, V=-66). */
.mangkuk .bibir {
  position: absolute;
  width: 226px;
  height: 96px;
  left: -113px;
  top: -101px;
  border-radius: 50%;
  border: 5px solid #fdfaf3;
  box-shadow: 0 0 24px rgba(255, 235, 200, 0.3);
}

/* Topping — semuanya cakram di atas kuah (V sekitar -44px). */
.mangkuk .telur {
  position: absolute;
  width: 54px;
  height: 22px;
  left: -42px;
  top: -84px;
  border-radius: 50%;
  background: radial-gradient(circle at 46% 44%, #f7b733 0%, #e08c12 58%, #fdf7ec 60%, #f3e9d6 100%);
  transform: rotate(-7deg);
}

.mangkuk .chashu {
  position: absolute;
  width: 66px;
  height: 26px;
  left: -78px;
  top: -78px;
  border-radius: 50%;
  background: radial-gradient(circle at 46% 46%, #c98a6a 0%, #a35c3a 56%, #7d4225 100%);
  transform: rotate(11deg);
}

/* Nori berdiri tegak: bidang XY memang sudah vertikal, jadi TIDAK perlu rotateX. */
.mangkuk .nori {
  position: absolute;
  width: 64px;
  height: 88px;
  left: 58px;
  top: -128px;
  border-radius: 3px;
  background: linear-gradient(160deg, #1d3f2b 0%, #0d1f16 100%);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  transform: rotateY(-22deg);
}

/* Uap: gumpalan buram yang naik lalu memudar. */
.uap {
  position: absolute;
  left: 0;
  top: -70px;
  width: 34px;
  height: 34px;
  margin-left: -17px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 244, 224, 0.95) 0%, rgba(255, 244, 224, 0) 70%);
  filter: blur(9px);
  opacity: 0;
  animation: uap-naik 7s linear infinite;
  animation-delay: calc(var(--u, 0) * -1.15s);
}
@keyframes uap-naik {
  0%   { opacity: 0;    transform: translate3d(calc(var(--x, 0) * 1px), 30px, 0) scale(0.55); }
  20%  { opacity: 0.55; }
  100% { opacity: 0;    transform: translate3d(calc(var(--x, 0) * 1px + var(--g, 0) * 1px), -180px, 0) scale(1.8); }
}

/* --- Gerobak yatai: kotak-kotak 3D + lampion -------------------------- */
.gerobak {
  position: absolute;
  transform-style: preserve-3d;
  /* Masuk dari kanan begitu scroll melewati separuh halaman. */
  transform: translate3d(calc(760px - var(--p, 0) * 640px), 40px, -60px);
}

.gerobak .badan {
  position: absolute;
  width: 340px;
  height: 170px;
  left: -170px;
  top: -85px;
  background: linear-gradient(to bottom, #5b3a24 0%, #3a2416 100%);
  border-radius: 6px;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.6);
}

.gerobak .meja {
  position: absolute;
  width: 380px;
  height: 26px;
  left: -190px;
  top: -104px;
  background: linear-gradient(to bottom, #8a5a34 0%, #5f3c22 100%);
  border-radius: 4px;
  transform: translateZ(40px);
}

.gerobak .atap {
  position: absolute;
  width: 420px;
  height: 120px;
  left: -210px;
  top: -236px;
  background: linear-gradient(to bottom, #7d1f1a 0%, #4a100d 100%);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
  transform: translateZ(30px);
}

/* Noren: tiga kain merah menggantung di bawah atap. */
.gerobak .noren {
  position: absolute;
  display: flex;
  gap: 10px;
  left: -180px;
  top: -190px;
  transform: translateZ(46px);
}
.gerobak .noren span {
  display: block;
  width: 110px;
  height: 78px;
  background: linear-gradient(to bottom, #b8241c 0%, #7d1410 100%);
  border-radius: 0 0 6px 6px;
}

/* Lampion: bola merah menyala, berayun pelan. */
.gerobak .lampion {
  position: absolute;
  width: 96px;
  height: 118px;
  left: 250px;
  top: -300px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 34%, #ff8a4c 0%, #e0331b 58%, #8f1508 100%);
  box-shadow: 0 0 70px 26px rgba(255, 128, 48, 0.42), inset 0 0 26px rgba(255, 220, 150, 0.5);
  transform-origin: 50% -34px;
  animation: lampion-ayun 4.2s ease-in-out infinite;
}
@keyframes lampion-ayun {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(6deg); }
}

/* Cahaya hangat di lantai. */
.pendar {
  position: absolute;
  left: -300px;
  top: 20px;
  width: 620px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 150, 60, 0.22) 0%, rgba(255, 150, 60, 0) 68%);
  transform: rotateX(90deg);
  filter: blur(6px);
}