/* ==========================================================================
   css/reveal.css

   スクロール時の reveal アニメーション
   - .hd-reveal を持つ要素は初期状態で薄く下にずれて非表示
   - JS（reveal.js）が IntersectionObserver で可視判定し .is-visible 付与
   - prefers-reduced-motion 利用者にはアニメをスキップ（即時表示）
   ========================================================================== */

.hd-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
		transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}

.hd-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* 複数並ぶ要素に少しずつ遅延を入れたい時用（任意で data-hd-reveal-delay="0|100|200..." 指定可） */
.hd-reveal[data-hd-reveal-delay="100"] { transition-delay: 0.1s; }
.hd-reveal[data-hd-reveal-delay="200"] { transition-delay: 0.2s; }
.hd-reveal[data-hd-reveal-delay="300"] { transition-delay: 0.3s; }
.hd-reveal[data-hd-reveal-delay="400"] { transition-delay: 0.4s; }


/* --------------------------------------------------------------------------
   Fade-only バリアント: 写真・スライダー等の大きな要素向け（translateY なし）
   -------------------------------------------------------------------------- */

.hd-reveal--fade {
	opacity: 0;
	transform: none;
	transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity;
}

.hd-reveal--fade.is-visible {
	opacity: 1;
}

.hd-reveal--fade[data-hd-reveal-delay="100"] { transition-delay: 0.1s; }
.hd-reveal--fade[data-hd-reveal-delay="200"] { transition-delay: 0.2s; }
.hd-reveal--fade[data-hd-reveal-delay="300"] { transition-delay: 0.3s; }
.hd-reveal--fade[data-hd-reveal-delay="400"] { transition-delay: 0.4s; }


/* アクセシビリティ配慮: 動きを抑える設定の利用者にはアニメを無効化 */
@media (prefers-reduced-motion: reduce) {
	.hd-reveal,
	.hd-reveal--fade {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* JS 無効環境のフォールバック（noscript で .hd-reveal-fallback クラスを html に付与する場合用） */
.hd-reveal-fallback .hd-reveal,
.hd-reveal-fallback .hd-reveal--fade {
	opacity: 1;
	transform: none;
}