/* =============================================================
   mlx — 高級感インタラクション層（全デザイン共通・自己完結）
   1) 慣性スムーススクロール（Lenis・PCホイールのみ）
   2) 罫線ドローイン（1px罫線がスクロール到達で左から引かれる）
   ※カスタムカーソル・磁気ホバーは 2026-07-18 オーナー指示で撤去済み

   ゲート:
   - html.mlx-on   … mlx.js の生存ゲート（reduced-motion では付かない）
   - html.mlx-fine … pointer:fine（マウス）環境のみ。慣性はこれ必須
   sg（新デザイン）ページは margin.css を読まないため、このファイルは
   どちらのデザイン族にも依存しない（トークン持ち込み・自己完結）。
   ============================================================= */

/* （カスタムカーソル・磁気ホバーは 2026-07-18 オーナー指示で撤去。
   マウスカーソルはネイティブのまま） */

/* ---- 矢印ホバー（sola-resort 参照）----
   ホバーで矢印が右へ流れて消え、左から再登場する。対象は既存の .arw と、
   mlx.js が末尾の「→」を包んだ .mlx-arw */
html.mlx-on .arw,
html.mlx-on .mlx-arw {
  display: inline-block;
}
html.mlx-on a:hover .arw,
html.mlx-on a:hover .mlx-arw,
html.mlx-on button:hover .arw,
html.mlx-on button:hover .mlx-arw {
  animation: mlx-arw-flow 0.7s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes mlx-arw-flow {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  45% {
    transform: translateX(18px);
    opacity: 0;
  }
  50% {
    transform: translateX(-18px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* ---- 3) 慣性スクロール（Lenis）----
   本体は JS。html への lenis クラスは Lenis 自身が付与する */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

/* ---- 4) 罫線ドローイン ----
   mlx.js が「上辺のみ 1px solid」の要素を走査して .mlx-rule を付与し、
   透明→罫線色のグラデーションを border-image で左から引く。
   --mlxd は mlx.js が CSS.registerProperty で <number> 登録するため
   transition 可能（未対応ブラウザでは .mlx-rule 自体を付けない）。
   transition は既存 transition を壊さないよう JS がインラインで合成する */
html.mlx-on .mlx-rule {
  border-image-slice: 1;
  border-image-source: linear-gradient(
    90deg,
    var(--mlx-rc, #e6e2da) 0%,
    var(--mlx-rc, #e6e2da) calc(var(--mlxd, 0) * 100%),
    transparent calc(var(--mlxd, 0) * 100%)
  );
}
html.mlx-on .mlx-rule.is-mlx-drawn {
  --mlxd: 1;
}

/* reduced-motion: mlx-on 自体が付かないため全機能が素通しになるが、
   万一クラスが残留した場合の保険 */
@media (prefers-reduced-motion: reduce) {
  html .mlx-rule {
    border-image-source: none;
  }
}

/* =============================================================
   見出しの自然な改行（オーナー指示 2026-07-30）
   「対話から生まれる邸/宅」のように最後の1文字だけが次行へ落ちる
   泣き別れを防ぐ。text-wrap:balance で行の長さを均衡させ、対応環境
   （Chrome 119+）では word-break:auto-phrase で文節単位に折る。
   mlx.css は sg / legacy 両デザインで読み込まれる唯一の層のため、
   全ページに一括で効かせる目的でここに置く（意匠には触らない）。
   縦書きの見出し（KV・CONTACT・CONCEPT）は行組みが崩れないよう除外。
   ============================================================= */
h1, h2, h3, h4,
.svc-detail h3, .svc-intro h2,
.sum-card h4, .sp-copy h3,
.wk-head h2, .feat .ov h3, .wk h3,
.info-ttl, .fp-post h2, .fp-archive__head h1 {
  text-wrap: balance;
  word-break: auto-phrase;
}
/* 縦書き・アニメーション制御下の見出しは対象外（行組みや振り付けが崩れる）。
   縦書きセレクタはテーマ全体を grep して洗い出した6種（2026-07-30時点）。
   新しく縦書き見出しを追加した場合はここにも追記すること */
.pg-vert span,
.concept-vhead,
.rel-vhead,
.vnote,
.sg-contact .c-vmsg,
.sg-contact-block .c-vmsg,
.kv-center h1,
.m-loading__word,
.m-loader__logo,
/* philosophy の縦組み見出し（オープニング／縦組みエッセイ。
   .m-reveal-line が挿入する行分割スパンも対象に含める） */
.pd-opening__copy h2,
.pd-opening__copy h2 .m-line,
.pd-opening__copy h2 .m-line__inner,
.pd-image-essay--tate .pd-image-essay__body h2,
.pd-image-essay--tate .pd-image-essay__body h2 .m-line,
.pd-image-essay--tate .pd-image-essay__body h2 .m-line__inner,
[style*="writing-mode"] {
  text-wrap: wrap;
  word-break: normal;
}

/* =============================================================
   中央寄せ本文の「す。」だけカラム落ち対策（オーナー指示 2026-07-30）
   写真帯の一文（sp-statement）で最後の1〜2文字だけが3行目に落ちて
   いた。balance で行長を均衡させ、文節単位で折る。
   対象はサービス4ページ共通の中央寄せ短文ブロックに限定する
   （長い本文に balance を掛けると環境差が出るため広げない）。
   ============================================================= */
.sp-statement p,
.st-copy p {
  text-wrap: balance;
  word-break: auto-phrase;
}