@charset "UTF-8";

/*
 * アニメーションは以下のクラスを対象要素に付けるだけで有効、外すと無効。
 * u-animate-fade-up : 下から上にフェードイン。
 * u-animate-image   : imgの親要素に付与。表示枠を動かさず、左からリビール。
 * u-animate-title   : 左から背景をリビールした後、文字をフェードイン。
 *   各行を .u-animate-title__line、文字を .u-animate-title__text で囲む。
 *   背景色は --animation-background で指定（既定はヒーローと同じ白）。
 * --animation-delay（例: .2s）で開始を遅らせられる。
 * --animation-duration でフェード/画像の速度を変更できる。
 * is-revealed / is-animating はJavaScriptが管理するため、HTMLに書かない。
 */

@media (prefers-reduced-motion: no-preference) {
	.is-animationEnabled .u-animate-fade-up:not(.is-revealed) {
		opacity: 0;
		translate: 0 28px;
	}

	.is-animationEnabled .u-animate-fade-up.is-animating {
		animation: reveal-fade-up var(--animation-duration, .8s) var(--ease) var(--animation-delay, 0s) both;
	}

	.is-animationEnabled .u-animate-image:not(.is-revealed) > img {
		clip-path: inset(0 100% 0 0);
	}

	.is-animationEnabled .u-animate-image.is-animating > img {
		animation: reveal-image var(--animation-duration, .9s) var(--ease) var(--animation-delay, 0s) both;
	}

	.is-animationEnabled .u-animate-title > .u-animate-title__line {
		position: relative;
		isolation: isolate;
		background: transparent;
	}

	.is-animationEnabled .u-animate-title > .u-animate-title__line::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: var(--animation-background, rgba(255, 255, 255, .97));
		pointer-events: none;
	}

	.is-animationEnabled .u-animate-title:not(.is-revealed) > .u-animate-title__line::before {
		clip-path: inset(0 100% 0 0);
	}

	.is-animationEnabled .u-animate-title:not(.is-revealed) .u-animate-title__text {
		opacity: 0;
	}

	.is-animationEnabled .u-animate-title.is-animating > .u-animate-title__line::before {
		animation: reveal-image .75s var(--ease) var(--animation-delay, 0s) both;
	}

	.is-animationEnabled .u-animate-title.is-animating .u-animate-title__text {
		animation: reveal-text .5s ease-out calc(var(--animation-delay, 0s) + .75s) both;
	}
}

@keyframes reveal-fade-up {
	from {
		opacity: 0;
		translate: 0 28px;
	}
	to {
		opacity: 1;
		translate: 0 0;
	}
}

@keyframes reveal-image {
	from { clip-path: inset(0 100% 0 0); }
	to { clip-path: inset(0 0 0 0); }
}

@keyframes reveal-text {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* 印刷時はスクロール前の要素も表示する。 */
@media print {
	.is-animationEnabled .u-animate-fade-up,
	.is-animationEnabled .u-animate-image > img,
	.is-animationEnabled .u-animate-title .u-animate-title__text,
	.is-animationEnabled .u-animate-title > .u-animate-title__line::before {
		animation: none !important;
		opacity: 1 !important;
		translate: none !important;
		clip-path: none !important;
	}
}