/**
 * Flavors Blob Image - organic blob-masked image with CSS morph.
 *
 * The blob is an animated `border-radius` (8-value) that cycles through several
 * shapes - GPU-cheap, no JS. Six shape presets each pick their own morph family
 * (fbi-blob-1..6); the "variation" control layers a subtle scale/rotate pulse;
 * the backing blob sits behind, offset + scaled. The only JS is the optional
 * follow-cursor wobble (writes --fbi-wob-x/y). Per-instance values (size, speed,
 * offsets, colours, borders) come from Elementor control `selectors`.
 */

.flavor-blob-image {
	--fbi-size: 420px;
	--fbi-ratio: 1;
	--fbi-speed: 12s;
	--fbi-back-x: 30px;
	--fbi-back-y: 30px;
	--fbi-back-scale: 1.05;
	--fbi-dot-size: 16px;
	--fbi-wob-x: 0px;
	--fbi-wob-y: 0px;
	display: flex;
	justify-content: center;
	width: 100%;
}

.fbi-stack {
	position: relative;
	width: var(--fbi-size);
	max-width: 100%;
	aspect-ratio: var(--fbi-ratio);
}

/* Backing blob. */
.fbi-backing {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	background: linear-gradient(135deg, #6d5efc, #f34ea1);
	border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
	transform: translate(var(--fbi-back-x), var(--fbi-back-y)) scale(var(--fbi-back-scale));
	transform-origin: center;
}

/* Image blob. */
.fbi-shape {
	position: relative;
	z-index: 2;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
}

.fbi-image {
	width: 100%;
	height: 100%;
}

.fbi-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Orbit dots. */
.fbi-dots {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
}

.fbi-dot {
	position: absolute;
	width: var(--fbi-dot-size);
	height: var(--fbi-dot-size);
	border-radius: 50%;
	background: #ffd166;
}

.fbi-dot--1 {
	top: -3%;
	left: 12%;
	animation: fbi-float-1 7s ease-in-out infinite;
}

.fbi-dot--2 {
	top: 55%;
	right: -4%;
	animation: fbi-float-2 9s ease-in-out infinite;
}

.fbi-dot--3 {
	bottom: -2%;
	left: 60%;
	animation: fbi-float-3 8s ease-in-out infinite;
}

/* ------------------------------------------------------------ Shape presets */
.fbi-preset-1 .fbi-shape { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; }
.fbi-preset-2 .fbi-shape { border-radius: 58% 42% 50% 50% / 62% 55% 45% 38%; }
.fbi-preset-3 .fbi-shape { border-radius: 40% 60% 65% 35% / 40% 45% 55% 60%; }
.fbi-preset-4 .fbi-shape { border-radius: 67% 33% 55% 45% / 38% 62% 38% 62%; }
.fbi-preset-5 .fbi-shape { border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%; }
.fbi-preset-6 .fbi-shape { border-radius: 63% 37% 37% 63% / 43% 37% 63% 57%; }

/* --------------------------------------------------------------- Morphing */
.fbi-animate-yes .fbi-shape {
	animation: fbi-blob-1 var(--fbi-speed) ease-in-out infinite;
}

.fbi-animate-yes .fbi-backing {
	animation: fbi-blob-back var(--fbi-speed) ease-in-out infinite;
}

.fbi-animate-yes.fbi-preset-1 .fbi-shape { animation-name: fbi-blob-1; }
.fbi-animate-yes.fbi-preset-2 .fbi-shape { animation-name: fbi-blob-2; }
.fbi-animate-yes.fbi-preset-3 .fbi-shape { animation-name: fbi-blob-3; }
.fbi-animate-yes.fbi-preset-4 .fbi-shape { animation-name: fbi-blob-4; }
.fbi-animate-yes.fbi-preset-5 .fbi-shape { animation-name: fbi-blob-5; }
.fbi-animate-yes.fbi-preset-6 .fbi-shape { animation-name: fbi-blob-6; }

/* Variation pulse - layered on the inner image so it never fights the
   border-radius morph (different element, different property). */
.fbi-var-medium .fbi-image {
	animation: fbi-pulse-med calc(var(--fbi-speed) * 0.66) ease-in-out infinite;
}

.fbi-var-wild .fbi-image {
	animation: fbi-pulse-wild calc(var(--fbi-speed) * 0.5) ease-in-out infinite;
}

/* ------------------------------------------------------------------ Hover */
/* Pause. */
.fbi-hover-pause .fbi-stack:hover .fbi-shape,
.fbi-hover-pause .fbi-stack:hover .fbi-image,
.fbi-hover-pause .fbi-stack:hover .fbi-backing {
	animation-play-state: paused;
}

/* Speed up. */
.fbi-hover-speedup .fbi-stack:hover .fbi-shape,
.fbi-hover-speedup .fbi-stack:hover .fbi-image,
.fbi-hover-speedup .fbi-stack:hover .fbi-backing {
	animation-duration: calc(var(--fbi-speed) * 0.4);
}

/* Follow cursor (wobble) - JS writes --fbi-wob-x/y. */
.fbi-hover-wobble .fbi-shape {
	transform: translate(var(--fbi-wob-x), var(--fbi-wob-y));
	transition: transform 0.25s ease-out;
}

/* Editor empty-state. */
.fbi-empty {
	padding: 40px;
	text-align: center;
	border: 1px dashed #c3c4c7;
	border-radius: 8px;
	color: #646970;
}

/* ------------------------------------------------------------- Keyframes */
@keyframes fbi-blob-1 {
	0%, 100% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; }
	33%      { border-radius: 58% 42% 45% 55% / 55% 48% 52% 45%; }
	66%      { border-radius: 38% 62% 58% 42% / 62% 38% 62% 38%; }
}

