/* Bukaan TUMBUH + pek botani (functions/_lib/render/bukaan/tumbuh.ts, koreografi tumbuh.js). Warna HANYA token tema.
   Cover: .tb-taman (batang semak, didedah bawah ke atas lewat klip translate, transform sahaja), kolibri (2 frame kepak),
   rama-rama, teks tengah, butang. Panel botani: semak tinggi di sisi (sk-l*, sk-r*), gugusan rendah di bawah (sk-bawah),
   rama-rama hinggap/terbang (rm-*). Kelas ni dirujuk dari public/t/botani/tema.json. */

/* ---------- COVER ---------- */
.bk--tumbuh{justify-content:center;gap:clamp(.9rem,3svh,1.6rem);padding:clamp(5.5rem,17svh,9rem) 0 clamp(8.5rem,25svh,13rem)}
.tb-taman{position:absolute;inset:0;z-index:0;pointer-events:none}
.tb-b{position:absolute;width:var(--w,36%);transform-origin:50% 100%}
.tb-b__klip{overflow:hidden}
.tb-b.is-tumbuh .tb-b__klip{overflow:visible}
.tb-b__in{transform-origin:50% 100%}
.tb-b__img{width:100%;max-width:none;transform-origin:50% 100%}
.tb-b.cermin .tb-b__img{scale:-1 1}
/* kedudukan batang cover: sisi kiri/kanan dua tingkat + gugusan bawah + gugus bucu atas */
.tb-bawah{left:50%;bottom:-3%;--w:118%;translate:-50% 0;z-index:3}
.tb-l1{left:-11%;bottom:6%;--w:min(42%,19.5svh);z-index:2}
.tb-r1{right:-11%;bottom:6%;--w:min(42%,19.5svh);z-index:2}
.tb-l2{left:-13%;top:-1%;--w:min(36%,17svh);z-index:1}
.tb-r2{right:-14%;top:9%;--w:min(36%,17svh);z-index:1}
.tb-atas-r{right:-9%;top:-4%;--w:min(32%,15svh);z-index:2;transform-origin:100% 0}
.tb-atas-r .tb-b__in,.tb-atas-r .tb-b__img{transform-origin:100% 0}

.tb-atas{gap:.5rem;width:min(100%,21rem)}
/* halo krim belakang teks: hujung bunga sisi yang masuk ke lajur teks dipudar, teks kekal terbaca */
.tb-atas::before{content:"";position:absolute;inset:-14% -4% -10%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,var(--mist) 58%,var(--mist-mid) 78%,var(--mist-0))}
.bk--tumbuh .cover__name{font-size:1.04rem}
.tb-atas .eyebrow{letter-spacing:.32em}
.tb-nama{margin:.2rem 0 0}
.tb-nama.names{padding-inline:.15em}
.bk--tumbuh .nama-jawi__n{font-size:clamp(3rem,2.3rem + 3.4vw,3.9rem)}
.bk--tumbuh .nama-rumi{margin-top:.1rem}
.tb-cta{position:relative;z-index:4}
.tb-buka{min-width:12.5rem}

/* kolibri: kotak = kanvas frame A (512x476), frame B dijajar ikut mata */
.tb-kolibri{position:absolute;z-index:5;right:-2%;top:-4.4rem;width:min(22vw,100px);pointer-events:none}
.tb-kolibri__hover{width:100%}
.tb-kolibri__kepak{position:relative;width:100%;aspect-ratio:512/476}
.tb-kolibri__a,.tb-kolibri__b{position:absolute;max-width:none;width:100%}
.tb-kolibri__a{left:0;top:0}
.tb-kolibri__b{left:-2.15%;top:13%;opacity:0}

/* rama-rama cover: satu terbang (kepak = scaleX), satu hinggap atas gugusan bawah */
.tb-rama{position:absolute;z-index:5;pointer-events:none}
.tb-rama__img{width:100%;max-width:none}
.tb-rama--terbang{left:2%;bottom:33%;width:min(13vw,58px)}
.tb-rama--hinggap{right:21%;bottom:15.5%;width:min(11vw,48px);z-index:4}
.tb-rama__in{transform-origin:50% 60%}

