/* FORMLOS Graffitti – Frontend */

.fl-row-flg {
	position: relative;
}

/* Content-Wrap liegt als Geschwister ueber dem Graffitti. */
.fl-row-flg > .fl-row-content-wrap {
	position: relative;
	z-index: 2;
}

.flg {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	pointer-events: none;
}

/* Standard: das Graffitti darf ueber den Zeilenrand hinauslaufen. */
.flg--clip {
	overflow: hidden;
}

.flg--behind  { z-index: 1; }
.flg--overlay { z-index: 3; }

.flg--h-left   { justify-content: flex-start; }
.flg--h-center { justify-content: center; }
.flg--h-right  { justify-content: flex-end; }
.flg--v-top    { align-items: flex-start; }
.flg--v-center { align-items: center; }
.flg--v-bottom { align-items: flex-end; }

.flg-svg {
	width: var(--flg-size, 100%);
	height: 100%;
	overflow: visible;
}

.flg--masked .flg-svg {
	-webkit-mask-image: var(--flg-mask);
	mask-image: var(--flg-mask);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.flg-svg path {
	fill: none;
	stroke: var(--flg-color, #6e2f36);
	stroke-width: var(--flg-w, 10px);
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Ohne JS bleibt das Graffitti sichtbar. Versteckt wird es erst,
   wenn das Skript die Laengen kennt und die Animation abspielen kann. */
.flg.is-armed .flg-svg path {
	stroke-dasharray: var(--flg-len, 900);
	stroke-dashoffset: var(--flg-len, 900);
}

.flg-mist {
	opacity: .18;
	filter: blur(calc(var(--flg-w, 10px) / 1.5));
}

.flg-mist path {
	stroke-width: calc(var(--flg-w, 10px) * 2.4);
}

/* Start erst, wenn die Linienlängen gesetzt sind (JS) */
.flg.is-drawing .flg-svg path {
	animation: flg-dash var(--flg-dur, 1s) var(--flg-ease, ease-in) var(--flg-delay, 0s) forwards;
}

.flg.is-drawing.flg--fade {
	animation: flg-fade 1s var(--flg-hold, 10s) linear forwards;
}

.fl-nanoscroller-content .fl-builder-settings-section-content .fl-form-table #fl-field-flg_draw {
	display: none !important;
}

.fl-flg-host {
	position: relative;
}

/* Der Inhalt muss selbst positioniert sein, sonst kann er nicht
   über einem positionierten Geschwister liegen. */
.fl-flg-host > .fl-row-content-wrap,
.fl-flg-host > .fl-module-content {
	position: relative;
	z-index: 2;
}


.flg--behind  { z-index: 0; }
.flg--overlay { z-index: 3; }

@keyframes flg-dash {
	to { stroke-dashoffset: 0; }
}

@keyframes flg-fade {
	to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.flg .flg-svg path,
	.flg--fade {
		animation: none !important;
		stroke-dashoffset: 0 !important;
		opacity: 1 !important;
	}
}