/* Click-to-expand videos in posts. Behaviour lives in /scripts/video-expand.js;
   this file only carries the backdrop and the expanded state. */

main article video {
	cursor: zoom-in;
}

/* Holds the video's slot in the text while it is pinned over the page. It is a
   copy of the video itself (see video-expand.js), hidden but still laid out, so
   nothing shifts — hence no styles here beyond keeping it out of the way. */
.video-expand-placeholder {
	pointer-events: none;
	cursor: auto;
}

.video-expand-backdrop {
	position: fixed;
	inset: 0;
	z-index: 900;
	background: rgba(12, 12, 12, 0.9);
	cursor: zoom-out;
	opacity: 0;
	transition: opacity 240ms ease;
}

.video-expand-backdrop.is-visible {
	opacity: 1;
}

/* Transparent layer over the expanded video: it takes the clicks that close,
   so the browser's own controls never get to turn them into a play/pause. */
.video-expand-catcher {
	position: fixed;
	z-index: 902;
	cursor: zoom-out;
}

main article video.video-expanded {
	z-index: 901;
	cursor: zoom-out;
	background: #000;
	object-fit: contain;
	box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.5);
}

/* The backdrop covers the page; scrolling behind it only breaks the illusion. */
html.video-expand-lock,
html.video-expand-lock body {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.video-expand-backdrop {
		transition: none;
	}
}