@charset "UTF-8";

/**
 * mediaplayers.css 1.2.0
 * Author: hybrid.
 *
 * HTML5 and YouTube media player via vLitejs.
 * Supports video, audio, and iframe embed (YouTube).
 *
 * Structure
 * .mediaplayer > .media > .v-vlite
 * .mediaplayer-background — poster image (absolute, covers player)
 * .mediaplayer-container  — max-width wrapper for overlay
 *
 * Types
 * .mediaplayer                    — HTML5 video (default)
 * .mediaplayer.youtube            — YouTube embed
 * .mediaplayer[data-type="audio"] — audio
 *
 * Tokens
 * --mediaplayer-font-size         responsive font size (1rem / 2rem)
 * --mediaplayer-ratio             aspect ratio (default: 16/9)
 * --mediaplayer-background-color  background while loading
 * --mediaplayer-border-radius     border radius
 * --vlite-bigplay-size            big play button size
 * --vlite-bigplay-color           big play button color
 * --vlite-bigplay-background      big play button background
 * --vlite-bigplay-shadow          big play button drop shadow
 *
 * Dependencies
 * --light-color   defined in colors.css
 * --dark-color    defined in colors.css
 * --dark-rgb      defined in colors.css
 * --bright-color  defined in colors.css
 * --duration-fast defined in animations.css
 * --ease          defined in animations.css
 */



/* ================================================================================================== */
/* ============================================= CONFIG ============================================= */
/* ================================================================================================== */


/* =============== VLITE =============== */

.v-vlite {
	/* vlitejs overrides */
	--vlite-colorPrimary: var(--bright-color) !important;
	--vlite-controlBarHeight: 4em !important;
	--vlite-progressBarBackground: var(--dark-color) !important;
	--vlite-controlBarBackground: linear-gradient(0deg, var(--dark-color), transparent) !important;
	/* custom tokens */
	--vlite-volumeBarWidth: 100%; /*1.5em;*/
}


/* =============== MEDIAPLAYER =============== */

:root {
	/* mediaplayer tokens */
	--mediaplayer-font-size: 1rem;
	--mediaplayer-ratio: 16/9;
	--mediaplayer-background-color: var(--light-color);
	--mediaplayer-border-radius: .5em;
	/* vlite added tokens */
	--vlite-bigplay-size: 3.5em;
	--vlite-bigplay-color: var(--dark-color);
	--vlite-bigplay-background: var(--bright-color);
	--vlite-bigplay-shadow: drop-shadow(0 0 .125em rgba(var(--dark-rgb), .33));
	--vlite-bigplay-min-scale: .5; /* .33 */
	--vlite-bigplay-short-scale: 1; /* mobile */
	--vlite-bigplay-default-scale: 1;
	--vlite-bigplay-large-scale: 1.25;
	/* iframe */
	--mediaplayer-iframe-margin: 3em; /* 2em */
}


/* =============== AUDIO =============== */

.mediaplayer[data-type="audio"] .v-vlite {
	--vlite-colorPrimary: var(--dark-color) !important;
	--vlite-progressBarBackground: var(--bright-color) !important;
	--vlite-controlBarBackground: linear-gradient(0deg, var(--dark-color), transparent) !important;
}


/* =============== @MEDIA =============== */

@media (min-width: 760px) {
	:root {
		--mediaplayer-font-size: 1.5rem;
		--vlite-bigplay-short-scale: .75;
	}
}



/* ====================================================================================================== */
/* ============================================= ANIMATIONS ============================================= */
/* ====================================================================================================== */


/* =============== VLITE =============== */

.v-vlite .v-container {
	transition: opacity var(--duration-fast) var(--ease);
}

/* in */

.v-vlite.v-playing iframe,
.v-vlite.v-playing .v-poster,
.v-vlite.v-playing .v-controlBar {
	transition: opacity var(--duration-fast) var(--ease) var(--duration-fast) !important;
}

/* out */

.v-vlite.v-paused iframe,
.v-vlite.v-paused .v-poster,
.v-vlite.v-paused .v-controlBar {
	transition: opacity var(--duration-fast) var(--ease) !important;
}

/* =============== MEDIAPLAYER =============== */

.v-bigPlay {
	transition:
		opacity var(--duration-fast) var(--easeInQuint),
		transform var(--duration-fast) var(--easeInQuint),
		visibility .01s linear var(--duration-fast);
}
.v-bigPlay::after {
	transition:
		transform var(--duration-fast) var(--easeInOutQuint),
		background var(--duration-fast) var(--ease);
}


/* =============== BIG PLAY — PLAYING STATE =============== */

/* Shown for ~4500ms on play to mask the native provider pause button.
   Smaller size — no interaction, purely decorative cover. */

/* out — opacity first, then visibility */

.v-vlite.v-playing .v-bigPlay {
	transition:
		opacity var(--duration-fast) var(--easeInQuint),
		transform var(--duration-fast) var(--easeInQuint),
		visibility .01s linear var(--duration-fast);
}

/* in */

