/* ============================================================
   beranda.css  ·  khusus HALAMAN DEPAN (index.html)
   Lukisan berlapis + zoom-gulir + pintu-menu cair.
   Butuh dasar.css lebih dulu. Halaman lain TIDAK memuat file ini.
   ============================================================ */

/* panggung = jendela tetap 1 layar. Dunia di-zoom di dalamnya. */
.panggung{
  position:fixed; inset:0; overflow:hidden;
  z-index:var(--lapis-isi); background:transparent;
  perspective:1500px;
}

/* dunia = wadah semua lapisan. Skala & fokus diatur skrip zoom-mlebu.js */
.dunia{
  position:absolute; inset:0; display:grid; place-items:center;
  transform-origin:var(--fokus-x,52%) var(--fokus-y,48%);
  will-change:transform;
}

/* satu lapisan gambar, semua menumpuk di sel grid yang sama */
.lapisan{
  grid-area:1 / 1; height:auto; pointer-events:none; user-select:none;
  will-change:transform, opacity;
  opacity:0; transform:translateY(30px) scale(.98);
  transition:opacity 1s ease, transform 1.2s var(--lembut);
}
.beranda.terlukis .lapisan{ opacity:1; transform:none; }

/* makhluk latar dalam (ambient, redup & buram) */
.lapisan-dalam{
  width:min(70vw, 780px);
  opacity:0; filter:blur(3px) saturate(.7);
  transform:translate(-16vw,-6vh) scale(1.02);
  mix-blend-mode:screen;
}
.beranda.terlukis .lapisan-dalam{ opacity:.18; transform:translate(-16vw,-6vh); }

/* TOKOH UTAMA = pusat perhatian. Diberi cahaya lembut di belakang.
   margin-top negatif menaikkannya sedikit -> ruang untuk judul di bawah. */
.tokoh-utama{ position:relative; grid-area:1 / 1; place-self:center;
  width:auto; height:min(52vh, 640px); margin-top:-4vh; }
.tokoh-utama img{ height:100%; width:auto; margin:0 auto;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.6)); }
.tokoh-utama::before{
  content:""; position:absolute; inset:-22% -30%; z-index:-1;
  background:radial-gradient(closest-side, rgba(var(--sinar-koral),.22), transparent 70%);
  filter:blur(6px);
}

/* lapisan teks & judul */
.lapisan-teks, .lapisan-judul{
  grid-area:1 / 1; max-width:min(72vw, 560px); pointer-events:none; text-align:center;
  opacity:0; transform:translateY(26px) scale(.98);
  transition:opacity 1s ease, transform 1.2s var(--lembut);
}
.beranda.terlukis .lapisan-teks, .beranda.terlukis .lapisan-judul{ opacity:1; transform:none; }
.lapisan-teks{ align-self:start; margin-top:min(9vh,5rem); }
.lapisan-teks p{ font-size:clamp(.95rem,.85rem+.4vw,1.2rem); color:var(--kelabu);
  text-shadow:0 2px 30px rgba(0,0,0,.8); max-width:44ch; margin:0 auto; }
.lapisan-judul{ align-self:end; margin-bottom:min(8vh,5rem); }
.lapisan-judul .mata-kecil{ display:block; margin-bottom:.9rem; }
.lapisan-judul h1{ color:var(--tulisan); text-shadow:0 6px 50px rgba(0,0,0,.85);
  max-width:16ch; margin:0 auto; }

/* ---------- pintu = detail kecil di dalam lukisan yang jadi menu ---------- */
.pintu{
  grid-area:1 / 1; pointer-events:auto; display:grid; place-items:center;
  width:clamp(78px,9vw,132px); height:clamp(78px,9vw,132px);
  transform:translate(var(--geser-x,0), var(--geser-y,0)) scale(var(--besar-pintu,1));
  filter:grayscale(.5) brightness(.62) drop-shadow(0 12px 26px rgba(0,0,0,.55));
  transition:filter .45s ease;
}
.pintu img{ width:100%; height:100%; object-fit:contain; }
.pintu:hover, .pintu.aktif{ filter:grayscale(0) brightness(1) drop-shadow(0 14px 32px rgba(0,0,0,.6)); }
.pintu:hover .pintu-nama, .pintu.aktif .pintu-nama{ opacity:1; transform:translateY(0); }
.pintu-nama{
  position:absolute; bottom:-1.9em; left:50%; translate:-50% 0;
  font-family:var(--aksara-judul); font-weight:700;
  font-size:clamp(.85rem,.7rem+.5vw,1.1rem); white-space:nowrap; color:var(--tulisan);
  opacity:0; transform:translateY(8px); transition:opacity .35s ease, transform .35s var(--lembut);
  text-shadow:0 2px 20px rgba(0,0,0,.95);
}
.pintu-nama::after{ content:""; display:block; height:1.5px; margin-top:.2em;
  background:linear-gradient(90deg,var(--hijau),var(--koral)); transform:scaleX(0);
  transform-origin:left; transition:transform .4s var(--lembut); }
