/* ==========================================================================
   ビルドアップ（Build-up）
   一覧の子要素が段階的に下から現れる / 消えるアニメーション。
   親に is-build-up-entering / is-build-up-leaving（旧 is-entering / is-leaving も可）
   ========================================================================== */

:root {
	--anim-build-up-duration: 0.78s;
	--anim-build-up-stagger: 0.14s;
	--anim-build-up-stagger-out: 0.05s;
	/* スクロールイン（REASON 等）— transition のみ。clip-path は使わない */
	--anim-build-up-scroll-duration: 0.95s;
	--anim-build-up-scroll-stagger: 0.18s;
}

@keyframes tokaiurban-build-up-in {
	from {
		opacity: 0;
		transform: translate3d(14px, 20px, 0) scale(0.98);
		clip-path: inset(100% 0 0 0);
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(1);
		clip-path: inset(0 0 0 0);
	}
}

@keyframes tokaiurban-build-up-out {
	from {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(1);
		clip-path: inset(0 0 0 0);
	}

	to {
		opacity: 0;
		transform: translateY(-12px) scale(0.98);
		clip-path: inset(0 0 100% 0);
	}
}

/* 新名称（推奨） */
.is-build-up-leaving .js-anim-build-up__item,
.is-leaving .js-anim-build-up__item {
	animation: tokaiurban-build-up-out 0.4s cubic-bezier(0.55, 0, 1, 0.45) both;
	animation-delay: calc(var(--build-up-i, var(--list-i, 0)) * var(--anim-build-up-stagger-out));
}

.is-build-up-entering .js-anim-build-up__item,
.is-entering .js-anim-build-up__item {
	animation: tokaiurban-build-up-in var(--anim-build-up-duration) cubic-bezier(0.22, 1, 0.36, 1) both;
	animation-delay: calc(var(--build-up-i, var(--list-i, 0)) * var(--anim-build-up-stagger));
}

