/*
 * 画面の動き(モーション)。2026-09-30 オーナー指示「モーションは多く入れておいてください」。
 * マイページ(portal.html)と候補者のログイン周り(landing-*.html)で共通に読み込む。
 *
 * 決まりごと:
 * - 入場の演出(浮き上がり)は html.mo-first の間だけ有効。motion.js が最初の描画から約1.5秒で外す。
 *   データ再取得で画面を描き直しても再生しない(以前、タブ切替のたびのフェードが「ちらつき」と苦情になったため)。
 * - 押す・カーソルを載せるなどの反応は transform と影だけで行い、中身を消したり点滅させたりしない。
 * - 「視差効果を減らす」設定の人には一切動かさない。
 */

@keyframes moRise { from { transform: translateY(14px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes moPop { 0% { transform: scale(.9) } 60% { transform: scale(1.08) } 100% { transform: scale(1) } }
@keyframes moFill { from { transform: scaleX(0) } to { transform: scaleX(1) } }
@keyframes moShimmer { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }
@keyframes moPulse { 0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .45) } 70% { box-shadow: 0 0 0 7px rgba(220, 38, 38, 0) } 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0) } }
@keyframes moShake { 0%, 100% { transform: translateX(0) } 20%, 60% { transform: translateX(-5px) } 40%, 80% { transform: translateX(5px) } }

/* ── 入場(初回だけ) ── */
html.mo-first .card,
html.mo-first .sent-view,
html.mo-first .cx-welcome,
html.mo-first .cx-kpi2,
html.mo-first .cx-jobs,
html.mo-first .cx-jobcard,
html.mo-first .cx-talent,
html.mo-first .cx-card,
html.mo-first .pt-card,
html.mo-first .pt-job-card {
  animation: moRise .6s cubic-bezier(.2, .8, .2, 1) both;
}
html.mo-first .cx-jobcard:nth-child(2), html.mo-first .pt-job-card:nth-child(2), html.mo-first .pt-card:nth-child(2) { animation-delay: .06s }
html.mo-first .cx-jobcard:nth-child(3), html.mo-first .pt-job-card:nth-child(3), html.mo-first .pt-card:nth-child(3) { animation-delay: .12s }
html.mo-first .cx-jobcard:nth-child(4), html.mo-first .pt-job-card:nth-child(4), html.mo-first .pt-card:nth-child(4) { animation-delay: .18s }
html.mo-first .cx-jobcard:nth-child(5), html.mo-first .pt-job-card:nth-child(5), html.mo-first .pt-card:nth-child(5) { animation-delay: .24s }
html.mo-first .cx-jobcard:nth-child(6), html.mo-first .pt-job-card:nth-child(6), html.mo-first .pt-card:nth-child(6) { animation-delay: .3s }
html.mo-first .cx-jobcard:nth-child(n+7), html.mo-first .pt-job-card:nth-child(n+7), html.mo-first .pt-card:nth-child(n+7) { animation-delay: .36s }
html.mo-first .cx-kpi2 { animation-delay: .05s }
html.mo-first .cx-talent { animation-delay: .1s }

/* 経験値バーが伸びる */
.cx-txpfill { transform-origin: left center }
html.mo-first .cx-txpfill { animation: moFill .9s .3s cubic-bezier(.2, .8, .2, 1) both }

/* ── カーソルを載せたとき(マウスのある環境だけ) ── */
.cx-jobcard, .pt-job-card, .pt-card, .cx-card, .choice, .card-option {
  transition: transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s ease, border-color .22s ease;
}
@media (hover: hover) {
  .cx-jobcard:hover, .pt-job-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .09);
  }
  .cx-qbtn:hover, .pt-btn:hover, button:hover { filter: brightness(1.04) }
}

/* ── 押したとき ── */
button, .pt-btn, .cx-qbtn, .cx-seeall, a.btn, [role="button"] {
  transition: transform .12s ease, filter .15s ease, background-color .15s ease, box-shadow .15s ease;
}
button:active, .pt-btn:active, .cx-qbtn:active, .cx-seeall:active, a.btn:active, [role="button"]:active { transform: scale(.97) }
.cx-jobcard:active, .pt-job-card:active { transform: scale(.985) }
/* 中央のAI面談ボタンは translateX(-50%) を保ったまま縮める */
.pt-tab-fab:active { transform: translateX(-50%) scale(.93) }

/* 下部タブ: 選んだタブのアイコンが弾む(形だけ。中身は消さない) */
.pt-tab.active .pt-tab-icon { animation: moPop .38s cubic-bezier(.2, .8, .2, 1) }

/* 通知の件数バッジ */
.pt-tab-badge.visible { animation: moPulse 1.8s ease-out 3 }

/* 入力欄: フォーカスの枠がなめらかに出る */
input, select, textarea { transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease }

/* エラー表示が出たら軽く揺れる(ログイン周り) */
#msg.ng { animation: moShake .4s ease }

/* 読み込み中の文字に光沢を流す */
.pt-loading, .mo-loading {
  background: linear-gradient(90deg, rgba(15, 23, 42, .35) 0%, rgba(15, 23, 42, .75) 50%, rgba(15, 23, 42, .35) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  animation: moShimmer 1.6s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .pt-loading, .mo-loading { color: rgba(15, 23, 42, .5) !important; background: none }
}

/*
 * 押しやすさ(E2E点検で高さ16〜22pxのリンク・16pxのチェックボックスが見つかったため)。
 * 見た目の位置は変えず、余白で押せる範囲を広げる。
 */
.nav-inner a, .nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 6px }
.card a:not([class*="btn"]):not([class*="cta"]), .alt a, .sent-view a:not([class*="cta"]) { display: inline-block; padding: 10px 2px; margin: -10px 0 }
input[type="checkbox"] { width: 20px; height: 20px; flex-shrink: 0 }
.cx-seeall { min-height: 40px; padding: 0 8px }