/* A currency stack that just grew: pulses that fade out over 5s */
@keyframes currency-glow {
	0%,
	20%,
	40%,
	60%,
	80% {
		box-shadow: 0 0 6px 1px color-mix(in oklab, var(--color-primary) 30%, transparent);
	}
	10% {
		box-shadow:
			0 0 18px 6px color-mix(in oklab, var(--color-primary) 90%, transparent),
			0 0 5px 1px var(--color-primary) inset;
		border-color: var(--color-primary);
	}
	30% {
		box-shadow:
			0 0 14px 4px color-mix(in oklab, var(--color-primary) 65%, transparent),
			0 0 4px 1px color-mix(in oklab, var(--color-primary) 65%, transparent) inset;
		border-color: var(--color-primary);
	}
	50% {
		box-shadow:
			0 0 10px 3px color-mix(in oklab, var(--color-primary) 45%, transparent),
			0 0 3px 1px color-mix(in oklab, var(--color-primary) 45%, transparent) inset;
	}
	70% {
		box-shadow: 0 0 7px 2px color-mix(in oklab, var(--color-primary) 25%, transparent);
	}
	90% {
		box-shadow: 0 0 4px 1px color-mix(in oklab, var(--color-primary) 12%, transparent);
	}
	100% {
		box-shadow: 0 0 0 0 color-mix(in oklab, var(--color-primary) 0%, transparent);
	}
}
.currency-glow {
	animation: currency-glow 5s ease-out;
}
@media (prefers-reduced-motion: reduce) {
	.currency-glow {
		animation: none;
	}
}

/* The slot a dragged currency goes to */
@keyframes currency-target {
	0%,
	100% {
		box-shadow: 0 0 8px 2px color-mix(in oklab, var(--color-success) 45%, transparent);
	}
	50% {
		box-shadow:
			0 0 18px 6px color-mix(in oklab, var(--color-success) 85%, transparent),
			0 0 5px 1px var(--color-success) inset;
	}
}
/* (above the neighbouring slots, which are drawn later and would cut its glow off) */
.currency-target {
	z-index: 20;
	border-color: var(--color-success);
	animation: currency-target 1s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
	.currency-target {
		animation: none;
		box-shadow: 0 0 14px 4px color-mix(in oklab, var(--color-success) 70%, transparent);
	}
}

@keyframes stash-flash {
	0%,
	100% {
		box-shadow: 0 0 0 0 transparent;
	}
	15%,
	55% {
		box-shadow: 0 0 16px 5px var(--flash);
	}
	35%,
	75% {
		box-shadow: 0 0 6px 1px var(--flash);
	}
}
.stash-flash {
	animation: stash-flash 2s ease-out;
}
@media (prefers-reduced-motion: reduce) {
	.stash-flash {
		animation: none;
		box-shadow: 0 0 10px 3px var(--flash);
	}
}

.currency-float {
	position: absolute;
	left: 0;
	right: 0;
	top: 20%;
	z-index: 10;
	text-align: center;
	font-size: 1rem;
	font-weight: 800;
	color: var(--color-primary);
	text-shadow: 0 1px 3px rgb(0 0 0 / 0.5);
	pointer-events: none;
	animation: currency-float 2s ease-out forwards;
}
@keyframes currency-float {
	0% {
		opacity: 0;
		transform: translateY(6px);
	}
	10% {
		opacity: 1;
	}
	60% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: translateY(-34px);
	}
}