/**
 * 共通アニメーション: 控えめなフェードイン
 * .fade-in を付与した要素が画面内に入ったタイミングで is-visible が付与される。
 * (assets/js/animations.js と対)
 *
 * プログレッシブエンハンスメント:
 * 初期状態の opacity:0 は「JSが実際に動作していると確認できた場合」のみ適用する
 * （html.js-fade-ready 経由）。JSが読み込まれない/実行に失敗した場合でも
 * コンテンツが opacity:0 のまま永久に隠れてしまわないようにするため。
 */

.js-fade-ready .fade-in {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.js-fade-ready .fade-in.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.js-fade-ready .fade-in {
		opacity: 1;
		transform: none;
		transition: none;
	}
}