/* Bukaan LAPIS (functions/_lib/render/bukaan/lapis.ts, koreografi lapis.js). Generik, dipacu tema.json kad.aset.lapis.
   Warna HANYA token tema. Cover: .ls-latar (gambar latar penuh, zum GSAP pada __zum, hanyut CSS pada __img), .ls-lap
   (lapisan depan .lp, kelas letak kad.css), .ls-ruang (kotak teks atas ruang langit bersih gambar latar).
   Ruang langit = pecahan gambar latar (tema.json ruang.atas/bawah/lebar, dipasang lapis.js sebagai --ls-*). Gambar latar
   object-fit cover, jadi lebar gambar yang dipapar = max(lebar cover, tinggi cover x nisbah gambar), dan lajur langit
   bersih = lebar x itu. Nilai lalai di bawah = pek kl (komposit-a, langit y 15-62%, lajur 56% pada paras palma). */

/* ---------- COVER ---------- */
.bk--lapis{--ls-atas:15%;--ls-bawah:62%;--ls-lebar:.56;--ls-nisbah:.5631;background:var(--bk-bg)}
.ls-latar{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.ls-latar__zum{position:absolute;inset:0;transform-origin:50% 50%}
/* lebih 10px setiap sisi untuk hanyut x +-8px tanpa tepi kosong */
.ls-latar__img{position:absolute;top:0;left:-10px;width:calc(100% + 20px);height:100%;max-width:none;object-fit:cover}
.ls-lap{position:absolute;inset:0;z-index:1;pointer-events:none}
/* pangkal pokok: ayun + tumbuh dari tengah bawah gambar (batang), bukan bucu kotak */
.lp.ls-pangkal{--asal:50% 100%}

.ls-ruang{position:absolute;z-index:3;left:0;right:0;top:var(--ls-atas);bottom:calc(100% - var(--ls-bawah));margin-inline:auto;
  width:min(calc(100% - 2 * var(--gutter)),calc(var(--ls-lebar) * max(100%,100svh * var(--ls-nisbah))));
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:clamp(.6rem,2svh,1.2rem);text-align:center}
.ls-teks{display:flex;flex-direction:column;align-items:center;gap:clamp(.25rem,1svh,.5rem);width:100%;max-width:100%}
.ls-teks .eyebrow{letter-spacing:.3em;padding-left:.3em}
.ls-nama{margin:.15rem 0 0;max-width:100%}
.ls-nama.names{line-height:1.14;padding-inline:.12em;overflow-wrap:anywhere}
.bk--lapis .nama-jawi__n{font-size:clamp(2.7rem,2.2rem + 2.6vw,3.4rem);line-height:1.3}
.bk--lapis .pemisah--jawi{margin:0 auto}
.bk--lapis .nama-rumi{margin-top:0}
.ls-nama--m{font-size:clamp(2.3rem,2rem + 1.6vw,2.7rem)}
.ls-nama--l{font-size:clamp(1.95rem,1.7rem + 1.2vw,2.25rem)}
.ls-nama--xl{font-size:clamp(1.6rem,1.45rem + .9vw,1.85rem)}
.ls-teks .bk-tamu{margin-top:.2rem}
.ls-cta{position:relative;display:grid;justify-items:center}
.ls-buka{min-width:12.5rem}

/* sebelum intro (JS belum ambil alih): latar, lapisan dan teks disorok supaya comp penuh tak berkelip lalu hilang bila
   intro mula. lapis.js tambah .ls-mula selepas keadaan awal GSAP dipasang. Sandaran kalau modul gagal dimuat, semuanya
   muncul sendiri selepas 3 s (animasi CSS), jadi tetamu tak tersangkut di skrin biru. */
.js .bk--lapis:not(.ls-mula) :is(.ls-latar,.ls-l .lp__in,[data-ls-l]){opacity:0;animation:ls-muncul .5s 3s both}
@keyframes ls-muncul{to{opacity:1}}

/* terbiar: lapisan berayun (kad.css ayun) + latar hanyut, mula selepas intro (.ls-hidup), henti masa buka */
@media (prefers-reduced-motion:no-preference){
  .gs .bk--lapis.ls-hidup .lp__img{animation-play-state:running}
  .gs .bk--lapis.ls-hidup .ls-latar__img{animation:ls-hanyut 9s var(--ease-inout) infinite alternate}
}
@keyframes ls-hanyut{from{translate:-8px 0}to{translate:8px 0}}

/* mod video: kotak teks dalam zon selamat TikTok (kad.css --vz-*) */
.mod-video .bk--lapis .ls-ruang{top:max(var(--ls-atas),calc(var(--vz-t) + 2px));bottom:max(calc(100% - var(--ls-bawah)),calc(100svh - var(--vz-b) + 2px));
  width:min(calc(100% - 2 * var(--vz-x)),calc(var(--ls-lebar) * max(100%,100svh * var(--ls-nisbah))))}
.mod-video .bk--lapis .ls-teks{gap:.2rem}

/* ---------- PANEL (bukaan lapis, umum) ---------- */
/* latar gambar langit: kabus lembut belakang teks supaya dakwat kekal terbaca atas awan + langit tepu */
.bk-lapis .pn__latar::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 66% 40% at 50% 42%,var(--mist),var(--mist-mid) 58%,var(--mist-0))}

