/* ════════════════════════════════════════════════════════════════════
   motion.css — ba dải động của phần khung trang:
     1. .reading-progress  thanh tiến độ cuộn, nằm dưới đáy thanh nav
     2. .info-ticker       dải số liệu chạy trên cùng
     3. .src-marquee       dải nguồn đề chạy ngang

   Dùng chung token của biz.css (--brand, --surface-2, --border…) nên tự
   đổi theo Light / Dark / High-contrast, không cần khai báo màu riêng.
   Cả ba đều CHỈ animate transform hoặc width — không đụng layout.
   ════════════════════════════════════════════════════════════════════ */

/* ─────────────── 1. THANH TIẾN ĐỘ CUỘN ─────────────── */
/* Nằm đè lên chính đường viền dưới của .nav (bottom:-1px) nên không làm
   thanh nav cao thêm một pixel nào. */
.reading-progress {
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px; width: 0;
  background: var(--brand);
  z-index: 3;
  pointer-events: none;
  will-change: width;
}
/* Vệt sáng ở đầu mút — cho thấy nó đang chạy, không phải một vạch tĩnh. */
.reading-progress::after {
  content: "";
  position: absolute; right: 0; top: -1px;
  width: 34px; height: 4px;
  background: linear-gradient(90deg, transparent, var(--brand));
  filter: blur(2px);
  opacity: .85;
}
[data-theme="hc"] .reading-progress { background: #fff; }
[data-theme="hc"] .reading-progress::after { display: none; }

/* ─────────────── 2. DẢI SỐ LIỆU CHẠY ─────────────── */
.info-ticker {
  position: relative;
  overflow: hidden;
  background: var(--brand);
  color: var(--accent-fg);
  border-bottom: 1px solid var(--brand-2);
  height: 32px;
  display: flex; align-items: center;
}
.it-track {
  display: flex;
  white-space: nowrap;
  will-change: transform;
  animation: it-slide 46s linear infinite;
}
/* Hai bản sao giống hệt nhau xếp cạnh nhau; trượt hết bản 1 (-50%) là
   bản 2 đã vào đúng vị trí bản 1 ⇒ vòng lặp không thấy mối nối. */
@keyframes it-slide { to { transform: translateX(-50%); } }
.info-ticker:hover .it-track,
.info-ticker:focus-within .it-track { animation-play-state: paused; }

.it-item {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  padding: 0 20px;
  border-right: 1px solid color-mix(in srgb, var(--accent-fg) 22%, transparent);
  opacity: .82;
}
.it-item b { font-weight: 600; opacity: 1; }
.it-item .it-up { color: #BFE3C4; }
.it-item .it-dn { color: #F3C4B4; }
.it-item .it-hi { color: #E9EFC9; }

/* Nền tối: dải hoá nhạt hơn nền chính, chữ sáng — dùng surface-2 để không
   loè giữa một trang tối. */
[data-theme="dark"] .info-ticker {
  background: var(--surface-2);
  color: var(--text-2);
  border-bottom-color: var(--border);
}
[data-theme="dark"] .it-item { border-right-color: var(--border); }
[data-theme="dark"] .it-item b { color: var(--text); }
[data-theme="dark"] .it-item .it-up { color: var(--ok); }
[data-theme="dark"] .it-item .it-dn { color: var(--danger); }
[data-theme="dark"] .it-item .it-hi { color: var(--brand); }

[data-theme="hc"] .info-ticker { background: #000; color: #fff; border-bottom-color: #fff; }
[data-theme="hc"] .it-item { border-right-color: #fff; opacity: 1; }
[data-theme="hc"] .it-item .it-up,
[data-theme="hc"] .it-item .it-dn,
[data-theme="hc"] .it-item .it-hi { color: #fff; }

/* ─────────────── 3. DẢI NGUỒN ĐỀ CHẠY ─────────────── */
.src-marquee {
  position: relative;
  overflow: hidden;
  padding: 20px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
/* Mờ dần hai mép để chữ "đi vào / đi ra" chứ không bị cắt cụt. */
.src-marquee::before,
.src-marquee::after {
  content: "";
  position: absolute; top: 0; bottom: 0; width: 110px;
  z-index: 2; pointer-events: none;
}
.src-marquee::before { left: 0;  background: linear-gradient(90deg,  var(--surface-2), transparent); }
.src-marquee::after  { right: 0; background: linear-gradient(-90deg, var(--surface-2), transparent); }

.sm-track {
  display: flex;
  white-space: nowrap;
  will-change: transform;
  animation: it-slide 38s linear infinite;
}
.src-marquee:hover .sm-track,
.src-marquee:focus-within .sm-track { animation-play-state: paused; }

.sm-item {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 0 30px;
  font-family: var(--font-display);
  font-size: 17px; font-weight: 500; letter-spacing: -.03em;
  /* --text-3 tren --surface-2 chi 4.36:1 — dung --text-2 (7.1:1). */
  color: var(--text-2);
  transition: color var(--dur-1, 170ms) var(--ease-out, ease);
}
.sm-item:hover { color: var(--text); }
.sm-item i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--brand); opacity: .6; flex: none;
}

[data-theme="hc"] .src-marquee { background: #000; }
[data-theme="hc"] .src-marquee::before,
[data-theme="hc"] .src-marquee::after { display: none; }
[data-theme="hc"] .sm-item { color: #fff; }
[data-theme="hc"] .sm-item i { background: #fff; opacity: 1; }

/* ─────────────── ĐIỆN THOẠI ─────────────── */
@media (max-width: 640px) {
  .info-ticker { height: 28px; }
  .it-item { font-size: 10px; padding: 0 14px; }
  .src-marquee { padding: 15px 0; }
  .sm-item { font-size: 15px; padding: 0 20px; }
  .src-marquee::before, .src-marquee::after { width: 54px; }
}

/* ─────────────── TÔN TRỌNG prefers-reduced-motion ───────────────
   Không chỉ tắt animation: nếu để nguyên thì hai bản sao nằm im và người
   dùng thấy nội dung lặp lại hai lần. Ẩn hẳn bản sao thứ hai đi. */
@media (prefers-reduced-motion: reduce) {
  .it-track, .sm-track { animation: none; }
  .it-track > [data-clone], .sm-track > [data-clone] { display: none; }
  .reading-progress { transition: none; }
  .reading-progress::after { display: none; }
}