/**
 * Opmaak voor de eigen Vimeo-bedieningsbalk (zie
 * assets/js/vimeo-custom-controls.js), gestyled in de Zuuvr-huisstijl:
 * donkere glasachtige balk, het accent-teal (--e-global-color-accent) voor
 * voortgang/hover, en dezelfde afronding als de knoppenstijl uit de
 * Elementor-kit (6px, zie .elementor-button in de kit-CSS).
 *
 * Val terug op de effectieve hexwaarden van de kit (Site Settings -> Global
 * Colors/Fonts) als de Elementor-kit-variabelen om een of andere reden niet
 * beschikbaar zijn -- zo blijft de balk ook dan leesbaar.
 */

[data-zuuvr-video="vimeo"] {
	--zuuvr-video-accent: var(--e-global-color-accent, #78c3a7);
	--zuuvr-video-accent-hover: #4aa281; /* zelfde als link_hover_color in de kit */
	--zuuvr-video-ink: var(--e-global-color-text, #fff);
	--zuuvr-video-font: var(--e-global-typography-text-font-family, "Teachers"), sans-serif;

	position: relative;
}

/*
 * Klik-op-de-video-laag: dekt de hele speler af (behalve waar de
 * bedieningsbalk overheen ligt, die er dankzij de DOM-volgorde gewoon boven
 * blijft staan) en schakelt spelen/pauzeren om. Het icoon in het midden is
 * standaard onzichtbaar en licht enkel kort op als bevestiging van de klik
 * (.is-pulsing, zie de @keyframes verderop) -- in tegenstelling tot de
 * bedieningsbalk hieronder blijft het NIET hangen bij hover of pauze.
 */
.zuuvr-video-click-layer {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: grid;
	place-items: center;
	appearance: none;
	cursor: pointer;
	/* !important nodig: dit is een <button>, en Elementor's eigen
	 * knoppen-reset (".elementor-kit-8 button", plus een generieke
	 * "button"-regel in reset.css) geeft elk <button>-element een witte
	 * achtergrond, een dubbele witte rand en padding -- allemaal met een
	 * kale elementselector ("button") die zwaarder weegt dan onze ene
	 * klasse hier. Zonder dit dekt die witte achtergrond de hele video af
	 * zodra ze niet meer actief afspeelt -- exact het "wit scherm"-probleem
	 * -- en zou het icoon door de padding niet meer echt gecentreerd staan. */
	border: 0 !important;
	padding: 0 !important;
	background: transparent !important;
}

.zuuvr-video-click-layer__icon {
	display: grid;
	place-items: center;
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 999px;
	/* Effen kleur i.p.v. een gradient: de shorthand zet daarmee alleen
	 * background-color, dus Elementor's background-image-lazyload (zie
	 * toelichting bij .zuuvr-video-controls::before hieronder) raakt dit
	 * niet -- geen !important hier nodig. */
	background: rgb(0 0 0 / 55%);
	color: var(--zuuvr-video-ink);
	opacity: 0;
	transform: scale(0.85);
	transition: opacity var(--duration-normal, 300ms) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
		transform var(--duration-normal, 300ms) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
}

.zuuvr-video-click-layer__icon svg {
	width: 2rem;
	height: 2rem;
	fill: currentColor;
}

/* Bewust GEEN "blijf zichtbaar bij hover/pauze"-regel hier (zoals de
 * bedieningsbalk hieronder wel heeft): dit icoon dient enkel als korte
 * bevestiging van een klik (.is-pulsing) en moet daarna weer volledig
 * verdwijnen, anders blijft het als een storend wit vlak op de video
 * hangen zodra je gepauzeerd hebt of nog met de muis op de video staat. */
@keyframes zuuvr-video-pulse {
	0% {
		opacity: 0;
		transform: scale(0.6);
	}

	35% {
		opacity: 1;
		transform: scale(1);
	}

	100% {
		opacity: 0;
		transform: scale(1.15);
	}
}

.is-pulsing .zuuvr-video-click-layer__icon {
	animation: zuuvr-video-pulse 700ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
}

.zuuvr-video-controls {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 1.5rem 0.85rem 0.6rem;
	border-radius: 0 0 6px 6px;
	color: var(--zuuvr-video-ink);
	font-family: var(--zuuvr-video-font);

	/* Balk verschijnt bij hover/focus, of zolang de video niet speelt (pauze,
	 * einde, of nog voor de eerste keer starten) -- zodra ze zonder muis of
	 * toetsenbord op het element speelt, verdwijnt ze rustig uit beeld. */
	opacity: 0;
	transform: translateY(0.35rem);
	transition: opacity var(--duration-normal, 300ms) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
		transform var(--duration-normal, 300ms) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
	pointer-events: none;
}

/*
 * Het donkere verloop achter de balk staat op een ::before i.p.v. rechtstreeks
 * op .zuuvr-video-controls als background-image. Reden: Elementor's eigen
 * achtergrond-lazyload zet "background-image: none !important" op ALLE
 * afstammelingen van een container die nog niet als "in beeld" is gemarkeerd
 * (".e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload) *"),
 * en die selector weegt met vijf klassen zwaarder dan wat wij hier met
 * !important zouden kunnen opbieden. De kale "*" in die regel raakt echter
 * geen pseudo-elementen -- dus hier, op ::before, blijft het verloop wel
 * gewoon staan (zelfde truc als .zuuvr-hover-cards > .e-con::before
 * hieronder, dat werkt met !important omdat het wel als "echt element"
 * bestempeld wordt door de regel die daar tegenover staat).
 */
.zuuvr-video-controls::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: linear-gradient(to top, rgb(0 0 0 / 75%), rgb(0 0 0 / 0%) 100%);
}

[data-zuuvr-video="vimeo"]:hover .zuuvr-video-controls,
[data-zuuvr-video="vimeo"]:focus-within .zuuvr-video-controls,
[data-zuuvr-video="vimeo"]:not(.is-playing) .zuuvr-video-controls {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.zuuvr-video-controls__play,
.zuuvr-video-controls__mute,
.zuuvr-video-controls__fullscreen {
	appearance: none;
	flex: none;
	display: grid;
	place-items: center;
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color var(--duration-fast, 150ms) ease, color var(--duration-fast, 150ms) ease,
		transform var(--duration-fast, 150ms) ease;
	/* !important nodig op alle vier: zelfde ".elementor-kit-8 button"-reset
	 * als bij .zuuvr-video-click-layer hierboven -- die zet niet enkel een
	 * witte achtergrond en dubbele rand, maar ook "color: zwart" en padding
	 * op elk <button>-element, met hogere specificiteit dan onze ene klasse.
	 * Zonder color hier werden de iconen zwart-op-zwart (onzichtbaar);
	 * zonder padding stond het icoon niet echt gecentreerd in de knop. */
	border: 0 !important;
	padding: 0 !important;
	background: var(--e-global-color-primary, #000) !important;
	color: var(--zuuvr-video-ink) !important;
}

.zuuvr-video-controls__play svg,
.zuuvr-video-controls__mute svg,
.zuuvr-video-controls__fullscreen svg {
	width: 1.1rem;
	height: 1.1rem;
	fill: currentColor;
}

/* !important nodig: naast de kit-reset hierboven bestrijdt dit ook nog
 * Elementor's generieke "reset.css" (button:hover/:focus -> knalroze
 * achtergrond, rgb(204 51 102)) -- zelfde specificiteit-probleem, telkens
 * een kale "button"-elementselector die zwaarder weegt dan onze ene klasse. */
.zuuvr-video-controls__play:hover,
.zuuvr-video-controls__mute:hover,
.zuuvr-video-controls__fullscreen:hover {
	background-color: rgb(255 255 255 / 12%) !important;
	color: var(--zuuvr-video-accent) !important;
}

.zuuvr-video-controls__play:active,
.zuuvr-video-controls__mute:active,
.zuuvr-video-controls__fullscreen:active {
	transform: scale(0.9);
}

.zuuvr-video-controls__play:focus-visible,
.zuuvr-video-controls__mute:focus-visible,
.zuuvr-video-controls__fullscreen:focus-visible,
.zuuvr-video-controls__progress:focus-visible {
	outline: 2px solid var(--zuuvr-video-accent);
	outline-offset: 2px;
}

/* Play/pause-icoon wisselen i.p.v. twee knoppen: eenvoudiger DOM, en de
 * status (spelend of niet) staat toch al als klasse op de wrapper. Geldt voor
 * zowel de knop in de bedieningsbalk als het grote icoon op de klik-laag --
 * die delen dezelfde .zuuvr-icon-play/.zuuvr-icon-pause-structuur. */
.zuuvr-icon-pause,
.is-playing .zuuvr-icon-play {
	display: none;
}

.is-playing .zuuvr-icon-pause {
	display: block;
}

.zuuvr-video-controls__mute .zuuvr-icon-muted,
.is-muted .zuuvr-video-controls__mute .zuuvr-icon-loud {
	display: none;
}

.is-muted .zuuvr-video-controls__mute .zuuvr-icon-muted {
	display: block;
}

.zuuvr-icon-exit-fullscreen,
.is-fullscreen .zuuvr-icon-enter-fullscreen {
	display: none;
}

.is-fullscreen .zuuvr-icon-exit-fullscreen {
	display: block;
}

/*
 * Volledig scherm (zie enterFullscreen() in de JS). De wrapper zelf gaat
 * fullscreen, dus Elementor's aspect-ratio op .elementor-wrapper moet weg
 * zodat de speler het hele scherm vult; Vimeo zet de video binnen de iframe
 * zelf met zwarte balken op de juiste verhouding.
 */
[data-zuuvr-video="vimeo"].is-fullscreen {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	background: #000;
}

/* CSS-variant voor browsers zonder element-fullscreen (iPhone). */
[data-zuuvr-video="vimeo"].is-pseudo-fullscreen {
	position: fixed;
	inset: 0;
	z-index: 999999;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
}

.zuuvr-video-fullscreen-lock,
.zuuvr-video-fullscreen-lock body {
	overflow: hidden;
}

.is-fullscreen .zuuvr-video-controls {
	border-radius: 0;
	padding-bottom: max(0.6rem, env(safe-area-inset-bottom));
}

.zuuvr-video-controls__progress {
	position: relative;
	flex: 1 1 auto;
	height: 0.3rem;
	border-radius: 999px;
	background: rgb(255 255 255 / 25%);
	cursor: pointer;
	transition: height var(--duration-fast, 150ms) ease;
}

.zuuvr-video-controls__progress:hover {
	height: 0.4rem;
}

.zuuvr-video-controls__fill {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 100%;
	border-radius: inherit;
	background: var(--zuuvr-video-accent);
	transform: scaleX(0);
	transform-origin: left;
	/* transform i.p.v. width: compositor-vriendelijk en geen reflow bij elke
	 * timeupdate (zie web/performance.md, "Animation-Only Properties"). */
}

.zuuvr-video-controls__progress:hover .zuuvr-video-controls__fill {
	background: var(--zuuvr-video-accent-hover);
}

.zuuvr-video-controls__time {
	flex: none;
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
	.zuuvr-video-controls,
	.zuuvr-video-controls__play,
	.zuuvr-video-controls__mute,
	.zuuvr-video-controls__fullscreen,
	.zuuvr-video-controls__progress,
	.zuuvr-video-controls__fill,
	.zuuvr-video-click-layer__icon {
		transition: none;
	}

	.is-pulsing .zuuvr-video-click-layer__icon {
		animation: none;
	}
}