.img-popup[hidden] {
	display: none;
}

.img-popup {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: var(--overlay);
	display: grid;
	place-items: center;
	animation: fadeIn .18s ease-out;
}

@keyframes fadeIn {
	from {
		opacity: 0
	}

	to {
		opacity: 1
	}
}


.img-popup__frame {
	position: relative;
	max-width: min(1024px, 94vw);
	max-height: min(90vh, 94svh);
	border-radius: var(--radius);
	overflow: clip;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
	transform: translateY(6px);
	animation: slideUp .2s ease-out forwards;
}

@keyframes slideUp {
	to {
		transform: translateY(0)
	}
}


.img-popup__img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}


/* Optional: subtle close hint on hover without text */
.img-popup__frame::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: transparent;
	transition: background .2s;
}

.img-popup__frame:hover::after {
	background: rgba(255, 255, 255, .02);
}


/* Prevent body scroll when open */
.no-scroll {
	overflow: hidden;
	height: 100svh;
}