/* ==========================================================================
   Animation กลางของทั้งระบบ — โหลดคู่กับ theme/js/app-shell.js ซึ่งเป็นสคริปต์
   ที่ทุกหน้าหลังล็อกอินโหลดอยู่แล้ว จึงไม่ต้องไปแก้ทีละหน้า

   หลักการที่ยึดไว้:
   - ใช้แค่ opacity กับ transform เท่านั้น (GPU composite) ไม่แตะ width/height/top
     ที่ทำให้เบราว์เซอร์ต้อง reflow ทั้งหน้า
   - พอ animate จบแล้วคืนค่า transform เป็น none เสมอ เพราะ element ที่มี transform
     ค้างไว้จะทำให้ position:fixed ของลูกหลานเพี้ยน (dropdown/tooltip หลุดตำแหน่ง)
   - ไม่แตะอะไรใน .modal เลย ปล่อยให้ Bootstrap จัดการ animation ของตัวเอง
   - เคารพ prefers-reduced-motion: ผู้ใช้ที่ตั้งค่าลดการเคลื่อนไหว (เช่น คนที่มีอาการ
     เวียนศีรษะจากภาพเคลื่อนไหว) จะเห็นเนื้อหาโผล่ทันทีโดยไม่มีการเคลื่อนไหวใดๆ
   ========================================================================== */

/* ---------- 1. เข้าหน้าใหม่ ---------- */
@keyframes appPageEnter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.app-content main {
  animation: appPageEnter .4s cubic-bezier(.22, .61, .36, 1) both;
}

/* หน้า login/register/forgot-password ไม่ได้โหลด app-shell.js จึงให้ทั้ง body ค่อยๆ
   ปรากฏด้วย CSS ล้วน ไม่ต้องพึ่ง JS */
body.auth-page {
  animation: appPageEnter .45s cubic-bezier(.22, .61, .36, 1) both;
}

/* ---------- 2. ออกจากหน้า (ก่อนเปลี่ยนหน้า) ---------- */
/* ใช้ opacity อย่างเดียว ไม่ใส่ transform เพราะ .app-content เป็นคอนเทนเนอร์ใหญ่
   ที่ครอบทุกอย่างรวมถึง element ที่วางตำแหน่งแบบ fixed */
.app-content {
  transition: opacity .2s ease;
}
body.is-leaving .app-content {
  opacity: 0;
}

/* ---------- 3. เลื่อนลงแล้วเนื้อหาค่อยๆ ปรากฏ ---------- */
.reveal-item {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity .5s cubic-bezier(.22, .61, .36, 1),
    transform .5s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal-item.is-revealed {
  opacity: 1;
  transform: none;
}
/* พอโชว์เสร็จแล้วถอด will-change ออก ไม่งั้นเบราว์เซอร์จองเลเยอร์ค้างไว้ทุกการ์ด
   ซึ่งกินหน่วยความจำโดยเปล่าประโยชน์เมื่อหน้ามีการ์ดเยอะๆ */
.reveal-item.is-settled {
  will-change: auto;
  transition-delay: 0ms;
}

/* ---------- 4. ลูกเล่นเล็กน้อยตอน hover การ์ด KPI ---------- */
.kpi-card {
  transition: transform .18s ease, box-shadow .18s ease;
}
.kpi-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .1);
}

/* ---------- 5. เมนูด้านซ้ายไล่กันโผล่ตอนเข้าหน้า ---------- */
@keyframes appNavItemIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: none; }
}
#sidebarNavList li {
  animation: appNavItemIn .3s ease both;
  animation-delay: calc(var(--nav-index, 0) * 22ms);
}

/* ---------- 6. แถวในตารางไล่กันโผล่ (ครั้งแรกที่การ์ดปรากฏเท่านั้น) ---------- */
@keyframes appRowIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
tbody.rows-animate > tr {
  animation: appRowIn .32s ease both;
}
/* ไล่ทีละแถวเฉพาะ 12 แถวแรก เกินกว่านั้นขึ้นพร้อมกันหมด ไม่งั้นตารางยาวๆ
   จะรอนานจนรู้สึกว่าหน้าค้าง */
tbody.rows-animate > tr:nth-child(1)  { animation-delay: 0ms; }
tbody.rows-animate > tr:nth-child(2)  { animation-delay: 25ms; }
tbody.rows-animate > tr:nth-child(3)  { animation-delay: 50ms; }
tbody.rows-animate > tr:nth-child(4)  { animation-delay: 75ms; }
tbody.rows-animate > tr:nth-child(5)  { animation-delay: 100ms; }
tbody.rows-animate > tr:nth-child(6)  { animation-delay: 125ms; }
tbody.rows-animate > tr:nth-child(7)  { animation-delay: 150ms; }
tbody.rows-animate > tr:nth-child(8)  { animation-delay: 175ms; }
tbody.rows-animate > tr:nth-child(9)  { animation-delay: 200ms; }
tbody.rows-animate > tr:nth-child(10) { animation-delay: 225ms; }
tbody.rows-animate > tr:nth-child(11) { animation-delay: 250ms; }
tbody.rows-animate > tr:nth-child(12) { animation-delay: 275ms; }

/* ---------- 7. ปิดทุกอย่างเมื่อผู้ใช้ขอลดการเคลื่อนไหว ---------- */
@media (prefers-reduced-motion: reduce) {
  .app-content main,
  body.auth-page,
  #sidebarNavList li,
  tbody.rows-animate > tr {
    animation: none !important;
  }
  .reveal-item,
  .reveal-item.is-revealed {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .app-content,
  .kpi-card {
    transition: none !important;
  }
  body.is-leaving .app-content {
    opacity: 1;
  }
  .kpi-card:hover {
    transform: none;
  }
}

/* ---------- 8. ไม่ให้ animation ติดไปกับหน้าที่สั่งพิมพ์ ---------- */
@media print {
  .reveal-item {
    opacity: 1 !important;
    transform: none !important;
  }
}