.poof {
	position: fixed;
	z-index: 100;
	width: 0;
	height: 0;
	pointer-events: none;
	/* lasts as long as its children, so the host can remove it */
	animation: poof-life 0.7s linear forwards;
}
.poof-puff {
	position: absolute;
	left: -11px;
	top: -11px;
	width: 22px;
	height: 22px;
	border-radius: 9999px;
	background: radial-gradient(circle at 35% 35%, #fff, #d4d0cc 60%, #a8a29e);
	opacity: 0;
	animation: poof-puff 0.7s ease-out forwards;
}
.poof-spark {
	position: absolute;
	left: -2px;
	top: -2px;
	width: 4px;
	height: 4px;
	border-radius: 9999px;
	background: var(--spark);
	box-shadow: 0 0 6px 1px var(--spark);
	animation: poof-spark 0.6s ease-out forwards;
}
@keyframes poof-life {
	to {
		visibility: hidden;
	}
}
@keyframes poof-puff {
	0% {
		opacity: 0.95;
		transform: translate(0, 0) scale(0.3);
	}
	60% {
		opacity: 0.6;
	}
	100% {
		opacity: 0;
		transform: translate(var(--dx), var(--dy)) scale(var(--s));
	}
}
@keyframes poof-spark {
	0% {
		opacity: 1;
		transform: translate(0, 0) scale(1);
	}
	100% {
		opacity: 0;
		transform: translate(var(--dx), var(--dy)) scale(0.2);
	}
}

/* The currency a sale gave: floats up out of the puff without stopping, fading out in the second half */
.poof-gain {
	position: fixed;
	z-index: 100;
	width: 36px;
	height: 36px;
	margin: -18px 0 0 -18px;
	pointer-events: none;
	opacity: 0;
	animation: poof-gain 2s ease-out forwards;
}
@keyframes poof-gain {
	0% {
		opacity: 0;
		transform: translateY(0) scale(0.5);
	}
	10% {
		opacity: 1;
		transform: translateY(-14px) scale(1);
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: translateY(-90px) scale(1);
	}
}