/* ==========================================================================
   スクロール連動アニメーション
   - .js-fade-up  : 少し下からフェードイン
   - .js-fade-in  : フェードのみ
   - .js-stagger  : 直下の子要素を順に表示
   ========================================================================== */

/* ページ内アンカーへの滑らかなスクロール */
html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}
}

/* JS有効時のみ初期状態を隠す（JSオフでも空白ページにならないように） */
.js-enabled .js-fade-up,
.js-enabled .js-fade-in,
.js-enabled .js-stagger > * {
	opacity: 0;
	transition:
		opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}

.js-enabled .js-fade-up,
.js-enabled .js-stagger > * {
	transform: translate3d(0, 24px, 0);
}

.js-enabled .js-fade-up.is-visible,
.js-enabled .js-fade-in.is-visible {
	opacity: 1;
	transform: none;
}

/* stagger: 親に is-visible が付いたら子を順番に表示 */
.js-enabled .js-stagger.is-visible > * {
	opacity: 1;
	transform: none;
	transition-delay: calc(var(--stagger-index, 0) * 80ms);
}

/* 文字送り: 対象内の .c-char を順に下からフェードイン */
.js-enabled .js-char-reveal .c-char {
	display: inline-block;
	vertical-align: baseline;
	line-height: inherit;
	letter-spacing: inherit;
	opacity: 0;
	transform: translate3d(0, 0.4em, 0);
	transition:
		opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}

.js-enabled .js-char-reveal.is-visible .c-char {
	opacity: 1;
	transform: none;
	transition-delay: calc(var(--char-i, 0) * 50ms);
}

/* prefers-reduced-motion: reduce ならアニメーションを無効化 */
@media (prefers-reduced-motion: reduce) {

	.js-enabled .js-fade-up,
	.js-enabled .js-fade-in,
	.js-enabled .js-stagger > *,
	.js-enabled .js-char-reveal .c-char {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}