/* Shine border (after Magic UI "shine-border"): a slow radial shine in --kfx-c travels around a hairline border.
 * Ring = ::after with padding = border width, masked to the padding band (content-box excluded).
 * On core/button the ring goes on the visible link, not the wrapper. */
.kfx-shine-border:not(.wp-block-button),
.kfx-shine-border.wp-block-button > .wp-block-button__link {
	position: relative;
}
.kfx-shine-border:not(.wp-block-button)::after,
.kfx-shine-border.wp-block-button > .wp-block-button__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	padding: var(--kfx-sb-w, 1.5px);
	border-radius: inherit;
	pointer-events: none;
	background-image: radial-gradient(
		transparent,
		transparent,
		var(--kfx-c),
		color-mix(in oklab, var(--kfx-c) 45%, #fff),
		color-mix(in oklab, var(--kfx-c) 70%, transparent),
		transparent,
		transparent
	);
	background-size: 300% 300%;
	background-position: 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-shine-border calc(14s * var(--kfx-s)) linear infinite;
}
.kfx-shine-border.wp-block-button > .wp-block-button__link::after { --kfx-sb-w: 2px; }
.wp-block-image.is-style-rounded.kfx-shine-border::after { border-radius: 9999px; }
@keyframes kfx-shine-border {
	0% { background-position: 0% 0%; }
	50% { background-position: 100% 100%; }
	100% { background-position: 0% 0%; }
}
@media (prefers-reduced-motion: reduce) {
	.kfx-shine-border:not(.wp-block-button)::after,
	.kfx-shine-border.wp-block-button > .wp-block-button__link::after { animation: none !important; background-position: 25% 25%; }
}