/**
 * FB Hero Rain Lite - styles
 *
 * The bottom fade is done with a CSS mask rather than a per-frame canvas
 * gradient. A mask is composited once on the GPU; a gradient fill would be
 * paid for on the main thread on every single frame.
 */

/* These are also set inline from JavaScript with !important, because Elementor
   ships `.e-con > *` rules at equal specificity that load after this file and
   would otherwise win on source order - leaving the canvas as an in-flow flex
   item that pushes the whole page down. Kept here so the effect still looks
   right for the split second before the script runs. */
.fbhrl-canvas {
	position: absolute !important;
	top: 0;
	left: 0 !important;
	width: 100%;
	z-index: 0 !important;
	display: block !important;
	pointer-events: none;
	user-select: none;

	-webkit-mask-image: linear-gradient(
		to bottom,
		rgba( 0, 0, 0, 1 ) 0%,
		rgba( 0, 0, 0, 1 ) var( --fbhrl-solid, 55% ),
		rgba( 0, 0, 0, 0 ) 100%
	);
	mask-image: linear-gradient(
		to bottom,
		rgba( 0, 0, 0, 1 ) 0%,
		rgba( 0, 0, 0, 1 ) var( --fbhrl-solid, 55% ),
		rgba( 0, 0, 0, 0 ) 100%
	);
}

/* Anything the theme puts inside the host needs to sit above the rain. */
.fbhrl-canvas ~ * {
	position: relative;
	z-index: 1;
}

@media ( prefers-reduced-motion: reduce ) {
	.fbhrl-canvas {
		opacity: 0.5;
	}
}