/* History Image Timeline */
.hit {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--hit-gap, 40px);
	padding: 10px 0;
}

/* The vertical line running through the circles */
.hit::before {
	content: "";
	position: absolute;
	left: calc(var(--hit-size, 96px) / 2);
	top: 10px;
	bottom: 10px;
	width: 2px;
	background: rgba(194, 170, 34, 0.45);
}

.hit-item {
	display: flex;
	align-items: center;
	position: relative;
	outline: none;
	cursor: pointer;
}

.hit-dot {
	flex: none;
	width: var(--hit-size, 96px);
	height: var(--hit-size, 96px);
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	border: 4px solid #ffffff;
	box-shadow: 0 5px 12px rgba(43, 42, 122, 0.23);
	position: relative;
	z-index: 1;
	transition: transform 0.45s cubic-bezier(0.33, 0, 0.2, 1), box-shadow 0.45s ease;
}

.hit-item:hover .hit-dot,
.hit-item:focus-visible .hit-dot,
.hit-item.is-active .hit-dot {
	transform: scale(var(--hit-grow, 1.6));
	box-shadow: 0 10px 24px rgba(43, 42, 122, 0.32);
}

/* Always visible; margin already reserves room for the grown circle, so the text never moves. */
.hit-desc {
	margin-left: var(--hit-shift, 40px);
	max-width: 420px;
	font-family: Inter, sans-serif;
	font-size: var(--hit-fs, 16px) !important;
	line-height: 1.55;
	color: #75808b;
	pointer-events: none;
}

.hit-item:focus-visible .hit-dot {
	box-shadow: 0 0 0 3px #c2aa22, 0 10px 24px rgba(43, 42, 122, 0.32);
}

/* Small screens: smaller circles, descriptions always visible */
@media (max-width: 767px) {
	.hit {
		--hit-size: 72px;
	}
	.hit-desc {
		margin-left: 14px;
		font-size: var(--hit-fs-mobile, 14px) !important;
	}
	.hit-item:hover .hit-dot,
	.hit-item:focus-visible .hit-dot,
	.hit-item.is-active .hit-dot {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hit-dot {
		transition: none;
	}
}