/* ============================================================
   Auguri! ─ 濃い帯のあとのフッター：黒からはじめて、白へ反転する
   ------------------------------------------------------------
   2026-09-16 高野様
     「GARAGE88 があるページのフッターですが、シームレスに見せたいので、
       黒背景から白に反転するようにして。フッターにある程度さしかかってから
       発火するのがベストです」

   フッターの真上が濃い帯のページ（TOP・暮らしの品々・店舗のご案内の GARAGE88）では、
   境目に線が入って見える。そこで
     ・フッターは **真上の帯と同じ地色** ではじめる（＝境目が消える）
     ・フッターにある程度さしかかったら、地色と文字・罫の色を **白 → 淡い地色** へ反転する

   反転の合図は assets/js/footer-tone.js（フッターが画面の 55% を超えたら .is-lit）。
   どの帯の色ではじめるかは build が `--ft-from` に入れる（帯の実際の地色）。
   位置・寸法は 1px も動かない。色だけが 0.9 秒でゆっくり入れ替わる。
   JS が動かない環境では、はじめから淡い地色のまま（いままでどおり）。

   **黒ではじめるのは JS が動いたときだけ**（.is-toned は footer-tone.js が付ける）。
   2026-09-17・中間レビュー R05：以前は CSS だけで黒くしていたので、JS が動かない環境では
   フッターが暗いまま残り、「JS が無ければはじめから淡い地色」という説明と食い違っていた。
   ============================================================ */

footer.b-footer[data-ft-flip].is-toned {
  background-color: var(--ft-from, #262722);
  color: var(--c-ink-w);
  transition: background-color .9s cubic-bezier(.33, 0, .2, 1), color .9s cubic-bezier(.33, 0, .2, 1);
}
/* 罫（本日の朱線は残す）と筆記体も一緒に反転する */
footer.b-footer[data-ft-flip].is-toned .rule:not(.ft__cal-r1) {
  background: var(--c-ink-w);
  transition: background-color .9s cubic-bezier(.33, 0, .2, 1);
}
footer.b-footer[data-ft-flip].is-toned .ft__script {
  color: var(--c-ink-w);
  transition: color .9s cubic-bezier(.33, 0, .2, 1);
}

/* 反転後（＝いままでの見た目） */
footer.b-footer[data-ft-flip].is-toned.is-lit { background-color: #f9f7f3; color: var(--c-ink); }
footer.b-footer[data-ft-flip].is-toned.is-lit .rule:not(.ft__cal-r1) { background: var(--c-ink); }
footer.b-footer[data-ft-flip].is-toned.is-lit .ft__script { color: var(--c-ink-7f); }

/* ai 突き合わせ（.compare）では、いままでどおりの淡い地色で測る */
.compare footer.b-footer[data-ft-flip] { background-color: #f9f7f3 !important; color: var(--c-ink) !important; }
.compare footer.b-footer[data-ft-flip] .rule:not(.ft__cal-r1) { background: var(--c-ink) !important; }
.compare footer.b-footer[data-ft-flip] .ft__script { color: var(--c-ink-7f) !important; }

/* SP：文字色は 0.9 秒かけて変えず、背景がちょうど中間の灰色になる 0.29 秒の時点で 1 回だけ切り替える
   （2026-09-24 高野様「SP のフッター読み込みの時に少しカクつく」）。
   文字色を少しずつ変えると、フッターの文字・ロゴ・アイコンを毎フレーム描き直すことになり、幕開けの動きと重なってカクついていた。
   背景（cubic-bezier(.33,0,.2,1)）が半分まで進むのは 0.9 秒 × 0.324 ＝ 0.29 秒。灰色の上では白い字も黒い字も同じくらいの
   見え方なので、切り替わりは目立たない。背景と罫はこれまでどおりゆっくり変わる。止まった絵は変わらない */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  footer.b-footer[data-ft-flip].is-toned { transition: background-color .9s cubic-bezier(.33, 0, .2, 1), color 0s linear .29s; }
  footer.b-footer[data-ft-flip].is-toned .ft__script { transition: color 0s linear .29s; }
}

/* 動きを減らす設定：色は変えるが、じわりと変わるのはやめる */
@media (prefers-reduced-motion: reduce) {
  footer.b-footer[data-ft-flip],
  footer.b-footer[data-ft-flip] .rule:not(.ft__cal-r1),
  footer.b-footer[data-ft-flip] .ft__script { transition: none; }
}