/* =============================
   CMI Lazy Cards
   検索ページ・個別一覧ページ共通

   PC：
   スクロール追加時にDOM順でパラパラ表示

   SP：
   カードが画面内に入った瞬間に
   1枚ずつふわっと表示
============================= */


/* =============================
   hidden
   JS初期化前・追加前のカードを確実に非表示
   common.css 側の display:block!important 対策も含む
============================= */

.cmiSearchCards__item.is-cmi-search-lazy-hidden,
.cmiHomeCards__item.is-cmi-archive-lazy-hidden,
.cmiHomeCards__item.is-cmi-lazy-hidden,
#container.cmiArchiveCardsPage .cmiHomeCards__grid--archive > .cmiHomeCards__item.is-cmi-archive-lazy-hidden,
#container.cmiArchiveCardsPage .cmiHomeCards__grid--archive > .cmiHomeCards__item.is-cmi-lazy-hidden{
	display: none !important;
}


/* =============================
   wait
   SP用：
   HTML上には配置するが、画面内に入るまで透明
============================= */

.cmiSearchCards__item.is-cmi-search-lazy-wait,
.cmiHomeCards__item.is-cmi-archive-lazy-wait,
.cmiHomeCards__item.is-cmi-lazy-wait,
#container.cmiArchiveCardsPage .cmiHomeCards__grid--archive > .cmiHomeCards__item.is-cmi-archive-lazy-wait,
#container.cmiArchiveCardsPage .cmiHomeCards__grid--archive > .cmiHomeCards__item.is-cmi-lazy-wait{
	display: block !important;
	opacity: 0 !important;
	transform: translateY(40px) scale(0.99) !important;
	transition: none !important;
	animation: none !important;
	will-change: opacity, transform;
}


/* =============================
   visible
   表示済みカード
   アニメーション完了後の最終状態
============================= */

.cmiSearchCards__item.is-cmi-search-lazy-enter,
.cmiSearchCards__item.is-cmi-search-lazy-visible,
.cmiHomeCards__item.is-cmi-archive-lazy-enter,
.cmiHomeCards__item.is-cmi-archive-lazy-visible,
.cmiHomeCards__item.is-cmi-lazy-enter,
.cmiHomeCards__item.is-cmi-lazy-visible,
#container.cmiArchiveCardsPage .cmiHomeCards__grid--archive > .cmiHomeCards__item.is-cmi-archive-lazy-visible,
#container.cmiArchiveCardsPage .cmiHomeCards__grid--archive > .cmiHomeCards__item.is-cmi-lazy-visible{
	display: block !important;
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
	animation: none !important;
	will-change: auto !important;
}


/* =============================
   reveal / PC default
   PCはテンポよく、ただし一瞬ではなく見える速度
============================= */

.cmiSearchCards__item.is-cmi-search-lazy-reveal,
.cmiHomeCards__item.is-cmi-archive-lazy-reveal,
.cmiHomeCards__item.is-cmi-lazy-reveal,
#container.cmiArchiveCardsPage .cmiHomeCards__grid--archive > .cmiHomeCards__item.is-cmi-archive-lazy-reveal,
#container.cmiArchiveCardsPage .cmiHomeCards__grid--archive > .cmiHomeCards__item.is-cmi-lazy-reveal{
	display: block !important;
	opacity: 0;
	transform: translateY(22px);
	animation-name: cmiLazyCardsReveal;
	animation-duration: 0.95s;
	animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
	animation-fill-mode: both;
	will-change: opacity, transform;
}

@keyframes cmiLazyCardsReveal{
	0%{
		opacity: 0;
		transform: translateY(22px);
	}
	35%{
		opacity: 0.65;
	}
	100%{
		opacity: 1;
		transform: translateY(0);
	}
}


/* =============================
   SP
   スマホはさらにゆっくり、ふわっと表示
============================= */

