/* Hệ nhịp Sinh Vũ, phần CHUNG mọi trang (anh duyệt 19/10/2026, đồng bộ toàn site 22/10/2026, ARCHITECTURE #214).
   Một nguồn: trang chủ nhúng tệp này (trang-chu-v2/dung.py, cùng phần riêng trang-chu-v2/nhip.css);
   trang khác nạp qua _worker.js (đi kèm nhip.js, cạnh dòng motion.js). Đổi tệp này thì tăng NHIP_V ở _worker.js.
   Ý gốc: nhạc trưởng. Mọi thứ vào đúng chỗ, đúng thứ tự, như dàn nhạc vào nhịp; không bay, không nảy.
   Một đường cong · bốn thời lượng · một nhịp so le · một khoảng dịch.
   Mô-típ duy nhất: nét kẻ đầu mục vẽ ra trước, chữ và nội dung vào nhịp theo sau. */
:root {
  --n-cong: cubic-bezier(.16, 1, .3, 1);
  --n-cong-hien: cubic-bezier(.33, 0, .2, 1);
  --n-nhanh: 120ms;   /* phản hồi: rê, nhấn, đổi màu */
  --n-vua: 240ms;     /* đổi trạng thái: mở gập, đổi tab */
  --n-cham: 480ms;    /* vào cảnh */
  --n-mo: 960ms;      /* mở màn, một lần mỗi trang */
  --n-so-le: 60ms;
  --n-dich: 16px;
  /* nắn token cũ của hệ về cùng một nhịp */
  --ease-out: var(--n-cong);
  --ease-in-out: var(--n-cong);
  --dur-fast: var(--n-nhanh);
  --dur-base: var(--n-vua);
  --dur-slow: var(--n-cham);
  --dur-reveal: var(--n-cham);
}

/* ảnh dự án: phóng nhẹ, cùng nhịp vào cảnh */
.sv-case__media img { transition: transform var(--n-cham) var(--n-cong); }
.sv-case:hover .sv-case__media img { transform: scale(1.03); }

/* vào nhịp: chỉ khi nhip.js đã gắn lớp n cho html (không JS thì trang đứng yên, đủ chữ).
   Hai thuộc tính, hai vai: VỊ TRÍ đi theo đường cong chung, dài (trôi tới chỗ rồi lắng);
   ĐỘ HIỆN đi theo đường cong đều, vì đường cong chung dồn 80% độ hiện vào 100ms đầu, mắt đọc thành "bật".
   .n-an viết đôi (0,3,1) để thắng luật riêng của khối như ".hp .hp-panel[hidden] { opacity: 1 }" (0,3,0) ở khổ hẹp;
   thiếu nó thì vòng 2-6 hiện trước tiêu đề và vòng 1. Lớp n-vao đứng sau, cùng độ ưu tiên nên vẫn thắng. */
html.n .n-an.n-an { opacity: 0; transform: translate3d(0, var(--n-dich), 0); }
html.n .n-an.n-vao {
  opacity: 1; transform: none;
  transition: opacity var(--n-cham) var(--n-cong-hien) var(--n-tre, 0ms),
              transform var(--n-mo) var(--n-cong) var(--n-tre, 0ms);
}

/* ảnh: chờ giải mã xong mới hiện, mờ dần trên nền khung và lắng từ 1.04 về 1 */
html.n .n-anh { opacity: 0; transform: scale(1.04); }
html.n .n-anh.n-co {
  opacity: 1; transform: none;
  transition: opacity var(--n-cham) var(--n-cong-hien), transform var(--n-mo) var(--n-cong);
}

/* ---- icon: một hệ cho mọi mũi tên (nét vẽ và chữ hình Phosphor) ----
   Rê vào chỗ bấm được: mũi tên đi xuyên qua khung (ra phải, vào lại từ trái), một lượt mỗi lần rê.
   Ra đi nhanh dần (lực đẩy), vào chậm dần theo đường cong chung. */
