/**
 * CVポイントのホバーエフェクト。エフェクトを設定したCVポイントが表示される記事だけで読み込まれる。
 * inline style では :hover を書けないため、この小さなCSSでクラス単位に効果を付ける。
 * クラスは hcp-fx-{key}（keyは class-hcp-cpt.php の hover_effects と対応）。
 */

/* 共通: なめらかな遷移。マウスカーソルもポインタに */
.hotice-cvp[class*="hcp-fx-"] {
	transition: transform .28s ease, box-shadow .28s ease, filter .28s ease, opacity .28s ease;
	cursor: pointer;
	will-change: transform;
}

/* ズーム: 画像だけを拡大。はみ出しをクリップ */
.hotice-cvp.hcp-fx-zoom { overflow: hidden; }
.hotice-cvp-banner.hcp-fx-zoom { border-radius: 10px; }
.hotice-cvp.hcp-fx-zoom img { transition: transform .35s ease; }
.hotice-cvp.hcp-fx-zoom:hover img { transform: scale(1.06); }

/* 浮き上がる: 上に動いて影 */
.hotice-cvp.hcp-fx-lift:hover {
	transform: translateY(-5px);
	box-shadow: 0 12px 26px rgba(0, 0, 0, .16);
}

/* 影を強調 */
.hotice-cvp.hcp-fx-shadow:hover {
	box-shadow: 0 10px 30px rgba(0, 0, 0, .24);
}

/* 明るくなる */
.hotice-cvp.hcp-fx-brighten:hover { filter: brightness(1.09); }

/* 少し透過 */
.hotice-cvp.hcp-fx-fade:hover { opacity: .86; }

/* 脈動: 常時ゆっくり拡縮して注目を集める。ホバーで停止 */
.hotice-cvp.hcp-fx-pulse { animation: hcpPulse 2.4s ease-in-out infinite; }
.hotice-cvp.hcp-fx-pulse:hover { animation-play-state: paused; transform: scale(1.03); }
@keyframes hcpPulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.025); }
}

/* アクセシビリティ: 動きを減らす設定の人には動きを止める */
@media (prefers-reduced-motion: reduce) {
	.hotice-cvp[class*="hcp-fx-"],
	.hotice-cvp.hcp-fx-zoom img { transition: none; }
	.hotice-cvp.hcp-fx-pulse { animation: none; }
	.hotice-cvp.hcp-fx-lift:hover,
	.hotice-cvp.hcp-fx-zoom:hover img,
	.hotice-cvp.hcp-fx-pulse:hover { transform: none; }
}