/* Market Brew Animated Background System */

/* Background gradient using brand colors */
.mb-animated-background {
	background: linear-gradient(135deg, #05213d 0%, #1252a8 50%, #00a99b 100%);
	min-height: 100vh;
	position: relative;
	overflow: hidden;
}

/* Animated floating bubbles and shapes */
.mb-animated-background::before,
.mb-animated-background::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	z-index: 1;
}

.mb-animated-background::before {
	width: 200px;
	height: 200px;
	background: radial-gradient(circle, rgba(0, 255, 255, 0.15) 0%, rgba(0, 169, 155, 0.1) 50%, transparent 70%);
	top: 20%;
	left: -50px;
	animation: float 15s infinite ease-in-out;
}

.mb-animated-background::after {
	width: 150px;
	height: 150px;
	background: radial-gradient(circle, rgba(18, 82, 168, 0.2) 0%, rgba(0, 169, 155, 0.05) 60%, transparent 80%);
	bottom: 10%;
	right: -30px;
	animation: float 12s infinite ease-in-out reverse;
}

/* Additional floating elements */
.floating-elements {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
}

.bubble {
	position: absolute;
	border-radius: 50%;
	opacity: 0.6;
	animation: bubbleFloat 20s infinite linear;
}

.bubble-1 {
	width: 80px;
	height: 80px;
	background: radial-gradient(circle, rgba(0, 255, 255, 0.3) 0%, rgba(0, 255, 255, 0.1) 50%, transparent 70%);
	left: 10%;
	animation-delay: -5s;
	animation-duration: 25s;
}

.bubble-2 {
	width: 120px;
	height: 120px;
	background: radial-gradient(circle, rgba(0, 169, 155, 0.25) 0%, rgba(0, 169, 155, 0.08) 60%, transparent 80%);
	right: 15%;
	animation-delay: -10s;
	animation-duration: 30s;
}

.bubble-3 {
	width: 60px;
	height: 60px;
	background: radial-gradient(circle, rgba(18, 82, 168, 0.4) 0%, rgba(18, 82, 168, 0.15) 40%, transparent 70%);
	left: 70%;
	animation-delay: -15s;
	animation-duration: 22s;
}

.bubble-4 {
	width: 40px;
	height: 40px;
	background: radial-gradient(circle, rgba(0, 255, 255, 0.5) 0%, rgba(0, 255, 255, 0.2) 30%, transparent 60%);
	left: 80%;
	animation-delay: -8s;
	animation-duration: 18s;
}

.bubble-5 {
	width: 90px;
	height: 90px;
	background: radial-gradient(circle, rgba(0, 169, 155, 0.35) 0%, rgba(0, 169, 155, 0.12) 50%, transparent 75%);
	left: 25%;
	animation-delay: -12s;
	animation-duration: 28s;
}

/* Lava lamp blobs - spread out with unique paths */
.lava-blob {
	position: absolute;
	opacity: 0.4;
	filter: blur(2px);
	pointer-events: none;
}

.lava-1 {
	width: 300px;
	height: 400px;
	background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.1) 80%, transparent 100%);
	border-radius: 50% 50% 60% 40%;
	left: 5%;
	bottom: 0;
	animation: chaosLava1 40s infinite ease-in-out;
}

.lava-2 {
	width: 450px;
	height: 350px;
	background: radial-gradient(ellipse at center, rgba(5, 33, 61, 0.5) 0%, rgba(5, 33, 61, 0.25) 60%, rgba(5, 33, 61, 0.1) 85%, transparent 100%);
	border-radius: 60% 40% 50% 50%;
	left: 25%;
	bottom: 0;
	animation: chaosLava2 50s infinite ease-in-out;
	animation-delay: -15s;
}

.lava-3 {
	width: 380px;
	height: 320px;
	background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.2) 55%, rgba(255, 255, 255, 0.05) 80%, transparent 100%);
	border-radius: 40% 60% 65% 35%;
	left: 50%;
	bottom: 0;
	animation: chaosLava3 35s infinite ease-in-out;
	animation-delay: -25s;
}

.lava-4 {
	width: 280px;
	height: 380px;
	background: radial-gradient(ellipse at center, rgba(5, 33, 61, 0.4) 0%, rgba(5, 33, 61, 0.2) 50%, rgba(5, 33, 61, 0.08) 75%, transparent 100%);
	border-radius: 55% 45% 45% 55%;
	left: 70%;
	bottom: 0;
	animation: chaosLava4 45s infinite ease-in-out;
	animation-delay: -10s;
}

