/**
 * Styles the in-page video lightbox opened by modules/video-modal.js.
 *
 * The overlay sits above every other layer (header/menu) and keeps a 16:9
 * frame at any width. Motion is gentle and fully removed under reduced-motion.
 *
 * Built by Zinuxtech (ZX · Zinux) to the ZinuxTech Development Guide.
 */

.video-modal {
	position: fixed;
	inset: 0;
	z-index: var(--inv-z-modal);
	display: grid;
	place-items: center;
	padding: var(--inv-gutter);
}

.video-modal[hidden] {
	display: none;
}

.video-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(6, 6, 10, 0.86);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	animation: video-modal-fade var(--inv-duration) var(--inv-ease);
}

.video-modal__dialog {
	position: relative;
	z-index: 1;
	width: min(100%, 68rem);
	animation: video-modal-rise var(--inv-duration) var(--inv-ease);
}

.video-modal__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border: 1px solid var(--inv-line-inv);
	border-radius: var(--inv-radius-md);
	background: #000;
	box-shadow: var(--inv-shadow-strong);
}

.video-modal__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.video-modal__close {
	position: absolute;
	top: -3.25rem;
	right: 0;
	display: inline-grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0.6rem;
	border: 1px solid var(--inv-line-inv);
	border-radius: 50%;
	background: transparent;
	color: var(--inv-text-inv);
	cursor: pointer;
	transition: color var(--inv-duration-fast) var(--inv-ease), border-color var(--inv-duration-fast) var(--inv-ease), transform var(--inv-duration-fast) var(--inv-ease);
}

.video-modal__close:hover,
.video-modal__close:focus-visible {
	border-color: var(--inv-signal);
	color: var(--inv-signal);
	transform: rotate(90deg);
}

.video-modal__close svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-width: 1.6;
}

/* Lock the page behind the modal so the background does not scroll. */
html.inv-modal-open {
	overflow: hidden;
}

@media (max-width: 40rem) {
	.video-modal__close {
		top: -3rem;
		right: 50%;
		transform: translateX(50%);
	}

	.video-modal__close:hover,
	.video-modal__close:focus-visible {
		transform: translateX(50%) rotate(90deg);
	}
}

@keyframes video-modal-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes video-modal-rise {
	from { opacity: 0; transform: translateY(1.5rem) scale(0.98); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.video-modal__backdrop,
	.video-modal__dialog {
		animation: none;
	}
}