// ============================================================================
// :: Map
// ============================================================================
.m-map {
	position: relative;
}

// ============================================================================
// :: Elements
// ============================================================================
.m-map__visual {
	max-width: 100%;
	height: auto;
}

.m-map__pin {
	position: absolute;

	width: 2.6rem;
	height: 3.4rem;
	object-fit: contain;

	opacity: 0;
}

// ============================================================================
// :: States
// ============================================================================
.m-map__pin {

	&.is-shown {
		opacity: 1;

		transform-origin: 50% 100%;

		animation: bounce 0.6s ease-out;
	}
}

@keyframes bounce {

	0% {
		transform: translateY(0) scale(1.2, 0.8);
		transform-origin: 50% 100%;
	}

	25% {
		transform: translateY(-1rem) scale(0.9, 1.1);
	}

	75% {
		transform: translateY(0) scale(1, 1);
	}

	100% {
		transform: translateY(0) scale(1, 1);
		transform-origin: 50% 100%;
	}
}