/* css/209-hub-motion.css — ศูนย์รวมทริป: เปิดนุ่มๆ · ลึกลง/ย้อนกลับเลื่อนซ้ายขวา · การ์ดไล่ขึ้นทีละใบ · กดแล้วยุบเบาๆ */
#homeTripExplorerPanel .hte-modal-backdrop{transition:opacity .3s}
#homeTripExplorerPanel .hte-modal-card.hubm-open{animation:hubmCard .5s cubic-bezier(.2,.9,.25,1) both}
@keyframes hubmCard{from{opacity:0;transform:translateY(26px) scale(.965)}}
@keyframes hubmFade{from{opacity:0}}
/* หัวหน้าต่าง */
.hubm-open .hte-panel-head>*,.hubm-fwd .hte-panel-head>*,.hubm-back .hte-panel-head>*{animation:hubmFade .4s .08s ease-out both}
.hubm-open .hte-title-icon{animation:hubmIcon .6s .1s cubic-bezier(.3,1.6,.5,1) both}
@keyframes hubmIcon{from{opacity:0;transform:scale(.4) rotate(-20deg)}}
/* เนื้อหา: ลึกลงเลื่อนมาจากขวา · ย้อนกลับมาจากซ้าย */
.hubm-fwd .hte-panel-body{animation:hubmFwd .42s cubic-bezier(.2,.8,.2,1) both}
.hubm-back .hte-panel-body{animation:hubmBack .42s cubic-bezier(.2,.8,.2,1) both}
@keyframes hubmFwd{from{opacity:0;transform:translateX(28px)}}
@keyframes hubmBack{from{opacity:0;transform:translateX(-28px)}}
/* เพจผู้จัด: ไหลเข้ามาจากขวาทีละเพจ */
.hubm-open .hub-org{animation:hubmOrg .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.18s + var(--k,0) * 60ms)}
@keyframes hubmOrg{from{opacity:0;transform:translateX(30px) scale(.96)}}
/* หัวข้อย่อย + ชิป */
.hubm-open :is(.hub-sec,.hub-chips,.hub-orghead){animation:hubmUp .5s .14s cubic-bezier(.2,.8,.2,1) both}
.hubm-fwd .hub-orghead{animation:hubmUp .5s .05s cubic-bezier(.2,.8,.2,1) both}
/* ทริป/เดือน: ไล่ขึ้นทีละใบ */
:is(.hubm-open,.hubm-fwd,.hubm-back,.hubm-soft) :is(.hub-row,.hte-month,.hte-list>*){animation:hubmUp .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.12s + var(--k,0) * 45ms)}
.hubm-open .hub-row{animation-delay:calc(.3s + var(--k,0) * 45ms)}
.hubm-soft .hub-row{animation-duration:.38s;animation-delay:calc(var(--k,0) * 30ms)}
.hubm-open .hub-cta{animation:hubmUp .5s .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes hubmUp{from{opacity:0;transform:translateY(14px)}}
/* สัมผัส: ยกขึ้นตอนชี้ ยุบตอนกด · ชิปเลื่อนสีนุ่มๆ */
#homeTripExplorerPanel :is(.hub-org,.hub-row,.hte-month,.hub-cta){transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s}
@media (hover:hover){#homeTripExplorerPanel :is(.hub-org,.hub-row,.hte-month):hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,.3)}}
#homeTripExplorerPanel :is(.hub-org,.hub-row,.hte-month,.hub-cta):active{transform:scale(.97)}
#homeTripExplorerPanel .hub-chip{transition:background .25s,color .25s,border-color .25s,transform .15s}
#homeTripExplorerPanel .hub-chip:active{transform:scale(.94)}
#homeTripExplorerPanel .hub-thumb{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){#homeTripExplorerPanel .hub-row:hover .hub-thumb{transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){#homeTripExplorerPanel *{animation:none!important}}