/*
 * Background Blobs: three soft colour shapes fixed behind the page.
 * Every value reads a setting of the Design page, "Background Blobs" tab; the value after the comma is the default.
 *
 * Each shape is a radial gradient, drawn once, so a phone has nothing to recalculate while the page scrolls. It fades out smoothly:
 * solid inside, half strength at the edge of the shape, gone two "softness" widths outside it.
 */

.stbhh-blobs {
	position: fixed;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.stbhh-blob {
	position: absolute;
	width: var(--stbhh-blob-size);
	height: var(--stbhh-blob-size);
	opacity: var(--stbhh-blob-opacity);
}

/* The gradient is wider than the shape, so it can fade out beyond it. */
.stbhh-blob::before {
	content: "";
	position: absolute;
	inset: calc(-2 * var(--stbhh-set-bl-fade, 90px));
	border-radius: 50%;
	background: radial-gradient(circle closest-side, var(--stbhh-blob-color), transparent);
}

.stbhh-blob--1 {
	--stbhh-blob-size: var(--stbhh-set-bl-1-size, 440px);
	--stbhh-blob-color: var(--stbhh-set-bl-1-color, #D8EDFF);
	--stbhh-blob-opacity: var(--stbhh-set-bl-1-opacity, .15);
	top: var(--stbhh-set-bl-1-top, -160px);
	left: var(--stbhh-set-bl-1-left, -110px);
}

.stbhh-blob--2 {
	--stbhh-blob-size: var(--stbhh-set-bl-2-size, 340px);
	--stbhh-blob-color: var(--stbhh-set-bl-2-color, #FFD9E7);
	--stbhh-blob-opacity: var(--stbhh-set-bl-2-opacity, .1);
	top: var(--stbhh-set-bl-2-top, 26%);
	right: var(--stbhh-set-bl-2-right, -150px);
}

.stbhh-blob--3 {
	--stbhh-blob-size: var(--stbhh-set-bl-3-size, 380px);
	--stbhh-blob-color: var(--stbhh-set-bl-3-color, #CDF3E4);
	--stbhh-blob-opacity: var(--stbhh-set-bl-3-opacity, .1);
	bottom: var(--stbhh-set-bl-3-bottom, 10%);
	left: var(--stbhh-set-bl-3-left, -140px);
}

/* A browser that has color-mix() gets the full fade; the others keep the simple two-colour gradient above. */
@supports (background: color-mix(in srgb, red 50%, transparent)) {
	.stbhh-blob::before {
		background: radial-gradient(
			circle closest-side,
			var(--stbhh-blob-color) 0,
			color-mix(in srgb, var(--stbhh-blob-color) 84%, transparent) calc(var(--stbhh-blob-size) / 2 - var(--stbhh-set-bl-fade, 90px)),
			color-mix(in srgb, var(--stbhh-blob-color) 50%, transparent) calc(var(--stbhh-blob-size) / 2),
			color-mix(in srgb, var(--stbhh-blob-color) 16%, transparent) calc(var(--stbhh-blob-size) / 2 + var(--stbhh-set-bl-fade, 90px)),
			transparent calc(var(--stbhh-blob-size) / 2 + 2 * var(--stbhh-set-bl-fade, 90px))
		);
	}
}

/* "Show on phones" on the Design page. */
@media (max-width: 767px) {
	.stbhh-blobs {
		display: var(--stbhh-set-bl-phones, block);
	}
}