/* 写し・正本は 12_AIツールMVP/_design/（2026-10-25 に写した。ここでは直さず、直すときは正本を直して写し直す） */
/* cv-motion v1（2026-10-25）：弊社HPの動きのうち、業務ツールで使う3つの共通の部品。
   正本＝12_AIツールMVP/_design/cv-motion.css・cv-motion.js（製品は写しを持ち、製品で直したら正本へ戻す）
   台帳＝memory/reference_hp_motion_catalog.md（#3 ボタン・#5 一覧の行・#7 数字。時間と曲線は HP の実測）
   基準＝memory/reference_web_ui_no_ai_look.md §3-7／見本＝_design/cv-motion-demo.html（起動設定 cv-design）

   決めたこと
   ・乗せたときの動きは、押した瞬間（:active）とキーボードの焦点（:focus-visible）でも出す（スマホにはカーソルが無い）
   ・動きを減らす設定では動かさず、最後の状態をすぐ出す。印刷では数字を最後の値で出す
   ・文字を薄くしない。動きは位置と形だけ（地の色の層だけ濃さを変える＝HP と同じ）
   ・押せる文字（名前・リンク）は cv-line、選ぶカードは cv-ink。この部品はボタン・行・数字だけ

   使い方
   ボタン   <button class="cv-btn cv-btn--solid cv-btn--go" type="button">試算する</button>
            cv-btn だけ    ＝淡い灰の地に濃い字 → 深い緑がせり上がる（HP の形・窓口・副ボタン）
            cv-btn--solid ＝深い緑の地に白字 → 明るい緑がせり上がる（業務ツールの主ボタン。2026-10-22 の主ボタンの色と同じ）
            cv-btn--go    ＝矢印を付ける（次の画面へ進むボタンだけ。保存・削除には付けない）
            cv-btn--sm    ＝小さいボタン（表の中・窓の下の副ボタン）
            中身が文字だけのボタンを cv-motion.js が1字ずつに分ける。JS が無くても普通のボタンとして押せる
   一覧の行 <tr class="cv-row cv-line-row">…<td><a class="cv-line" href="…">名前</a></td>…<td class="cv-row-go"><span>›</span></td></tr>
            tr でなくても使える（<a class="cv-row">…</a> の一覧）
   数字     <span class="cv-count">3,300,000</span>（書いてある値を読む。data-cv-count-once="home" で同じ日の2回目からは回さない）
   画面を描き直したら CVMotion.init(描き直した要素) を呼ぶ

   色の替え方（クライアント名義は先方の色に）
   --cv-btn-bg・--cv-btn-fg（止まった状態）／--cv-btn-bg-hov・--cv-btn-fg-hov（乗せた状態）
   --cv-row-bg（行の地）・--cv-row-go-on（› の色）
*/

