.has-blobs {
	position: relative;
	--blob-color: #2c5796;
}

/* 背景色がある部分では白抜き */
.has-blobs--white {
	--blob-color: #fff;
}

.has-blobs > :not(.blob-layer) {
	position: relative;
	z-index: 1;
}

.blob-layer {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	/* 上下ははみ出しOK、左右だけ切り取って横スクロールを防ぐ */
	overflow-x: clip;
}

/* 外側:配置とパララックスの横揺れ */
.blob {
	position: absolute;
	width: var(--size);
	aspect-ratio: 1;
	translate: calc(-50% + var(--progress, 0) * var(--depth, 0) * 1px) -50%;
	color: var(--blob-color);
	will-change: translate;
	/* 島のポップアップ:最初は隠しておき、is-blob-in で中心から順に浮き出る */
	scale: 0;
	opacity: 0;
	transition:
		scale 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) var(--pop-delay, 0s),
		opacity 0.4s ease var(--pop-delay, 0s);
}

.is-blob-in .blob {
	scale: 1;
	opacity: 1;
}

/* 内側:回転とふわふわした動き */
.blob svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
	rotate: var(--rot);
	animation: blob-float var(--dur) ease-in-out var(--delay) infinite alternate;
    opacity: 0.7;
}
.has-blobs--white svg{
    opacity: 1;
}

@keyframes blob-float {
	to {
		transform: translate(12px, -18px) rotate(25deg) scale(1.08);
	}
}

@media (prefers-reduced-motion: reduce) {
	.blob {
		translate: -50% -50%;
		scale: 1;
		opacity: 1;
		transition: none;
	}

	.blob svg {
		animation: none;
	}
}