/* geo-facets
   Interactive SVG geometry. A multi-facet polygon overlay sits behind a
   section. Each facet has invisible-fill hit-testing; hovering reveals
   numbered labels at facet centroids and a floating panel with case data.
   Double-click navigates to the facet's data-href URL.

   The SVG sits inside a .geo-svg-wrap container with a top-fading mask so
   it blends into the section above. */

.geo-svg-wrap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: calc(35% + 215px);
	width: 100%;
	z-index: 0;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(to bottom,
		transparent 0%,
		transparent 8%,
		rgba(0, 0, 0, 0.2) 18%,
		#000 32%,
		#000 82%,
		transparent 100%);
	        mask-image: linear-gradient(to bottom,
		transparent 0%,
		transparent 8%,
		rgba(0, 0, 0, 0.2) 18%,
		#000 32%,
		#000 82%,
		transparent 100%);
}
.geo-svg-wrap svg { width: 100%; height: 100%; display: block; pointer-events: auto; }
.geo-svg-wrap[data-moved="1"]::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.20);
	pointer-events: none;
	z-index: 1;
}

/* Facets themselves: nearly invisible fill so the underlying art reads,
   but they capture pointer events for hover/click detection. */
.geo-facet {
	cursor: pointer;
	opacity: 1 !important;
	fill: rgba(255, 0, 0, 0.001) !important;
	stroke: rgba(255, 0, 0, 0.001);
	stroke-width: 2;
	pointer-events: bounding-box;
	transition: fill 0.25s ease, stroke 0.25s ease, filter 0.25s ease;
}
.geo-facet.is-hover {
	fill: rgba(120, 180, 255, 0.08) !important;
	stroke: none !important;
	filter: none;
}

/* Numbered labels at facet centroids. Pulse through the constellation
   palette so each facet's number breathes independently. */
.geo-num {
	font-family: Arial, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 2.2px;
	text-transform: uppercase;
	text-anchor: middle;
	dominant-baseline: central;
	pointer-events: none;
	fill: rgb(0, 180, 255);
	transform-box: fill-box;
	transform-origin: center;
	animation: mmGeoNumPulse 14s ease-in-out infinite;
}
.geo-num:nth-of-type(2) { animation-delay: -2.8s; }
.geo-num:nth-of-type(3) { animation-delay: -5.6s; }
.geo-num:nth-of-type(4) { animation-delay: -8.4s; }
.geo-num:nth-of-type(5) { animation-delay: -11.2s; }

/* When a facet is hovered, dim non-hovered numbers and freeze the pulse */
.geo-svg-host.has-hover .geo-num { animation-play-state: paused; opacity: 0.25; }
.geo-svg-host.has-hover .geo-num.is-hover {
	opacity: 1 !important;
	animation-play-state: paused;
	fill: #fff !important;
}

@keyframes mmGeoNumPulse {
	0%   { opacity: 0.55; fill: rgb(0,180,255);   transform: translate(0, 0) scale(1); }
	14%  { opacity: 1;    fill: rgb(200,140,255); transform: translate(2px, -3px) scale(1.06); }
	28%  { opacity: 0.7;  fill: rgb(255,200,100); transform: translate(-3px, 2px) scale(0.96); }
	42%  { opacity: 1;    fill: rgb(140,230,200); transform: translate(3px, 3px) scale(1.08); }
	57%  { opacity: 0.6;  fill: rgb(255,130,165); transform: translate(-2px, -2px) scale(0.97); }
	71%  { opacity: 1;    fill: rgb(180,255,140); transform: translate(3px, -2px) scale(1.05); }
	85%  { opacity: 0.7;  fill: rgb(255,170,90);  transform: translate(-2px, 3px) scale(0.98); }
	100% { opacity: 0.55; fill: rgb(0,180,255);   transform: translate(0, 0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.geo-num { animation: none; }
}

/* Floating panel that follows the mouse when a facet is hovered */
.mm-geo-panel {
	position: fixed;
	left: 0;
	top: 0;
	pointer-events: none;
	z-index: 99999;
	width: 540px;
	max-width: 90vw;
	padding: 20px 26px;
	background: rgba(8, 10, 14, 0.95);
	border: 1px solid rgba(120, 180, 255, 0.5);
	color: #fff;
	opacity: 0;
	transform: translate(20px, 20px);
	transition: opacity 0.15s ease;
}
.mm-geo-panel.show { opacity: 1; }
.mm-geo-panel .p-num {
	color: var(--mm-accent, #00B4FF);
	font-size: 12px;
	letter-spacing: 0.22em;
	font-weight: 700;
	margin-bottom: 8px;
}
.mm-geo-panel .p-title {
	color: #fff;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	margin-bottom: 10px;
}
.mm-geo-panel .p-desc {
	color: rgba(255, 255, 255, 0.78);
	font-size: 13px;
	line-height: 1.55;
	margin-bottom: 10px;
}
.mm-geo-panel .p-tags {
	color: rgba(255, 255, 255, 0.55);
	font-size: 11px;
	letter-spacing: 0.08em;
}