/**
 * Feature Ship Section
 *
 * "Ship in Minutes, Not Hours" section with purple/lavender blob background.
 *
 * @package AgenticWP
 */

/* Animated blob background container - extends both directions */
.ship-background {
	top: -120px; /* Extend into previous section for seamless blend */
	bottom: -120px; /* Extend into next section for seamless blend */
	filter: url('#ship-plasma');
}

/* Blob color customization for ship section */
.ship-background .ship-blob {
	background: radial-gradient(
		circle,
		var(--feature-ship-bg, #ede9fe) 0%,
		rgba(237, 233, 254, 0.1) 100%
	);
}

/* Blob animations with unique timings */
#ship-blob-1 {
	animation: blob-float-1 24s ease-in-out infinite;
}

#ship-blob-2 {
	animation: blob-float-2 28s ease-in-out infinite 6s;
}

#ship-blob-3 {
	animation: blob-float-3 26s ease-in-out infinite 12s;
}

#ship-blob-4 {
	animation: blob-float-4 25s ease-in-out infinite 4s;
}

#ship-blob-5 {
	animation: blob-float-5 30s ease-in-out infinite 8s;
}

/* New Layout Styles */
.feature-content-wrapper {
	position: relative;
	z-index: 1;
	max-width: 1000px;
	margin: 0 auto;
}

/* Gradient accent for heading */
.feature-ship h2 .accent {
	background: var(--gradient-violet);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: #4C1D95;
}

.ship-grid {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 2rem;
	align-items: center;
	margin: 3rem 0;
	text-align: left;
}

.ship-card {
	background: linear-gradient(135deg, rgba(237, 233, 254, 0.7), rgba(219, 234, 254, 0.7)); /* Violet to blue gradient matching blob */
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	padding: 2rem;
	border-radius: 22px;
	border: 1px solid var(--line);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ship-card p {
	margin-bottom: 0;
	font-size: 1rem;
	line-height: 1.6;
}

.problem-card h3 {
	color: #ef4444; /* Red-500 for "Problem" */
}

.solution-card h3 {
	color: #8b5cf6; /* Violet-500 */
}

.ship-arrow {
	color: #8b5cf6;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Responsive */
@media (max-width: 768px) {
	.ship-grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.ship-arrow {
		transform: rotate(90deg);
	}
}