/* Dot map: grey grid (PNG) + pins (inline SVG, same aspect ratio). */
.cm2w-dotmap {
	position: relative;
	width: 100%;
}

.cm2w-dotmap__base {
	display: block;
	width: 100%;
	height: auto;
}

.cm2w-dotmap__pins {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.cm2w-dotmap__pin,
.cm2w-dotmap__halo {
	transform-box: fill-box;
	transform-origin: center;
}

/* Hidden start state only once JS has armed the map (no JS = static map). */
.cm2w-dotmap.is-armed .cm2w-dotmap__base {
	opacity: 0;
	transform: translateY(8%);
}

.cm2w-dotmap.is-armed .cm2w-dotmap__pin {
	opacity: 0;
}

.cm2w-dotmap.is-in .cm2w-dotmap__base {
	opacity: 1;
	transform: none;
	transition: opacity 1.2s ease-out, transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --d = per-pin delay in ms, set by tools/build-dotmap.cjs */
.cm2w-dotmap.is-in .cm2w-dotmap__pin {
	animation: cm2w-dotmap-drop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both;
	animation-delay: calc(var(--d) * 1ms + 500ms);
}

.cm2w-dotmap.is-in .cm2w-dotmap__halo {
	animation: cm2w-dotmap-halo 1.1s ease-out both;
	animation-delay: calc(var(--d) * 1ms + 1200ms);
}

@keyframes cm2w-dotmap-drop {
	from {
		opacity: 0;
		transform: translateY(-70px);
	}
	40% {
		opacity: 1;
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes cm2w-dotmap-halo {
	from {
		transform: scale(1);
	}
	35% {
		transform: scale(2.6);
	}
	to {
		transform: scale(1);
	}
}

/* Hover spread: JS sets the transform, the overshoot easing matches the drop. */
.cm2w-dotmap__spot {
	transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-reduced-motion: reduce) {
	.cm2w-dotmap.is-armed .cm2w-dotmap__base,
	.cm2w-dotmap.is-armed .cm2w-dotmap__pin {
		opacity: 1;
		transform: none;
		animation: none;
		transition: none;
	}
}