/* =========================================================
   JUMJAI · motion layer (ใส่ทับทุกแอป ไม่แตะโค้ดเดิม)
   หลักการ: ขยับด้วย transform/opacity เท่านั้น สั้น ไม่ดันเลย์เอาต์
   เคารพ prefers-reduced-motion ทุกจุด
   ========================================================= */
:root{
  --jjm-ease:cubic-bezier(.22,.8,.3,1);
  --jjm-spring:cubic-bezier(.3,1.45,.5,1);
}

@media (prefers-reduced-motion: no-preference){
  /* ---------- สีเปลี่ยนนุ่มขึ้น (กดยังตอบสนองทันที) ---------- */
  :root[data-app] .btn,
  :root[data-app] .action-card,
  :root[data-app] .quiz-opt,
  :root[data-app] .flash-btn,
  :root[data-app] .word-row,
  :root[data-app] .level-card,
  :root[data-app] .auth-google,
  :root[data-app] .lang-switch,
  :root[data-app] .icon-btn,
  :root[data-app] .back-btn,
  :root[data-app] .root-chip,
  :root[data-app] .rad-chip,
  :root[data-app] .pill-tab,
  :root[data-app] .seg-btn,
  :root[data-app] .mode-toggle button,
  :root[data-app] .py-toggle{
    transition:transform .1s ease, box-shadow .1s ease,
      background-color .18s ease, border-color .18s ease, color .18s ease;
  }

  /* ---------- hover เฉพาะจอที่มีเมาส์ ---------- */
  @media (hover:hover) and (pointer:fine){
    :root[data-app] .btn:not(:disabled):hover,
    :root[data-app] .quiz-opt:not(.disabled):hover,
    :root[data-app] .flash-btn:hover,
    :root[data-app] .word-row:hover,
    :root[data-app] .level-card:hover,
    :root[data-app] .action-card:hover,
    :root[data-app] .back-btn:hover,
    :root[data-app] .lang-switch:hover{
      transform:translateY(-2px);
    }
    :root:not([data-app]) .lang{transition:transform .14s var(--jjm-ease), box-shadow .14s var(--jjm-ease);}
    :root:not([data-app]) .lang:hover{transform:translateY(-3px);box-shadow:0 8px 0 var(--edge);}
    :root:not([data-app]) .lang:hover .go{transform:translateX(3px);}
    :root:not([data-app]) .go{transition:transform .16s var(--jjm-spring);}
  }
  /* กดต้องชนะ hover เสมอ */
  :root[data-app] .btn:not(:disabled):active,
  :root[data-app] .quiz-opt:not(.disabled):active,
  :root[data-app] .flash-btn:active,
  :root[data-app] .word-row:active,
  :root[data-app] .level-card:active,
  :root[data-app] .action-card:active,
  :root[data-app] .back-btn:active,
  :root[data-app] .lang-switch:active{
    transform:translateY(var(--stk));
  }
  :root:not([data-app]) .lang:active{transform:translateY(5px);box-shadow:0 0 0 var(--edge);}

  /* ---------- หน้าเลือกภาษา ---------- */
  :root:not([data-app]) .lang{animation:jjm-rise .36s var(--jjm-ease) backwards;}
  :root:not([data-app]) .lang.zh{animation-delay:.08s;}
  :root:not([data-app]) .lang.ja{animation-delay:.13s;}
  :root:not([data-app]) .lang.en{animation-delay:.18s;}
  :root:not([data-app]) .lang.ko{animation-delay:.23s;}
  :root:not([data-app]) .lang.is-last{animation:jjm-rise .36s var(--jjm-ease) backwards, wiggle 1.6s ease-in-out .9s 2;}

  /* ---------- เข้าหน้า / เปลี่ยนข้อ (JS ใส่คลาสให้แล้วลบทิ้งเมื่อจบ) ---------- */
  .jjm-in{
    animation:jjm-in .26s var(--jjm-ease) backwards;
    animation-delay:calc(var(--jjm-i,0) * 28ms);
  }
  .jjm-card-in{animation:jjm-in .24s var(--jjm-ease) backwards;}
  .jjm-grow-x{transform-origin:left center;animation:jjm-grow-x .5s var(--jjm-ease) backwards;}
  .jjm-grow-y{transform-origin:center bottom;animation:jjm-grow-y .45s var(--jjm-ease) backwards;animation-delay:calc(var(--jjm-i,0) * 30ms);}

  /* เฉลยที่โผล่ขึ้นมาหลังตอบ */
  :root[data-app] .quiz-roots:not(.hidden),
  :root[data-app] .quiz-audio:not(.hidden),
  :root[data-app] #exExpl > *,
  :root[data-app] #nextQBtn:not(.hidden),
  :root[data-app] #exNext:not(.hidden),
  :root[data-app] .fc-actions:not(.hidden){
    animation:jjm-rise .24s var(--jjm-ease) backwards;
  }
  :root[data-app] .progress-pill.jjm-pop{animation:jj-pop .32s var(--jjm-spring);}

  /* toast เลื่อนขึ้นเล็กน้อย */
  :root[data-app] .toast{transform:translate(-50%,8px);transition:opacity .18s ease, transform .22s var(--jjm-ease);}
  :root[data-app] .toast.show{transform:translate(-50%,0);}

  /* ---------- แถบเมนูล่าง: พื้นหลังเลื่อนตาม ---------- */
  :root.jjm-pill .bottom-nav .nav-item{position:relative;z-index:1;transition:color .18s ease;}
  :root.jjm-pill .bottom-nav .nav-item.active{background:transparent;}
  .jjm-nav-pill{
    position:absolute;left:0;top:0;z-index:0;border-radius:17px;background:var(--accent);
    pointer-events:none;transition:transform .28s var(--jjm-ease), width .28s var(--jjm-ease);
  }
  .jjm-nav-pill.jjm-instant{transition:none;}
}

@keyframes jjm-in{
  from{opacity:0;transform:translate3d(var(--jjm-x,0),var(--jjm-y,8px),0);}
  to{opacity:1;transform:none;}
}
@keyframes jjm-rise{
  from{opacity:0;transform:translate3d(0,8px,0);}
  to{opacity:1;transform:none;}
}
@keyframes jjm-grow-x{from{transform:scaleX(var(--jjm-from,0));}to{transform:scaleX(1);}}
@keyframes jjm-grow-y{from{transform:scaleY(0);}to{transform:scaleY(1);}}