/**
 * Animation utility styles
 *
 * FOUC（Flash Of Unstyled Content）対策で、JSが動く前は非表示にしておく。
 * prefers-reduced-motion 環境ではユーティリティを全て無効化。
 */

.fade-up,
.fade-in,
.parallax-slow {
	will-change: transform, opacity;
}

html.js-animations-ready .fade-up,
html.js-animations-ready .fade-in {
	opacity: 0;
}

html.js-animations-ready .stagger-children > * {
	opacity: 0;
}

html.smooth-scroll-enabled {
	overscroll-behavior: none;
}

html.no-smooth-scroll .fade-up,
html.no-smooth-scroll .fade-in,
html.no-smooth-scroll .stagger-children > *,
html.no-smooth-scroll .parallax-slow {
	opacity: 1 !important;
	transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.fade-up,
	.fade-in,
	.stagger-children > *,
	.parallax-slow {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
		transition: none !important;
	}
}