/*
 * ClickSmash AI-sparkle
 * Markeert alles wat door AI wordt gedaan of voorgesteld.
 * Gebruik: <cs-sparkle>AI</cs-sparkle>  of  <cs-sparkle state="thinking">AI</cs-sparkle>
 * States: idle (standaard), thinking (AI is bezig), done (AI is klaar), static (geen animatie)
 * Opties: tone="white" (wit, voor op een gekleurde achtergrond), density="medium" | "high" (meer sterretjes)
 */

cs-sparkle {
	--cs-sparkle-a: #ee7752;
	--cs-sparkle-b: #e73c7e;
	--cs-sparkle-c: #a314a8;
	--cs-sparkle-scale: 1;
	position: relative;
	display: inline-block;
	isolation: isolate;
}

cs-stars {
	position: absolute;
	inset: 0;
	pointer-events: none;
	font-size: calc(1em * var(--cs-sparkle-scale));
}

cs-stars svg {
	position: absolute;
	display: block;
	overflow: visible;
	fill: url(#cs-sparkle-wow);
	transform-box: fill-box;
	transform-origin: center;
}

/* the cluster: a big and a small star */
cs-stars .cs-big   { width: .6em; height: .6em; top: -.52em; right: -.46em; }
cs-stars .cs-small { width: .32em; height: .32em; top: -.2em; left: -.34em; }

/* glints, only with density="high": tiny stars that flash one after another */
cs-stars .cs-glint { display: none; }
cs-sparkle[density="high"] cs-stars .cs-glint { display: block; opacity: .2; animation: cs-glint var(--cs-dur, 2.6s) ease-in-out var(--cs-delay, 0s) infinite; }
/* a short, bright blink with a quarter turn, then back to a faint glow */
@keyframes cs-glint {
	0%, 62%, 100% { opacity: .2; transform: scale(.5) rotate(0deg); }
	70% { opacity: 1; transform: scale(1.25) rotate(45deg); }
	76% { opacity: .55; transform: scale(.8) rotate(70deg); }
	82% { opacity: 1; transform: scale(1.05) rotate(90deg); }
	90% { opacity: .2; transform: scale(.5) rotate(90deg); }
}

/* density="medium": three calm glints close to the word */
cs-stars .cs-glint-m { display: none; }
cs-sparkle[density="medium"] cs-stars .cs-glint-m { display: block; opacity: .35; animation: cs-glint var(--cs-dur, 4.6s) ease-in-out var(--cs-delay, 0s) infinite; }

/* with glints the main cluster steps back */
cs-sparkle[density="high"] cs-stars .cs-big   { width: .42em; height: .42em; top: -.36em; right: -.34em; }
cs-sparkle[density="high"] cs-stars .cs-small { width: .22em; height: .22em; top: -.12em; left: -.26em; }
cs-sparkle[density="high"] cs-stars .cs-big,
cs-sparkle[density="high"] cs-stars .cs-small { animation-name: cs-twinkle-soft; }
@keyframes cs-twinkle-soft {
	0%, 100% { transform: scale(.85) rotate(0deg); opacity: .8; }
	45% { transform: scale(1.12) rotate(-10deg); opacity: 1; }
	55% { transform: scale(.95) rotate(6deg); opacity: .9; }
}
cs-sparkle[density="high"] cs-stars .cs-big { animation-duration: 2.8s; }
cs-sparkle[density="high"] cs-stars .cs-small { animation-duration: 2.8s; }

/* white tone, for a coloured background */
cs-sparkle[tone="white"] cs-stars svg { fill: #fff; filter: drop-shadow(0 0 .05em rgba(255,255,255,.7)); }

/* idle: slow twinkle, the big star twists like the WOW block */
@keyframes cs-twinkle {
	0%, 100% { transform: scale(.8) rotate(0deg); opacity: .9; }
	45% { transform: scale(1.12) rotate(-12deg); opacity: 1; }
	60% { transform: scale(.95) rotate(8deg); }
}
/* every star gets its own --cs-delay (set per instance by cs-sparkle.js), so sparkles never blink in sync */
cs-sparkle cs-stars .cs-big   { animation: cs-twinkle 2.8s ease-in-out var(--cs-delay, 0s) infinite; }
cs-sparkle cs-stars .cs-small { animation: cs-twinkle 2.8s ease-in-out var(--cs-delay, 1.1s) infinite; }

/* thinking: the stars spin and flicker faster */
@keyframes cs-spin {
	from { transform: rotate(0deg) scale(.9); }
	50% { transform: rotate(180deg) scale(1.15); }
	to { transform: rotate(360deg) scale(.9); }
}
cs-sparkle[state="thinking"] cs-stars .cs-big   { animation: cs-spin .9s linear infinite; }
cs-sparkle[state="thinking"] cs-stars .cs-small { animation: cs-spin .9s linear .15s infinite reverse; }

/* done: one burst, then rest */
@keyframes cs-burst {
	0% { transform: scale(0) rotate(-90deg); }
	60% { transform: scale(1.45) rotate(15deg); }
	100% { transform: scale(1) rotate(0deg); }
}
cs-sparkle[state="done"] cs-stars svg { animation: cs-burst .6s cubic-bezier(.2,.9,.3,1.3) both; }
cs-sparkle[state="done"] cs-stars .cs-small { animation-delay: .08s; }

cs-sparkle[state="static"] cs-stars svg { animation: none; }

@media (prefers-reduced-motion: reduce) {
	cs-stars svg { animation: none !important; }
}