/**
 * Bricks Counter Animation
 * assets/css/counter-animation.css
 */

.brx-counter-wrap {
	display: inline-flex;
	align-items: baseline;
	gap: 0.1em;
}

.brx-counter-prefix,
.brx-counter-suffix {
	display: inline-block;
}

.brx-counter-number {
	display: inline-block;
}

/* ── Special Effects ─────────────────────────── */

.brx-fx-glitch {
	animation: brxGlitch 0.12s steps(1) forwards;
}
@keyframes brxGlitch {
	0%   { transform: translate(0, 0);      color: inherit; }
	20%  { transform: translate(-2px, 1px); color: #5c4aff; }
	40%  { transform: translate(2px, -1px); color: #ff4a7f; }
	60%  { transform: translate(-1px, 0);   color: inherit; }
	80%  { transform: translate(1px, 1px);  color: #5c4aff; }
	100% { transform: translate(0, 0);      color: inherit; }
}

.brx-fx-pulse {
	animation: brxPulse 0.3s ease-out forwards;
}
@keyframes brxPulse {
	0%   { text-shadow: none; }
	40%  { text-shadow: 0 0 20px currentColor, 0 0 50px currentColor; }
	100% { text-shadow: none; }
}

.brx-fx-slot {
	animation: brxSlot 0.1s ease forwards;
}
@keyframes brxSlot {
	0%   { transform: translateY(0)     scaleY(1);   opacity: 1; }
	50%  { transform: translateY(-12px) scaleY(0.3); opacity: 0.3; }
	100% { transform: translateY(0)     scaleY(1);   opacity: 1; }
}

.brx-fx-flip {
	animation: brxFlip 0.18s ease-in-out forwards;
}
@keyframes brxFlip {
	0%   { transform: rotateX(0deg); }
	50%  { transform: rotateX(90deg); }
	100% { transform: rotateX(0deg); }
}