.lava-5 {
	width: 420px;
	height: 280px;
	background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.18) 60%, rgba(255, 255, 255, 0.06) 85%, transparent 100%);
	border-radius: 45% 55% 60% 40%;
	left: 85%;
	bottom: 0;
	animation: chaosLava5 55s infinite ease-in-out;
	animation-delay: -30s;
}

/* Organic floating shapes */
.organic-shape {
	position: absolute;
	opacity: 0.4;
	filter: blur(1px);
	animation: organicFloat 35s infinite ease-in-out;
}

.organic-1 {
	width: 300px;
	height: 200px;
	background: linear-gradient(45deg, rgba(0, 169, 155, 0.15) 0%, rgba(18, 82, 168, 0.1) 100%);
	border-radius: 50% 30% 70% 40%;
	top: 30%;
	left: -10%;
	animation-delay: -5s;
}

.organic-2 {
	width: 250px;
	height: 180px;
	background: linear-gradient(135deg, rgba(0, 255, 255, 0.12) 0%, rgba(0, 169, 155, 0.08) 100%);
	border-radius: 40% 60% 30% 70%;
	bottom: 20%;
	right: -5%;
	animation-delay: -20s;
}



/* Card styling that sits above the animated background */
.mb-content-card {
	position: relative;
	z-index: 10;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10px);
	border-radius: 24px;
	box-shadow: 0 20px 40px rgba(5, 33, 61, 0.3);
	border: 1px solid rgba(0, 169, 155, 0.2);
	padding: 2rem;
}

/* Keyframe animations */
@keyframes float {
	0%, 100% {
		transform: translateY(0px) rotate(0deg);
	}
	33% {
		transform: translateY(-30px) rotate(120deg);
	}
	66% {
		transform: translateY(-60px) rotate(240deg);
	}
}

@keyframes bubbleFloat {
	0% {
		transform: translateY(100vh) translateX(0px) rotate(0deg);
		opacity: 0;
	}
	10% {
		opacity: 0.6;
	}
	90% {
		opacity: 0.6;
	}
	100% {
		transform: translateY(-100px) translateX(100px) rotate(360deg);
		opacity: 0;
	}
}

@keyframes organicFloat {
	0%, 100% {
		transform: translateY(0px) translateX(0px) rotate(0deg) scale(1);
	}
	25% {
		transform: translateY(-50px) translateX(30px) rotate(90deg) scale(1.1);
	}
	50% {
		transform: translateY(-30px) translateX(-20px) rotate(180deg) scale(0.9);
	}
	75% {
		transform: translateY(-70px) translateX(50px) rotate(270deg) scale(1.05);
	}
}

/* Unique path animations with strong horizontal movement */
@keyframes chaosLava1 {
	0% {
		transform: translateY(0px) translateX(0px) scale(1) rotate(0deg);
		border-radius: 50% 50% 60% 40%;
	}
	15% {
		transform: translateY(-150px) translateX(-120px) scale(1.3) rotate(60deg);
		border-radius: 70% 30% 40% 60%;
	}
	30% {
		transform: translateY(-350px) translateX(80px) scale(0.8) rotate(150deg);
		border-radius: 30% 70% 80% 20%;
	}
	45% {
		transform: translateY(-520px) translateX(-200px) scale(1.1) rotate(240deg);
		border-radius: 60% 40% 30% 70%;
	}
	60% {
		transform: translateY(-400px) translateX(150px) scale(0.9) rotate(300deg);
		border-radius: 40% 60% 70% 30%;
	}
	80% {
		transform: translateY(-200px) translateX(-80px) scale(1.2) rotate(360deg);
		border-radius: 80% 20% 50% 50%;
	}
	100% {
		transform: translateY(0px) translateX(0px) scale(1) rotate(420deg);
		border-radius: 50% 50% 60% 40%;
	}
}