/* スクロールイン — opacity + わずかな移動（transition。再再生でちらつかない） */
.js-anim-build-up--scroll .js-anim-build-up__item {
	opacity: 0;
	transform: translate3d(8px, 10px, 0);
	transition: none;
	pointer-events: none;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.js-anim-build-up--scroll.is-build-up-inview .js-anim-build-up__item {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	pointer-events: auto;
	transition:
		opacity var(--anim-build-up-scroll-duration) cubic-bezier(0.22, 1, 0.36, 1),
		transform var(--anim-build-up-scroll-duration) cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: calc(var(--build-up-i, var(--list-i, 0)) * var(--anim-build-up-scroll-stagger));
}

/* SP スライダーなど：表示外の枚はビルドアップせず即表示 */
.js-anim-build-up--scroll.is-build-up-inview .js-anim-build-up__item.is-build-up-skip {
	transition: none;
	transition-delay: 0s;
}

/* タブ切替 + scroll 併用時：inview の transition 再実行でチラつくのを防止 */
.top-construction__panel:not(.is-active) .js-anim-build-up--scroll .js-anim-build-up__item,
.js-anim-build-up--scroll.is-build-up-tab-armed .js-anim-build-up__item {
	opacity: 0 !important;
	transform: translate3d(8px, 10px, 0);
	transition: none !important;
	pointer-events: none;
}

.top-construction__panel.is-build-up-entering .js-anim-build-up--scroll .js-anim-build-up__item {
	opacity: 0;
	transition: none !important;
}

.js-anim-build-up--scroll.is-build-up-tab-settled.is-build-up-inview .js-anim-build-up__item {
	opacity: 1;
	transform: none;
	transition: none !important;
	animation: none !important;
	pointer-events: auto;
}

/* 既存マークアップ互換（段階的に js-anim-build-up__item へ移行） */
.is-build-up-leaving .results-grid__item,
.is-build-up-leaving .top-notice-list__item,
.is-build-up-leaving .top-blog__item,
.is-build-up-leaving .topics-list__item,
.is-build-up-leaving .civil-grid__item,
.is-build-up-leaving .cblog-grid__item,
.is-leaving .results-grid__item,
.top-construction__panel.is-build-up-leaving .js-anim-build-up__item,
.top-construction__panel.is-leaving .results-grid__item,
.top-notice-panel.is-leaving .top-notice-list__item,
.top-blog__panel.is-leaving .top-blog__item,
.topics-panel.is-leaving .topics-list__item,
.results-panel.is-leaving .results-grid__item,
.civil-panel.is-leaving .civil-grid__item,
.cblog-panel.is-leaving .cblog-grid__item {
	animation: tokaiurban-build-up-out 0.35s cubic-bezier(0.55, 0, 1, 0.45) both;
	animation-delay: calc(var(--build-up-i, var(--list-i, var(--const-i, var(--topics-i, var(--blog-i, 0))))) * 0.04s);
}

.is-build-up-entering .results-grid__item,
.is-build-up-entering .top-notice-list__item,
.is-build-up-entering .top-blog__item,
.is-build-up-entering .topics-list__item,
.is-build-up-entering .civil-grid__item,
.is-build-up-entering .cblog-grid__item,
.is-entering .results-grid__item,
.top-construction__panel.is-build-up-entering .js-anim-build-up__item,
.top-construction__panel.is-entering .results-grid__item,
.top-notice-panel.is-entering .top-notice-list__item,
.top-blog__panel.is-entering .top-blog__item,
.topics-panel.is-entering .topics-list__item,
.results-panel.is-entering .results-grid__item,
.civil-panel.is-entering .civil-grid__item,
.cblog-panel.is-entering .cblog-grid__item {
	animation: tokaiurban-build-up-in var(--anim-build-up-duration) cubic-bezier(0.22, 1, 0.36, 1) both;
	animation-delay: calc(var(--build-up-i, var(--list-i, var(--const-i, var(--topics-i, var(--blog-i, 0))))) * var(--anim-build-up-stagger));
}

@media (prefers-reduced-motion: reduce) {
	.js-anim-build-up--scroll .js-anim-build-up__item,
	.js-anim-build-up--scroll .js-anim-build-up__item.is-build-up-skip {
		opacity: 1;
		transform: none;
		transition: none !important;
		pointer-events: auto;
	}

	.js-anim-build-up--scroll:not(.is-build-up-inview) .js-anim-build-up__item {
		opacity: 1;
	}

	.is-build-up-leaving .js-anim-build-up__item,
	.is-build-up-entering .js-anim-build-up__item,
	.is-leaving .js-anim-build-up__item,
	.is-entering .js-anim-build-up__item,
	.is-build-up-leaving .results-grid__item,
	.is-build-up-entering .results-grid__item,
	.is-leaving .results-grid__item,
	.is-entering .results-grid__item,
	.top-construction__panel.is-build-up-leaving .js-anim-build-up__item,
	.top-construction__panel.is-build-up-entering .js-anim-build-up__item,
	.top-construction__panel.is-leaving .results-grid__item,
	.top-construction__panel.is-entering .results-grid__item,
	.js-anim-build-up--scroll.is-build-up-tab-armed .js-anim-build-up__item,
	.top-notice-panel.is-leaving .top-notice-list__item,
	.top-notice-panel.is-entering .top-notice-list__item,
	.top-blog__panel.is-leaving .top-blog__item,
	.top-blog__panel.is-entering .top-blog__item,
	.topics-panel.is-leaving .topics-list__item,
	.topics-panel.is-entering .topics-list__item,
	.results-panel.is-leaving .results-grid__item,
	.civil-panel.is-leaving .civil-grid__item,
	.results-panel.is-entering .results-grid__item,
	.civil-panel.is-entering .civil-grid__item,
	.cblog-panel.is-leaving .cblog-grid__item,
	.cblog-panel.is-entering .cblog-grid__item {
		animation: none !important;
	}
}