.hybrid-model {
	background: var(--color-white);
	padding-block: var(--space-9);
}

.hybrid-model__circles {
	display: flex;
	justify-content: center;
	align-items: center;
}

/* .hybrid-circle sizes/positions the pair and is what GSAP's scroll reveal
   fades/slides in. Inside it, __shape (the animated border, absolutely
   positioned, empty) and __text (centered, static) are separate layers —
   the border can drift/morph freely without ever moving the text. */
.hybrid-circle {
	position: relative;
	width: clamp(320px, 28vw, 450px);
	height: clamp(320px, 28vw, 450px);
	display: flex;
	align-items: center;
	justify-content: center;
}

.hybrid-circle:nth-child(2) {
	margin-left: -8%;
}

/* "Cell division" drift: each shape morphs + nudges on its own independent,
   asymmetric timing/direction — not a mirrored pair — so they read as two
   things pulling apart rather than one shape wobbling in sync. */
.hybrid-circle__shape {
	position: absolute;
	inset: 0;
	border: 2px solid var(--color-teal);
	background: transparent;
	animation: hybridSplitLeft 9s ease-in-out infinite;
}

.hybrid-circle:nth-child(2) .hybrid-circle__shape {
	animation: hybridSplitRight 11s ease-in-out infinite;
}

@keyframes hybridSplitLeft {

	0%,
	100% {
		border-radius: 50%;
		transform: translate(0, 0);
	}

	30% {
		border-radius: 44% 56% 62% 38% / 58% 42% 60% 40%;
		transform: translate(-7px, -5px);
	}

	65% {
		border-radius: 56% 44% 40% 60% / 42% 60% 38% 62%;
		transform: translate(4px, 6px);
	}
}

@keyframes hybridSplitRight {

	0%,
	100% {
		border-radius: 50%;
		transform: translate(0, 0);
	}

	35% {
		border-radius: 60% 40% 46% 54% / 45% 62% 40% 58%;
		transform: translate(7px, 5px);
	}

	70% {
		border-radius: 40% 60% 54% 46% / 58% 38% 62% 42%;
		transform: translate(-5px, -4px);
	}
}

.hybrid-circle__text {
	position: relative;
	z-index: 1;
	max-width: 68%;
	text-align: center;
	color: var(--color-text-dark);
	font-weight: 400;
	font-size: 24px;
	line-height: 105%;
	letter-spacing: 0%;
}

@media (max-width: 768px) {
	.hybrid-model__circles {
		flex-direction: column;
	}

	/* Same "cell division" overlap as desktop's margin-left:-8%, just
	   turned 90deg — desktop overlaps side-by-side, mobile stacks and
	   overlaps top/bottom instead. Circle diameter is pinned at its
	   clamp() floor (300px) for every width in this media query, so a
	   fixed px overlap stays visually consistent rather than a
	   percentage (margin-top percentages resolve against the
	   containing block's WIDTH, not the element's own height). */
	.hybrid-circle:nth-child(2) {
		margin-left: 0;
		margin-top: -30px;
	}
}