/* =========================================
	newtop animation
	KV / scroll reveal / hover motion
========================================= */

/* =========================================
	KV title animation
	日本語コピー → 一拍 → 英語上段 → 英語下段 → リード文/ボタン
	英語のふわふわはwrap側で制御
========================================= */

.top-kv-copy,
.top-kv-text,
.top-btn {
	opacity: 0;
	transform: translate3d(0, 12px, 0);
	filter: blur(5px);
}

/* 英語wrapは表示状態に固定。ふわふわはこのwrap側に付ける */
.top-kv-en-wrap {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	filter: none;
	overflow: hidden;
	will-change: transform;
}

/* 英語画像本体だけ非表示スタート。表示演出は画像側に付ける */
.top-kv-en {
	opacity: 0;
	transform: translate3d(-22px, 0, 0);
	filter: blur(5px);
	clip-path: inset(0 100% 0 0);
	will-change: opacity, transform, filter, clip-path;
}

/* 1. 日本語コピー：浮かび上がるフェードイン */
.is-loaded .top-kv-copy {
	animation: kvCopyFloatReveal 1.0s cubic-bezier(.22, 1, .36, 1) .12s forwards;
}

/* 2. 英語上段：日本語完了後、少し間を置いて開始 */
.is-loaded .top-kv-en-wrap-1 .top-kv-en {
	animation: kvEnLeftReveal 0.85s cubic-bezier(.16, 1, .3, 1) 1.20s forwards;
}

/* ふわふわはwrap側。表示完了後に開始 */
.is-loaded .top-kv-en-wrap-1 {
	animation: kvTitleFloatWrap1 8s ease-in-out 2.25s infinite;
}

/* 3. 英語下段 */
.is-loaded .top-kv-en-wrap-2 .top-kv-en {
	animation: kvEnLeftReveal 0.85s cubic-bezier(.16, 1, .3, 1) 1.78s forwards;
}

/* ふわふわはwrap側。上段より少し遅れて開始 */
.is-loaded .top-kv-en-wrap-2 {
	animation: kvTitleFloatWrap2 9s ease-in-out 2.80s infinite;
}

/* 4. リード文 */
.is-loaded .top-kv-text {
	animation: kvLeadReveal .82s cubic-bezier(.22, 1, .36, 1) 2.55s forwards;
}

/* 5. ボタン */
.is-loaded .top-btn {
	animation: kvLeadReveal .82s cubic-bezier(.22, 1, .36, 1) 2.82s forwards;
}


@keyframes kvCopyFloatReveal {
	0% {
		opacity: 0;
		transform: translate3d(0, 12px, 0);
		filter: blur(5px);
	}

	62% {
		opacity: 1;
		filter: blur(1px);
	}

	100% {
		opacity: 1;
		transform: translate3d(0, 0, 0);
		filter: blur(0);
	}
}

@keyframes kvEnLeftReveal {
	0% {
		opacity: 0;
		transform: translate3d(-22px, 0, 0);
		filter: blur(5px);
		clip-path: inset(0 100% 0 0);
	}

	34% {
		opacity: .58;
		filter: blur(3px);
	}

	74% {
		opacity: 1;
		filter: blur(.5px);
	}

	100% {
		opacity: 1;
		transform: translate3d(0, 0, 0);
		filter: blur(0);
		clip-path: inset(0 0 0 0);
	}
}

@keyframes kvLeadReveal {
	0% {
		opacity: 0;
		transform: translate3d(0, 12px, 0);
		filter: blur(5px);
	}

	100% {
		opacity: 1;
		transform: translate3d(0, 0, 0);
		filter: blur(0);
	}
}

/* 英語画像の微浮遊：上段 */
@keyframes kvTitleFloatWrap1 {
	0% {
		transform: translate3d(0, 0, 0);
	}

	50% {
		transform: translate3d(0, -4px, 0);
	}

	100% {
		transform: translate3d(0, 0, 0);
	}
}

/* 英語画像の微浮遊：下段 */
@keyframes kvTitleFloatWrap2 {
	0% {
		transform: translate3d(0, 0, 0);
	}

	50% {
		transform: translate3d(0, 5px, 0);
	}

	100% {
		transform: translate3d(0, 0, 0);
	}
}

/* =========================================
	newtop animation
	BtoB向け：軽量・控えめなアニメーション
========================================= */

