/**
 * Self-hosted video lightbox
 *
 * Salient opens every video lightbox as an iframe. When the link points at a
 * video file on this site, that iframe shows the browser's own raw media viewer
 * (a small native player plus spinner) until the file buffers. js/svl.js opens
 * those links in this overlay instead.
 *
 * Docs: Reach Website project, docs/selfhosted-video-lightbox.md
 */

html.svl-locked,
html.svl-locked body {
	overflow: hidden;
}

.svl-overlay {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2vh 2vw;
	background: rgba(0, 0, 0, .88);
	opacity: 0;
	transition: opacity .25s ease;
}

.svl-overlay.is-open {
	opacity: 1;
}

.svl-stage {
	position: relative;
	background: #000;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
	transform: scale(.97);
	transition: transform .25s ease;
}

.svl-overlay.is-open .svl-stage {
	transform: none;
}

.svl-player {
	display: block;
	width: 100%;
	height: 100%;
	background: #000;
	object-fit: contain;
	border-radius: 14px;
}

/* Loading state: a quiet spinner instead of the browser's raw media viewer */
.svl-spinner {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 42px;
	height: 42px;
	margin: -21px 0 0 -21px;
	border: 3px solid rgba(255, 255, 255, .25);
	border-top-color: rgba(255, 255, 255, .9);
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease;
	animation: svl-spin .8s linear infinite;
}

.svl-stage.is-loading .svl-spinner {
	opacity: 1;
}

@keyframes svl-spin {
	to { transform: rotate(360deg); }
}

.svl-close {
	position: absolute;
	top: max(14px, 2vh);
	right: max(14px, 2vw);
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	cursor: pointer;
	transition: background .2s ease;
}

.svl-close:hover,
.svl-close:focus-visible {
	background: rgba(255, 255, 255, .26);
	outline: none;
}

.svl-close::before,
.svl-close::after {
	content: '';
	position: absolute;
	left: 13px;
	top: 21px;
	width: 18px;
	height: 2px;
	background: #fff;
}

.svl-close::before { transform: rotate(45deg); }
.svl-close::after  { transform: rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
	.svl-overlay,
	.svl-stage { transition: none; }
	.svl-spinner { animation-duration: 2s; }
}

@media (max-width: 690px) {
	.svl-stage,
	.svl-player { border-radius: 10px; }
}