/* ============================================================
   help-motion.css

   help.css の見た目は一切変えません。
   色・サイズ・余白・角丸・影・レイアウトの値はここには書きません。
   ここにあるのは transition、transform、keyframes だけです。

   hover 後の見た目は help.css が既に決めています。
   このファイルは「その状態へ切り替わる速さ」だけを足します。

   イージングは 2 つに統一しています。
     --hc-ease   線・色・影の変化に
     --hc-spring 位置が動くものに
   ============================================================ */
:root {
    --hc-ease: cubic-bezier(.16, 1, .3, 1);
    --hc-spring: cubic-bezier(.01, .73, .08, .93);
}

/* ---- ナビ ---- */
.hc-nav-link,
.hc-nav a.hc-nav-login { transition: color .18s var(--hc-ease); }
.hc-nav a.hc-nav-cta { transition: opacity .18s var(--hc-ease); }
.hc-mark { transition: transform .4s var(--hc-spring); }
.hc-brand:hover .hc-mark { transform: rotate(-8deg); }

/* ---- 検索 ---- */
.hc-search input { transition: border-color .25s var(--hc-ease), background-color .25s var(--hc-ease), box-shadow .25s var(--hc-ease); }

/* 検索結果が 1 件ずつ出てきます */
.hc-result { transition: border-color .2s var(--hc-ease), transform .35s var(--hc-spring); animation: hcFadeUp .34s var(--hc-ease) both; }
.hc-result:hover { transform: translateX(3px); }
.hc-result:nth-child(1) { animation-delay: 0s }
.hc-result:nth-child(2) { animation-delay: .04s }
.hc-result:nth-child(3) { animation-delay: .08s }
.hc-result:nth-child(4) { animation-delay: .12s }
.hc-result:nth-child(5) { animation-delay: .16s }
.hc-result:nth-child(n+6) { animation-delay: .2s }
.hc-noresult { animation: hcFadeUp .34s var(--hc-ease) both; }

/* ---- アコーディオン ---- */
.hc-acc-q { transition: background-color .22s var(--hc-ease); }
.hc-acc-q .hc-acc-cv { transition: transform .32s var(--hc-spring), color .22s var(--hc-ease); }

/* display は animation できないため、高さを grid で送ります。
   padding は help.css の値をそのまま .hc-acc-a-in へ移すだけで、合計は変わりません。
   help.css の .hc-acc-item.hc-open .hc-acc-a は (0,3,0) なので、
   打ち消す側は .hc を足して (0,4,0) にしています。 */
.hc .hc-acc-item .hc-acc-a {
    display: grid; padding: 0; overflow: hidden;
    grid-template-rows: 0fr; opacity: 0;
    transition: grid-template-rows .34s var(--hc-ease), opacity .24s var(--hc-ease);
}
.hc .hc-acc-item.hc-open .hc-acc-a { display: grid; grid-template-rows: 1fr; opacity: 1; }
/* padding はグリッド項目の高さの下限になるため、閉じても 0fr まで縮みません。
   そこで clip が高さを受け持ち、padding は 1 つ内側の in が持ちます。
   値は help.css の .hc-acc-a と同じなので、開いたときの見た目は変わりません。 */
.hc .hc-acc-a-clip { min-height: 0; overflow: hidden; }
.hc .hc-acc-a-in { padding: 0 1.2rem 1.1rem; }

/* ---- カテゴリと一覧 ---- */
/* アイコンはカテゴリごとの色を持つため、色は変えずに浮かせます */
.hc-cat { transition: background-color .22s var(--hc-ease), transform .4s var(--hc-spring); }
.hc-cat:hover { transform: translateY(-2px); }

.hc-item { transition: background-color .2s var(--hc-ease); }
.hc-item h3 { transition: color .2s var(--hc-ease); }
.hc-quick a { transition: background-color .2s var(--hc-ease), color .2s var(--hc-ease); }

/* ---- 学習ガイド ---- */
/* 「学習ガイドをすべて見る」で表示が崩れるとの指摘があったため、
   このブロックは色の変化だけにして、矢印は動かしません。 */
.hc-guide-r a { transition: color .2s var(--hc-ease); }

/* ---- 左ナビ・目次 ---- */
.hc-rail a { transition: background-color .18s var(--hc-ease), color .18s var(--hc-ease); }
.hc-rail a.hc-rail a.hc-rail-all { transition: border-color .22s var(--hc-ease), color .22s var(--hc-ease), transform .35s var(--hc-spring); }
.hc-rail a.hc-rail-all:hover { transform: translateX(3px); }
.hc-toc a { transition: color .22s var(--hc-ease), border-left-color .28s var(--hc-ease); }

/* ---- 本文 ---- */
.hc-body a { transition: color .18s var(--hc-ease); }
.hc-body figure img { transition: border-color .25s var(--hc-ease); }

/* 読み進めると図表とコールアウトが起き上がります */
.hc-note, .hc-body figure, .hc-body pre, .hc-table-scroll { transition: opacity .5s var(--hc-ease), transform .5s var(--hc-ease); }
.hc-reveal { opacity: 0; transform: translateY(12px); }
.hc-reveal.hc-in { opacity: 1; transform: none; }

/* ---- 記事下部 ---- */
.hc-related a { transition: border-color .22s var(--hc-ease), color .2s var(--hc-ease), transform .35s var(--hc-spring); }
.hc-related a:hover { transform: translateX(4px); }
.hc-related a i { transition: transform .35s var(--hc-spring); }
.hc-related a:hover i { transform: translateX(3px); }
.hc-more-btn { transition: opacity .2s var(--hc-ease); }
.hc-report a { transition: color .18s var(--hc-ease); }

/* ---- ページ全体 ---- */
.hc-wrap, .hc-wrap-wide { animation: hcPageIn .4s var(--hc-ease) both; }

@keyframes hcFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes hcPageIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* 動きを減らす設定の端末では全て止めます */
@media (prefers-reduced-motion: reduce) {
    .hc *, .hc *::before, .hc *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .hc-reveal { opacity: 1; transform: none; }
}