/**
 * FORMLOS Shapes
 *
 * Der Container belegt im Textfluss genau die Hoehe des Versatzes. Die
 * Farbflaeche darin ist hoeher und ragt in den angrenzenden Abschnitt
 * hinein, wo sie ausblendet.
 *
 * Die Farbe kommt aus zwei stark weichgezeichneten Flaechen, deren
 * Mittelpunkte auf den beiden Enden der Schraege sitzen: links auf
 * Hoehe 0, rechts auf Hoehe des Versatzes. Dadurch folgt ihre
 * Vereinigung der Diagonale, und weil ein Blur in alle Richtungen
 * gleich abfaellt, ist das Farbband ueberall gleich dick - ganz ohne
 * Winkelberechnung. Der Clip-Path haelt die Farbe auf der gewaehlten
 * Seite der Schraege, eine Ausblendmaske braucht es nicht mehr.
 *
 * Die Maße stehen zentral im :root und lassen sich im Theme
 * ueberschreiben, ohne das Plugin anzufassen:
 *
 *   :root {
 *       --formlos-shape-drop: 240px;
 *       --formlos-shape-reach: 400px;
 *   }
 */

:root {
	/* Hoehenversatz der Schraege von ganz links nach ganz rechts. */
	--formlos-shape-drop: 300px;
	/* Reichweite der Farbe ab der Schraege. */
	--formlos-shape-reach: 820px;
	/* Weichzeichnung. Gedeckelt, damit grosse Werte nicht bremsen. */
	--formlos-shape-blur: clamp( 30px, calc( var(--formlos-shape-reach) * 0.4 ), 160px );
}

.fls-shape {
	position: relative;
	z-index: 0;
	display: block;
	width: 100%;
	height: var(--formlos-shape-drop);
	pointer-events: none;
}

/**
 * Angrenzende Zeilen liegen ueber der Form. Ihr Hintergrund ist in der
 * Regel transparent, die ausblendende Farbe scheint also durch, waehrend
 * Text und Bilder sauber darueber liegen. Nur Zeilen direkt neben einer
 * Form werden angefasst, damit sonst nichts an der Stapelung kippt.
 */
.fl-builder-content .fls-shape ~ .fl-row,
.fl-builder-content .fl-row:has( ~ .fls-shape ) {
	position: relative;
	z-index: 1;
}

.fls-shape__paint {
	position: absolute;
	left: 0;
	right: 0;
	height: calc( var(--formlos-shape-drop) + var(--formlos-shape-reach) );
}

.fls-shape--fill-below .fls-shape__paint {
	top: 0;
}

.fls-shape--fill-above .fls-shape__paint {
	bottom: 0;
}

/* --------------------------------------------------------------------
 * Schnittkante entlang der Schraege
 *
 * Die Punkte liegen 2% bzw. 2px ausserhalb der Box, damit die weiche
 * Antialiasing-Kante nie mit einer Boxkante zusammenfaellt.
 * ----------------------------------------------------------------- */

.fls-shape--down.fls-shape--fill-below .fls-shape__paint {
	clip-path: polygon(
		-2% calc( var(--formlos-shape-drop) * -0.02 ),
		102% calc( var(--formlos-shape-drop) * 1.02 ),
		102% calc( 100% + 2px ),
		-2% calc( 100% + 2px )
	);
}

.fls-shape--down.fls-shape--fill-above .fls-shape__paint {
	clip-path: polygon(
		-2% calc( 100% - var(--formlos-shape-drop) * 1.02 ),
		102% calc( 100% + var(--formlos-shape-drop) * 0.02 ),
		102% -2px,
		-2% -2px
	);
}

.fls-shape--up.fls-shape--fill-below .fls-shape__paint {
	clip-path: polygon(
		-2% calc( var(--formlos-shape-drop) * 1.02 ),
		102% calc( var(--formlos-shape-drop) * -0.02 ),
		102% calc( 100% + 2px ),
		-2% calc( 100% + 2px )
	);
}

.fls-shape--up.fls-shape--fill-above .fls-shape__paint {
	clip-path: polygon(
		-2% calc( 100% + var(--formlos-shape-drop) * 0.02 ),
		102% calc( 100% - var(--formlos-shape-drop) * 1.02 ),
		102% -2px,
		-2% -2px
	);
}

/* --------------------------------------------------------------------
 * Die beiden Farbflaechen
 *
 * Je 150% breit, sodass ihre Mittelpunkte genau auf der linken und der
 * rechten Kante liegen und sie sich im mittleren Drittel ueberlagern.
 * Dort mischen sie sich ueber die weiche Blur-Kante ineinander, statt
 * wie ein linearer Verlauf durch den ausgegrauten Mittelwert der beiden
 * Farben zu laufen.
 * ----------------------------------------------------------------- */

.fls-shape__blob {
	position: absolute;
	width: 75%;
	_height: calc( var(--formlos-shape-reach) * 2.4 );
	height:200px;
	border-radius: 50%;
	filter: blur( var(--formlos-shape-blur) );
	bottom:0;
	transform:rotate(-10deg);
}

.fls-shape__blob--left {
	left: 0%;
	background-color: var(--fls-c-left, transparent );
}

.fls-shape__blob--right {
	right: 0%;
	background-color: var(--fls-c-right, transparent );
}
.fls-shape--edge-bottom .fls-shape__blob--left {
	transform:rotate(-11deg);
	bottom: -100px;
}
.fls-shape--edge-bottom  .fls-shape__blob--right {
	transform:rotate(-11deg);
	bottom: 150px;
}
.fls-shape--edge-top .fls-shape__blob--left {
	transform:rotate(-11deg);
	top: -100px;
}
.fls-shape--edge-top .fls-shape__blob--right {
	transform:rotate(-11deg);
	top: 150px;
}
.fls-shape--edge-bottom.fls-shape--down .fls-shape__blob--left {
	transform:rotate(11deg);
	bottom: 100px;
}
.fls-shape--edge-bottom.fls-shape--down  .fls-shape__blob--right {
	transform:rotate(11deg);
	bottom: 0;
}
.fls-shape--edge-top.fls-shape--up .fls-shape__blob--left {
	transform:rotate(-11deg);
	top: 100px;
}
.fls-shape--edge-top.fls-shape--up .fls-shape__blob--right {
	transform:rotate(-11deg);
	top: 0;
}

.fls-shape--fill-below.fls-shape--down.fls-shape--edge-top .fls-shape__blob--left {
	transform: rotate(11deg);
	top:0;
}
.fls-shape--fill-below.fls-shape--down.fls-shape--edge-top .fls-shape__blob--right {
	transform: rotate(11deg);
}