/* JTTT motion layer v1 · 4 Oct 2026
   ปิดทั้งหมด: ลบไฟล์ wp-content/mu-plugins/jttt-motion.php  · ปิดชั่วคราวทดสอบ: เติม ?nomotion ท้าย URL
   เคารพการตั้งค่า "ลดการเคลื่อนไหว" ของเครื่องลูกค้า (prefers-reduced-motion) */

/* แถบความคืบหน้าการอ่าน */
#jm-prog{position:fixed;top:0;left:0;right:0;height:3px;z-index:100000;pointer-events:none;
  background:linear-gradient(90deg,#f5a623,#ffcf6b);transform-origin:0 50%;transform:scaleX(0)}

/* เมนูหดลงเมื่อเลื่อน */
.jt-nav{transition:height .35s ease,box-shadow .35s ease,background-color .35s ease}
.jt-nav.jm-scrolled{height:58px;box-shadow:0 6px 24px rgba(0,0,0,.28)}

/* ภาพพื้นหลัง hero เคลื่อนไหวช้า ๆ (Ken Burns) + parallax */
.jm-kb-wrap{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.jm-kb{position:absolute;inset:-6% -3%;background-size:cover;background-position:center;will-change:transform}

/* ปุ่มทองมีแสงวิ่งผ่านตอนชี้ */
.btn-gold.jm-shine,.btn-gold.jm-shine:hover{
  background-image:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%)!important;
  background-size:250% 100%!important;background-repeat:no-repeat!important;background-position:150% 0!important;
  transition:background-position .7s ease,transform .3s,box-shadow .3s,background-color .3s}
.btn-gold.jm-shine:hover{background-position:-60% 0!important}

@media (prefers-reduced-motion:no-preference){
  /* เผยตัวตอนเลื่อนถึง — ใช้ translate/scale แยก จึงไม่ชนกับ hover เดิมที่ใช้ transform */
  .jm-r{opacity:0;translate:0 34px;
    transition:opacity .9s cubic-bezier(.16,.84,.3,1),translate .9s cubic-bezier(.16,.84,.3,1),scale .9s cubic-bezier(.16,.84,.3,1);
    transition-delay:var(--jm-d,0s)}
  .jm-r.jm-left{translate:-40px 0}
  .jm-r.jm-right{translate:40px 0}
  .jm-r.jm-zoom{translate:0 0;scale:.94}
  .jm-r.jm-in{opacity:1;translate:0 0;scale:1}

  /* hero: ข้อความไล่ขึ้นทีละบรรทัดตอนเปิดหน้า */
  .jm-h{opacity:0;animation:jmUp 1s cubic-bezier(.16,.84,.3,1) forwards;animation-delay:var(--jm-d,0s)}
  @keyframes jmUp{from{opacity:0;translate:0 26px;filter:blur(6px)}to{opacity:1;translate:0 0;filter:blur(0)}}

  .jm-kb{animation:jmKB 26s ease-in-out infinite alternate}
  @keyframes jmKB{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.12) translate3d(-1.5%,-1%,0)}}

  /* จุดไทม์ไลน์เต้นเบา ๆ เมื่อเผยตัว */
  .dt-tl-item.jm-in .dt-tl-dot{animation:jmPing 1.2s ease-out 1;animation-delay:calc(var(--jm-d,0s) + .25s)}
  @keyframes jmPing{0%{box-shadow:0 0 0 0 rgba(245,166,35,.65)}100%{box-shadow:0 0 0 14px rgba(245,166,35,0)}}

  /* เลขขั้นตอนเด้งเข้า */
  .step.jm-in .step-num{animation:jmPop .7s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(var(--jm-d,0s) + .15s)}
  @keyframes jmPop{from{scale:.4;opacity:0}to{scale:1;opacity:1}}

  /* ดาวรีวิวมีประกาย */
  .rev-card.jm-in .rev-stars{background:linear-gradient(100deg,#f5a623 40%,#fff3c4 50%,#f5a623 60%);background-size:300% 100%;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:jmStar 2.2s ease .4s 1 both}
  @keyframes jmStar{from{background-position:100% 0}to{background-position:0 0}}

  /* การ์ดลอยนุ่มขึ้นเล็กน้อย */
  .prog-card,.dt-hl-card,.tx-set-card,.why-card{transition:transform .45s cubic-bezier(.16,.84,.3,1),box-shadow .45s ease,border-color .3s,opacity .9s cubic-bezier(.16,.84,.3,1) var(--jm-d,0s),translate .9s cubic-bezier(.16,.84,.3,1) var(--jm-d,0s),scale .9s cubic-bezier(.16,.84,.3,1) var(--jm-d,0s)}
}

@media (prefers-reduced-motion:reduce){
  .jm-kb{animation:none}
  #jm-prog{display:none}
}

/* เก็บงานความสวย (4 ต.ค. 69): หัวข้อบนพื้นเข้มเดิมเป็นสีกรมท่า มองไม่เห็น → ขาว */
:is(.dt-booking,.tx-transfer-card,.price-table-head) :is(h1,h2,h3,h4){color:#fff!important}
/* กล่องราคาท้ายหน้าเหมารถ: ประโยคยาวแต่ตัวใหญ่ 48px → ลดให้พอดี */
.dt-price-callout.jm-long{font-size:clamp(20px,5vw,30px)!important;line-height:1.3!important}
/* หน้าแรก "The JTTT Difference": 6 การ์ดเดิมขึ้นแถวละ 5 เหลือ 1 ใบโดดเดี่ยว + ช่องว่างขาว → จัดเป็น 3×2 บนจอคอม */
@media (min-width:961px){.jt-why-grid{grid-template-columns:repeat(3,1fr)!important;max-width:1080px;margin-left:auto;margin-right:auto}}