.mediaplayer[data-playing] .v-vlite.v-playing .v-bigPlay {
	transition:
		opacity var(--duration-fast) var(--easeOutQuint),
		transform var(--duration-fast) var(--easeOutQuint),
		visibility .01s linear;
}




/* ================================================================================================ */
/* ============================================= CORE ============================================= */
/* ================================================================================================ */


/* ============================== MEDIAPLAYER ============================== */


/* =============== DEFAULT =============== */

.mediaplayer {
	position: relative;
	display: block;
	width: 100%;
	font-size: var(--mediaplayer-font-size);
	aspect-ratio: var(--mediaplayer-ratio);
	background: var(--mediaplayer-background-color);
	border-radius: var(--mediaplayer-border-radius);
	overflow: hidden;
}
.mediaplayer > * {
	margin: 0;
}

.mediaplayer-background {
	position: absolute;
	inset: 0;
	z-index: 0;
	object-fit: cover;
	pointer-events: none;
}

.mediaplayer .media {
	position: relative;
	display: block;
	height: 100%;
	width: 100%;
}


/* =============== AUDIO =============== */

.mediaplayer[data-type="audio"] {
	aspect-ratio: initial;
}


/* =============== PASSIVE =============== */

.mediaplayer[data-passive="true"] {
	pointer-events: none;
}


/* ============================== IFRAME ============================== */

.mediaplayer iframe,
.mediaplayer .visible-embed {
	position: absolute;
	inset: 0;
}
.mediaplayer .visible-embed {
	overflow: hidden;
}


/* =============== IFRAME CROP =============== */

/* Mask YouTube native top/bottom bars — controls=0 ignored by YouTube since ~2023. */

.mediaplayer[data-youtube-id] .v-container iframe {
	margin-top: calc(var(--mediaplayer-iframe-margin) * -1);
	height: calc(100% + var(--mediaplayer-iframe-margin) * 2);
	margin-bottom: calc(var(--mediaplayer-iframe-margin) * -1);
}


/* ============================== VLITE ============================== */


/* =============== DEFAULT =============== */

.v-vlite {
	z-index: 10;
	background: none !important;
}


/* =============== EMBED =============== */

/* Hide YouTube suggested videos when paused or loading */

.v-vlite.v-loading:not(.v-playing) iframe,
.v-vlite.v-paused iframe {
	opacity: 0;
}


/* =============== LOADER =============== */

.v-loaderContent {
	width: 100%;
}
.v-loaderContent > div {
	height: .5em;
	width: .5em;
}


/* ============================== CONTROLS ============================== */

.v-vlite .v-controlBar {
	z-index: 40;
	font-size: 1rem;
	gap: 1em;
}
.v-vlite .v-progressBar {
	height: 100% !important;
}

/* video */

.v-vlite.v-video .v-controlBar {
	padding: 1em 1em .5em 1em;
}
.v-vlite.v-video .v-progressBar {
	min-height: auto;
	padding: .5em;
	height: .5em !important;
}

/* Hide control bar when paused or loading */

.v-vlite:not(.v-audio).v-loading:not(.v-playing) .v-controlBar,
.v-vlite:not(.v-audio).v-paused .v-controlBar {
	opacity: 0;
	pointer-events: none;
	transform: translateY(100%);
}
.v-controlBar button {
	height: 1.5em;
	width: 1.5em;
}
.v-controlBar button::after {
	display: none;
}
.v-iconPressed {
	margin: 0;
}
.v-time {
	font-size: .875rem;
	font-weight: var(--font-weight-bold);
	align-self: stretch;
}


/* ============================== VOLUME ============================== */

.v-volumeArea {
	display: flex;
	align-items: center;
	gap: 1em;
	height: 100%;
	width: 100%;
	max-width: 10em;
}
.v-vlite.v-audio .v-volumeArea {
	margin-right: .25em;
}
.v-volumeBar {
	min-height: auto;
	padding: 0;
	width: var(--vlite-volumeBarWidth);
}


/* ============================== BIG PLAY ============================== */

.v-bigPlay {
	position: absolute;
	z-index: 20;
	inset: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	width: 100%;
	color: var(--vlite-bigplay-color);
	filter: var(--vlite-bigplay-shadow);
	line-height: 1;
	opacity: 0;
	transform: none;
}
.v-bigPlay::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: 50%;
	left: 50%;
	height: var(--vlite-bigplay-size);
	width: var(--vlite-bigplay-size);
	border-radius: 50%;
	background: var(--vlite-bigplay-background);
}


/* =============== ICON =============== */

.v-bigPlay svg {
	stroke: none;
	display: none;
}
.v-bigPlay .icon-play.animated .label {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}


/* =============== ANIMATIONS =============== */

.v-bigPlay [class^="icon-"],
.v-vlite.v-playing .v-bigPlay [class^="icon-"] { transform: scale(var(--vlite-bigplay-min-scale)); }

.v-bigPlay::after,
.v-vlite.v-playing .v-bigPlay::after { transform: translate(-50%, -50%) scale(var(--vlite-bigplay-min-scale)); }

