#image-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10000;

	opacity: 0;
	pointer-events: none;
	transition: background 0.3s ease, opacity 0.3s ease;
}

#image-modal.visible {
	background: rgba(0, 0, 0, 0.85);
	opacity: 1;
	pointer-events: auto;
}

.image-modal-content {
	max-width: 90%;
	max-height: 90%;
	text-align: center;

	transform: scale(0.92);
	opacity: 0;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

#image-modal.visible .image-modal-content {
	transform: scale(1);
	opacity: 1;
}

.image-modal-content img {
	max-width: 100%;
	max-height: 80vh;
	border-radius: 8px;
}

.image-caption {
	color: #fff;
	margin-top: 1em;
	font-size: 0.9em;
	opacity: 0.8;
}