/* ============================================================
   Auguri! ─ フッター上段「写真に重ねる」＋ 索引の動き「霧が晴れる」
   （本番・2026-09-24 高野様「C、霧が晴れるで反映してください」）
   ------------------------------------------------------------
   デモ 02_demo/フッター案2の詰め_動き3案_0924.html の 案 2 × C を本番へ。
     ・筆記体の見出しをやめ、りんごの写真（800×400）に白い「See you at / Auguri!」を重ねる
     ・右に「INDEX ─」と索引 2 列（和文＋英語の小見出し）。写真との間 140、2 列の間 110
     ・フッターが画面に入ったら（footer-motion.js の .is-in）：
         写真はゆっくり寄りから引き（1.08 → 1）、白い文字は下から
         INDEX の横の罫がのび、索引はぼかしから焦点が合い、字間がすっと詰まる（霧が晴れる）
     ・ホバー：和文の下に罫が左からのび、英語が右へ少し送られ、矢印が出る
   HTML は build/common.py の footer()・footer_photo_text()。
   動きが終わった絵＝止まっている絵（アニメーションは backwards。終点を書かない＝要素本来の値に戻る）
   ============================================================ */

/* ── 写真の中の文字（PC・SP 共通） ── */
.ft__veil { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(90deg, rgba(20,18,14,.46) 0%, rgba(20,18,14,.12) 55%, rgba(20,18,14,0) 80%); }
.ft__see, .ft__aug { position: absolute; margin: 0; color: #fff; font-family: var(--ff-en-display); font-weight: 400; line-height: 1; white-space: nowrap; pointer-events: none; }
.ft__lab { margin: 0; display: flex; align-items: center; letter-spacing: .42em; text-transform: uppercase; font-family: var(--ff-en-display);
  color: color-mix(in srgb, currentColor 55%, transparent); white-space: nowrap; }
.ft__labrule { display: block; height: 1px; background-color: currentColor; opacity: .6; transform-origin: 0 50%; }

/* ── 索引の中身（PC・SP 共通） ── */
.b-footer .ft__indexlist li { list-style: none; }
.b-footer .ft__indexlist a { position: relative; display: block; color: inherit; text-decoration: none; }
.b-footer .ft__indexlist .jp { display: block; }
.b-footer .ft__indexlist .jp__in, .b-footer .ft__indexlist .en__in { display: inline-block; }
.b-footer .ft__indexlist .en { display: block; font-family: var(--ff-en-display); letter-spacing: .12em; line-height: 1.5;
  color: color-mix(in srgb, currentColor 55%, transparent); }
.b-footer .ft__indexlist .en__in { transition: transform .5s cubic-bezier(.22,1,.36,1), color .5s; }
.b-footer .ft__indexlist .ul { position: absolute; left: 0; width: 100%; height: 1px; background-color: currentColor;
  transform: scaleX(0) scaleY(.5); transform-origin: 0 50%; transition: transform .5s cubic-bezier(.22,1,.36,1); pointer-events: none; }
.b-footer .ft__indexlist .ar { position: absolute; right: 0; opacity: 0; transform: translateX(-8px); pointer-events: none;
  transition: opacity .35s, transform .45s cubic-bezier(.22,1,.36,1);
  background-image: linear-gradient(currentColor, currentColor); background-position: 0 50%; background-size: 100% 1px; background-repeat: no-repeat; }   /* 再発防止 39：background の一括指定は使わない */
.b-footer .ft__indexlist .ar::after { content: ""; position: absolute; right: 0; top: 50%; border-top: 1px solid; border-right: 1px solid;
  transform: translateY(-50%) rotate(45deg); }
@media (hover: hover) {
  .b-footer .ft__indexlist a:hover .ul { transform: scaleX(1) scaleY(.5); }
  .b-footer .ft__indexlist a:hover .en__in { transform: translateX(calc(8 * var(--s))); color: currentColor; }
  .b-footer .ft__indexlist a:hover .ar { opacity: 1; transform: none; }
}
.b-footer .ft__indexlist a:focus-visible .ul { transform: scaleX(1) scaleY(.5); }
.b-footer .ft__indexlist a:focus-visible .ar { opacity: 1; transform: none; }

/* ── PC：位置と大きさ（フッターの帯の中の座標・1920 基準） ── */
@media (min-width: 768px) {
  main.page footer.b-footer .ft__photo { left: calc(120 * var(--s)); top: calc(58 * var(--s)); width: calc(800 * var(--s)); height: calc(400 * var(--s)); }
  main.page footer.b-footer .ft__photo > img { inset: 0; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
  .ft__see { left: calc(52 * var(--s)); top: calc(206 * var(--s)); font-size: calc(40 * var(--s)); letter-spacing: .04em; }
  .ft__aug { left: calc(48 * var(--s)); top: calc(250 * var(--s)); font-size: calc(104 * var(--s)); }
  main.page footer.b-footer .ft__lab { left: calc(1060 * var(--s)); top: calc(70 * var(--s)); gap: calc(20 * var(--s)); font-size: calc(14 * var(--s)); line-height: 1.5; }
  .ft__labrule { width: calc(120 * var(--s)); }
  main.page footer.b-footer .ft__indexlist {
    position: absolute; inset: auto; left: calc(1060 * var(--s)); top: calc(122 * var(--s));
    display: grid; grid-template-columns: max-content max-content; column-gap: calc(110 * var(--s)); row-gap: calc(32 * var(--s));
  }
  main.page footer.b-footer .ft__indexlist > li {
    position: relative; left: auto; top: auto; font-size: calc(18 * var(--s)); line-height: 1.6; letter-spacing: .1em;
  }
  main.page footer.b-footer .ft__indexlist a { padding-right: calc(28 * var(--s)); }
  main.page footer.b-footer .ft__indexlist .en { margin-top: calc(1 * var(--s)); font-size: calc(14 * var(--s)); }
  main.page footer.b-footer .ft__indexlist .ul { top: calc(18 * 1.6 * var(--s) + 1 * var(--s)); }
  main.page footer.b-footer .ft__indexlist .ar { top: calc(9 * var(--s)); width: calc(14 * var(--s)); height: calc(14 * var(--s)); }
  main.page footer.b-footer .ft__indexlist .ar::after { width: calc(6 * var(--s)); height: calc(6 * var(--s)); }
}

/* ── 動き（footer-motion.js が .is-armed → .is-in を付ける。JS が無い・動きを減らす設定では最初から全部見えている） ── */
body:not([data-fm]) footer.b-footer.is-armed:not(.is-in) .ft__lab { visibility: hidden; }
/* 索引：いままでの「上から順にふわり」はやめ、中の文字に「霧が晴れる」をかける */
body:not([data-fm]) footer.b-footer.is-in .ft__index li { animation: none; }
body:not([data-fm]) footer.b-footer.is-in .ft__indexlist .jp__in { animation: ftm-fog 1.3s cubic-bezier(.16,1,.3,1) calc(1.0s + var(--i) * .07s) backwards; }
body:not([data-fm]) footer.b-footer.is-in .ft__indexlist .en__in { animation: ftm-fog 1.3s cubic-bezier(.16,1,.3,1) calc(1.2s + var(--i) * .07s) backwards; }
@keyframes ftm-fog { from { opacity: 0; filter: blur(8px); letter-spacing: .3em; } }
/* 写真：寄りから引き。白い文字は下から */
body:not([data-fm]) footer.b-footer.is-in .ft__photo > img { animation: ftm-zoom 2.4s cubic-bezier(.16,1,.3,1) 1.0s backwards; }
@keyframes ftm-zoom { from { transform: scale(1.08); } }
body:not([data-fm]) footer.b-footer.is-in .ft__see { animation: ftm-up 1.2s cubic-bezier(.16,1,.3,1) 1.35s backwards; }
body:not([data-fm]) footer.b-footer.is-in .ft__aug { animation: ftm-up 1.3s cubic-bezier(.16,1,.3,1) 1.5s backwards; }
@keyframes ftm-up { from { opacity: 0; transform: translateY(calc(18 * var(--s))); } }
/* INDEX と罫 */
body:not([data-fm]) footer.b-footer.is-in .ft__lab { visibility: visible; }
body:not([data-fm]) footer.b-footer.is-in .ft__lab > span { animation: ftm-fade .8s ease 1.3s backwards; }
body:not([data-fm]) footer.b-footer.is-in .ft__labrule { animation: ftm-line 1s cubic-bezier(.65,0,.35,1) 1.4s backwards; }
@keyframes ftm-line { from { transform: scaleX(0); } }

/* SP：「霧が晴れる」の字間の動きを、字間ではなく横の伸び縮み（scaleX）で見せる（2026-09-24 高野様「SP のフッター読み込みの時に少しカクつく」）
   letter-spacing を動かすと、毎フレーム文字の並べ直し（レイアウト）が起きる。390 幅・CPU 1/4 で測ると、フッターが入るあいだ
   ほぼ毎フレーム並べ直しが走り、25ms を超えるフレームが約 65 あった。scaleX・opacity・blur だけなら並べ直しは起きない。
   ぼかしと透明から始まるので伸びは目に付かず、「字間がすっと詰まる」印象はそのまま。終わった絵は同じ（backwards・終点を書かない） */
@media (max-width: 767px) {
  main.page .b-footer .ft__indexlist .jp__in { transform-origin: 0 50%; }
  body:not([data-fm]) main.page footer.b-footer.is-in .ft__indexlist .jp__in { animation-name: ftm-fog-sp; }
}
@keyframes ftm-fog-sp { from { opacity: 0; filter: blur(8px); transform: scaleX(1.2); } }

@media (prefers-reduced-motion: reduce) {
  .b-footer .ft__indexlist .ul, .b-footer .ft__indexlist .ar, .b-footer .ft__indexlist .en__in { transition: none; }
}