.v-bigPlay.placeholder [class^="icon-"],
.v-vlite.v-paused .v-bigPlay [class^="icon-"] { transform: scale(var(--vlite-bigplay-default-scale)); }

.v-bigPlay.placeholder::after,
.v-vlite.v-paused .v-bigPlay::after { transform: translate(-50%, -50%) scale(var(--vlite-bigplay-default-scale)); }

.mediaplayer[data-playing] .v-bigPlay [class^="icon-"] { transform: scale(var(--vlite-bigplay-short-scale)); }
.mediaplayer[data-playing] .v-bigPlay::after { transform: translate(-50%, -50%) scale(var(--vlite-bigplay-short-scale)); }


/* =============== VISIBILITY =============== */

.v-vlite.v-loading:not(.v-playing) .v-bigPlay,
.v-vlite.v-playing .v-bigPlay {
	opacity: 0;
	visibility: hidden;
}
.v-vlite.v-paused .v-bigPlay,
.v-bigPlay.placeholder,
.v-vlite.v-loading .v-bigPlay.placeholder,
.mediaplayer[data-playing] .v-vlite.v-playing .v-bigPlay {
	opacity: 1;
	visibility: visible;
}


/* =============== HOVER =============== */

@media (hover: hover) {

	/* pause */

	.v-bigPlay[data-state="paused"] .icon-play.animated .label,
	.v-bigPlay[data-state="playing"]:hover .icon-play.animated .label { margin-left: 0; }

	.v-bigPlay[data-state="paused"] .icon-play.animated .label::before,
	.v-bigPlay[data-state="playing"]:hover .icon-play.animated .label::before { clip-path: var(--icon-pause-clip-left); }

	.v-bigPlay[data-state="paused"] .icon-play.animated .label::after,
	.v-bigPlay[data-state="playing"]:hover .icon-play.animated .label::after { clip-path: var(--icon-pause-clip-right); }

	/* play */

	.v-bigPlay[data-state="paused"]:hover .icon-play.animated .label,
	.v-bigPlay[data-state="playing"] .icon-play.animated .label { margin-left: var(--icon-play-offset); }

	.v-bigPlay[data-state="paused"]:hover .icon-play.animated .label::before,
	.v-bigPlay[data-state="playing"] .icon-play.animated .label::before { clip-path: var(--icon-play-clip-left); }

	.v-bigPlay[data-state="paused"]:hover .icon-play.animated .label::after,
	.v-bigPlay[data-state="playing"] .icon-play.animated .label::after { clip-path: var(--icon-play-clip-right); }

	/* bigPlay */

	.v-bigPlay:hover { opacity: 1; color: var(--vlite-bigplay-color); }
	.v-bigPlay:hover::after { background: var(--vlite-bigplay-background); }

	.v-bigPlay:hover [class^="icon-"] {
		transform: scale(1);
	}
	.v-bigPlay:hover::after,
	.v-vlite.v-paused .v-bigPlay:hover::after {
		transform: translate(-50%, -50%) scale(var(--vlite-bigplay-large-scale));
	}
}

@media (hover: none) {

	/* pause */

	.v-bigPlay[data-state="paused"] .icon-play.animated .label,
	.v-bigPlay[data-state="playing"].hover .icon-play.animated .label { margin-left: 0; }

	.v-bigPlay[data-state="paused"] .icon-play.animated .label::before,
	.v-bigPlay[data-state="playing"].hover .icon-play.animated .label::before { clip-path: var(--icon-pause-clip-left); }

	.v-bigPlay[data-state="paused"] .icon-play.animated .label::after,
	.v-bigPlay[data-state="playing"].hover .icon-play.animated .label::after { clip-path: var(--icon-pause-clip-right); }

	/* play */

	.v-bigPlay[data-state="paused"].hover .icon-play.animated .label,
	.v-bigPlay[data-state="playing"] .icon-play.animated .label { margin-left: var(--icon-play-offset); }

	.v-bigPlay[data-state="paused"].hover .icon-play.animated .label::before,
	.v-bigPlay[data-state="playing"] .icon-play.animated .label::before { clip-path: var(--icon-play-clip-left); }

	.v-bigPlay[data-state="paused"].hover .icon-play.animated .label::after,
	.v-bigPlay[data-state="playing"] .icon-play.animated .label::after { clip-path: var(--icon-play-clip-right); }

	/* bigPlay */

	.v-bigPlay.hover { opacity: 1; color: var(--vlite-bigplay-color); }
	.v-bigPlay.hover::after { background: var(--vlite-bigplay-background); }

	.v-bigPlay.hover [class^="icon-"] {
		transform: scale(1);
	}
	.v-bigPlay.hover::after,
	.v-vlite.v-paused .v-bigPlay.hover::after {
		transform: translate(-50%, -50%) scale(var(--vlite-bigplay-large-scale));
	}
}



/* ================================================================================================= */
/* ============================================= THEME ============================================= */
/* ================================================================================================= */

/* here for custom mediaplayer overrides */