.pintu:hover .pintu-nama::after, .pintu.aktif .pintu-nama::after{ transform:scaleX(1); }

/* ---------- petunjuk gulir ---------- */
.petunjuk{
  position:fixed; left:50%; bottom:1.6rem; translate:-50% 0; z-index:var(--lapis-menu);
  font-size:.7rem; letter-spacing:.26em; text-transform:uppercase; color:var(--kelabu);
  display:flex; flex-direction:column; align-items:center; gap:.5rem; transition:opacity .6s ease;
}
.petunjuk .garis-gulir{ width:1px; height:36px;
  background:linear-gradient(var(--kelabu),transparent); animation:tarik 1.9s ease-in-out infinite; }
@keyframes tarik{ 0%,100%{ transform:scaleY(.35); transform-origin:top; } 50%{ transform:scaleY(1); } }
.petunjuk.pergi{ opacity:0; pointer-events:none; }

/* spacer: panjang gulir untuk transisi pisah + sobek */
.tinggi-gulir{ height:240vh; }

/* ============================================================
   LEMBAR SOBEK (paper tear) — dibangun oleh skrip/lembar-robek.js.
   Dua lembar warna dasar menutup layar lalu tersobek terpisah,
   memperlihatkan cahaya di celah, lalu pindah ke profil.html.
   ============================================================ */
.robek{ position:fixed; inset:0; z-index:80; pointer-events:none;
  opacity:0; visibility:hidden; }
.robek.tampil{ opacity:1; visibility:visible; }

/* cahaya yang terlihat lewat celah sobekan (kesan halaman berikut) */
.robek-kilas{ position:absolute; inset:0; opacity:0;
  background:
    radial-gradient(58% 42% at 50% 50%, rgba(var(--sinar-koral),.16), transparent 70%),
    var(--dasar);
}

/* dua lembar kertas */
.robek-lembar{ position:absolute; inset:0; background:var(--dasar);
  will-change:transform, opacity;
  background-image:radial-gradient(120% 90% at 50% -10%, rgba(255,255,255,.02), transparent 60%);
}
/* tepi sobek: bibir tulang tipis + bayangan mengikuti garis gerigi */
.robek-atas{  filter:drop-shadow(0 3px 0 rgba(236,234,227,.35)) drop-shadow(0 14px 22px rgba(0,0,0,.55)); }
.robek-bawah{ filter:drop-shadow(0 -3px 0 rgba(236,234,227,.28)) drop-shadow(0 -14px 22px rgba(0,0,0,.55)); }

.beranda.sentuh .robek{ display:none; }

/* ============================================================
   MODE SENTUH / LAYAR SEMPIT (fallback): zoom mati, tumpukan diam,
   menu jadi daftar teks cair (bukan tombol kotak).
   ============================================================ */
.beranda.sentuh .panggung{ position:relative; height:auto; min-height:92vh; padding:22vh 1.2rem 8vh; }
.beranda.sentuh .dunia{ transform:none!important; }
.beranda.sentuh .lapisan, .beranda.sentuh .lapisan-teks, .beranda.sentuh .lapisan-judul{ opacity:1; transform:none; }
.beranda.sentuh .lapisan-dalam{ opacity:.14; transform:translate(-10vw,-3vh); }
.beranda.sentuh .tokoh-utama{ height:min(42vh,460px); }
.beranda.sentuh .tinggi-gulir, .beranda.sentuh .petunjuk{ display:none; }
.beranda.sentuh .pintu{ display:none; }   /* menu pindah ke daftar teks di bawah */

.daftar-pintu{ display:none; }
.beranda.sentuh .daftar-pintu{
  display:flex; flex-wrap:wrap; gap:1.4rem 2.2rem; justify-content:center;
  padding:var(--ruang-lg) 1rem var(--ruang-xl);
}