/* ============================================================
   AAFE Advanced Backgrounds & Floating Effects - CSS
   ============================================================ */

/* Base: all sections with a bg canvas get relative positioning */
[data-aafe-bg] {
	position: relative;
	overflow: hidden;
}

/* The canvas / SVG overlay sits behind content */
.aafe-bg-canvas,
.aafe-bg-wave,
.aafe-bg-noise {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

/* Make sure inner content sits on top */
[data-aafe-bg] > .elementor-container,
[data-aafe-bg] > .elementor-widget-container {
	position: relative;
	z-index: 1;
}

/* ─── Animated Gradient Background ─── */
[data-aafe-bg="gradient"] {
	background-size: 400% 400%;
	animation: aafe-gradient-shift var(--aafe-gradient-speed, 8s) ease infinite;
}

@keyframes aafe-gradient-shift {
	0%   { background-position: 0% 50%;   }
	50%  { background-position: 100% 50%; }
	100% { background-position: 0% 50%;   }
}

/* ─── Noise/Grain Overlay ─── */
[data-aafe-bg="noise"]::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
	background-size: 200px 200px;
	pointer-events: none;
	z-index: 1;
	opacity: 0.4;
}

/* ─── SVG Waves ─── */
.aafe-bg-wave {
	bottom: 0;
	top: auto;
	height: auto;
}
.aafe-bg-wave--top {
	top: 0;
	bottom: auto;
	transform: rotate(180deg);
}
.aafe-bg-wave svg {
	width: 100%;
	height: 80px;
	display: block;
}

/* ─── Particle Canvas ─── */
.aafe-bg-particles-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
}

/* ─── Floating Effects ─── */

/* Up & Down */
.aafe-float-dir-up-down.aafe-floating-yes > .elementor-widget-container,
.aafe-float-dir-up-down.aafe-floating-yes > .elementor-container,
.aafe-float-dir-up-down.aafe-floating-yes > .e-con-inner,
.aafe-float-dir-up-down.aafe-floating-yes > div {
	animation: aafe-float-updown var(--aafe-float-duration, 3s) ease-in-out var(--aafe-float-delay, 0s) infinite alternate;
}

@keyframes aafe-float-updown {
	from { transform: translateY(0); }
	to   { transform: translateY(calc(var(--aafe-float-distance, 15px) * -1)); }
}

/* Left & Right */
.aafe-float-dir-left-right.aafe-floating-yes > .elementor-widget-container,
.aafe-float-dir-left-right.aafe-floating-yes > .elementor-container,
.aafe-float-dir-left-right.aafe-floating-yes > .e-con-inner,
.aafe-float-dir-left-right.aafe-floating-yes > div {
	animation: aafe-float-lr var(--aafe-float-duration, 3s) ease-in-out var(--aafe-float-delay, 0s) infinite alternate;
}

@keyframes aafe-float-lr {
	from { transform: translateX(0); }
	to   { transform: translateX(var(--aafe-float-distance, 15px)); }
}

/* Rotate */
.aafe-float-dir-rotate.aafe-floating-yes > .elementor-widget-container,
.aafe-float-dir-rotate.aafe-floating-yes > .elementor-container,
.aafe-float-dir-rotate.aafe-floating-yes > .e-con-inner,
.aafe-float-dir-rotate.aafe-floating-yes > div {
	animation: aafe-float-rotate var(--aafe-float-duration, 3s) linear var(--aafe-float-delay, 0s) infinite;
}

@keyframes aafe-float-rotate {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

/* Pulse */
.aafe-float-dir-pulse.aafe-floating-yes > .elementor-widget-container,
.aafe-float-dir-pulse.aafe-floating-yes > .elementor-container,
.aafe-float-dir-pulse.aafe-floating-yes > .e-con-inner,
.aafe-float-dir-pulse.aafe-floating-yes > div {
	animation: aafe-float-pulse var(--aafe-float-duration, 3s) ease-in-out var(--aafe-float-delay, 0s) infinite alternate;
}

@keyframes aafe-float-pulse {
	from { transform: scale(1); }
	to   { transform: scale(1.08); }
}

/* Shake */
.aafe-float-dir-shake.aafe-floating-yes > .elementor-widget-container,
.aafe-float-dir-shake.aafe-floating-yes > .elementor-container,
.aafe-float-dir-shake.aafe-floating-yes > .e-con-inner,
.aafe-float-dir-shake.aafe-floating-yes > div {
	animation: aafe-float-shake var(--aafe-float-duration, 0.5s) ease-in-out var(--aafe-float-delay, 0s) infinite;
}

@keyframes aafe-float-shake {
	0%, 100% { transform: translateX(0); }
	20%       { transform: translateX(-5px); }
	40%       { transform: translateX(5px); }
	60%       { transform: translateX(-3px); }
	80%       { transform: translateX(3px); }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
	.aafe-floating-yes > * {
		animation: none !important;
	}
}