/* button-sparkle.css
   v1781 (Zeke): additive gold TWINKLE (20 stars) + a 3s GLEAM sweep for the Play Free Now + Subscribe
   buttons. It does NOT touch their pulse / size / gradient / text -- it only adds a sparkle layer BEHIND
   the label and a shine ON TOP. Applied by frontendButtonSparkle.js, which tags each target button with
   .has-sparkle and injects a .btn-spk layer of .btn-star glints. Prototyped in ottb-tools/sparkle-button-mockup.html
   (Sparkle 1 "Twinkle" at 4x = 20 stars, + gleam). */

.has-sparkle {
	position: relative;   /* containing block for the sparkle layer + the gleam */
	overflow: hidden;     /* v1803 (Zeke): CLIP the sparkle layers to the button box. v1793 set this VISIBLE so
	                         perimeter stars could spill PAST the edge, but on a button near the right playfield
	                         boundary (esp. the death-screen Subscribe button) that spill extended past the
	                         viewport -> a horizontal scrollbar popped up. Clipping keeps every star inside the
	                         button (well within the playable screen). The pulse's box-shadow glow is NOT clipped
	                         by overflow (it paints outside the box), so the pulse look is unchanged; the GLEAM has
	                         its own clip in .btn-gleam. */
	isolation: isolate;   /* own stacking context so .btn-spk (z-index:-1) sits ABOVE the gold gradient
	                         but BELOW the label text, and the .btn-gleam sweep sits above everything */
}

/* Sparkle layer -- behind the label. v1803: overflow HIDDEN clips perimeter stars at the button edge so a
   near-boundary button's sparkles can't spill off-screen and trigger a scrollbar (reverts v1793's spill). */
.btn-spk {
	position: absolute;
	inset: 0;
	z-index: -1;          /* above the button background (step 1), below the in-flow label text */
	pointer-events: none;
	border-radius: inherit;
	overflow: hidden;
}
.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); }
}

/* Gleam layer -- its OWN clipped box (v1793), so the diagonal sweep stays inside the button even though
   .has-sparkle now overflows for the stars. Sits above the label (z-index:2). */
.btn-gleam {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	border-radius: inherit;
	overflow: hidden;     /* clips the sweep to the button shape */
}
/* The shine itself -- a diagonal bar crossing left->right once every 3s (~0.48s of the cycle). */
.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; }
}