/*
 * motion.css — Motion System của Lãi Đơn (S1–S3).
 *
 * Quy tắc:
 *  - Chỉ animate transform/opacity (trừ grid-template-rows / block-size cho accordion).
 *  - Mọi thời lượng dùng token --dur-* nên khối prefers-reduced-motion ở cuối file
 *    (và ở app.css) tắt được toàn bộ.
 *  - CSP style-src 'self': không style="" — giá trị động đi qua CSSOM
 *    (el.style.setProperty('--i', n)) rồi CSS đọc var().
 *  - Số liệu tài chính luôn hiển thị giá trị cuối đúng, kể cả khi tắt hiệu ứng.
 */

/* ── Keyframes cốt lõi ─────────────────────────────────────── */
@keyframes flash-change {
  0%   { background-color: color-mix(in oklch, var(--color-accent) 22%, transparent); }
  100% { background-color: transparent; }
}
@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}
@keyframes nudge {
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}
@keyframes pulse-soft {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--d-fg) 30%, transparent); }
  50%      { box-shadow: 0 0 0 6px transparent; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes reveal {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes draw-tick { to { stroke-dashoffset: 0; } }
@keyframes slide-in-chip {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: none; }
}

.flash-change {
  animation: flash-change 600ms var(--easing) 1;
  border-radius: var(--r-sm);
}

/* ── Skeleton / trạng thái đang tính ───────────────────────── */
.skeleton {
  background: linear-gradient(90deg,
      var(--color-surface) 25%,
      color-mix(in oklch, var(--color-surface), var(--color-bg) 40%) 50%,
      var(--color-surface) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: 8px;
  min-height: 1em;
}
[data-calc-result] { transition: opacity var(--dur-base) var(--easing); }
[data-calc-result].is-loading { opacity: 0.55; pointer-events: none; }
[data-calc-result].is-loading .result-profit,
[data-calc-result].is-loading .result-row-value,
[data-calc-result].is-loading .metric dd {
  background: linear-gradient(90deg,
      var(--color-surface) 25%,
      color-mix(in oklch, var(--color-surface), var(--color-bg) 40%) 50%,
      var(--color-surface) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: 6px;
  color: transparent;
}

/* ── Vào sân có stagger (lần đầu hiện kết quả) ─────────────── */
[data-reveal] {
  transition: opacity var(--dur-enter) var(--easing),
              transform var(--dur-enter) var(--easing);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.is-entering [data-reveal] { opacity: 0; transform: translateY(8px); }

/* ── Form: lỗi, focus ──────────────────────────────────────── */
.form-control { transition: border-color var(--dur-fast) var(--easing), box-shadow var(--dur-fast) var(--easing); }
.form-control.is-invalid { animation: nudge 320ms var(--easing) 1; }
.form-error:not(:empty) { animation: fade-in var(--dur-base) var(--easing) 1; }

/* ── Cảnh báo lỗ: nhấn đúng 3 nhịp ─────────────────────────── */
.result-profit.is-negative { animation: pulse-soft 2.4s ease-in-out 3; }

/* ── Nút ───────────────────────────────────────────────────── */
.btn {
  transition: transform var(--dur-fast) var(--easing),
              box-shadow var(--dur-base) var(--easing),
              background var(--dur-fast) var(--easing),
              color var(--dur-fast) var(--easing);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-primary:active, .btn:active { transform: scale(0.98); }
.btn[aria-busy="true"] { position: relative; color: transparent !important; pointer-events: none; }
.btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1.1em;
  height: 1.1em;
  border: 2px solid currentColor;
  border-color: var(--color-text-muted) transparent var(--color-text-muted) transparent;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
.btn-primary[aria-busy="true"]::after { border-color: #fff transparent #fff transparent; }

/* Nút sao chép: tick vẽ nét */
.btn.is-done { color: var(--s-fg); }
.btn .tick {
  width: 1em; height: 1em; margin-left: 0.35em; vertical-align: -0.12em;
  fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 24; stroke-dashoffset: 24;
  animation: draw-tick 320ms var(--easing) forwards;
}
.btn.is-pinned { color: var(--color-accent); }
.pin-chip { display: inline-block; font-size: var(--text-sm); color: var(--color-accent); animation: slide-in-chip var(--dur-base) var(--easing-spring) 1; }

/* ── Tool card: nâng + mũi tên trượt ───────────────────────── */
.tool-card:hover { transform: var(--lift-md); }
.tool-card-footer, .tool-card-cta { transition: padding-inline-start var(--dur-base) var(--easing); }
.tool-card:hover .tool-card-footer, .tool-card:hover .tool-card-cta { padding-inline-start: calc(var(--sp-6) + 4px); }

/* ── Header thu gọn khi cuộn ───────────────────────────────── */
.site-header { transition: box-shadow var(--dur-base) var(--easing), background var(--dur-base) var(--easing); }
.site-header .container { transition: height var(--dur-base) var(--easing); }
.site-header.is-stuck { box-shadow: var(--shadow-md); }
.site-header.is-stuck .container { height: 52px; }
.scroll-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 8px; pointer-events: none; }
body { position: relative; }
[id] { scroll-margin-top: 72px; }

/* ── Nav toggle → ✕ và menu mobile trượt ───────────────────── */
.nav-toggle-bar {
  transition: transform var(--dur-base) var(--easing), opacity var(--dur-fast) var(--easing);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 768px) {
  .main-nav {
    display: flex;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity var(--dur-base) var(--easing),
                transform var(--dur-base) var(--easing),
                visibility 0s linear var(--dur-base);
  }
  .main-nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition-delay: 0s;
  }
}

/* ── Badge trạng thái đổi màu mượt ─────────────────────────── */
.status-badge, .badge { transition: background-color var(--dur-base) var(--easing), color var(--dur-base) var(--easing); }

/* ── <details> mượt (trình duyệt cũ: vẫn chạy, chỉ không hiệu ứng) ── */
:root { interpolate-size: allow-keywords; }
details::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size var(--dur-base) var(--easing), content-visibility var(--dur-base) allow-discrete;
}
details[open]::details-content { block-size: auto; }

/* ── Dialog / popover có animation ─────────────────────────── */
dialog {
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition: opacity var(--dur-base), transform var(--dur-base) var(--easing),
              overlay var(--dur-base) allow-discrete, display var(--dur-base) allow-discrete;
}
dialog[open] { opacity: 1; transform: none; }
@starting-style { dialog[open] { opacity: 0; transform: translateY(12px) scale(0.98); } }
dialog::backdrop { background: oklch(12% 0.01 250 / 0.45); transition: opacity var(--dur-base); }
dialog { border: 1px solid var(--color-border); border-radius: var(--r-lg); background: var(--color-bg); color: var(--color-text); padding: var(--sp-6); max-width: min(92vw, 420px); }
.dialog-actions { display: flex; gap: var(--sp-3); justify-content: flex-end; margin-top: var(--sp-5); }

/* ── Reveal khi cuộn (progressive enhancement) ─────────────── */
@supports (animation-timeline: view()) {
  .section .tool-card, .section .article-card, .platform-card {
    animation: reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 35%;
  }
}

/* ── View Transitions giữa các trang (MPA) ─────────────────── */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: fade-out 160ms ease both; }
::view-transition-new(root) { animation: fade-in 220ms ease both; }
.site-header { view-transition-name: site-header; }

/* ── Thanh tiến độ đọc bài viết ────────────────────────────── */
@supports (animation-timeline: scroll()) {
  .page-article::before {
    content: "";
    position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200;
    background: var(--color-accent);
    transform-origin: left;
    animation: grow-x linear both;
    animation-timeline: scroll(root);
  }
  @keyframes grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* ── Biểu đồ waterfall (S3) ────────────────────────────────── */
.wf-chart { padding: var(--sp-5) var(--sp-6); border-top: 1px solid var(--color-border); }
.wf-title { font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); margin-bottom: var(--sp-3); }
.wf-list { display: grid; gap: var(--sp-2); list-style: none; padding: 0; margin: 0; }
.wf-item { display: grid; grid-template-columns: minmax(90px, 30%) 1fr auto; gap: var(--sp-3); align-items: center; font-size: var(--text-sm); }
.wf-label { color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-track { position: relative; height: 14px; background: var(--color-surface); border-radius: var(--r-full); overflow: hidden; }
.wf-bar { position: absolute; top: 0; bottom: 0; background: var(--wf-color, var(--color-accent)); border-radius: var(--r-full); transform-origin: left; transition: transform var(--dur-slow) var(--easing); }
.wf-svg { width: 100%; height: auto; display: block; }
.wf-svg rect { transition: opacity var(--dur-fast); }
.wf-svg .wf-hit:hover, .wf-svg .wf-hit:focus { opacity: 0.8; }
.wf-val { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.wf-g-revenue { --wf-color: oklch(62% 0.13 150); }
.wf-g-deduction { --wf-color: oklch(70% 0.12 85); }
.wf-g-cost { --wf-color: oklch(62% 0.15 40); }
.wf-g-fee { --wf-color: oklch(58% 0.14 300); }
.wf-g-reserve { --wf-color: oklch(65% 0.10 240); }
.wf-g-profit { --wf-color: oklch(55% 0.16 150); }
.wf-g-loss { --wf-color: oklch(55% 0.19 25); }
.is-entering .wf-bar { transform: scaleX(0); }

/* ── Reduced motion: tắt toàn bộ (giữ nguyên giá trị cuối) ─── */
@media (prefers-reduced-motion: reduce) {
  [data-reveal], .is-entering [data-reveal] { opacity: 1 !important; transform: none !important; }
  .result-profit.is-negative, .skeleton { animation: none !important; }
  @view-transition { navigation: none; }
}
:root[data-motion="reduced"] *, :root[data-motion="reduced"] *::before, :root[data-motion="reduced"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* Giữ chiều cao panel khi dựng lại (CLS ≈ 0) */
[data-calc-result].has-fixed-h { min-height: var(--panel-h, 0); }
.scenario-compare { margin: var(--sp-3) 0 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.scenario-compare.is-positive { color: var(--s-fg); }
.scenario-compare.is-negative { color: var(--d-fg); }
.wf-bar { left: calc(var(--l, 0) * 1%); width: calc(var(--w, 0) * 1%); right: auto; transition-delay: calc(var(--i, 0) * 30ms); }
.wf-item:hover .wf-label { color: var(--color-text); }