/* ---------- PANEL BOTANI ---------- */
.bk-tumbuh .pn{--px:21%}
.bk-tumbuh .pn--muka{--pt:clamp(4rem,13svh,7rem);--pb:calc(var(--nav-h) + 17svh)}
.bk-tumbuh .pn--muka .kp{justify-content:center}
.bk-tumbuh .pn--jemput{--px:16%}
.bk-tumbuh .pn--majlis{--px:17%}
.bk-tumbuh .pn--ayat{--px:15%}
.bk-tumbuh .pn:not(.pn--muka){--pb:calc(var(--nav-h) + 12svh)}
.bk-tumbuh .pn--muka .nama-jawi__n{font-size:clamp(3rem,2.3rem + 3.4vw,3.9rem)}
/* alamat panjang di Muka: semak bunga tepi skrin, jadi kekal sempit (kad.css .panjang lebarkan ke 22rem untuk tema lain) */
.bk-tumbuh .pn--muka .muka__tempat{max-width:min(20rem,52vw)}
/* semak sisi: lebar ikut tinggi skrin supaya dua tingkat menutup sisi pada semua nisbah fon */
.sk-l1,.sk-r1{bottom:5%;--w:min(40%,19svh);--asal:50% 100%}
.sk-l1{left:-12%}
.sk-r1{right:-12%}
.sk-l2,.sk-r2{top:-2%;--w:min(34%,16.5svh);--asal:50% 100%}
.sk-l2{left:-13%}
.sk-r2{right:-13%;top:6%}
.sk-bawah{left:50%;bottom:-4%;--w:116%;translate:-50% 0;--asal:50% 100%}
/* rama-rama panel: hinggap atas gugusan bawah, terbang di ruang sisi */
.rm{--w:min(12%,54px)}
.rm-a{right:22%;bottom:13%}
.rm-b{left:-1%;top:42%}
.rm-c{left:20%;bottom:13.5%}
.rm-d{right:1%;top:46%}
.kad-akhir .sk-l1,.kad-akhir .sk-r1{bottom:8%}
/* panel berteks panjang: semak bawah sisi lebih ke luar + halo krim belakang kumpulan teks */
.bk-tumbuh .pn:not(.pn--muka) .sk-l1{left:-20%;--w:min(37%,17.5svh)}
.bk-tumbuh .pn:not(.pn--muka) .sk-r1{right:-20%;--w:min(37%,17.5svh)}
/* semak atas sisi: pada 412 hujung bunga masuk 20-25px ke kotak teks (bismillah, ayat Arab, salam), tolak keluar */
.bk-tumbuh .pn:not(.pn--muka) .sk-l2{left:-18%}
.bk-tumbuh .pn:not(.pn--muka) .sk-r2{right:-18%}
.gs .bk-tumbuh .kp::before{content:"";position:absolute;inset:-3% -15%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,var(--mist) 62%,var(--mist-mid) 82%,var(--mist-0))}

.rm .lp__in{--asal:50% 55%}
@media (prefers-reduced-motion:no-preference){
  /* rama-rama: kepak = scaleX pada .lp__in (bergabung dengan scale GSAP tumbuh), hanyut pada .lp__img (cermin kekal) */
  .gs .rm--terbang .lp__in{animation:rmKepak .34s var(--ease-inout) infinite alternate;animation-play-state:paused}
  .gs .rm--terbang .lp__img{animation:rmHanyut 7s var(--ease-inout) infinite alternate;animation-play-state:paused}
  .gs .rm--hinggap .lp__in{animation:rmRehat 4.2s var(--ease-inout) infinite;animation-play-state:paused}
  .gs .is-nampak .rm .lp__in,.gs .is-nampak .rm .lp__img,.gs .kad-akhir .rm .lp__in{animation-play-state:running}
}
@keyframes rmKepak{from{scale:1 1}to{scale:.38 1}}
@keyframes rmHanyut{0%{translate:0 0;rotate:-8deg}50%{translate:14px -22px;rotate:6deg}100%{translate:-6px -40px;rotate:-4deg}}
@keyframes rmRehat{0%,70%,100%{scale:1 1}78%{scale:.55 1}86%{scale:1 1}92%{scale:.6 1}}

/* keadaan awal sebelum tumbuh.js sedia (rAF yang sama tambah .is-live dan .tb-siap). Modul rosak = .is-live tanpa
   .tb-siap, semua nampak statik. */
.js .bk--tumbuh:not(.is-live):not(.tb-siap) :is([data-tb-l],.tb-nama,.tb-taman,.tb-kolibri,.tb-rama){opacity:0}
.js .bk--tumbuh:not(.tb-siap) .tb-kolibri__b{opacity:0}
@media (prefers-reduced-motion:no-preference){
  /* ayun lembut semak lepas tumbuh (rotate, bukan transform, jadi GSAP pada .tb-b/.tb-b__in tak bertembung) */
  .gs .tb-ayun .tb-b__img{animation:tbAyun 5.2s var(--ease-inout) infinite alternate}
  .gs .tb-ayun .tb-b:nth-child(2n) .tb-b__img{animation-duration:6.1s;animation-delay:-2.3s}
  .gs .tb-ayun .tb-b:nth-child(3n) .tb-b__img{animation-duration:4.6s;animation-delay:-1.2s}
  .gs .tb-ayun .tb-bawah .tb-b__img{animation-name:tbAyunBawah}
  .is-opening .tb-b__img{animation-play-state:paused}
}
@keyframes tbAyun{from{rotate:-1.6deg}to{rotate:1.8deg}}
@keyframes tbAyunBawah{from{rotate:-.5deg}to{rotate:.6deg}}