.museum-map {
	background: var(--light-gray);
	
	position: relative;
	
	opacity: 0;
	
	&.loaded {
		transition: opacity 1s;
		opacity: 1;
	}
	
	.dot {
		position: absolute;
		background: var(--lighter-gray);
		border-radius: 9999px;
		aspect-ratio: 1;

		&.museum {
			background: var(--text) !important;
			
			&.primary {
				background: var(--accent) !important;
			}
		}
		
		z-index: 950;
		
		&.explode {
			background: var(--accent) !important;
			z-index: 1000;
			pointer-events: none;
			
			&.primary {
				background: var(--accent-diluted) !important;
			}
		}
		&.explode-next {
			transition: background 2000ms;
			background: transparent !important;
			z-index: 1000;
			pointer-events: none;
			
		}
		
		&.ambient-start {
			background: var(--accent-diluted);
		}
		&.ambient-end {
			transition: background 1000ms;
			background: var(--lighter-gray);
		}

		transition: scale 50ms linear;
		
		&.disappear {
			transition: scale 250ms linear;
			scale: 0;
		}
	}
	
	.info-wrapper {
		position: absolute;
		overflow: hidden;
		z-index: 2000;

		&.appear-start {
			width: 0 !important;
		}
		&.appear-end {
			transition: width 750ms var(--bezier);
			transition-delay: 100ms;
		}
		&.invisible {
			opacity: 0;
			pointer-events: none;
		}
		
		
		.info {
			background: var(--accent);
			color: var(--background);
			padding: 6px 10px;
			box-sizing: border-box;
			border-radius: 5px;
			position: absolute;
			left: 0;
			top: 0;
			
			user-select: none;
			
			font-size: var(--figcaption-font-size); 
			letter-spacing: .03em;
			line-height: 1.2;
			font-family: var(--font-selectric-un);
			
			.title,
			.location {
				white-space: nowrap;
			}
			
			.location {
				color: var(--accent-diluted);
			}
			
			.location + .title {
				margin-top: .5em;
			}
		}
	}
}

@media (prefers-color-scheme: dark) {
	.museum-map {
		background: var(--dark-gray);
	
		.dot {
			&.ambient-start {
				background: var(--accent);
			}
			
			&.explode {
				&.primary {
					background: var(--text) !important;
				}
			}

		}
		
		
	}
 
}

@media (width <= 767px) {
  .museum-map {
		border-top: var(--margin) solid var(--light-gray);		
		border-bottom: var(--margin) solid var(--light-gray);		
	}
}

@media (width <= 767px) and (prefers-color-scheme: dark) {
	.museum-map {
		border-top-color: var(--dark-gray);
		border-bottom-color: var(--dark-gray);
	}	
}


.museum-metadata {
	font-family: var(--font-selectric-un);
	line-height: 1.4;
	color: var(--text);
	font-size: var(--font-size);
	margin-top: -1.2em !important;

	font-family: var(--font-selectric-un);
	font-size: var(--figcaption-font-size); 
	letter-spacing: .03em;
	
	hyphens: none;
	
	a {
		hyphens: none;
	}
	
	.museum-tags {
		display: block;
		text-align: left;
		line-height: 1.6em;
		margin-bottom: 10px;
	}
}

@media (width <= 767px) {
	.museum-metadata {
		margin-top: -.4em !important;
	}
}

.museum-tag {
	font-family: var(--font-selectric-un);
	font-size: var(--figcaption-font-size); 
	letter-spacing: .03em;
	line-height: 1.2;
	
	background: var(--text);
 	color: var(--background);
	padding: .3em .5em .2em;
	
	white-space: nowrap;
	
	&.closed {
		outline-color: var(--accent);
		background: var(--accent);
		color: var(--background);
		
		&:before {
			background-color: var(--background);	
		}
	}

	&.collection:after { content: 'Great collection'; }
	&.building:after { content: 'Amazing building'; }
	&.local:after { content: 'Local flavor'; }
	&.passion:after { content: 'Care and passion'; }
	&.design:after { content: 'Good design'; }
	&.time-capsule:after { content: 'Time capsule'; }
	&.creativity:after { content: 'Creativity'; }
	&.hidden-treasure:after { content: 'Hidden treasure'; }
	&.play:after { content: 'Play'; }
	&.events:after { content: 'Fun events'; }
	&.stories:after { content: 'Interesting stories'; }
	&.closed:before { mask-image: url(ui/buttons/museums/closed.svg); }
	&.closed:after { content: 'Closed'; }
}

