/* Bukaan JALAN + pek jalan (functions/_lib/render/bukaan/jalan.ts, koreografi jalan.js). Warna HANYA token tema.
   Cover: tile jalan menegak bergelung (.jl-jalur, transform sahaja), kereta pandangan atas tetap di tengah atas,
   eyebrow skrip menegak atas jalan, nama panggilan huruf besar serif putih + tarikh + tetamu + butang di bawah.
   Pentas (.jl-pentas dalam .layar): kereta pandangan sisi atas garis jalan gambar langit (--jl-roda dari jalan.js).
   Panel langit: teks di atas kereta (--jl-pb). Panel pergola: kabus lembut belakang teks di bukaan tiang. */

/* ---------- COVER ---------- */
.bk--jalan{--jl-aw:min(124px,26vw,12.5svh);--jl-at:calc(4.5svh + env(safe-area-inset-top));
  justify-content:flex-end;gap:clamp(.6rem,2svh,1.1rem);padding:0 0 calc(3.2svh + env(safe-area-inset-bottom));color:var(--ink-gelap)}
.jl-jalan{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.jl-jalur{position:absolute;left:0;right:0;top:0;will-change:transform}
.jl-tile{display:block;width:100%;max-width:none;height:auto}
.jl-tile+.jl-tile{margin-top:-1px}
/* teduh bawah: teks putih kekal terbaca bila nama panjang melimpah ke bunga tepi jalan */
.jl-jalan::after{content:"";position:absolute;left:0;right:0;bottom:0;height:68%;background:linear-gradient(to top,var(--jl-teduh),var(--jl-teduh) 42%,var(--jl-teduh-0))}

.jl-kereta{position:absolute;z-index:2;left:50%;top:var(--jl-at);width:var(--jl-aw);margin-left:calc(var(--jl-aw) / -2);pointer-events:none}
.jl-kereta__img{display:block;width:100%;max-width:none}

/* eyebrow skrip menegak: kotak sifar lebar di paksi jalan, teks diputar -90deg (dibaca bawah ke atas) */
.jl-eyebrow{position:absolute;z-index:2;left:50%;width:0;top:calc(var(--jl-at) + var(--jl-aw) * 2.206 + 2.5svh);bottom:6svh;margin:0;pointer-events:none}
.jl-eyebrow__t{position:absolute;left:0;top:50%;white-space:nowrap;font:400 min(3.5rem,8.5svh)/1.35 var(--f-script);color:var(--ink-gelap);
  text-shadow:0 1px 10px var(--jl-bayang);translate:-50% -50%;rotate:-90deg;padding-inline:.2em}

.jl-teks{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:clamp(.3rem,1.1svh,.65rem);
  width:min(100%,25rem);padding-inline:var(--gutter);text-align:center}
.jl-nama{margin:0;display:flex;flex-direction:column;align-items:center;max-width:100%;
  font:500 clamp(2.45rem,2rem + 2.4vw,3.05rem)/1.04 var(--f-display);letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-gelap);text-shadow:0 2px 14px var(--jl-bayang);overflow-wrap:anywhere;text-wrap:balance}
.jl-nama__n{display:block;max-width:100%}
.jl-nama__dan{display:block;font-size:.6em;line-height:1.15;margin:.06em 0;letter-spacing:0}
.jl-nama--m{font-size:clamp(2.05rem,1.75rem + 1.6vw,2.5rem)}
.jl-nama--l{font-size:clamp(1.7rem,1.45rem + 1.2vw,2.05rem)}
.jl-nama--xl{font-size:clamp(1.42rem,1.25rem + .9vw,1.7rem);letter-spacing:.05em}
.jl-nama--baris{display:block;line-height:1.12}
.jl-tarikh{margin:.2rem 0 0;font:500 1.02rem/1.3 var(--f-display);letter-spacing:.3em;padding-left:.3em;color:var(--ink-soft-gelap);text-shadow:0 1px 8px var(--jl-bayang)}
.jl-tamu .bk-tamu{margin-top:.35rem}
.jl-tamu .cover__to{color:var(--ink-soft-gelap);text-shadow:0 1px 6px var(--jl-bayang)}
.jl-tamu .cover__name{color:var(--ink-gelap);text-shadow:0 1px 8px var(--jl-bayang)}
.jl-cta{position:relative;z-index:3;display:grid;justify-items:center;gap:.1rem}
.jl-petunjuk{color:var(--ink-gelap);text-shadow:0 1px 8px var(--jl-bayang)}
.jl-buka{min-width:12.5rem}

/* keadaan awal sebelum jalan.js sedia (rAF yang sama tambah .is-live dan .jl-siap). Modul rosak = statik. */
.js .bk--jalan:not(.is-live):not(.jl-siap) :is([data-jl-l],.jl-eyebrow,.jl-kereta){opacity:0}
/* tiada gerak (reduced-motion / tiada GSAP / tiada JS): eyebrow menegak bertindih nama, jadi disorok macam keadaan akhir */
.jl-statik .jl-eyebrow,html:not(.js) .jl-eyebrow{display:none}
@media (prefers-reduced-motion:no-preference){
  .jl-siap .jl-petunjuk{animation:denyut 2.2s var(--ease-inout) 4s infinite}
  .is-opening .jl-petunjuk{animation:none}
}

/* ---------- PENTAS: kereta sisi dalam .layar ---------- */
.jl-pentas{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
html:not(.gs) .jl-pentas{display:none}
.jl-sisi{position:absolute;left:50%;bottom:var(--jl-roda,9svh);width:var(--jl-kw,64%);margin-left:calc(var(--jl-kw,64%) / -2);visibility:hidden}
.jl-sisi.is-masuk{visibility:visible}
.jl-sisi__in{transform-origin:22% 98%}
.jl-sisi__img{display:block;width:100%;max-width:none;scale:-1 1}

/* ---------- PANEL JALAN ---------- */
.bk-jalan .pn--muka{--pt:clamp(4.2rem,13svh,7rem)}
.bk-jalan :is(.pn--muka,.pn--jemput,.pn--cd){--pb:var(--jl-pb,calc(var(--nav-h) + 24svh))}
.bk-jalan .pn--jemput{--pt:clamp(3.2rem,9svh,5.5rem)}
/* langit: kabus lembut tengah supaya dakwat biru tua tak lawan awan */
.bk-jalan :is(.pn--muka,.pn--jemput,.pn--cd) .pn__latar::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 62% 34% at 50% 38%,var(--mist-mid),var(--mist-0))}
/* pergola: teks dalam bukaan antara tiang (x 22-80% gambar), kabus belakang teks kerana tasik di y 60-78% */
.bk-jalan :is(.pn--majlis,.pn--ayat){--px:19%;--pt:clamp(3.6rem,11svh,6rem);--pb:calc(var(--nav-h) + 7svh)}
/* Ayat: bismillah sebaris pada 360 (lajur 19% = 224px pecahkan bismillah dua baris) */
.bk-jalan .pn--ayat{--px:17%}
.bk-jalan .pn--ayat .bismillah--besar{font-size:min(2rem,8vw);white-space:nowrap}
.bk-jalan :is(.pn--majlis,.pn--ayat) .pn__latar::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 48% 47% at 50% 51%,var(--mist),var(--mist-mid) 62%,var(--mist-0))}
.jl-awan .lp__img{opacity:.9}
/* Jemputan bermula tinggi (bismillah y ~13-20%), awan cermin dinaikkan supaya gumpalan kanan tak duduk bawah bismillah */
.bk-jalan .pn--jemput .jl-awan{--oy:-16%}
.jl-awan-bucu{--w:min(62%,260px);opacity:.92}