/* TOP の動き（2026-09-29 伊藤様指示）＝見出しフォーカス＋カードの図解スライド
   隠すのは JS が動いたとき（html.js-motion）だけ＝JS が止まっても中身は見える。
   動き＝assets/js/top-motion.js／検査＝scripts/test_top_motion.py */

/* ① 見出しフォーカス（animista focus-in-contract-bck） */
@keyframes focus-in-contract-bck {
  0% { letter-spacing: 1em; transform: translateZ(300px); filter: blur(12px); opacity: 0; }
  100% { transform: translateZ(12px); filter: blur(0); opacity: 1; }
}
.js-motion .section-title:not(.is-in),
.js-motion .about h2:not(.is-in) { opacity: 0; }
.js-motion .section-title.is-in,
.js-motion .about h2.is-in { animation: focus-in-contract-bck 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }

/* ② カードの図解スライド（TOP のスライダーの倍の速さ＝0.3秒で移動） */
.top-card-thumb, .company-card .thumb, .article-card .thumb-image { overflow: hidden; }
.tc-track { display: flex; align-items: flex-start; transition: transform 0.3s var(--ease, ease); }
/* 🔴 拡大しない＝図解の中の文字が切れないよう、元のサムネと同じ 16:9 の枠に全体を収める（切り抜かない） */
.tc-track > img { flex: 0 0 100%; min-width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-motion .section-title, .js-motion .about h2 { opacity: 1; animation: none; }
  .tc-track { transition: none; }
}