@keyframes chaosLava2 {
	0% {
		transform: translateY(0px) translateX(0px) scale(1) rotate(0deg);
		border-radius: 60% 40% 50% 50%;
	}
	20% {
		transform: translateY(-280px) translateX(200px) scale(0.7) rotate(80deg);
		border-radius: 30% 70% 60% 40%;
	}
	35% {
		transform: translateY(-480px) translateX(-150px) scale(1.4) rotate(170deg);
		border-radius: 80% 20% 30% 70%;
	}
	50% {
		transform: translateY(-600px) translateX(100px) scale(0.9) rotate(250deg);
		border-radius: 40% 60% 80% 20%;
	}
	70% {
		transform: translateY(-350px) translateX(-250px) scale(1.1) rotate(330deg);
		border-radius: 70% 30% 40% 60%;
	}
	85% {
		transform: translateY(-120px) translateX(120px) scale(1.3) rotate(390deg);
		border-radius: 50% 50% 70% 30%;
	}
	100% {
		transform: translateY(0px) translateX(0px) scale(1) rotate(450deg);
		border-radius: 60% 40% 50% 50%;
	}
}

@keyframes chaosLava3 {
	0% {
		transform: translateY(0px) translateX(0px) scale(1) rotate(0deg);
		border-radius: 40% 60% 65% 35%;
	}
	25% {
		transform: translateY(-200px) translateX(-180px) scale(1.2) rotate(90deg);
		border-radius: 65% 35% 40% 60%;
	}
	40% {
		transform: translateY(-450px) translateX(160px) scale(0.8) rotate(180deg);
		border-radius: 30% 70% 50% 50%;
	}
	55% {
		transform: translateY(-550px) translateX(-100px) scale(1.3) rotate(270deg);
		border-radius: 70% 30% 60% 40%;
	}
	75% {
		transform: translateY(-300px) translateX(220px) scale(0.9) rotate(360deg);
		border-radius: 50% 50% 80% 20%;
	}
	90% {
		transform: translateY(-100px) translateX(-60px) scale(1.1) rotate(450deg);
		border-radius: 80% 20% 35% 65%;
	}
	100% {
		transform: translateY(0px) translateX(0px) scale(1) rotate(540deg);
		border-radius: 40% 60% 65% 35%;
	}
}

@keyframes chaosLava4 {
	0% {
		transform: translateY(0px) translateX(0px) scale(1) rotate(0deg);
		border-radius: 55% 45% 45% 55%;
	}
	18% {
		transform: translateY(-180px) translateX(140px) scale(1.4) rotate(70deg);
		border-radius: 30% 70% 80% 20%;
	}
	35% {
		transform: translateY(-420px) translateX(-190px) scale(0.7) rotate(160deg);
		border-radius: 70% 30% 40% 60%;
	}
	52% {
		transform: translateY(-500px) translateX(80px) scale(1.2) rotate(250deg);
		border-radius: 40% 60% 70% 30%;
	}
	70% {
		transform: translateY(-280px) translateX(-240px) scale(0.9) rotate(320deg);
		border-radius: 80% 20% 50% 50%;
	}
	87% {
		transform: translateY(-90px) translateX(110px) scale(1.3) rotate(400deg);
		border-radius: 60% 40% 30% 70%;
	}
	100% {
		transform: translateY(0px) translateX(0px) scale(1) rotate(480deg);
		border-radius: 55% 45% 45% 55%;
	}
}

@keyframes chaosLava5 {
	0% {
		transform: translateY(0px) translateX(0px) scale(1) rotate(0deg);
		border-radius: 45% 55% 60% 40%;
	}
	22% {
		transform: translateY(-260px) translateX(-160px) scale(0.8) rotate(100deg);
		border-radius: 70% 30% 50% 50%;
	}
	40% {
		transform: translateY(-490px) translateX(180px) scale(1.3) rotate(200deg);
		border-radius: 30% 70% 80% 20%;
	}
	58% {
		transform: translateY(-580px) translateX(-120px) scale(0.9) rotate(280deg);
		border-radius: 60% 40% 30% 70%;
	}
	76% {
		transform: translateY(-340px) translateX(200px) scale(1.1) rotate(360deg);
		border-radius: 80% 20% 60% 40%;
	}
	92% {
		transform: translateY(-110px) translateX(-90px) scale(1.2) rotate(440deg);
		border-radius: 40% 60% 70% 30%;
	}
	100% {
		transform: translateY(0px) translateX(0px) scale(1) rotate(520deg);
		border-radius: 45% 55% 60% 40%;
	}
}

@keyframes sparkle {
	0%, 100% {
		opacity: 0.8;
		transform: translateY(0px);
	}
	50% {
		opacity: 0.4;
		transform: translateY(-10px);
	}
}