/* Mind maps (Science, Publications and Talks): bubbles around a hub; clicking one opens its topic panel below. */

#main .mindmap-hint {
	text-align: center;
	font-size: 0.8rem;
	letter-spacing: 0.1rem;
	opacity: 0.75;
	margin: 0 0 1rem 0;
}

#main .mindmap {
	position: relative;
	width: 100%;
	aspect-ratio: 100 / 90;
	margin: 0 0 2rem 0;
	container-type: inline-size;
}

	#main .mindmap .links {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		overflow: visible;
	}

		#main .mindmap .links line,
		#main .mindmap .links path {
			fill: none;
			stroke: rgba(255, 255, 255, 0.55);
			stroke-width: 0.35;
		}

		#main .mindmap .links .spoke {
			stroke-dasharray: 1.2 1.2;
			animation: mindmap-flow 6s linear infinite;
		}

		#main .mindmap .links .rel {
			stroke: rgba(255, 255, 255, 0.2);
			stroke-dasharray: 0.4 1.6;
		}

	#main .mindmap .hub,
	#main .mindmap .node {
		position: absolute;
		translate: -50% -50%;
		aspect-ratio: 1;
		border-radius: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	#main .mindmap .hub {
		left: 50%;
		top: 50%;
		width: 21%;
		background: rgba(255, 255, 255, 0.95);
		color: #1b1f22;
		font-size: clamp(0.65rem, 3cqw, 1rem);
		font-weight: 600;
		letter-spacing: 0.15rem;
		line-height: 1.3;
		text-transform: uppercase;
		box-shadow: 0 0 2.5rem rgba(255, 255, 255, 0.25);
	}

	/* Overrides the template's generic button styling. */
	#main .mindmap .node {
		left: var(--x);
		top: var(--y);
		width: 27%;
		height: auto;
		padding: 0 2%;
		line-height: 1.25;
		white-space: normal;
		text-transform: none;
		letter-spacing: 0.03rem;
		font-size: clamp(0.6rem, 2.7cqw, 0.9rem);
		background-color: rgba(27, 31, 34, 0.9);
		box-shadow: inset 0 0 0 1px #ffffff, 0 0 1.5rem rgba(0, 0, 0, 0.4);
		animation: mindmap-float 6s ease-in-out infinite;
		animation-delay: var(--d, 0s);
		transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, scale 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
	}

		#main .mindmap .node .count {
			margin-top: 0.5em;
			font-size: 0.75em;
			letter-spacing: 0.08rem;
			text-transform: uppercase;
			opacity: 0.7;
		}

		#main .mindmap .node.soon {
			background-color: rgba(27, 31, 34, 0.6);
			box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.4);
			border: 1px dashed rgba(255, 255, 255, 0.7);
		}

		#main .mindmap .node .icon {
			font-size: 1.6em;
			margin-bottom: 0.45em;
			opacity: 0.85;
		}

		#main .mindmap .node:hover,
		#main .mindmap .node:focus-visible {
			background-color: rgba(60, 66, 72, 0.95);
			scale: 1.07;
			box-shadow: inset 0 0 0 2px #ffffff, 0 0 2rem rgba(255, 255, 255, 0.25);
		}

		#main .mindmap .node[aria-expanded="true"] {
			background-color: #ffffff;
			color: #1b1f22 !important;
			box-shadow: 0 0 2.5rem rgba(255, 255, 255, 0.45);
		}

/* Three-bubble variant with a photo hub (Publications and Talks). */
#main .mindmap.three .node {
	width: 30%;
}

#main .mindmap .hub.photo {
	width: 23%;
	background: linear-gradient(rgba(27, 31, 34, 0.45), rgba(27, 31, 34, 0.45)), url("../../images/talk.jpg") center / cover;
	color: #ffffff;
	box-shadow: inset 0 0 0 2px #ffffff, 0 0 2.5rem rgba(255, 255, 255, 0.25);
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}

#main .topic {
	animation: mindmap-reveal 0.35s ease-out;
	scroll-margin-top: 2rem;
}

	#main .topic[hidden] {
		display: none;
	}

	#main .topic .pubs-count {
		margin: -0.5rem 0 0.75rem 0;
		font-size: 0.8rem;
		letter-spacing: 0.15rem;
		text-transform: uppercase;
		opacity: 0.75;
	}

	#main .topic .back-to-map {
		margin: 0 0 2rem 0;
	}

/* Publication lists, shared by the Science panels and the Publications section. */

#main .pubs-year {
	margin: 1.5rem 0 0.75rem 0;
}

#main .pubs {
	list-style: none;
	padding: 0 0 0 1rem;
	margin: 0 0 2rem 0;
	border-left: solid 2px rgba(255, 255, 255, 0.5);
}

	#main .pubs li {
		padding-left: 0;
		margin-bottom: 1.25rem;
	}

		#main .pubs li:last-child {
			margin-bottom: 0;
		}

	#main .pubs a,
	#main .pubs .talk {
		display: block;
		margin-bottom: 0.35rem;
		line-height: 1.4;
		border-bottom: none;
		font-weight: 600;
	}

		#main .pubs a:hover {
			border-bottom: dotted 1px;
		}

	#main .pubs span {
		display: block;
		font-size: 0.8rem;
		line-height: 1.5;
		color: rgba(255, 255, 255, 0.7);
	}

		#main .pubs span + span:last-child {
			margin-top: 0.1rem;
			font-style: italic;
		}

	#main .pubs .me {
		color: #ffffff;
		font-weight: 600;
	}

@keyframes mindmap-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-4px); }
}

@keyframes mindmap-flow {
	to { stroke-dashoffset: -24; }
}

@keyframes mindmap-reveal {
	from { opacity: 0; transform: translateY(0.75rem); }
	to { opacity: 1; transform: none; }
}

@media screen and (max-width: 480px) {

	#main .mindmap .node {
		width: 30%;
		padding: 0 2%;
	}

		#main .mindmap .node .icon {
			font-size: 1.3em;
			margin-bottom: 0.3em;
		}

		#main .mindmap .node .count {
			display: none;
		}

}

@media (prefers-reduced-motion: reduce) {

	#main .mindmap .node,
	#main .mindmap .links .spoke,
	#main .topic {
		animation: none;
	}

}