/*
 * Warrior Airflow Hero
 *
 * Add the CSS class "warrior-airflow-hero" to the main Elementor hero
 * container. The JavaScript will insert the canvas automatically.
 */

.warrior-airflow-hero {
	--warrior-airflow-opacity: 0.27;
	--warrior-airflow-radius: 185;
	--warrior-airflow-lines: 12;
	--warrior-airflow-speed: 1;

	position: relative !important;
	overflow: hidden;
	isolation: isolate;
}

/* The animated layer */
.warrior-airflow-hero > .warrior-airflow-canvas {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
}

/* Keep Elementor content above the animation */
.warrior-airflow-hero > .e-con-inner,
.warrior-airflow-hero > .elementor-container,
.warrior-airflow-hero > .elementor-widget-wrap,
.warrior-airflow-hero > .elementor-element:not(.warrior-airflow-canvas) {
	position: relative;
	z-index: 2;
}

@media (max-width: 767px) {
	.warrior-airflow-hero {
		--warrior-airflow-opacity: 0.19;
		--warrior-airflow-lines: 7;
		--warrior-airflow-radius: 135;
	}
}

@media (prefers-reduced-motion: reduce) {
	.warrior-airflow-hero > .warrior-airflow-canvas {
		opacity: 0.55;
	}
}