/*
 * motion-2026.css — 2026-11-02
 *
 * 「派手に足す」のではなく、今のブラウザ標準でしか書けない演出を軽く載せる層。
 * - Tailwind のビルド対象外（手書き）。style.css の後に読み込む。
 * - すべて @supports で段階的に有効化する。非対応ブラウザでは何も起きない（崩れない）。
 * - prefers-reduced-motion: reduce の人には動きを一切出さない。
 */

/* ------------------------------------------------------------
 * 1. 文字組み：見出しは文節で折り返し、行の長さを揃える
 *    （スマホで「解決アプロ／ーチ」のように単語の途中で割れていた）
 * ------------------------------------------------------------ */
h1, h2, h3,
.heading-xl, .heading-lg, .heading-md, .heading-sm {
  word-break: auto-phrase;
  text-wrap: balance;
}
p, li, dd {
  text-wrap: pretty;
}

/* ------------------------------------------------------------
 * 2. ページ遷移：View Transitions（同一オリジンのページ間）
 *    ヘッダーは名前を付けて固定し、本文だけを切り替える。
 * ------------------------------------------------------------ */
@view-transition {
  navigation: auto;
}
#site-header {
  view-transition-name: site-header;
}
::view-transition-old(root) {
  animation: moru-vt-out .22s cubic-bezier(.4, 0, 1, 1) both;
}
::view-transition-new(root) {
  animation: moru-vt-in .38s cubic-bezier(0, 0, .2, 1) both;
}
@keyframes moru-vt-out {
  to { opacity: 0; transform: translateY(-6px); }
}
@keyframes moru-vt-in {
  from { opacity: 0; transform: translateY(10px); }
}

/* ------------------------------------------------------------
 * 3. スクロール進捗バー：スクロール駆動アニメーション（JS不要）
 * ------------------------------------------------------------ */
.moru-progress {
  display: none;
}
@supports (animation-timeline: scroll()) {
  .moru-progress {
    display: block;
    position: fixed;
    inset: 0 0 auto 0;
    height: 2px;
    z-index: 60;
    pointer-events: none;
    transform-origin: 0 50%;
    transform: scaleX(0);
    background: linear-gradient(90deg, #be7350, #7c5cd6 60%, #4fc6dd);
    animation: moru-progress linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes moru-progress {
    to { transform: scaleX(1); }
  }
}

/* ------------------------------------------------------------
 * 4. 見出しの下線が、画面に入るにつれて伸びる（ビュー駆動）
 * ------------------------------------------------------------ */
@supports (animation-timeline: view()) {
  .decoration-line {
    transform-origin: 0 50%;
    animation: moru-line linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 35%;
  }
  .text-center .decoration-line,
  .decoration-line.mx-auto {
    transform-origin: 50% 50%;
  }
  @keyframes moru-line {
    from { transform: scaleX(0); opacity: .3; }
    to   { transform: scaleX(1); opacity: 1; }
  }
}

/* ------------------------------------------------------------
 * 5. カード：指した位置にほのかな光が追従する（JSが --mx/--my を渡す）
 * ------------------------------------------------------------ */
.card.moru-spot {
  background-image: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, -100%),
    rgba(190, 115, 80, .10),
    rgba(124, 92, 214, .06) 35%,
    transparent 60%
  );
}
.card.moru-spot:hover {
  border-color: rgba(190, 115, 80, .35);
}

/* ------------------------------------------------------------
 * 6. スマホ：「上へ戻る」ボタンがフッター最下部のリンクに重ならないよう余白を取る
 * ------------------------------------------------------------ */
@media (max-width: 767px) {
  footer > :last-child {
    padding-bottom: 4.5rem;
  }
}

/* ------------------------------------------------------------
 * 動きを減らす設定の人には、上の動きを全部止める
 * ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .moru-progress { display: none !important; }
  .decoration-line { animation: none !important; transform: none !important; opacity: 1 !important; }
  .card.moru-spot { background-image: none; }
}