/* ==========================================================================
   wa-press / motion.css — 霞（スクロールに応じたごく淡い動き）
   --------------------------------------------------------------------------
   写真がスクロールで視界に入るとき、靄が晴れるように現れる。

   強さは「一般的なリビール演出の定番値」に合わせる（2026-08 実機確認で
   「気づかない程度」から一段目立たせる判断をした。値は独自に決めず、
   最も普及しているものを採用する）。
     - 開始は opacity 0（AOS の fade-up・ScrollReveal・Chrome 公式例で共通。
       画像の背後は和紙の地なので、白っぽい紙面から現れる見え方になる）
     - 終了は要素が完全に視界へ入った時点 = animation-range: entry
       （entry 0% entry 100% の短縮形。Chrome 公式のリビール実例と同じ）
     - 沈みの距離は 100px（AOS fade-up の既定値）
   背景が滑りすぎて洋のLPにならないよう、寄り（scale）は浅いまま変えない。

   仕組みは CSS のスクロール駆動アニメーション（animation-timeline: view()）。
     - スクロールイベントを張らないのでメインスレッドを塞がない
     - 未対応環境（Firefox など）では @supports ごと落ち、静止したまま＝現状維持
     - 動かすのは transform と opacity だけ。再レイアウトを起こさない

   強さは格ごとに --wa-motion で変える（kaku.css が上書きする）。
     真 … 0.35（あっても淡く現れる程度）
     行 … 1（既定。ここが主戦場）
     草 … 1.3（軽く跳ねてよい）
   0 にすればその格は完全に静止する。

   標題（ヒーロー）は動かさない。
   最初の画面で動くと「動くサイト」という印象が先に立つ。

   prefers-reduced-motion への配慮は base.css の全体則では足りない。
   あちらは animation-duration を 0.01ms にするが、スクロール駆動では
   duration ではなく range が長さを決めるので、動きが止まらない。
   ここでは no-preference の中でしか animation を与えない。
   ========================================================================== */

:root {
	--wa-motion: 1;
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {

		/*
		   全幅の帯 — ごく浅い寄り。
		   画面を通過する間に 1.0 → 1.04 へ拡大する。
		   object-fit: cover なので構図は崩れず、奥行きだけが残る。
		   親（.wa-band）が overflow: hidden なので、はみ出しは器が呑む。
		   現れるときは霞（淡い不透明度）も重ねる。

		   img 自身の view() は使えない。
		   overflow: hidden の .wa-band は CSS 上「スクロールコンテナ」であり、
		   img から見た最寄りのスクロールポートが帯自身になる。
		   img は帯を常に満たしているので進行が退化し、動かないどころか
		   描画まで壊れる。基準にしたいのは帯が「画面を」通過する進行なので、
		   帯側に名前付きタイムラインを立てて img から参照する。
		*/
		.wa-band {
			view-timeline: --wa-band block;
		}

		.wa-band__img {
			animation:
				wa-awai linear both,
				wa-yori linear both;
			animation-timeline: --wa-band, --wa-band;
			animation-range:
				entry 0% entry 100%,
				cover 0% cover 100%;
		}

		/*
		   二枚並び — 霞。
		   視界に入るとき、透明と 100px の沈みから定位置へ。
		   figure ごと動かして、説明の文字も一緒に現れるようにする。
		*/
		.wa-pair__cell {
			animation: wa-kasumi linear both;
			animation-timeline: view();
			animation-range: entry;
		}
	}
}

/*
   振幅はすべて --wa-motion 倍。
   0 なら from と to が一致し、アニメーションはあっても何も動かない。
*/

/* 霞 … 透明から現れて、浮き上がる（AOS fade-up 相当: opacity 0 / 100px） */
@keyframes wa-kasumi {
	from {
		opacity: calc(1 - 1 * var(--wa-motion, 1));
		transform: translateY(calc(100px * var(--wa-motion, 1)));
	}
}

/* 淡い … 不透明度だけの霞。transform を寄りに譲る帯用 */
@keyframes wa-awai {
	from {
		opacity: calc(1 - 1 * var(--wa-motion, 1));
	}
}

/* 寄り … 通過する間にごく浅く近づく */
@keyframes wa-yori {
	from {
		transform: scale(1);
	}
	to {
		transform: scale(calc(1 + 0.04 * var(--wa-motion, 1)));
	}
}