/* ---- ボタン（台帳 #3）：地が下からせり上がり、文字が1字ずつ上へ回って入れ替わり、矢印が右へ抜けて左から入る ---- */
.cv-btn {
  --cv-btn-bg: #F0F0F0; --cv-btn-fg: #2A2D2A; --cv-btn-bg-hov: #14513C; --cv-btn-fg-hov: #FFFFFF;
  --cv-btn-icon: 14px; --cv-btn-gap: 8px; --cv-btn-lh: 1.4em;
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 22px; border: 0; border-radius: 4px;
  background: var(--cv-btn-bg); color: var(--cv-btn-fg); font: inherit; font-weight: 600; line-height: var(--cv-btn-lh);
  text-decoration: none; cursor: pointer; overflow: hidden; isolation: isolate; -webkit-tap-highlight-color: transparent;
  transition: color .45s cubic-bezier(.16, 1, .3, 1);
}
.cv-btn--solid { --cv-btn-bg: #14513C; --cv-btn-fg: #FFFFFF; --cv-btn-bg-hov: #1B6B4F; }
.cv-btn--sm { min-height: 36px; padding: 0 14px; font-size: 13px; }
.cv-btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--cv-btn-bg-hov);
  translate: 0 100%; opacity: 0;
  transition: translate .6s cubic-bezier(.16, 1, .3, 1), opacity .6s cubic-bezier(.16, 1, .3, 1);
}
.cv-btn:disabled { --cv-btn-bg: #E3E4E2; --cv-btn-fg: #676B67; cursor: not-allowed; }
.cv-btn:focus-visible { outline: 2px solid #23855F; outline-offset: 3px; }
.cv-btn-in { position: relative; display: flex; align-items: center; gap: var(--cv-btn-gap); }
.cv-btn-txt { position: relative; display: inline-block; overflow: clip; transition: translate .25s cubic-bezier(.55, .05, .22, .99); }
.cv-btn-face { display: inline-block; white-space: pre; }
.cv-btn-dummy { position: absolute; left: 0; top: 0; translate: 0 calc(var(--cv-btn-lh) * 1.1); }
.cv-btn-ch { display: inline-block; transition: translate .45s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--cv-btn-i, 0) * 15ms); }
.cv-btn-ico { display: inline-flex; width: var(--cv-btn-icon); height: var(--cv-btn-icon); transition: translate .45s cubic-bezier(.16, 1, .3, 1), opacity .3s cubic-bezier(.16, 1, .3, 1); }
.cv-btn-ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; }
.cv-btn-ico-r { position: relative; }
.cv-btn-ico-l { position: absolute; left: 0; top: 50%; translate: calc((var(--cv-btn-icon) + var(--cv-btn-gap) + 14px) * -1) -50%; opacity: 0; }
.cv-motion-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.cv-btn:not(:disabled):is(:active, :focus-visible, .is-on) { color: var(--cv-btn-fg-hov); }
.cv-btn:not(:disabled):is(:active, :focus-visible, .is-on)::before { translate: 0 0; opacity: 1; }
.cv-btn:not(:disabled):is(:active, :focus-visible, .is-on) .cv-btn-ch { translate: 0 calc(var(--cv-btn-lh) * -1.1); }
.cv-btn--go:not(:disabled):is(:active, :focus-visible, .is-on) .cv-btn-txt { translate: calc(var(--cv-btn-icon) + var(--cv-btn-gap)) 0; }
.cv-btn--go:not(:disabled):is(:active, :focus-visible, .is-on) .cv-btn-ico-r { translate: 24px 0; opacity: 0; }
.cv-btn--go:not(:disabled):is(:active, :focus-visible, .is-on) .cv-btn-ico-l { translate: 0 -50%; opacity: 1; }
@media (hover: hover) {
  .cv-btn:not(:disabled):hover { color: var(--cv-btn-fg-hov); }
  .cv-btn:not(:disabled):hover::before { translate: 0 0; opacity: 1; }
  .cv-btn:not(:disabled):hover .cv-btn-ch { translate: 0 calc(var(--cv-btn-lh) * -1.1); }
  .cv-btn--go:not(:disabled):hover .cv-btn-txt { translate: calc(var(--cv-btn-icon) + var(--cv-btn-gap)) 0; }
  .cv-btn--go:not(:disabled):hover .cv-btn-ico-r { translate: 24px 0; opacity: 0; }
  .cv-btn--go:not(:disabled):hover .cv-btn-ico-l { translate: 0 -50%; opacity: 1; }
}

/* ---- 一覧の行（台帳 #5）：地が淡い灰に変わり、右端の › が少し右へ。名前の下線は cv-line の行（cv-line-row）が伸ばす ---- */
.cv-row { cursor: pointer; }
tr.cv-row > td, .cv-row:not(tr) { transition: background-color .25s cubic-bezier(.55, .05, .22, .99); }
.cv-row-go > span { display: inline-block; transition: translate .25s cubic-bezier(.55, .05, .22, .99), color .25s cubic-bezier(.55, .05, .22, .99); }
tr.cv-row:is(:active, :focus-within, .is-on) > td, .cv-row:not(tr):is(:active, :focus-visible, .is-on) { background-color: var(--cv-row-bg, #F7F6F5); }
.cv-row:is(:active, :focus-within, .is-on) .cv-row-go > span { translate: 4px 0; color: var(--cv-row-go-on, #14513C); }
@media (hover: hover) {
  tr.cv-row:hover > td, .cv-row:not(tr):hover { background-color: var(--cv-row-bg, #F7F6F5); }
  .cv-row:hover .cv-row-go > span { translate: 4px 0; color: var(--cv-row-go-on, #14513C); }
}
.cv-row.is-on .cv-line { background-size: 100% 1.5px, 100% 1px; }

/* ---- 数字（台帳 #7）：空から桁ごとに数字がせり上がって止まる（右の桁ほど長く回る）。区切りの「，」も一緒にせり上がる ---- */
.cv-count { --cv-count-h: 1.15em; display: inline-flex; height: var(--cv-count-h); line-height: var(--cv-count-h); overflow: clip; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cv-count-col { display: inline-flex; flex-direction: column; translate: 0 var(--cv-count-h); transition: translate .8s cubic-bezier(.25, 1, .5, 1); transition-delay: calc(var(--cv-count-d, 0) * 40ms); }
.cv-count-col > span { display: block; height: var(--cv-count-h); }
.cv-count.is-run .cv-count-col { translate: 0 calc(var(--cv-count-h) * var(--cv-count-to, 0) * -1); }
.cv-count.is-static .cv-count-col { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .cv-btn, .cv-btn::before, .cv-btn-txt, .cv-btn-ch, .cv-btn-ico, tr.cv-row > td, .cv-row:not(tr), .cv-row-go > span, .cv-count-col { transition: none !important; }
}
@media print {
  .cv-count-col { transition: none !important; translate: 0 calc(var(--cv-count-h) * var(--cv-count-to, 0) * -1) !important; }
}