@import url('ui-polish.css');

/* ============================================================
   NTW — Page Transition (fade มีระดับ ทุกการเปลี่ยนหน้า)
   ใช้ View Transitions API (Chrome/Edge 126+) · เบราว์เซอร์อื่น fallback เป็น fade-in
   ============================================================ */

@view-transition { navigation: auto; }

/* กันจอขาวแว่บระหว่างสลับหน้า: ตั้งพื้นหลังฐานเป็นสีแอป (ไม่ใช่ขาว) */
html { background: #f2f5f9; }

@media (prefers-reduced-motion: no-preference) {

  /* หน้าเก่า: จางออก + จมลงนิด ๆ */
  ::view-transition-old(root) {
    animation: ntw-page-out .30s cubic-bezier(.4, 0, 1, 1) both;
  }
  /* หน้าใหม่: จางเข้า + ลอยขึ้นนุ่ม ๆ (easing แบบ expo — ดูแพง) */
  ::view-transition-new(root) {
    animation: ntw-page-in .55s cubic-bezier(.16, 1, .3, 1) .05s both;
  }

  @keyframes ntw-page-out {
    to { opacity: 0; transform: translateY(14px) scale(.993); filter: saturate(.85); }
  }
  @keyframes ntw-page-in {
    from { opacity: 0; transform: translateY(-14px) scale(1.004); }
    to   { opacity: 1; transform: none; }
  }

  /* header ที่ประกาศ view-transition-name: erp-header จะถูกตรึงนิ่งข้ามหน้าโดยอัตโนมัติ */
  ::view-transition-group(erp-header) {
    animation-duration: .3s;
    animation-timing-function: cubic-bezier(.16, 1, .3, 1);
  }
}

/* เบราว์เซอร์ที่ยังไม่รองรับ View Transitions (Safari/Firefox เก่า) → fade-in ตอนเข้าเสมอ */
@supports not (view-transition-name: root) {
  @media (prefers-reduced-motion: no-preference) {
    body {
      animation: ntw-page-fallback .45s cubic-bezier(.16, 1, .3, 1) both;
    }
    @keyframes ntw-page-fallback {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: none; }
    }
  }
}