/* ============================================================
   Auguri! ─ フッターのモーション「幕開け」（本番・2026-09-16 高野様ご確定）
   ------------------------------------------------------------
   デモ 17 番の **8 幕開け × 写真 A（静かに）** を採用（決定事項 #78）。
   フッターが画面に入ったら 1 回だけ、部品が順に入ってくる。

     ①上下の罫 2 本が左から引かれる（0.05 / 0.25 秒）
        └ 一番上の罫は 2026-09-16 のご指示で削除（それに伴い 3 本 → 2 本）
     ②筆記体が静かに濃くなる（10px 下から。0.5 秒〜）
     ③索引 8 項目が上から順にふわり（1.0 秒〜・0.07 秒ずつ）
     ④写真は **動かさない**。地色から静かに濃くなるだけ（1.0 秒〜1.8 秒）
        └ りんごは商品の顔なので、形が動くと目がそちらに引かれる（高野様ご指示）
     ⑤ロゴ・SNS・住所・営業時間・カレンダー 7 日が順にふわり（1.9 秒〜）
     ⑥最後に今日の朱線が左から引かれる（3.0 秒〜）
     合計 約 3.7 秒。1 回きりで、終わったら完全に静止する。

   位置・寸法は ai のまま。動き終わった状態は「動かさないとき」と画素で一致する
   （チェックリスト 21：`animation-fill-mode` は **backwards**。終点を残すと
    0.5px の罫が別の層で描き直されて薄くなり、日付の 0.42 の灰色が黒くなる）。

   発火は assets/js/footer-motion.js（footer.b-footer に .is-in を付ける）。
   JS が動かない環境では .is-armed が付かないので、最初から全部見えている。

   デモ 17 番（body に data-fm が付いているページ）では、この本番の動きは効かせない。
   あちらは案を見比べるためのページで、切替は footer-motion-demo.css が持っている。
   ============================================================ */

/* 動き出す前（JS が .is-armed を付けてから、まだ画面に入っていない間）だけ隠す */
body:not([data-fm]) footer.b-footer.is-armed:not(.is-in) .ft__script,
body:not([data-fm]) footer.b-footer.is-armed:not(.is-in) .ft__rule2,
body:not([data-fm]) footer.b-footer.is-armed:not(.is-in) .ft__rule3,
body:not([data-fm]) footer.b-footer.is-armed:not(.is-in) .ft__index li,
body:not([data-fm]) footer.b-footer.is-armed:not(.is-in) .ft__photo,
body:not([data-fm]) footer.b-footer.is-armed:not(.is-in) .ft__addr,
body:not([data-fm]) footer.b-footer.is-armed:not(.is-in) .ft__open,
body:not([data-fm]) footer.b-footer.is-armed:not(.is-in) .ft__tel,
body:not([data-fm]) footer.b-footer.is-armed:not(.is-in) .ft__mail,
body:not([data-fm]) footer.b-footer.is-armed:not(.is-in) .ft__logo,
body:not([data-fm]) footer.b-footer.is-armed:not(.is-in) .ft__sns,
body:not([data-fm]) footer.b-footer.is-armed:not(.is-in) .ft__cal > *,
body:not([data-fm]) footer.b-footer.is-armed:not(.is-in) .ft__cal-r1,
body:not([data-fm]) footer.b-footer.is-armed:not(.is-in) .ft__copy { visibility: hidden; }