@keyframes n-di {
  0%    { transform: none; animation-timing-function: cubic-bezier(.5, 0, .9, .4); }
  38%   { transform: translateX(18px); }
  38.1% { transform: translateX(-18px); animation-timing-function: var(--n-cong); }
  100%  { transform: none; }
}
i.n-mui { display: inline-block; }
@media (hover: hover) and (pointer: fine) {
  .n-tro:hover .n-mui path, .n-tro:focus-visible .n-mui path,
  .n-tro:hover i.n-mui, .n-tro:focus-visible i.n-mui { animation: n-di var(--n-cham) both; }
  /* ảnh dự án nghiêng theo con trỏ: dời ngược hướng tay tối đa 8px, phóng 1.04; chuyển cảnh lo phần mượt */
  .sv-case:hover .sv-case__media img { transform: translate3d(var(--n-x, 0), var(--n-y, 0), 0) scale(1.04); }
  .sv-acc__btn:hover .sv-acc__icon { border-color: var(--text-primary); color: var(--text-primary); }
}
/* nhấn: co nhẹ rồi nhả, chạm và chuột như nhau */
.sv-acc__btn:active .sv-acc__icon { transform: scale(.96); transition-duration: var(--n-nhanh); }

/* nét kẻ đầu mục: vẽ từ trái sang phải trước mọi thứ */
html.n .n-cho .sv-sh__rule { position: relative; border-top-color: transparent; }
html.n .n-cho .sv-sh__rule::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1.5px; height: 1.5px;
  background: var(--text-primary); transform: scaleX(0); transform-origin: left center;
}
html.n .n-cho.n-ke .sv-sh__rule::before { transform: none; transition: transform var(--n-mo) var(--n-cong); }
html.n .n-cho .sv-sh--center .sv-sh__rule::before { display: none; }

/* ---- menu: gạch chân vẽ từ trái sang (cùng mô-típ nét kẻ), rời chuột thì rút về bên phải ---- */
@media (hover: hover) and (pointer: fine) {
  .nav__links a { position: relative; }
  .nav__links a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px; background: currentColor;
    transform: scaleX(0); transform-origin: right center; transition: transform var(--n-vua) var(--n-cong);
  }
  .nav__links a:hover::after, .nav__links a:focus-visible::after { transform: scaleX(1); transform-origin: left center; }
  /* nút video: vòng tròn hút về tay */
  .svv-gon .svv-nut { transition: transform var(--n-cham) var(--n-cong), background var(--n-vua) var(--n-cong); }
  .svv-gon:hover .svv-nut { transform: translate3d(var(--n-hx, 0), var(--n-hy, 0), 0) scale(1.06); }
}

/* ---- điện thoại (không chuột): thay rê bằng nhấn và bằng nhịp cuộn ---- */
@media (hover: none) {
  .sv-case { -webkit-tap-highlight-color: transparent; transition: transform var(--n-vua) var(--n-cong); }
  .sv-case:active { transform: scale(.985); transition-duration: var(--n-nhanh); }
  .n-tro:active .n-mui path, .n-tro:active i.n-mui { animation: n-di var(--n-cham) both; }
}
/* ảnh dự án mở theo nhịp cuộn: khung mở từ mép, ảnh trôi chậm hơn trang. Trình duyệt tự chạy ngoài luồng chính,
   không JS. Trình duyệt chưa hỗ trợ thì ảnh đứng yên như cũ. */
@keyframes n-mo-khung { from { clip-path: inset(12% 5% 0 5%); } to { clip-path: inset(0); } }
@keyframes n-troi-anh { from { translate: 0 -4%; } to { translate: 0 4%; } }
@supports (animation-timeline: view()) {
  @media (hover: none) and (prefers-reduced-motion: no-preference) {
    /* mốc đặt tên trên THẺ: thẻ có overflow hidden nên view() trần bám nhầm vào chính thẻ, đứng im */
    .sv-case { view-timeline: --n-the block; }
    .sv-case__media { animation: n-mo-khung linear both; animation-timeline: --n-the; animation-range: entry 0% cover 30%; }
    .sv-case__media img { scale: 1.1; animation: n-troi-anh linear both; animation-timeline: --n-the; animation-range: cover 0% cover 100%; }
  }
}

@media (prefers-reduced-motion: reduce) {
  html.n .n-an, html.n .n-anh { opacity: 1; transform: none; }
  .n-tro:hover .n-mui path, .n-tro:hover i.n-mui { animation: none; }
  html.n .n-cho .sv-sh__rule::before { transform: none; }
}