/* fade-in
===============================
スクロール連動の汎用フェードイン。
assets/js/modules/observe.js (initFadeIn) が画面侵入時に
[data-fade] へ .is-show を付与する。CSS は class の有無で状態を切り替えるだけ。

使い方:
  <div data-fade>...</div>
      → 標準のフェード（下から押し上げ）

  <div data-fade style="--fade-i: 1">...</div>
  <div data-fade style="--fade-i: 2">...</div>
      → 同時に画面入りする兄弟をずらしたいときに段数を指定
        （縦に積まれた要素は個別に observer がトリガーされるので
         自然にずれる ＝ --fade-i は不要）

調整用変数:
  --fade-duration  : 遷移時間
  --fade-distance  : 縦方向の流入距離（下から押し上げ）
  --fade-step      : --fade-i 1 段あたりの遅延
  --fade-easing    : イージング関数
*/

:root {
	--fade-duration: 0.8s;
	--fade-distance: 24px;
	--fade-step: 120ms;
	--fade-easing: ease-out;
}

[data-fade] {
	opacity: 0;
	transform: translateY(var(--fade-distance));
	transition:
		opacity var(--fade-duration) var(--fade-easing),
		transform var(--fade-duration) var(--fade-easing);
	transition-delay: calc(var(--fade-i, 0) * var(--fade-step));
	will-change: opacity, transform;
}

[data-fade].is-show {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	[data-fade] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}