/* ① 罫 2 本（一番上の罫は 2026-09-16 のご指示で削除した） */
body:not([data-fm]) footer.b-footer.is-in .ft__rule2 { visibility: visible; animation: ftm-rule 1.2s cubic-bezier(.22,1,.36,1) .05s backwards; }
body:not([data-fm]) footer.b-footer.is-in .ft__rule3 { visibility: visible; animation: ftm-rule 1.2s cubic-bezier(.22,1,.36,1) .25s backwards; }
@keyframes ftm-rule { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ② 筆記体（静かに濃くなる） */
body:not([data-fm]) footer.b-footer.is-in .ft__script { visibility: visible; animation: ftm-ink 1.6s cubic-bezier(.22,1,.36,1) .5s backwards; }
/* 筆記体の出方には **ぼかし（filter: blur）を使わない**。
   ぼかしをかけると、その SVG は別の層で描き直され、動きのあいだ**線の縁だけ**が
   本番と違う滲み方になる（実測 947 画素・最大 111。終わればもとに戻るが、
   3.9 秒の最後にわずかに締まって見える）。動きが終わった瞬間と本番の画がずれるのは
   チェックリスト 21 と同じ筋なので、静かに濃くなるだけにした（画素で完全に一致する）。 */
@keyframes ftm-ink {
  from { opacity: 0; transform: translateY(calc(10 * var(--s))); }
  to   { transform: none; }   /* 終点に opacity は書かない＝要素本来の値に戻る */
}

/* ③ 索引 8 項目 */
body:not([data-fm]) footer.b-footer.is-in .ft__index li { visibility: visible; animation: ftm-rise .9s cubic-bezier(.22,1,.36,1) backwards; }
@keyframes ftm-rise { from { opacity: 0; transform: translateY(calc(8 * var(--s))); } to { transform: none; } }
body:not([data-fm]) footer.b-footer.is-in .ft__idx1 { animation-delay: 1.0s; }  body:not([data-fm]) footer.b-footer.is-in .ft__idx2 { animation-delay: 1.07s; }
body:not([data-fm]) footer.b-footer.is-in .ft__idx3 { animation-delay: 1.14s; } body:not([data-fm]) footer.b-footer.is-in .ft__idx4 { animation-delay: 1.21s; }
body:not([data-fm]) footer.b-footer.is-in .ft__idx5 { animation-delay: 1.28s; } body:not([data-fm]) footer.b-footer.is-in .ft__idx6 { animation-delay: 1.35s; }
body:not([data-fm]) footer.b-footer.is-in .ft__idx7 { animation-delay: 1.42s; } body:not([data-fm]) footer.b-footer.is-in .ft__idx8 { animation-delay: 1.49s; }

/* ④ 写真（A 静かに）── 写真そのものは 1px も動かさない */
body:not([data-fm]) footer.b-footer.is-in .ft__photo { visibility: visible; animation: ftm-fade 1.8s cubic-bezier(.33,0,.2,1) 1.0s backwards; }
@keyframes ftm-fade { from { opacity: 0; } to { opacity: 1; } }

/* ⑤ ロゴ・SNS・住所・カレンダー */
body:not([data-fm]) footer.b-footer.is-in .ft__logo, body:not([data-fm]) footer.b-footer.is-in .ft__sns,
body:not([data-fm]) footer.b-footer.is-in .ft__addr, body:not([data-fm]) footer.b-footer.is-in .ft__open,
body:not([data-fm]) footer.b-footer.is-in .ft__tel,  body:not([data-fm]) footer.b-footer.is-in .ft__mail,
body:not([data-fm]) footer.b-footer.is-in .ft__cal > *, body:not([data-fm]) footer.b-footer.is-in .ft__copy {
  visibility: visible; animation: ftm-rise .9s cubic-bezier(.22,1,.36,1) backwards;
}
body:not([data-fm]) footer.b-footer.is-in .ft__logo { animation-delay: 1.9s; } body:not([data-fm]) footer.b-footer.is-in .ft__sns { animation-delay: 2.0s; }
body:not([data-fm]) footer.b-footer.is-in .ft__addr { animation-delay: 2.05s; } body:not([data-fm]) footer.b-footer.is-in .ft__open { animation-delay: 2.12s; }
body:not([data-fm]) footer.b-footer.is-in .ft__tel { animation-delay: 2.19s; } body:not([data-fm]) footer.b-footer.is-in .ft__mail { animation-delay: 2.26s; }
body:not([data-fm]) footer.b-footer.is-in .ft__cal > * { animation-delay: 2.2s; }
body:not([data-fm]) footer.b-footer.is-in .ft__cal-lab1, body:not([data-fm]) footer.b-footer.is-in .ft__cal-num1, body:not([data-fm]) footer.b-footer.is-in .ft__cal-st1 { animation-delay: 2.25s; }
body:not([data-fm]) footer.b-footer.is-in .ft__cal-lab2, body:not([data-fm]) footer.b-footer.is-in .ft__cal-num2, body:not([data-fm]) footer.b-footer.is-in .ft__cal-st2 { animation-delay: 2.32s; }
body:not([data-fm]) footer.b-footer.is-in .ft__cal-lab3, body:not([data-fm]) footer.b-footer.is-in .ft__cal-num3, body:not([data-fm]) footer.b-footer.is-in .ft__cal-st3 { animation-delay: 2.39s; }
body:not([data-fm]) footer.b-footer.is-in .ft__cal-lab4, body:not([data-fm]) footer.b-footer.is-in .ft__cal-num4, body:not([data-fm]) footer.b-footer.is-in .ft__cal-st4 { animation-delay: 2.46s; }
body:not([data-fm]) footer.b-footer.is-in .ft__cal-lab5, body:not([data-fm]) footer.b-footer.is-in .ft__cal-num5, body:not([data-fm]) footer.b-footer.is-in .ft__cal-st5 { animation-delay: 2.53s; }
body:not([data-fm]) footer.b-footer.is-in .ft__cal-lab6, body:not([data-fm]) footer.b-footer.is-in .ft__cal-num6, body:not([data-fm]) footer.b-footer.is-in .ft__cal-st6 { animation-delay: 2.60s; }
body:not([data-fm]) footer.b-footer.is-in .ft__cal-lab7, body:not([data-fm]) footer.b-footer.is-in .ft__cal-num7, body:not([data-fm]) footer.b-footer.is-in .ft__cal-st7 { animation-delay: 2.67s; }
body:not([data-fm]) footer.b-footer.is-in .ft__copy { animation-delay: 2.9s; }

/* ⑥ 今日の朱線（縦罫・短い罫は「ふわり」の対象にせず、朱線だけ最後に引く） */
body:not([data-fm]) footer.b-footer.is-in .ft__cal-r1 { visibility: visible; animation: ftm-rule .7s cubic-bezier(.22,1,.36,1) 3.0s backwards; }

/* ai 突き合わせ（.compare）では、出方に関係なく ai と同じ「全部出ている」状態で測る。
   visibility: hidden は位置こそ変えないが、文字のベースライン計測では拾えないため
   （2026-09-16：入れた直後に top の照合できた数が 96 → 73 に落ちて気づいた）。 */
.compare footer.b-footer.is-armed:not(.is-in) *,
.compare footer.b-footer * { visibility: visible !important; animation: none !important; clip-path: none !important; }

/* 動きを減らす設定：最初から全部出ている */
@media (prefers-reduced-motion: reduce) {
  body:not([data-fm]) footer.b-footer.is-armed:not(.is-in) * { visibility: visible !important; }
  body:not([data-fm]) footer.b-footer * { animation: none !important; clip-path: none !important; }
}