@media screen and (max-width: 767px){

	.cmiSearchCards__item.is-cmi-search-lazy-wait,
	.cmiHomeCards__item.is-cmi-archive-lazy-wait,
	.cmiHomeCards__item.is-cmi-lazy-wait,
	#container.cmiArchiveCardsPage .cmiHomeCards__grid--archive > .cmiHomeCards__item.is-cmi-archive-lazy-wait,
	#container.cmiArchiveCardsPage .cmiHomeCards__grid--archive > .cmiHomeCards__item.is-cmi-lazy-wait{
		display: block !important;
		opacity: 0 !important;
		transform: translateY(56px) scale(0.982) !important;
		transition: none !important;
		animation: none !important;
		will-change: opacity, transform;
	}

	.cmiSearchCards__item.is-cmi-search-lazy-reveal,
	.cmiHomeCards__item.is-cmi-archive-lazy-reveal,
	.cmiHomeCards__item.is-cmi-lazy-reveal,
	#container.cmiArchiveCardsPage .cmiHomeCards__grid--archive > .cmiHomeCards__item.is-cmi-archive-lazy-reveal,
	#container.cmiArchiveCardsPage .cmiHomeCards__grid--archive > .cmiHomeCards__item.is-cmi-lazy-reveal{
		display: block !important;
		opacity: 0;
		transform: translateY(56px) scale(0.982);
		animation-name: cmiLazyCardsRevealSp;
		animation-duration: 2.2s;
		animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
		animation-fill-mode: both;
		will-change: opacity, transform;
	}

	@keyframes cmiLazyCardsRevealSp{
		0%{
			opacity: 0;
			transform: translateY(56px) scale(0.982);
		}
		35%{
			opacity: 0.55;
		}
		65%{
			opacity: 0.9;
		}
		100%{
			opacity: 1;
			transform: translateY(0) scale(1);
		}
	}
}


/* =============================
   prefers-reduced-motion
   アニメーション軽減設定
============================= */

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

	.cmiSearchCards__item.is-cmi-search-lazy-hidden,
	.cmiHomeCards__item.is-cmi-archive-lazy-hidden,
	.cmiHomeCards__item.is-cmi-lazy-hidden,
	#container.cmiArchiveCardsPage .cmiHomeCards__grid--archive > .cmiHomeCards__item.is-cmi-archive-lazy-hidden,
	#container.cmiArchiveCardsPage .cmiHomeCards__grid--archive > .cmiHomeCards__item.is-cmi-lazy-hidden{
		display: none !important;
	}

	.cmiSearchCards__item.is-cmi-search-lazy-wait,
	.cmiSearchCards__item.is-cmi-search-lazy-reveal,
	.cmiSearchCards__item.is-cmi-search-lazy-enter,
	.cmiSearchCards__item.is-cmi-search-lazy-visible,
	.cmiHomeCards__item.is-cmi-archive-lazy-wait,
	.cmiHomeCards__item.is-cmi-archive-lazy-reveal,
	.cmiHomeCards__item.is-cmi-archive-lazy-enter,
	.cmiHomeCards__item.is-cmi-archive-lazy-visible,
	.cmiHomeCards__item.is-cmi-lazy-wait,
	.cmiHomeCards__item.is-cmi-lazy-reveal,
	.cmiHomeCards__item.is-cmi-lazy-enter,
	.cmiHomeCards__item.is-cmi-lazy-visible,
	#container.cmiArchiveCardsPage .cmiHomeCards__grid--archive > .cmiHomeCards__item.is-cmi-archive-lazy-wait,
	#container.cmiArchiveCardsPage .cmiHomeCards__grid--archive > .cmiHomeCards__item.is-cmi-archive-lazy-reveal,
	#container.cmiArchiveCardsPage .cmiHomeCards__grid--archive > .cmiHomeCards__item.is-cmi-archive-lazy-visible,
	#container.cmiArchiveCardsPage .cmiHomeCards__grid--archive > .cmiHomeCards__item.is-cmi-lazy-wait,
	#container.cmiArchiveCardsPage .cmiHomeCards__grid--archive > .cmiHomeCards__item.is-cmi-lazy-reveal,
	#container.cmiArchiveCardsPage .cmiHomeCards__grid--archive > .cmiHomeCards__item.is-cmi-lazy-visible{
		display: block !important;
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
		transition: none !important;
		will-change: auto !important;
	}
}


/* =============================
   sentinel
============================= */

.cmiLazyCardsSentinel{
	width: 100%;
	height: 1px;
	margin: 0;
	padding: 0;
	pointer-events: none;
}