/* Background Effects CSS for Pixora Theme */

/* Canvas Wrapper - Base styles for all effects */
.canvas-wrapper {
	position: absolute;
	left: 0;
	top: 0;
	height: 100vh;
	right: 0;
	z-index: -1;
}

.canvas-wrapper::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 400px;
	display: block;
	background: linear-gradient(to top, var(--wp--preset--color--background) 0%, rgba(0, 0, 0, 0) 80%);
}

/* Gradient Mesh Effect */
.gradient-mesh-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: -1;
	overflow: hidden;
	background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 100%);
}

.gradient-blob {
	position: absolute;
	width: var(--size, 40vw);
	height: var(--size, 40vw);
	left: var(--x, 50%);
	top: var(--y, 50%);
	transform: translate(-50%, -50%);
	border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
	background: radial-gradient(circle at 30% 30%, var(--color1), var(--color2));
	opacity: 0.08;
	filter: blur(60px);
	mix-blend-mode: screen;
	animation: blob-morph var(--duration, 20s) ease-in-out infinite;
	animation-direction: var(--direction, normal);
}

.gradient-blob-1 { animation-delay: 0s; }
.gradient-blob-2 { animation-delay: -5s; }
.gradient-blob-3 { animation-delay: -10s; }
.gradient-blob-4 { animation-delay: -15s; }
.gradient-blob-5 { animation-delay: -20s; }
.gradient-blob-6 { animation-delay: -8s; }

@keyframes blob-morph {
	0%, 100% {
		border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
		transform: translate(-50%, -50%) scale(1) rotate(0deg);
	}
	20% {
		border-radius: 55% 45% 65% 35% / 45% 60% 40% 55%;
		transform: translate(-45%, -55%) scale(1.15) rotate(72deg);
	}
	40% {
		border-radius: 65% 35% 30% 70% / 55% 40% 60% 45%;
		transform: translate(-35%, -60%) scale(0.95) rotate(144deg);
	}
	60% {
		border-radius: 45% 55% 50% 50% / 35% 65% 35% 65%;
		transform: translate(-60%, -45%) scale(1.08) rotate(216deg);
	}
	80% {
		border-radius: 30% 70% 60% 40% / 60% 30% 70% 40%;
		transform: translate(-55%, -35%) scale(1.02) rotate(288deg);
	}
}

/* Floating Particles Effect */
.particles-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: -1;
	overflow: hidden;
}

.particle {
	position: absolute;
	width: var(--size, 3px);
	height: var(--size, 3px);
	background: var(--color, #24f59e);
	border-radius: 50%;
	box-shadow: var(--wp--preset--shadow--glow);
	opacity: 0.6;
	left: var(--x-start, 50%);
	top: var(--y-start, 50%);
	animation: particle-float var(--duration, 20s) ease-in-out infinite;
	animation-delay: var(--delay, 0s);
}

@keyframes particle-float {
	0%, 100% {
		transform: translate(0, 0);
		opacity: 0;
	}
	10% {
		opacity: 0.6;
	}
	20% {
		transform: translate(20vw, -30vh) scale(1.2);
	}
	40% {
		transform: translate(-15vw, -60vh) scale(0.8);
	}
	60% {
		transform: translate(25vw, -40vh) scale(1.1);
	}
	80% {
		transform: translate(-10vw, -20vh) scale(0.9);
		opacity: 0.6;
	}
	90% {
		opacity: 0;
	}
}

/* Animated Lines Effect */
.animated-lines-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: -1;
	overflow: hidden;
}

.animated-line {
	position: absolute;
	width: var(--line-length, 40vw);
	height: 1px;
	background: linear-gradient(
		to right,
		transparent 0%,
		var(--line-color, #24f59e) 50%,
		transparent 100%
	);
	left: var(--line-x, 50%);
	top: var(--line-y, 50%);
	transform-origin: left center;
	transform: rotate(var(--line-angle, 45deg));
	opacity: 0;
	box-shadow: var(--wp--preset--shadow--subtle);
	animation: line-flow var(--line-duration, 20s) ease-in-out infinite;
	animation-delay: var(--line-delay, 0s);
}

@keyframes line-flow {
	0% {
		opacity: 0;
		transform: rotate(var(--line-angle, 45deg)) translateX(-20%) scaleX(0.5);
	}
	10% {
		opacity: 0.4;
	}
	20% {
		opacity: 0.6;
	}
	50% {
		opacity: 0.6;
		transform: rotate(var(--line-angle, 45deg)) translateX(50%) scaleX(1.2);
	}
	80% {
		opacity: 0.6;
	}
	90% {
		opacity: 0.4;
	}
	100% {
		opacity: 0;
		transform: rotate(var(--line-angle, 45deg)) translateX(120%) scaleX(0.5);
	}
}

/* Liquid Ripple Effect */
.liquid-ripple-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: -1;
	overflow: hidden;
}

#liquid-ripple-canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -2;
	opacity: 0.6;
	pointer-events: none;
	mix-blend-mode: overlay;
}

/* Liquid Wave Effect */
.liquid-wave-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: -1;
	overflow: hidden;
}

#liquid-wave-canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -2;
	opacity: 0.6;
	pointer-events: none;
	mix-blend-mode: overlay;
}

/* Fluid Motion Effect */
.fluid-motion-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: -1;
	overflow: hidden;
}

#fluid-motion-canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -2;
	opacity: 0.5;
	pointer-events: none;
	mix-blend-mode: soft-light;
}

/* Flowing Tubes Effect */
.flowing-tubes-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: -1;
	overflow: hidden;
}

.flowing-tube {
	position: absolute;
	width: var(--tube-width, 5vw);
	height: var(--tube-height, 200vh);
	left: calc(var(--tube-start-y, 50%) - var(--tube-width, 5vw) / 2);
	top: -50vh;
	background: linear-gradient(
		to bottom,
		transparent 0%,
		var(--tube-color, #24f59e) 30%,
		var(--tube-color, #24f59e) 70%,
		transparent 100%
	);
	opacity: 0.06;
	filter: blur(20px);
	border-radius: 50px;
	animation: tube-flow var(--tube-duration, 25s) linear infinite;
	animation-delay: var(--tube-delay, 0s);
}

@keyframes tube-flow {
	0% {
		transform: translateY(0) scaleY(0.8);
	}
	50% {
		transform: translateY(40vh) scaleY(1.2);
	}
	100% {
		transform: translateY(80vh) scaleY(0.8);
	}
}

/* Mouse Trailer Canvas */
canvas#mouse-trailer {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: -1;
	pointer-events: none;
}