/* 画像のマスク表示（追加CSSクラス pungi-mask） */
.pungi-mask {
	--pungi-mask-color: var(--wp--preset--color--unitone-accent, #80999C);
	position: relative;
	overflow: hidden;
}

.pungi-mask img {
	transition: transform 1.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.pungi-mask::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background-color: var(--pungi-mask-color);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 1.1s cubic-bezier(0.7, 0, 0.2, 1);
	pointer-events: none;
}

/* 表示前の状態（JSが動く環境だけ） */
.pungi-js .pungi-mask:not(.is-animated)::after {
	transform: scaleX(1);
	transform-origin: left center;
}

.pungi-js .pungi-mask:not(.is-animated) img {
	transform: scale(1.08);
}

/* ゴールドで覆いたい場合（ネイビー背景のセクション内など） */
.pungi-mask.is-gold {
	--pungi-mask-color: #C5A059;
}

/* 動きを減らす設定の人には、最初から写真を表示 */
@media (prefers-reduced-motion: reduce) {
	.pungi-mask::after {
		display: none;
	}
	.pungi-js .pungi-mask img {
		transform: none;
		transition: none;
	}
}