/* ==========================================================================
   mobile-fx.css — モバイル スクロール連動 視覚強化（ver11.3）
   すべて html.m-fx 配下＝mobile-fx.js が起動条件を満たした時のみ有効。
   PC / hover環境 / reduced-motion では一切無効（既存CSSに非干渉）。
   トークンは既存（--duotone / --c-ice / price.css の --c・--pr-text）を流用。
   ========================================================================== */

/* ===== 1. 写真フォーカス・カラー（hoverの色変化をスクロールに置換） =====
   既定はデュオトーン（蒼夜モノ）。中央帯に来た要素にだけ .m-color が付き色が戻る。
   html.m-fx 前置(特異度0,2,2)で各CSSの @media(hover:none){filter:none}(0,1,1)に勝つ。 */
html.m-fx .works-card__thumb img,
html.m-fx .videos-card__thumb img,
html.m-fx .fnote-card__media img,
html.m-fx .pf-fig img,
html.m-fx .pl-item img,
html.m-fx .pp-case__media img{
  filter: var(--duotone);
  transition: filter .7s ease, transform 1.1s cubic-bezier(.22,1,.36,1);
}
html.m-fx .works-card__thumb.m-color img,
html.m-fx .videos-card__thumb.m-color img,
html.m-fx .fnote-card__media.m-color img,
html.m-fx .pf-fig.m-color img,
html.m-fx .pl-item.m-color img,
html.m-fx .pp-case__media.m-color img{
  filter: grayscale(0);
  transform: scale(1.03);   /* 控えめに「生きている」感。中央の1枚だけ */
}

/* ===== 2. 読み進み進捗バー（全ページ・装飾） ===== */
html.m-fx .m-progress{
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: 99999; background: transparent; pointer-events: none;
}
html.m-fx .m-progress > i{
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--c-ice, #87B8D6), #CFE6F2);
  box-shadow: 0 0 6px rgba(135,184,214,.5);
  transition: width .08s linear;
}

/* ===== 3. 現在地ナビ（ページ内アンカーナビ＝Price .pr-nav 等） ===== */
html.m-fx .pr-nav a.m-current{
  border-color: var(--c);
  color: var(--pr-text);
  background: color-mix(in srgb, var(--c) 14%, transparent);
}
html.m-fx .pr-nav a.m-current .pr-nn{ color: var(--c); }
/* 汎用[data-spy]ナビ用の控えめ下線（将来の他ページ向け） */
html.m-fx [data-spy] a.m-current{
  color: var(--c-ice, #87B8D6);
  border-bottom-color: var(--c-ice, #87B8D6);
}

/* ===== 4. リビールstagger ===== */
/* 遅延は mobile-fx.js が .rv:not(.is-in) にインラインで付与（CSS不要）。
   隠す/見せる本体は既存 style.css の `html.js .rv` / `.rv.is-in` がモバイルでも稼働。 */