/* ===== เมนูวิทยุ: พับเปิด/ปิดแบบมีมิติ =====
   เปิด: แผงไม้เด้งขึ้นจากปุ่มวิทยุ แล้วแต่ละชั้น (จอหน้าปัด → ปุ่มกด → ระดับเสียง → รายการสถานี)
         คลี่ออกทีละชั้นเหมือนบานพับ มีเงามืด→สว่างตามมุมแสง
   ปิด: พับกลับจากล่างขึ้นบน แล้วหดกลับเข้าปุ่มวิทยุ */
@media (prefers-reduced-motion:no-preference){
#rdoPanel{perspective:1100px;perspective-origin:50% 100%}
#rdoPanel.on{transform-origin:12% 100%;animation:rdoPanelIn .5s cubic-bezier(.2,.85,.25,1.06) both}
#rdoPanel.on>*{transform-origin:50% 0;backface-visibility:hidden;animation:rdoFoldOpen .56s cubic-bezier(.22,.9,.3,1) both}
#rdoPanel.on>.rdial{animation-delay:.05s}
#rdoPanel.on>.rctl{animation-delay:.15s}
#rdoPanel.on>.rv{animation-delay:.24s}
#rdoPanel.on>.rbody{animation-delay:.32s}
#rdoPanel.on.closing{animation:rdoPanelOut .34s cubic-bezier(.5,0,.85,.4) .26s both}
#rdoPanel.on.closing>*{animation:rdoFoldClose .3s cubic-bezier(.5,0,.75,.25) both}
#rdoPanel.on.closing>.rbody{animation-delay:0s}
#rdoPanel.on.closing>.rv{animation-delay:.06s}
#rdoPanel.on.closing>.rctl{animation-delay:.12s}
#rdoPanel.on.closing>.rdial{animation-delay:.18s}
#rdoBtn{transition:opacity .15s,background .2s,border-color .2s,transform .25s cubic-bezier(.3,1.6,.5,1)}
#rdoBtn.on{transform:scale(1.12) rotate(-8deg)}
@keyframes rdoPanelIn{
  0%{opacity:0;transform:translateY(22px) scale(.5) rotateX(32deg)}
  45%{opacity:1}
  100%{opacity:1;transform:none}}
@keyframes rdoFoldOpen{
  0%{opacity:0;transform:rotateX(-92deg);filter:brightness(.28)}
  10%{opacity:1}
  68%{transform:rotateX(7deg);filter:brightness(1.14)}
  100%{opacity:1;transform:none;filter:none}}
@keyframes rdoFoldClose{
  0%{opacity:1;transform:none;filter:none}
  85%{opacity:1}
  100%{opacity:0;transform:rotateX(-92deg);filter:brightness(.28)}}
@keyframes rdoPanelOut{
  0%{opacity:1;transform:none}
  100%{opacity:0;transform:translateY(22px) scale(.5) rotateX(32deg)}}
}