.has-sparkle {
	position: relative;    
	overflow: visible;
	isolation: isolate;    
}

.btn-spk {
	position: absolute;
	inset: 0;
	z-index: -1;           
	pointer-events: none;
	border-radius: inherit;
	overflow: visible;
}
.btn-star {
	position: absolute;
	width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
	background:
		radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,0) 70%),
		linear-gradient(0deg,  transparent 44%, rgba(255,245,200,.95) 50%, transparent 56%),
		linear-gradient(90deg, transparent 44%, rgba(255,245,200,.95) 50%, transparent 56%);
	filter: drop-shadow(0 0 3px rgba(255,220,120,.9));
	opacity: 0;
	animation: btn-twinkle 2.4s ease-in-out infinite;
}
@keyframes btn-twinkle {
	0%, 100% { opacity: 0;   transform: scale(.3)  rotate(0deg); }
	45%      { opacity: 1;   transform: scale(1)   rotate(45deg); }
	60%      { opacity: .25; transform: scale(.75) rotate(70deg); }
}

.btn-gleam {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	border-radius: inherit;
	overflow: hidden;      
}
.btn-gleam::after {
	content: '';
	position: absolute;
	top: -20%; bottom: -20%; left: 0;
	width: 45%;
	pointer-events: none;
	background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0) 20%, rgba(255,255,255,.85) 50%, rgba(255,255,255,0) 80%, transparent 100%);
	transform: translateX(-180%) skewX(-18deg);
	opacity: 0;
	mix-blend-mode: screen;
	animation: btn-gleam 3s ease-in-out infinite;
}
@keyframes btn-gleam {
	0%   { transform: translateX(-180%) skewX(-18deg); opacity: 0; }
	2%   { opacity: .95; }
	16%  { transform: translateX(320%)  skewX(-18deg); opacity: .95; }
	17%  { opacity: 0; }
	100% { transform: translateX(320%)  skewX(-18deg); opacity: 0; }
}