@keyframes fbi-blob-2 {
	0%, 100% { border-radius: 58% 42% 50% 50% / 62% 55% 45% 38%; }
	33%      { border-radius: 45% 55% 62% 38% / 48% 62% 38% 52%; }
	66%      { border-radius: 63% 37% 42% 58% / 55% 45% 55% 45%; }
}

@keyframes fbi-blob-3 {
	0%, 100% { border-radius: 40% 60% 65% 35% / 40% 45% 55% 60%; }
	33%      { border-radius: 55% 45% 42% 58% / 60% 40% 60% 40%; }
	66%      { border-radius: 48% 52% 58% 42% / 45% 58% 42% 55%; }
}

@keyframes fbi-blob-4 {
	0%, 100% { border-radius: 67% 33% 55% 45% / 38% 62% 38% 62%; }
	33%      { border-radius: 42% 58% 40% 60% / 58% 42% 58% 42%; }
	66%      { border-radius: 55% 45% 63% 37% / 45% 55% 45% 55%; }
}

@keyframes fbi-blob-5 {
	0%, 100% { border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%; }
	33%      { border-radius: 62% 38% 55% 45% / 40% 55% 45% 60%; }
	66%      { border-radius: 38% 62% 45% 55% / 60% 45% 55% 40%; }
}

@keyframes fbi-blob-6 {
	0%, 100% { border-radius: 63% 37% 37% 63% / 43% 37% 63% 57%; }
	33%      { border-radius: 45% 55% 58% 42% / 58% 45% 55% 42%; }
	66%      { border-radius: 55% 45% 42% 58% / 42% 58% 42% 58%; }
}

@keyframes fbi-blob-back {
	0%, 100% { border-radius: 58% 42% 45% 55% / 52% 48% 52% 48%; }
	50%      { border-radius: 42% 58% 58% 42% / 45% 55% 45% 55%; }
}

@keyframes fbi-pulse-med {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.03); }
}

@keyframes fbi-pulse-wild {
	0%, 100% { transform: scale(1) rotate(0deg); }
	50%      { transform: scale(1.05) rotate(2deg); }
}

@keyframes fbi-float-1 {
	0%, 100% { transform: translate(0, 0); }
	50%      { transform: translate(6px, -10px); }
}

@keyframes fbi-float-2 {
	0%, 100% { transform: translate(0, 0); }
	50%      { transform: translate(-9px, 8px); }
}

@keyframes fbi-float-3 {
	0%, 100% { transform: translate(0, 0); }
	50%      { transform: translate(7px, 9px); }
}

@media (prefers-reduced-motion: reduce) {
	.fbi-shape,
	.fbi-image,
	.fbi-backing,
	.fbi-dot {
		animation: none !important;
	}

	.fbi-hover-wobble .fbi-shape {
		transform: none;
		transition: none;
	}
}