/* Bukaan PETI (functions/_lib/render/bukaan/peti.ts, koreografi peti.js). Warna HANYA token /t/peti/tema.css.
   Kotak .pt-peti = gubahan badan + tudung (lebar tudung = 100%, nisbah 1000/1392). Ukuran diambil dari aset:
   badan 742x752 (muka hadapan 97% lebar, tepi emas atas 9.6% tinggi), tudung 760x602 (muka hadapan 98% lebar, tepi
   bawah 68.9% tinggi, hujung reben 98.8%). Tudung = 1.041 x lebar badan supaya muka hadapan tudung 5% lebih lebar.
   Plat di depan badan, roda dalam tingkap ikut kad.aset.plat.tingkap (peti.js tulis --x --y --w --h). */
.bk--peti{justify-content:space-between;padding:clamp(2.2rem,7svh,5rem) 0 calc(2.5svh + env(safe-area-inset-bottom))}
.bk--peti .bk__atas{gap:.25rem}
.pt-tajuk{font:400 clamp(1.9rem,1.6rem + 1.4vw,2.3rem)/1.2 var(--f-script);color:var(--aksen);padding-inline:.3em}
/* saiz peti ikut ruang sebenar antara .bk__atas dan petunjuk (container query), supaya nama panggilan panjang yang
   berbalut 3-4 baris mengecilkan peti, bukan menolak peti ke atas petunjuk. Tinggi peti = 1.449 x --pb. */
.pt-pentas{position:relative;flex:1;display:grid;place-items:center;width:100%;min-height:0;padding-block:.6rem;container-type:size}
.pt-peti{--pb:min(68vw,340px,calc(100cqh / 1.45));position:relative;display:block;width:calc(var(--pb) * 1.041);aspect-ratio:1000/1392;
  padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pt-peti__bob{position:absolute;inset:0}
.pt-badan{position:absolute;left:1.97%;top:30.08%;width:96.06%;max-width:none;z-index:1;filter:drop-shadow(var(--sh-env))}
.pt-tudung{position:absolute;left:0;top:0;width:100%;z-index:3;transform-origin:50% 70%}
.pt-tudung__img{width:100%;max-width:none}
.pt-cahaya{position:absolute;left:50%;top:34%;width:140%;aspect-ratio:1;translate:-50% -50%;z-index:2;border-radius:50%;opacity:0;pointer-events:none;
  background:radial-gradient(closest-side,var(--cahaya) 0%,var(--cahaya-mid) 42%,var(--cahaya-0) 100%)}

/* plat kunci + roda */
.pt-plat{position:absolute;left:9.66%;top:57%;width:80.69%;aspect-ratio:720/429;z-index:4}
.pt-plat__img{position:absolute;inset:0;width:100%;height:100%;max-width:none;filter:drop-shadow(0 3px 4px var(--roda-bayang))}
.pt-roda{position:absolute;left:var(--x,0);top:var(--y,0);width:var(--w,0);height:var(--h,0);overflow:hidden;container-type:size;border-radius:3px;
  background:linear-gradient(var(--roda-tepi),var(--roda-tengah) 24%,var(--roda-muka) 50%,var(--roda-tengah) 76%,var(--roda-tepi));
  --sel:54cqh}
html:not(.js) .pt-roda{display:none}
/* silinder: bayang atas + bawah (gelap ke tengah) + kilau nipis di tengah, atas teks */
.pt-roda::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
  background:linear-gradient(var(--roda-bayang) 0%,var(--roda-bayang-0) 32%,var(--roda-bayang-0) 68%,var(--roda-bayang) 100%),
    linear-gradient(var(--roda-bayang-0) 44%,var(--roda-kilau) 49%,var(--roda-bayang-0) 54%);
  box-shadow:inset 0 3px 4px var(--roda-bayang),inset 0 -2px 3px var(--roda-bayang)}
.pt-jalur{position:absolute;left:0;right:0;top:calc(50% - var(--sel) / 2);display:flex;flex-direction:column}
.pt-jalur.is-jalur{will-change:transform}
.pt-sel{flex:none;height:var(--sel);display:grid;place-items:center;white-space:nowrap;color:var(--roda-ink);
  font:600 min(40cqh,74cqw)/1 var(--f-display);font-variant-numeric:lining-nums tabular-nums;letter-spacing:.01em}
