/* Border beam (after Magic UI "border-beam"): a short bright beam in --kfx-c travels around the card's edge over a
 * faint hairline. Conic gradient spun with an @property angle, masked to a 1.5px ring. Browsers without
 * @property show the beam parked on one corner, which still reads as an accent. */
@property --kfx-beam-a {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}
.kfx-border-beam { position: relative; }
.kfx-border-beam::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	padding: var(--kfx-bb-w, 1.5px);
	border-radius: inherit;
	pointer-events: none;
	--kfx-beam-a: 0deg;
	background:
		conic-gradient(
			from var(--kfx-beam-a),
			transparent 0deg 296deg,
			color-mix(in oklab, var(--kfx-c) 25%, transparent) 318deg,
			var(--kfx-c) 346deg,
			color-mix(in oklab, var(--kfx-c) 35%, #fff) 356deg,
			transparent 360deg
		),
		linear-gradient(color-mix(in oklab, currentColor 9%, transparent) 0 0);
	-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);
	animation: kfx-border-beam calc(7s * var(--kfx-s)) linear infinite;
}
.wp-block-image.is-style-rounded.kfx-border-beam::after { border-radius: 9999px; }
@keyframes kfx-border-beam {
	to { --kfx-beam-a: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
	.kfx-border-beam::after { animation: none !important; --kfx-beam-a: 135deg; }
}