/**
 * クリックした瞬間、「枠」の4隅のコーナーブラケットがクリック位置から
 * パッと外側へ弾けて消える演出。サイト全体共通（click-burst.js側でイベントを発行）。
 */
.click-burst {
	position: fixed;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	pointer-events: none;
	z-index: var(--z-toast);
}

.click-burst__mark {
	position: absolute;
	top: 0;
	left: 0;
	width: 10px;
	height: 10px;
	opacity: 1;
	animation: click-burst-fly 0.55s var(--ease-out-expo) forwards;
}

.click-burst__mark--tl {
	border-top: 2px solid var(--color-accent-bright);
	border-left: 2px solid var(--color-accent-bright);
	--burst-x: -16px;
	--burst-y: -16px;
}

.click-burst__mark--tr {
	border-top: 2px solid var(--color-accent-bright);
	border-right: 2px solid var(--color-accent-bright);
	--burst-x: 16px;
	--burst-y: -16px;
}

.click-burst__mark--bl {
	border-bottom: 2px solid var(--color-accent-bright);
	border-left: 2px solid var(--color-accent-bright);
	--burst-x: -16px;
	--burst-y: 16px;
}

.click-burst__mark--br {
	border-bottom: 2px solid var(--color-accent-bright);
	border-right: 2px solid var(--color-accent-bright);
	--burst-x: 16px;
	--burst-y: 16px;
}

@keyframes click-burst-fly {
	0% {
		transform: translate(-50%, -50%) scale(0.6);
		opacity: 1;
	}
	100% {
		transform: translate(calc(-50% + var(--burst-x)), calc(-50% + var(--burst-y))) scale(1.15);
		opacity: 0;
	}
}