/* modal.css */

.modal {
	display: none;
	position: fixed;
	z-index: 9999;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.7);
	justify-content: center;
	align-items: center;
	opacity: 0;
	transition: opacity 0.3s;
}

.modal.active {
	display: flex;
	opacity: 1;
}

.modal-image {
	max-width: 90vw;
	max-height: 90vh;
	border-radius: 10px;
	transition: transform 0.5s cubic-bezier(0.4, 2, 0.3, 1), opacity 0.3s;
	will-change: transform, opacity;
	opacity: 0;
	pointer-events: none;
}

.modal-anim-img {
	max-width: 90vw;
	max-height: 90vh;
	border-radius: 10px;
	position: fixed;
	left: 0;
	top: 0;
	transition: transform 0.5s cubic-bezier(0.4, 2, 0.3, 1), opacity 0.3s;
	will-change: transform, opacity;
	opacity: 0;
	pointer-events: none;
}

.modal-image.show {
	opacity: 1;
	pointer-events: auto;
	transform: scale(1);
}

.modal-anim-img.animating {
	opacity: 1;
	z-index: 10001;
}