/* hashitosystem 共通モーション（対になる JS: /assets/motion.js）
 *
 * 設計の約束（例外を作らないこと。ops/motion_audit.py が機械的に検査する）
 *   1) 演出（@keyframes / animation / transition）は必ず
 *      @media (prefers-reduced-motion: no-preference) の中にだけ書く。
 *      動きを減らす設定の環境ではブロックごと効かず、静止した見た目が既定になる。
 *   2) 演出のセレクタは必ず html.hs-motion で始める。
 *      このクラスは motion.js が「reduce でないとき」だけ付ける（二重の防波堤）。
 *   3) 見えている要素を CSS だけで隠さない。初期状態の非表示（.hs-reveal）は
 *      motion.js が画面外の要素にだけ付ける。JS が動かない環境では何も隠れない。
 *   4) 配色は各ページの CSS に依存しない。ツールページ（暗色）とブログ（明色）で
 *      共用するため、面の塗りつぶしはせず輪郭と透明度だけで表現する。
 */

/* --------------------------------------------------------------------------
 * reduce 側のブロックはここだけ。「無効化」しか書かない。
 * 各ページが個別に持っている html{scroll-behavior:smooth} も打ち消す。
 * ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
}

@media (prefers-reduced-motion: no-preference) {

  /* === 1. ページの入り ================================================== */
  /* 遷移のたびに本文が静かに立ち上がる。animation なので必ず終わる＝消えたままにならない */
  html.hs-motion body {
    animation: hs-page-in .34s cubic-bezier(.22, .61, .36, 1) both;
  }
  /* transform は使わない。body に transform が乗ると position:fixed のヘッダーが
     一瞬 body 基準になってずれるため、入りは不透明度だけで表現する。 */
  @keyframes hs-page-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* === 2. スクロール出現 =============================================== */
  /* .hs-reveal は motion.js が「初期表示で画面外だった要素」にだけ付ける */
  html.hs-motion .hs-reveal {
    opacity: 0;
    transform: translateY(12px);
  }
  html.hs-motion .hs-reveal.hs-reveal-sm {
    transform: translateY(6px);
  }
  html.hs-motion .hs-reveal.hs-in {
    opacity: 1;
    transform: none;
    transition:
      opacity   .52s cubic-bezier(.22, .61, .36, 1),
      transform .52s cubic-bezier(.22, .61, .36, 1);
    transition-delay: var(--hs-delay, 0ms);
  }

  /* === 3. 結果が更新されたことを伝える ================================= */
  /* 出力パネルの輪郭が一度だけ淡く広がる。面は塗らないので文字は読んだまま */
  html.hs-motion .hs-updated {
    animation: hs-updated .72s cubic-bezier(.22, .61, .36, 1);
  }
  @keyframes hs-updated {
    0%   { box-shadow: 0 0 0 0 rgba(88, 166, 255, .38); border-color: rgba(88, 166, 255, .85); }
    70%  { box-shadow: 0 0 0 7px rgba(88, 166, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(88, 166, 255, 0); }
  }

  /* 数値がカウントアップしている間だけ、等幅で桁が暴れないようにする */
  html.hs-motion .hs-counting {
    font-variant-numeric: tabular-nums;
  }

  /* コピー等でボタンの文言が変わったときの小さな手応え */
  html.hs-motion .hs-tick {
    animation: hs-tick .38s cubic-bezier(.22, .61, .36, 1);
  }
  @keyframes hs-tick {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.035); }
    100% { transform: scale(1); }
  }

  /* === 4. ホバー / フォーカスの反応 ==================================== */
  html.hs-motion .btn,
  html.hs-motion .seg button {
    transition:
      transform    .16s cubic-bezier(.22, .61, .36, 1),
      border-color .16s ease,
      background-color .16s ease,
      color .16s ease,
      box-shadow   .16s ease;
  }
  html.hs-motion .btn:hover:not(:disabled) { transform: translateY(-1px); }
  html.hs-motion .btn:active:not(:disabled) { transform: translateY(0) scale(.985); }
  html.hs-motion .seg button:active:not(:disabled) { transform: scale(.98); }

  html.hs-motion .panel,
  html.hs-motion .card,
  html.hs-motion .callout,
  html.hs-motion .related-box {
    transition: border-color .25s ease, box-shadow .25s ease;
  }

  html.hs-motion textarea,
  html.hs-motion input[type="text"],
  html.hs-motion input[type="number"],
  html.hs-motion input[type="search"],
  html.hs-motion select {
    transition: border-color .18s ease, box-shadow .18s ease;
  }

  /* 上部ナビ。戻り導線だけわずかに戻る向きへ動く */
  html.hs-motion .topbar a {
    display: inline-block;
    transition: color .2s ease, transform .2s cubic-bezier(.22, .61, .36, 1);
  }
  html.hs-motion .topbar a:first-child:hover { transform: translateX(-3px); }

  /* 本文中リンクは下線の位置だけ動かす（下線そのものは消さない） */
  html.hs-motion .related a,
  html.hs-motion .article-link a,
  html.hs-motion .breadcrumb a,
  html.hs-motion article a {
    transition: text-underline-offset .2s ease, color .2s ease;
  }
  html.hs-motion .related a:hover,
  html.hs-motion .article-link a:hover,
  html.hs-motion .breadcrumb a:hover,
  html.hs-motion article a:hover { text-underline-offset: 3px; }

  /* === 5. FAQ（details）の開閉 ========================================= */
  html.hs-motion details > summary {
    transition: color .2s ease;
  }
  html.hs-motion details[open] > *:not(summary) {
    animation: hs-disclose .3s cubic-bezier(.22, .61, .36, 1) both;
  }
  @keyframes hs-disclose {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
  }

  /* === 6. ツールページの見出し ========================================= */
  /* 既存のグラデーション文字を一度だけ左へ流す。終端は既定と同じ見た目 */
  html.hs-motion .header h1 {
    animation: hs-sheen 1.15s cubic-bezier(.4, 0, .2, 1) both;
  }
  @keyframes hs-sheen {
    from { background-size: 240% 100%; background-position: 100% 0; }
    to   { background-size: 100% 100%; background-position: 0 0; }
  }

  /* === 7. 読み進みバー（記事ページのみ・JS が挿入） ==================== */
  html.hs-motion .hs-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    z-index: 300;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: linear-gradient(90deg, #58a6ff, #bc8cff);
    pointer-events: none;
    will-change: transform;
  }
}