/* ตารางเวลาการเคลื่อนไหวเป็นเฟรม — Art Production 14 ก.ย. · ข้อเสนอ
   ที่มา: GIF ของเจ้าของ (Notification 3F–15F · หน้าต่างเปิด/ปิดตามกราฟ 0→120→100 · การ์ด/แถวโผล่ไล่กัน · แผงเลื่อนเข้าขวา)
   กฎที่คุม (เจ้าของเคาะ 9 ก.ย. · UI-DECISIONS §3): นอกห้องแข่ง = โค้งนุ่ม เร็ว เลยเป้าได้ · ในห้องแข่ง = ขั้นล็อกโน้ตแปด ห้าม scale
   **ค่าเหล่านี้ควรอยู่ในทะเบียน tokens.json (โซน ChatGPT)** — ขอผ่าน docs/REPORTS/art-production.md · ระหว่างรอใช้ไฟล์นี้
   1 เฟรม = 1/60 วินาที */
:root {
  --f3: 50ms;  --f6: 100ms;  --f9: 150ms;  --f12: 200ms;  --f15: 250ms;
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);   /* เลยเป้าแล้วเด้งกลับ ~120% → 100% (GIF แถวบน) */
  --ease-out: cubic-bezier(.22, 1, .36, 1);      /* เข้านุ่ม ไม่เลยเป้า (GIF แถวล่าง) */
  --ease-in: cubic-bezier(.64, 0, .78, 0);       /* ออกเร็ว ไม่ค้าง */
}

/* ---- ชั้น PAPER เท่านั้น · ห้ามใช้ในห้องแข่งและ cut-scene ---- */
/* เริ่มที่ 80% ไม่ใช่ 0 และไม่จางเข้า — เนื้อหาต้องอ่านได้ตั้งแต่เฟรมแรก (SCREENS.md) · GIF เริ่มที่ 0 แต่เว็บเราห้ามซ่อนเนื้อหาไว้หลังแอนิเมชัน */
@keyframes mo-pop { from { transform: scale(.8); } to { transform: none; } }
@keyframes mo-close { to { transform: scale(.8); visibility: hidden; } }
@keyframes mo-drop { from { transform: translateY(-8px); } to { transform: none; } }
@keyframes mo-drawer { from { transform: translateX(100%); } to { transform: none; } }

.mo-pop { animation: mo-pop var(--f9) var(--ease-pop) both; transform-origin: var(--mo-origin, 50% 50%); }   /* ป๊อปอัป — ตั้ง --mo-origin ให้โตออกจากปุ่มที่กด */
.mo-close { animation: mo-close var(--f6) var(--ease-in) both; }
.mo-toast { animation: mo-drop var(--f6) var(--ease-out) both; }          /* แถบ YOUR TURN · แถบเน็ต · Copied */
.mo-drawer { animation: mo-drawer var(--f12) var(--ease-pop) both; }      /* แผงเลื่อนเข้าจากขวา */
/* ไล่กันทีละ 3F · สูงสุด 9 ชิ้น (ชิ้นที่ 9 เริ่มช้าสุด 24F = 400 ms) · ใส่ style="--i:0..8" */
.mo-stagger > * { animation: mo-pop var(--f9) var(--ease-pop) both; animation-delay: calc(min(var(--i, 0), 8) * var(--f3)); }

/* 0 เฟรม — กล่องที่ผลถาวร (Re-Take confirm) ตัดเข้าทันที · ความหนักมาจากการไม่มีช่วงเข้า ไม่ใช่จากการไม่มี feedback (UI-DECISIONS §3) */
.mo-cut { animation: none !important; transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  .mo-pop, .mo-close, .mo-toast, .mo-drawer, .mo-stagger > * { animation: none !important; }
}