@media (prefers-color-scheme: dark) {
  .museum-tag {
		outline: .5px solid var(--text);
		background: transparent;
		color: var(--text);
	}
}

h3[data-logo] {
	position: relative;
	
	&:before {
		content: '';
		position: absolute;
		/* left: -1.5em; */
		right: calc(-1 * var(--right-gutter));
		top: .12em;
		width: 1em;
		height: 1em;

		mask-position: 50% 50%;
		mask-repeat: no-repeat;
		mask-size: contain;		
		
		background-color: var(--text);
		background-size: 100%;
	}
}	

@media (width <= 767px) {
	h3[data-logo] {
		&:before {
			right: auto;
			left: calc(-1 * var(--left-gutter));
		}
	}
}

.tech-museum-logos {
	display: flex;
	flex-direction: row;
	
	gap: calc(var(--margin) / 2);
	
	flex-wrap: wrap;
	
	margin-top: var(--line-height);
	margin-bottom: var(--line-height);

	a {
		width: calc((100% - 6 * var(--margin) / 2) / 7);
		aspect-ratio: 1;
		position: relative;		
		display: block;		
		
		&:after {
			display: none; /* Cancel out internal link arrows */
		}
	}
	.tech-museum-logo {
		width: 100%;
		aspect-ratio: 1;
		position: relative;		
		display: block;
	}

	.tech-museum-logo:before {
		content: '';
		display: block;
		position: absolute;
		inset: 0;

		mask-position: 50% 50%;
		mask-repeat: no-repeat;
		mask-size: contain;		
		
		background-color: var(--text);
		background-size: 100%;
	}
	
}

@media (hover: hover) {
	.tech-museum-logos {
	  a:hover {
			padding: revert !important;
			margin: revert !important;
			color: revert !important;
			background: revert !important;
		}
	}
}

@media (width <= 767px) {
	.tech-museum-logos {
		a {
			width: calc((100% - 4 * var(--margin) / 2) / 5);
		}
	}
}


[data-logo='taipei-railway-workshop']:before { mask-image: url(/fav-tech-museums/logos/taipei.svg); }
[data-logo='acmi']:before { mask-image: url(/fav-tech-museums/logos/acmi.svg); }
[data-logo='mnactec']:before { mask-image: url(/fav-tech-museums/logos/mnactec.svg); }
[data-logo='computer-history-museum']:before { mask-image: url(/fav-tech-museums/logos/chm.svg); }
[data-logo='muzeum-inzynierii-i-techniki']:before { mask-image: url(/fav-tech-museums/logos/mit.svg); }
[data-logo='neon-museum']:before { mask-image: url(/fav-tech-museums/logos/neon.svg); }
[data-logo='muzeum-gazowni-warszawskiej']:before { mask-image: url(/fav-tech-museums/logos/mgw.svg); }
[data-logo='muzeum-techniki-i-komunikacji']:before { mask-image: url(/fav-tech-museums/logos/mtk.svg); }
[data-logo='centralne-muzeum-wlokiennictwa']:before { mask-image: url(/fav-tech-museums/logos/textile.svg); }
[data-logo='london-transport-museum']:before { mask-image: url(/fav-tech-museums/logos/transport.svg); }
[data-logo='musee-des-arts-et-metiers']:before { mask-image: url(/fav-tech-museums/logos/arts.svg); }
[data-logo='narodowe-muzeum-techniki']:before { mask-image: url(/fav-tech-museums/logos/nmt.svg); }
[data-logo='computerspielemuseum']:before { backround-blend-mode: screen; background-image: url(/fav-tech-museums/logos/spiele.svg); background-color: transparent; }
[data-logo='homecomputermuseum']:before { backround-blend-mode: screen; background-image: url(/fav-tech-museums/logos/hcm.svg); background-color: transparent; }

@media (prefers-color-scheme: dark) {
	[data-logo='computerspielemuseum']:before { filter: invert(1); }
	[data-logo='homecomputermuseum']:before { filter: invert(1); }
	
}