/**
 * pixagentur Scroll Video
 *
 * Grundzustand ist der Textfluss: das Video steht da, wo es eingefuegt wurde,
 * und dreht sich, waehrend man daran vorbeiscrollt. Der angeheftete Modus ist
 * die Ausnahme und wird ueber data-mode="sticky" eingeschaltet.
 *
 * @package pixagentur-scroll-video
 */

.pixa-sv {
	--pixa-sv-scroll: 250vh;
	--pixa-sv-offset: 0px;
	--pixa-sv-max-width: 100%;
	--pixa-sv-fit: contain;

	position: relative;
}

.pixa-sv__stage {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.pixa-sv__video {
	display: block;
	width: auto;
	max-width: min(100%, var(--pixa-sv-max-width));
	height: auto;
	object-fit: var(--pixa-sv-fit, contain);

	/* Nichts daran ist bedienbar. */
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
}

/**
 * Angehefteter Modus: der Abschnitt bekommt Scrollhoehe, die Buehne bleibt
 * waehrenddessen im Bild stehen.
 */
.pixa-sv[data-mode="sticky"] {
	height: var(--pixa-sv-scroll);
}

.pixa-sv[data-mode="sticky"] .pixa-sv__stage {
	position: sticky;
	top: var(--pixa-sv-offset);
	height: calc(100vh - var(--pixa-sv-offset));
}

.pixa-sv[data-mode="sticky"] .pixa-sv__video {
	max-height: 100%;
}

/* Vor dem Laden der Metadaten ist die Dauer unbekannt, der erste Frame wuerde
   in beliebiger Groesse aufblitzen. */
.pixa-sv:not(.is-ready) .pixa-sv__video {
	opacity: 0;
}

.pixa-sv.is-ready .pixa-sv__video {
	opacity: 1;
	transition: opacity 200ms linear;
}

/**
 * Reduzierte Bewegung: kein Scrubbing, kein klebender Abschnitt. Es bleibt ein
 * Standbild im normalen Textfluss.
 */
@media (prefers-reduced-motion: reduce) {
	.pixa-sv[data-mode="sticky"] {
		height: auto;
	}

	.pixa-sv[data-mode="sticky"] .pixa-sv__stage {
		position: static;
		height: auto;
	}

	/* Bei reduzierter Bewegung setzt das Skript kein is-ready, die Regel
	   weiter oben wuerde das Video also dauerhaft ausblenden. Deshalb hier
	   dieselbe Spezifitaet. */
	.pixa-sv:not(.is-ready) .pixa-sv__video,
	.pixa-sv.is-ready .pixa-sv__video {
		opacity: 1;
	}
}

/**
 * Elementor-Editor: die Sticky-Rechnung kollidiert mit der Editor-Leinwand,
 * deshalb steht die Buehne dort still und zeigt den ersten Frame.
 */
.pixa-sv.is-editor-preview[data-mode="sticky"] {
	height: auto;
}

.pixa-sv.is-editor-preview[data-mode="sticky"] .pixa-sv__stage {
	position: static;
	height: auto;
	min-height: 240px;
}

/* Hinweis im Editor, Besucher sehen ihn nie. */
.pixa-sv-error {
	padding: 12px 16px;
	border-left: 4px solid #b32d2e;
	background: #fcf0f1;
	color: #57524a;
	font-size: 14px;
}