/*
 * SMB Box Hover: ボックスのマウスホバー効果
 *
 * Snow Monkey Blocks のボックスは
 *   .smb-box（外枠）> .smb-box__background（背景・枠線） + .smb-box__body（中身）
 * という構造で、枠線・背景は __background に描かれる。
 * ホバー用の背景・枠線は疑似要素（::before / ::after）に重ねて描き、不透明度でフェードさせる。
 * 元の枠線はホバー中だけ透明にして、二重に見えないようにしている。
 * 動きは hover 可能な端末（PC等）のみ。
 */
.smbhv {
	isolation: isolate;
	transition-property: transform, box-shadow, color;
	transition-duration: var(--smbhv-duration, 0.3s);
	transition-timing-function: ease;
}

.smbhv > .smb-box__background {
	z-index: 0;
	transition: border-color var(--smbhv-duration, 0.3s) ease;
}

.smbhv > .smb-box__body {
	z-index: 2;
}

/* ホバー用レイヤー（背景＝::before、枠線＝::after）。普段は透明。 */
.smbhv--bg::before,
.smbhv--border::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	box-sizing: border-box;
	border-radius: var(--smb-box--border-radius, inherit);
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--smbhv-duration, 0.3s) ease;
}

.smbhv--bg::before {
	background: var(--smbhv-bg);
}

.smbhv--border::after {
	border: var(--smbhv-border-width, 1px) var(--smbhv-border-style, solid) var(--smbhv-border-color, currentColor);
}

/* グラデーション枠線：マスクで内側をくり抜いてリング状にする */
.smbhv--border-grad::after {
	border: 0;
	padding: var(--smbhv-border-width, 1px);
	background: var(--smbhv-border-bg);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

@media (hover: hover) {
	.smbhv:hover {
		transform: translateY(var(--smbhv-lift, 0)) scale(var(--smbhv-scale, 1));
	}

	.smbhv--bg:hover::before,
	.smbhv--border:hover::after {
		opacity: 1;
	}

	/* 元の枠線を隠す（ホバー用の枠線とずれて二重に見えるのを防ぐ） */
	.smbhv--border:hover {
		--smb-box--border-color: transparent;
	}

	.smbhv--shadow:hover {
		box-shadow: var(--smbhv-shadow);
	}

	.smbhv--radius:hover {
		--smb-box--border-radius: var(--smbhv-radius);
	}

	.smbhv--text:hover {
		--smb-box--color: var(--smbhv-text);
	}

	.smbhv--text:hover :where(h1, h2, h3, h4, h5, h6, p, li, a, span) {
		color: var(--smbhv-text);
	}
}