/* ---------- PEK KL (public/t/kl/tema.json) ---------- */
/* Cover tiada nav. Panel ada nav tetap (--nav-h) di bawah, jadi lapisan bawah panel diangkat supaya tak tersorok, dan
   kotak teks (--pb) berhenti di atas bumbung pekan (pekan + semak + bunga = bawah sahaja, teks atas langit). */
.kad--kl .pn--muka{--pt:clamp(4rem,12svh,6.5rem)}
.kad--kl .pn--muka .muka__tempat{max-width:min(20rem,62vw)}
.kad--kl .pn--jemput{--px:14%;--pt:clamp(3.2rem,9svh,5.5rem);--pb:calc(var(--nav-h) + 10svh)}
.kad--kl .pn--majlis{--px:13%;--pt:clamp(3.4rem,9svh,5.5rem);--pb:calc(var(--nav-h) + 13svh)}
.kad--kl .pn--ayat{--px:14%;--pt:clamp(4rem,13svh,7rem);--pb:calc(var(--nav-h) + 13svh)}
.kad--kl .pn--ayat .bismillah--besar{font-size:min(2rem,8vw);white-space:nowrap}
.kad--kl .pn--cd{--pb:calc(var(--nav-h) + 24svh)}
/* jalur pekan (belakang) + semak (depan, tutup tepi bawah pekan yang koyak) selebar 130% skrin */
.kl-pekan{--w:min(130%,100svh * .62);--oy:calc(var(--nav-h) + 8svh)}
.kl-semak{--w:min(130%,100svh * .66);--oy:-2.5%}
.pn .kl-semak{--oy:calc(var(--nav-h) - 14px)}
.pn--majlis .kl-pekan{--oy:calc(var(--nav-h) - 40px)}
.kad-akhir .kl-pekan{--oy:9svh}
/* gugusan bunga raya bucu bawah (cover, Muka) */
.kl-bunga{--w:min(46%,25svh);--ox:-9%;--oy:-3%}
.pn .kl-bunga{--oy:calc(var(--nav-h) - 30px)}
/* palma separa luar skrin: cover di bucu bawah. Jemputan (teks paling panjang, --px 14%) lebih kecil dan dua pertiga
   di luar skrin, hujung pelepah berhenti sebelum lajur teks (-27% + 40% = 13% < --px 14%) */
.kl-palma{--w:min(50%,26svh);--ox:-24%;--oy:-2%}
.pn--jemput .kl-palma{--w:min(40%,21svh);--ox:-27%;--oy:calc(var(--nav-h) - 30px)}
/* gugusan bunga bawah (Jemputan, Ayat), sebahagian kecil di belakang nav. Jemputan p 0.1 + palma p 0.2 dalam tema.json
   (parallax kad.js +-0.09 x p x tinggi skrin), supaya kumpulan teks kedua tak dihimpit bunga yang naik */
.kl-gugus{--w:min(108%,58svh);--oy:calc(var(--nav-h) - 40px)}
.pn--jemput .kl-gugus{--w:min(74%,42svh);--oy:calc(var(--nav-h) - 56px)}
.kl-atas{--w:min(42%,22svh);--ox:-10%;--oy:-3%}