/*
 * Vidstack player UI (_components/video-player.twig).
 * Standalone like /js/video-playback.js: served directly, outside the legacy build.
 * Click-to-play videos get play/pause in the centre and volume in the corner;
 * autoplay videos render no controls at all.
 */

.c-video-player {
	--video-player-ink: #fff;
	--video-player-scrim: rgba(0, 0, 0, 0.45);
	--video-player-track: rgba(255, 255, 255, 0.35);
	--video-player-fade: 200ms ease;

	position: absolute;
	inset: 0;
	height: 100%;
	aspect-ratio: auto;
	background: #000;
	color: var(--video-player-ink);
}

/* Poster: shown until playback starts */

.c-video-player__poster {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity var(--video-player-fade);
	pointer-events: none;
}

.c-video-player__poster[data-visible] {
	opacity: 1;
}

.c-video-player__poster img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Autoplay loops have no controls, so never hide the cursor over them */

/* Matches the specificity of Vidstack's base.css cursor: none rule */
.c-video-player[data-ambient][data-started]:not([data-controls]) {
	cursor: auto;
}

/* Mouse: click the picture to play/pause. Touch: tap to reveal the controls. */

.c-video-player__gesture {
	position: absolute;
	inset: 0;
	z-index: 2;
}

.c-video-player__gesture--coarse {
	display: none;
}

@media (pointer: coarse) {
	.c-video-player__gesture--fine {
		display: none;
	}

	.c-video-player__gesture--coarse {
		display: block;
	}
}

.c-video-player__controls {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--video-player-fade);
}

.c-video-player__controls[data-visible] {
	opacity: 1;
}

.c-video-player__controls[data-visible] :is(.c-video-player__play, .c-video-player__volume) {
	pointer-events: auto;
}

.c-video-player__play,
.c-video-player__mute {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	color: inherit;
	cursor: pointer;
}

.c-video-player__play:focus-visible,
.c-video-player__mute:focus-visible,
.c-video-player__slider:focus-visible {
	outline: 2px solid var(--video-player-ink);
	outline-offset: 3px;
	/* Dark halo keeps the ring visible on light frames */
	box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.6);
}

.c-video-player__icon {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
}

/* Centre: play/pause */

.c-video-player__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 4.5rem;
	height: 4.5rem;
	padding: 1.125rem;
	border-radius: 50%;
	background: var(--video-player-scrim);
	transform: translate(-50%, -50%);
}

.c-video-player__play[data-paused] .c-video-player__icon--pause,
.c-video-player__play:not([data-paused]) .c-video-player__icon--play {
	display: none;
}

/* Corner: volume */

.c-video-player__volume {
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.375rem 0.75rem 0.375rem 0.375rem;
	border-radius: 999px;
	background: var(--video-player-scrim);
}

.c-video-player__mute {
	width: 2rem;
	height: 2rem;
	padding: 0.25rem;
	background: none;
}

.c-video-player__mute[data-muted] .c-video-player__icon--sound,
.c-video-player__mute:not([data-muted]) .c-video-player__icon--muted {
	display: none;
}

.c-video-player__slider {
	position: relative;
	display: flex;
	align-items: center;
	width: 5rem;
	height: 1.5rem;
	cursor: pointer;
	touch-action: none;
}

.c-video-player__track,
.c-video-player__track-fill {
	position: absolute;
	left: 0;
	height: 3px;
	border-radius: 3px;
}

.c-video-player__track {
	width: 100%;
	background: var(--video-player-track);
}

.c-video-player__track-fill {
	width: var(--slider-fill);
	background: var(--video-player-ink);
}

.c-video-player__thumb {
	position: absolute;
	left: var(--slider-fill);
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
	background: var(--video-player-ink);
	transform: translateX(-50%);
}

/* Touch devices set volume with hardware buttons (iOS ignores it entirely) */
@media (pointer: coarse) {
	.c-video-player__slider {
		display: none;
	}

	.c-video-player__volume {
		padding-right: 0.375rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.c-video-player__poster,
	.c-video-player__controls {
		transition: none;
	}
}