/**
 * Der Block selbst bringt kein Aussehen mit — das kommt aus den Block-
 * Supports und dem Theme, genau wie bei einer normalen Gruppe. Hier steht
 * nur, was die Hintergrundebene braucht, und auch das nur, wenn sie an ist.
 *
 * Dieselbe Datei laeuft im Editor und im Frontend. Was hier steht, gilt in
 * beiden.
 */

/**
 * z-index: -1 statt eines eigenen Wrappers um den Inhalt.
 *
 * In der Malreihenfolge liegen negative Ebenen ueber dem Hintergrund des
 * Stapelkontexts, aber unter allem, was im Fluss darin steht. Die Animation
 * schiebt sich damit von selbst hinter die Bloecke — ohne dass die Kinder
 * position oder z-index gesetzt bekommen, was mit ihrem eigenen Position-
 * Support (sticky) kollidieren wuerde.
 *
 * isolation: isolate macht die Gruppe zum Stapelkontext. Ohne das faende
 * die -1 den naechsthoeheren und verschwaende hinter dem Hintergrund einer
 * Sektion darueber.
 */
.wp-block-gvp-hero.has-gvp-background {
	position: relative;
	isolation: isolate;
}

.wp-block-gvp-hero > .gvp-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	/* Runde Ecken kommen aus dem Border-Support des Blocks. */
	border-radius: inherit;
	/* Der Zeiger wird am Fenster abgehoert, nicht am Canvas — die Ebene
	   darf also fuer Klicks komplett durchlaessig sein. */
	pointer-events: none;

	/**
	 * Der Layout-Support kennt nur Inhalt und behandelt die Ebene wie ein
	 * Geschwisterkind davon: "constrained" zieht jedes Kind auf die
	 * Inhaltsbreite und zentriert es mit margin: auto !important, "flow"
	 * gibt jedem Kind nach dem ersten den Blockabstand nach oben. Beides
	 * gilt hier nicht — die Ebene ist kein Inhalt, sie ist der Grund, auf
	 * dem er liegt, und deckt die ganze Gruppe.
	 *
	 * Deshalb steht sie im Markup auch hinter dem Inhalt: als erstes Kind
	 * waere sie es, die dem ersten echten Block seinen Erstgeborenenstatus
	 * nimmt — und der bekaeme vom Layout einen Abstand nach oben, den er in
	 * einer normalen Gruppe nicht hat. Hinten stoert sie niemanden; den
	 * Abstand, den sie selbst dort abbekommt, nimmt ihr das margin hier.
	 */
	max-width: none;
	margin: 0 !important;
}

/**
 * Fallback fuer die Flaechenfarbe.
 *
 * Normalerweise steht sie als Inline-Style an der Ebene und ist auf das
 * Motiv gerechnet. Hier steht nur, was ohne sie gilt: alte Bloecke von vor
 * dieser Aenderung, und der Ton der Vorlage (uBg = 0.200).
 */
.wp-block-gvp-hero > .gvp-hero__bg {
	background-color: #333335;
}

/**
 * Der Canvas kommt erst, wenn wirklich etwas drin steht — die Laufzeit
 * setzt is-drawn nach dem ersten Draw. Bis dahin steht die Flaeche.
 *
 * Ohne das haette man die Wahl zwischen zwei haesslichen Momenten: ohne
 * Canvas-Kontext ist das Element durchsichtig (die Seite blitzt weiss
 * durch), mit Kontext und alpha: false ist es undurchsichtig schwarz.
 *
 * Weil die Flaeche exakt der Hintergrund des Motivs ist, sieht man vom
 * Einblenden ohnehin nur die Formen — die Farbe darunter aendert sich nicht.
 */
.wp-block-gvp-hero > .gvp-hero__bg > canvas {
	display: block;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.25s linear;
}

.wp-block-gvp-hero > .gvp-hero__bg > canvas.is-drawn {
	opacity: 1;
}

/* Wer Bewegung abbestellt hat, bekommt das Bild ohne Blende. */
@media ( prefers-reduced-motion: reduce ) {
	.wp-block-gvp-hero > .gvp-hero__bg > canvas {
		transition: none;
	}
}