// Resets CSS animation based on keyframes.
System.resetAnimation = function (elements)
{
	elements.forEach(element =>
	{
		element.style.animation = 'none';
		element.offsetHeight; // Trigger reflow.
		element.style.animation = null;
	});
}

const map = $('.map');
map
	.css('--current-position-y', getComputedStyle(map[0]).backgroundPositionY)
	.css('--direction', position.y > 0 ? '-1' : '1') // Map is scrolled in opposite direction.
	.css('--speed', Math.abs(position.y).toString());

System.resetAnimation([map[0]]);

@keyframes move-map-bg_map
{
	from
	{
		background-position-y: var(--current-position-y);
	}

	to
	{
		background-position-y: calc(var(--current-position-y) + var(--direction) * var(--city-map-size));
	}
}