/* 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; }

  /* 各ページの <style> が昔から持っている演出（カードの浮き上がり・色の遷移）も
     ここで止める。共通アセットは全ページに入っているので 1 か所で全ページに効く。
     transitionend に依存している箇所はサイト内に無いので、0s にしても何も壊れない。 */
  * {
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
  .tool-card:hover, .tool-card:focus-visible,
  .service-card:hover, .service-card:focus-visible,
  .blog-card:hover, .blog-card:focus-visible,
  .post-card:hover, .post-card:focus-visible {
    transform: none !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; }
  }

  /* === 8. ヒーローの入り ==============================================
   * トップの大見出しと、下層ページの見出し帯。読み込み直後に一度だけ動く。
   *
   * 子要素は transform だけを動かす。ページ側が不透明度を指定している要素
   * （トップの .hero p は opacity:.85）に opacity のキーフレームを重ねると、
   * fill:both で終端の 1 が居座って既定の見た目を書き換えてしまうため。
   * 淡く出す役目は入れ物側の hs-page-in に持たせて、役割を分ける。
   * 高さに触らない＝上から下へ文字が飛ぶ（CLS）ことがない。
   * ------------------------------------------------------------------ */
  @keyframes hs-rise {
    from { transform: translateY(18px); }
    to   { transform: none; }
  }

  /* 背景写真だけ、ゆっくり寄りを戻す。面の大きさは変えないので文字は動かない */
  html.hs-motion .hero .hero-bg {
    animation: hs-hero-bg 1.5s cubic-bezier(.22, .61, .36, 1) both;
  }
  @keyframes hs-hero-bg {
    from { transform: scale(1.06); }
    to   { transform: none; }
  }

  html.hs-motion .hero .hero-content,
  html.hs-motion .page-hero .page-hero-inner,
  html.hs-motion .page-head {
    animation: hs-page-in .62s cubic-bezier(.22, .61, .36, 1) both;
  }
  html.hs-motion .hero .hero-content > *,
  html.hs-motion .page-hero .page-hero-inner > *,
  html.hs-motion .page-head > * {
    animation: hs-rise .72s cubic-bezier(.22, .61, .36, 1) both;
  }
  /* 見出し・説明・ボタンの順に、わずかにずらして立ち上げる */
  html.hs-motion .hero .hero-content > :nth-child(2),
  html.hs-motion .page-hero .page-hero-inner > :nth-child(2),
  html.hs-motion .page-head > :nth-child(2) { animation-delay: .08s; }
  html.hs-motion .hero .hero-content > :nth-child(3),
  html.hs-motion .page-hero .page-hero-inner > :nth-child(3),
  html.hs-motion .page-head > :nth-child(3) { animation-delay: .16s; }

  /* === 9. カード内部の反応 =============================================
   * カード本体の浮き上がりは各ページの CSS が前から持っている。ここでは
   * 中身だけを足す（二重に定義して打ち消し合わないようにする）。
   * ------------------------------------------------------------------ */
  html.hs-motion .tool-card .tool-card-icon,
  html.hs-motion .post-card .read-more,
  html.hs-motion .blog-card .more {
    transition: transform .22s cubic-bezier(.22, .61, .36, 1);
  }
  /* アイコン面はカードの overflow:hidden で切られるので、角の丸みを保ったまま寄る */
  html.hs-motion .tool-card:hover .tool-card-icon,
  html.hs-motion .tool-card:focus-visible .tool-card-icon {
    transform: scale(1.045);
  }
  /* 「続きを読む」は進む向きへ。末尾の矢印は文字なので位置だけ動かす */
  html.hs-motion .post-card:hover .read-more,
  html.hs-motion .post-card:focus-visible .read-more,
  html.hs-motion .blog-card:hover .more,
  html.hs-motion .blog-card:focus-visible .more {
    transform: translateX(4px);
  }

  /* キーボードで辿ったときも、ホバーと同じだけ反応させる
     （輪郭線そのものは各ページの :focus-visible が出す） */
  html.hs-motion .tool-card:focus-visible,
  html.hs-motion .post-card:focus-visible,
  html.hs-motion .blog-card:focus-visible,
  html.hs-motion .service-card:focus-visible {
    transform: translateY(-4px);
  }

  /* 絞り込みボタン・ピルナビの手応え */
  html.hs-motion .fcat,
  html.hs-motion .cat-chip,
  html.hs-motion .pillnav a,
  html.hs-motion .groupnav .gnav {
    transition: background-color .18s ease, color .18s ease,
                border-color .18s ease, transform .18s cubic-bezier(.22, .61, .36, 1);
  }
  html.hs-motion .fcat:active,
  html.hs-motion .cat-chip:active,
  html.hs-motion .groupnav .gnav:active { transform: scale(.97); }
  html.hs-motion .cat-chip:hover { transform: translateY(-2px); }

  /* === 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;
  }
}