/* Chuyển trang liền mạch toàn site (19/10/2026, ARCHITECTURE #214). _worker.js nạp mọi trang (như sv-sh.css).
   Cùng bộ nhịp với hệ nhịp trang chủ: một đường cong, trang cũ lui 120ms, trang mới vào 240ms, dịch 16px.
   Đầu trang đứng yên (tên riêng). Một mảnh nối duy nhất: ảnh thẻ dự án thành ảnh đầu trang case (chuyen-trang.js gán tên).
   Firefox, giảm chuyển động: chuyển trang thường. */
@view-transition { navigation: auto; }

:root {
  --ct-cong: cubic-bezier(.16, 1, .3, 1);       /* = --n-cong */
  --ct-cong-hien: cubic-bezier(.33, 0, .2, 1);  /* = --n-cong-hien: độ hiện đi đều, không "bật" */
  /* Đồng bộ toàn site (19/10): nắn token nhịp cũ của hệ (rê, mở gập, đổi tab ở mọi trang) về cùng bộ nhịp trang chủ.
     Tệp nạp sau mọi tệp token nên thắng; nguồn gốc design-system-v3/tokens/radius.css cũng đã đổi cùng số. */
  --ease-out: var(--ct-cong);
  --ease-in-out: var(--ct-cong);
  --dur-fast: 120ms;
  --dur-base: 240ms;
  --dur-slow: 480ms;
  --dur-reveal: 480ms;
}

header.nav { view-transition-name: vo-dau; }
::view-transition-group(vo-dau) { animation-duration: 0s; }

::view-transition-old(root) { animation: ct-lui 120ms var(--ct-cong-hien) both; }
::view-transition-new(root) {
  animation: ct-hien 240ms var(--ct-cong-hien) both, ct-truot 240ms var(--ct-cong) both;
}
@keyframes ct-lui { to { opacity: 0; } }
@keyframes ct-hien { from { opacity: 0; } }
@keyframes ct-truot { from { transform: translate3d(0, 16px, 0); } }

/* ảnh dự án: khung trôi tới chỗ mới theo nhịp vào cảnh, hai ảnh cắt theo khung, không méo */
::view-transition-group(anh-case) { animation-duration: 480ms; animation-timing-function: var(--ct-cong); }
::view-transition-image-pair(anh-case) { overflow: hidden; border-radius: var(--radius-md, 12px); }
::view-transition-old(anh-case),
::view-transition-new(anh-case) {
  height: 100%; width: 100%; object-fit: cover;
  animation-duration: 240ms; animation-timing-function: var(--ct-cong-hien);
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}