.pt-roda--bulan .pt-sel{font-size:min(40cqh,48cqw);letter-spacing:0}
.pt-roda--tahun .pt-sel{font-size:min(40cqh,45cqw)}
/* kilat emas melintas plat (lapisan gradien, transform sahaja) */
.pt-kilat{position:absolute;inset:7% 3%;z-index:3;overflow:hidden;opacity:0;border-radius:5%;pointer-events:none}
.pt-kilat__jalur{position:absolute;top:-10%;bottom:-10%;left:0;width:55%;
  background:linear-gradient(105deg,var(--kilat-0) 15%,var(--kilat) 50%,var(--kilat-0) 85%)}

/* pelayar tanpa container query (WebView lama): saiz ikut tinggi skrin, roda dan teks ikut --pb (nisbah dari aset) */
@supports not (width:1cqh){
  .pt-peti{--pb:min(68vw,340px,calc((100vh - 21rem) / 1.45))}
  .pt-roda{--sel:calc(var(--pb) * .122)}
  .pt-sel{font:600 calc(var(--pb) * .08)/1 var(--f-display)}
  .pt-roda--bulan .pt-sel{font-size:calc(var(--pb) * .052)}
  .pt-roda--tahun .pt-sel{font-size:calc(var(--pb) * .078)}
}

@media (prefers-reduced-motion:no-preference){
  .pt-peti__bob{animation:apung 3s var(--ease-inout) infinite alternate}
  .bk--peti .bk__petunjuk.is-in{animation:denyut 2.2s var(--ease-inout) infinite}
  .is-opening .pt-peti__bob{animation-play-state:paused}
  .is-opening .bk__petunjuk.is-in{animation:none}
}

/* templat peti di luar bukaan: peti.tajuk di Muka, bucu emas kad blok interaktif */
.kad--peti .muka__tarikh{font-variant-numeric:lining-nums}
/* alamat panjang di Muka: gugusan bunga bucu bawah, jadi kekal sempit (kad.css .panjang lebarkan ke 22rem) */
.kad--peti .pn--muka .muka__tempat{max-width:min(20rem,52vw)}
.muka__tajuk{font:400 clamp(1.5rem,1.3rem + 1vw,1.8rem)/1.2 var(--f-script);color:var(--aksen);padding-inline:.3em}
.kad--peti .kb__bucu .bucu-emas{--w:30%}
.kad--peti .kb__bucu .at-tl.bucu-emas{top:7px;left:7px}
.kad--peti .kb__bucu .at-br.bucu-emas{bottom:7px;right:7px}
.kad--peti .kb__bucu .bucu-bunga{--w:30%}
/* gugusan bunga bucu bawah Muka (sprite mahkota yang sama, lebih kecil), kaki gugusan atas nav (--nav-h) supaya separuh
   bawah Muka tak kosong. Unit --u = 1.3% lebar lajur, dihadkan ikut ruang bawah teks Muka (skrin pendek 360x740 kekal
   bawah 100px) supaya bunga tak naik ke teks. Gugusan kiri cermin gugusan kanan (at-bl/at-br guna --ox/--oy). */
.kad--peti .pn--muka .pn__lap{--gh:640px;--u:max(2.4px,min(1.3vw,6px,(100vh - var(--gh)) / 34))}
@supports (height:1svh){.kad--peti .pn--muka .pn__lap{--u:max(2.4px,min(1.3vw,6px,(100svh - var(--gh)) / 34))}}
.kad--peti .pn--muka .gg{--w:calc(var(--gw) * var(--u));--ox:calc(var(--gx) * var(--u));--oy:calc(var(--nav-h,64px) + var(--gy) * var(--u))}
.kad--peti .pn--muka .gg-a{--gw:24;--gx:-6;--gy:-5;z-index:4}
.kad--peti .pn--muka .gg-b{--gw:14;--gx:13;--gy:-4;z-index:3}
.kad--peti .pn--muka .gg-c{--gw:17;--gx:-7;--gy:15;z-index:1}
.kad--peti .pn--muka .gg-d{--gw:11;--gx:9;--gy:14;z-index:2}
.kad--peti .pn--muka .at-bl.gg-a{rotate:-8deg}.kad--peti .pn--muka .at-br.gg-a{rotate:8deg}
.kad--peti .pn--muka .at-bl.gg-b{rotate:10deg}.kad--peti .pn--muka .at-br.gg-b{rotate:-10deg}
.kad--peti .pn--muka .at-bl.gg-c{rotate:-14deg}.kad--peti .pn--muka .at-br.gg-c{rotate:14deg}
/* skrin pendek (360x740): teks Muka naik 4svh supaya nama panggilan panjang (4 baris) tak tertutup petunjuk skrol,
   ruang yang terbuka diberi kepada gugusan bawah */
@media (max-height:760px){.kad--peti .pn--muka{--pt:34svh}.kad--peti .pn--muka .pn__lap{--gh:610px}}