/* =========================================================
   e2R Career LP：MVダッシュボードのアニメーション（案A・B・C）
   ・style.css のあとに読み込みます
   ・動きは transform / opacity が中心（描画の負荷を抑える）
   ・OSの「視差効果を減らす」設定のときは動かさず、完成状態を表示
   ========================================================= */

@property --mv-fill { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

.dsb { position: relative; }

/* ---------- 共通：カーソル ---------- */
.mv-cursor { position: absolute; left: 0; top: 0; z-index: 30; width: 22px; height: 22px; pointer-events: none; opacity: 0;
  transform: translate(var(--x, 820px), var(--y, 420px));
  transition: transform 0.95s cubic-bezier(0.65, 0, 0.25, 1), opacity 0.3s ease; filter: drop-shadow(0 2px 3px rgba(11,22,34,0.3)); }
.mv-cursor.is-on { opacity: 1; }
.mv-cursor svg { display: block; width: 22px; height: 22px; transition: transform 0.12s ease; transform-origin: 3px 3px; }
.mv-cursor.is-press svg { transform: scale(0.82); }
.mv-cursor::after { content: ""; position: absolute; left: -11px; top: -11px; width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--b, #006BFF); opacity: 0; transform: scale(0.3); }
.mv-cursor.is-press::after { animation: mvRipple 0.55s ease-out; }
@keyframes mvRipple { 0% { opacity: 0.7; transform: scale(0.3); } 100% { opacity: 0; transform: scale(1.5); } }

/* ボタンを押したときの見え方 */
.dsb__btn { transition: transform 0.12s ease, box-shadow 0.2s ease, background-color 0.2s ease; }
.dsb__btn.is-hover { box-shadow: 0 0 0 3px rgba(var(--b-rgb, 0,107,255), 0.18); }
.dsb__btn.is-press { transform: scale(0.94); }

/* ---------- 共通：浮いている通知（チップ） ---------- */
.kv__screen.mv-chips-wait .float-chip { opacity: 0; transform: translateY(10px) scale(0.96); }
.kv__screen .float-chip { transition: opacity 0.35s ease, transform 0.35s ease; }
.kv__screen .float-chip.is-pop { animation: mvChipPop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
/* 案C・A+C：吹き出しを出さない */
.kv__screen.mv-no-chips .float-chip { display: none; }
/* スクロール中は下の吹き出しをよけて、選考状況を見せる */
.kv__screen .float-chip.is-away { opacity: 0 !important; transform: translateY(10px) !important; }
@keyframes mvChipPop { 0% { opacity: 0; transform: translateY(14px) scale(0.92); } 100% { opacity: 1; transform: none; } }

/* =========================================================
   案A：数字が動く（Chart.js風・初回だけ）
   ========================================================= */
/* カードが順番に浮かび上がる */
.dsb.mv-pre .mv-rise { opacity: 0; transform: translateY(10px); }
.dsb .mv-rise { transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: calc(var(--i, 0) * 70ms); }

/* 採用サマリーのミニグラフ（スパークライン） */
.dsb__card { position: relative; }
.mv-spark { position: absolute; right: 12px; top: 50%; width: 92px; height: 34px; margin-top: -17px; overflow: visible; }
.mv-spark .ln { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.mv-spark .ar { opacity: 1; transition: opacity 0.6s ease 0.6s; }
.mv-spark .dt { transform-box: fill-box; transform-origin: center; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 1.1s; }
.mv-spark .ln { transition: stroke-dashoffset 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0.2s; }
.dsb.mv-pre .mv-spark .ln { stroke-dashoffset: 1; transition: none; }
.dsb.mv-pre .mv-spark .ar { opacity: 0; transition: none; }
.dsb.mv-pre .mv-spark .dt { transform: scale(0); transition: none; }

/* 通過率・承諾率のバッジがゲージのように満ちる */
.dsb__rate { --mv-fill: var(--to, 100%); background: linear-gradient(90deg, #CFE3F8 0 var(--mv-fill), #EEF5FC var(--mv-fill)) !important; transition: --mv-fill 1.3s cubic-bezier(0.25, 1, 0.5, 1) 0.5s; }
.dsb__rate.is-green { background: linear-gradient(90deg, #C9EBDB 0 var(--mv-fill), #EEF8F3 var(--mv-fill)) !important; }
.dsb.mv-pre .dsb__rate { --mv-fill: 0%; transition: none; }

/* 案A：画面イメージの中のスクロール */
.dsb { transition: translate 1.2s cubic-bezier(0.65, 0, 0.35, 1); }
.mv-scrollbar { position: absolute; right: 3px; top: 4px; width: 5px; border-radius: 3px; background: rgba(11,22,34,0.28); opacity: 0; z-index: 40; pointer-events: none;
  transition: opacity 0.3s ease, translate 1.2s cubic-bezier(0.65, 0, 0.35, 1); }
.mv-scrollbar.is-on { opacity: 1; }
.dsb__sr { transition: background-color 0.4s ease, box-shadow 0.4s ease; }
.dsb__sr.mv-row-hl { background: #FDECEC; box-shadow: 0 0 0 3px #FDECEC; border-radius: 3px; }

/* =========================================================
   案B：ライブ更新（KARTE Blocks風の操作デモ・くり返し）
   ========================================================= */
.mv-hl { position: relative; transition: box-shadow 0.4s ease, background-color 0.4s ease; }
.mv-hl.is-on { box-shadow: 0 0 0 2px rgba(var(--g-rgb, 77,245,228), 0.9), 0 6px 18px -6px rgba(0,130,126,0.35) !important; }
.mv-plus { position: absolute; z-index: 5; font-family: var(--font-en); font-size: 10px; font-weight: 700; color: #FFFFFF;
  background: #00A79C; border-radius: 999px; padding: 1px 7px; pointer-events: none; animation: mvPlus 1.6s ease forwards; }
@keyframes mvPlus { 0% { opacity: 0; transform: translateY(6px) scale(0.8); } 18% { opacity: 1; transform: translateY(0) scale(1.08); }
  30% { transform: scale(1); } 75% { opacity: 1; transform: translateY(-4px); } 100% { opacity: 0; transform: translateY(-10px); } }
.js-n.is-tick { display: inline-block; animation: mvTick 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); color: #00827E; }
@keyframes mvTick { 0% { transform: translateY(-60%); opacity: 0; } 100% { transform: none; opacity: 1; } }
.dsb__num em.is-up { color: #00827E; }
.dsb__ev.mv-new { animation: mvSlideIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes mvSlideIn { 0% { opacity: 0; transform: translateX(24px); } 100% { opacity: 1; transform: none; } }
.dsb__ev .mv-tag { font-size: 8.5px; font-weight: 700; color: #00827E; background: #E7FDFA; border-radius: 999px; padding: 0 6px; margin-left: 4px; }
/* 「更新」を押したときの光の帯 */
.mv-sheen { position: absolute; inset: 0; z-index: 20; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.75) 50%, transparent 70%);
  transform: translateX(-110%); }
.mv-sheen.is-run { transition: transform 0.75s ease; transform: translateX(110%); }

/* =========================================================
   案C：集計・レポートに切り替わる（開発環境の「集計・レポート」と同じ構成・配色）
   グラフの伸び方は JS で Chart.js と同じ 1000ms・easeOutQuart
   ========================================================= */
.mv-report { position: absolute; left: 0; right: 0; top: 40px; height: 420px; padding: 0 18px 14px; background: #F6F8FA; z-index: 10;
  transform: translateX(104%); opacity: 0; transition: transform 0.6s cubic-bezier(0.65, 0, 0.25, 1), opacity 0.4s ease; }
.mv-report.is-open { transform: none; opacity: 1; }
.mv-tabs { display: flex; align-items: flex-end; gap: 18px; border-bottom: 1px solid #E2E8EE; margin-bottom: 8px; font-size: 10.5px; font-weight: 700; color: #5E6B78; }
.mv-tabs > span { padding: 4px 6px 5px; }
.mv-tabs > span.is-on { color: #1E78D2; box-shadow: inset 0 -2px 0 #1E88E5; }
.mv-report__back { margin-left: auto; align-self: center; display: inline-flex; align-items: center; gap: 3px; font-style: normal; font-size: 9.5px; color: #1E78D2; padding: 2px 6px; border-radius: 5px; transition: background-color 0.2s; }
.mv-report__back.is-hover { background: #DCEBFA; }
.mv-report__row { display: grid; grid-template-columns: 0.62fr 1fr; gap: 8px; margin-bottom: 8px; }
.mv-rcard { background: #FFFFFF; border-radius: 9px; padding: 8px 12px 6px; box-shadow: 0 1px 3px rgba(11,22,34,0.08); position: relative; }
.mv-rcard__h { display: flex; align-items: center; justify-content: space-between; font-size: 10.5px; font-weight: 900; color: #0B1622; }
.mv-seg { display: inline-flex; font-size: 8px; font-weight: 700; border: 1px solid #D2DBE3; border-radius: 4px; overflow: hidden; }
.mv-seg b, .mv-seg span { padding: 1px 6px; }
.mv-seg b { background: #1E88E5; color: #FFFFFF; }
.mv-legend { display: flex; flex-wrap: wrap; gap: 3px 10px; margin-top: 2px; font-size: 8px; font-weight: 700; color: #5E6B78; }
.mv-legend.is-right { justify-content: flex-end; }
.mv-legend i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 3px; vertical-align: -0.5px; }
.mv-donut { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.mv-dlist { display: grid; gap: 3px; flex: 1; min-width: 0; font-size: 8.5px; font-weight: 700; color: #3A4757; }
.mv-dlist span { display: flex; align-items: center; }
.mv-dlist i { flex: none; width: 7px; height: 7px; border-radius: 2px; margin-right: 4px; }
.mv-dlist b { margin-left: auto; font-weight: 900; color: #0B1622; }
.mv-chart { display: block; width: 100%; height: auto; overflow: visible; }
.mv-chart text { font-family: var(--font-en), var(--font); font-size: 8.5px; fill: #8A94A0; }
.mv-chart .grid { stroke: #EEF1F4; stroke-width: 1; }
.mv-donut-num { font-family: var(--font-en); font-weight: 700; }
.mv-grp { transition: opacity 0.2s; }
.mv-report.is-focus .mv-grp { opacity: 0.35; }
.mv-report.is-focus .mv-grp.is-focus { opacity: 1; }
/* ツールチップ（Chart.jsの見た目） */
.mv-tip { position: absolute; z-index: 12; min-width: 112px; padding: 6px 8px; border-radius: 6px; background: rgba(0,0,0,0.8); color: #FFFFFF; font-size: 9px; line-height: 1.55;
  opacity: 0; transform: translateY(4px); transition: opacity 0.25s ease, transform 0.25s ease; pointer-events: none; }
.mv-tip.is-on { opacity: 1; transform: none; }
.mv-tip b { display: block; font-size: 9.5px; margin-bottom: 2px; }
.mv-tip i { display: inline-block; width: 7px; height: 7px; border: 1px solid #FFFFFF; margin-right: 5px; vertical-align: -1px; }
.mv-tip span { display: block; }
.dsb__h1 .mv-h1t { display: inline-block; transition: opacity 0.25s ease, transform 0.25s ease; }
.dsb__h1 .mv-h1t.is-swap { opacity: 0; transform: translateY(-4px); }

/* ---------- 動きを減らす設定 ---------- */
@media (prefers-reduced-motion: reduce) {
  .mv-cursor { display: none; }
  .dsb, .mv-scrollbar, .dsb .mv-rise, .mv-spark *, .dsb__rate, .mv-report { transition: none !important; animation: none !important; }
}

/* 追加2のA'+B：カーソルの移動も少し速く */
.kv__screen.mv-fast .mv-cursor { transition-duration: 0.75s, 0.3s; }
.kv__screen.mv-fast .dsb .mv-rise { transition-duration: 0.4s, 0.48s; transition-delay: calc(var(--i, 0) * 55ms); }