/* 初期状態：blurは重くなりやすいので使わない */
.js-reveal {
	opacity: 0;
	transform: translate3d(0, 14px, 0);

	transition:
		opacity .55s cubic-bezier(.22, 1, .36, 1),
		transform .55s cubic-bezier(.22, 1, .36, 1);
}

/* 表示状態 */
.js-reveal.is-revealed {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}


/* =========================================
	Solution step
	1個ずつ「しゅんしゅん」表示
========================================= */

.solution-step.js-reveal {
	opacity: 0;
	transform: translate3d(20px, 8px, 0);

	transition:
		opacity .42s cubic-bezier(.16, 1, .3, 1),
		transform .42s cubic-bezier(.16, 1, .3, 1);
}

.solution-step.js-reveal.is-revealed {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

/* 1個ずつ確実に見えるよう、少しだけ間隔を空ける */
.solution-step.js-reveal[data-reveal-delay="1"] {
	transition-delay: .00s;
}

.solution-step.js-reveal[data-reveal-delay="2"] {
	transition-delay: .14s;
}

.solution-step.js-reveal[data-reveal-delay="3"] {
	transition-delay: .28s;
}

.solution-step.js-reveal[data-reveal-delay="4"] {
	transition-delay: .42s;
}


/* =========================================
	その他リスト系：控えめ
========================================= */

.event-heading.js-reveal,
.case-card.js-reveal,
.services-section .section-title.js-reveal,
.group-layout.js-reveal {
	transform: translate3d(0, 16px, 0);
}

.event-item.js-reveal,
.information-item.js-reveal,
.top-service-item.js-reveal,
.bottom-link-card.js-reveal {
	transform: translate3d(0, 12px, 0);
}

.event-item.js-reveal[data-reveal-delay="1"],
.information-item.js-reveal[data-reveal-delay="1"],
.top-service-item.js-reveal[data-reveal-delay="1"],
.bottom-link-card.js-reveal[data-reveal-delay="1"] {
	transition-delay: .00s;
}

.event-item.js-reveal[data-reveal-delay="2"],
.information-item.js-reveal[data-reveal-delay="2"],
.top-service-item.js-reveal[data-reveal-delay="2"],
.bottom-link-card.js-reveal[data-reveal-delay="2"] {
	transition-delay: .08s;
}

.event-item.js-reveal[data-reveal-delay="3"],
.information-item.js-reveal[data-reveal-delay="3"],
.top-service-item.js-reveal[data-reveal-delay="3"] {
	transition-delay: .16s;
}

.event-item.js-reveal[data-reveal-delay="4"],
.information-item.js-reveal[data-reveal-delay="4"],
.top-service-item.js-reveal[data-reveal-delay="4"] {
	transition-delay: .24s;
}

.event-item.js-reveal[data-reveal-delay="5"],
.information-item.js-reveal[data-reveal-delay="5"] {
	transition-delay: .32s;
}


/* =========================================
	service card hover refinement
	軽めに調整
========================================= */

.service-card {
	transition:
		opacity .22s ease,
		transform .22s ease;
}

.service-card:hover {
	opacity: .88;
	transform: translateY(-2px);
}

.service-card::after {
	transition: transform .22s ease;
}

.service-card:hover::after {
	transform: translate3d(2px, -2px, 0);
}

.service-card-external .nav-external__icon {
	transition: transform .22s ease;
}

.service-card-external:hover .nav-external__icon {
	transform: translate3d(2px, -2px, 0);
}


/* =========================================
	bottom link hover refinement
	重くならない程度
========================================= */

.bottom-link-card:hover {
	transform: translateY(-2px);
	filter: brightness(1.03);
}

/* =========================================
	reduced motion
========================================= */

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

	.top-bg-area > .top-bg-gradation,
	.top-kv-en,
	.top-kv-en-wrap,
	.top-kv-copy,
	.top-kv-text,
	.top-btn,
	.js-reveal,
	.js-reveal.is-revealed,
	.solution-step.js-reveal,
	.solution-step.js-reveal.is-revealed {
		animation: none !important;
		transform: none !important;
		opacity: 1 !important;
		filter: none !important;
		clip-path: none !important;
		transition: none !important;
	}

	.service-card:hover,
	.bottom-link-card:hover,
	.service-card:hover::after,
	.service-card-external:hover .nav-external__icon {
		transform: none !important;
	}
}