/**
 * BB Hero Blob - "liquid glass" edition
 * Layered, mouse-reactive liquid glows inside any ".bb-hero" section.
 * A gooey SVG filter (injected by the JS) makes the shapes merge and pull
 * apart like liquid; each blob carries a bright inner highlight so it reads
 * as translucent glass. Pure CSS + JS - no WebGL, no libraries.
 *
 * Layer stack (bottom -> top), all behind the section's own content:
 *   base colour -> liquid (gooey blobs) -> vignette -> grain
 */

.bb-hero {
	/* --- Tweakables (override on .bb-hero or via data-* attributes) --- */
	--bb-hero-base: #070512;        /* deep navy-black backdrop the glows sit on (set to transparent to keep your own bg) */
	--bb-blob-blur: 26px;           /* extra softness applied AFTER the liquid merge (lower = crisper glass) */
	--bb-blob-opacity: 0.75;        /* overall strength of the liquid layer */
	--bb-vignette: 0.75;            /* 0-1, how much the edges are darkened back to black */
	--bb-grain-opacity: 0.05;       /* film grain strength (0 = off) */

	position: relative;
	overflow: hidden;
	isolation: isolate; /* keeps the fx under this section's content only */
}

/* Full-bleed fx wrapper behind the content. */
.bb-hero__fx {
	position: absolute;
	z-index: -1;
	inset: 0;
	background: var(--bb-hero-base);
	pointer-events: none;
}

/* The liquid layer: the gooey filter blurs the blobs together then snaps the
   alpha back up, so overlapping shapes fuse like mercury. A touch of post-blur
   keeps the result glassy-soft instead of hard-edged. */
.bb-hero__liquid {
	position: absolute;
	inset: 0;
	filter: url(#bb-hero-goo) blur(var(--bb-blob-blur));
	mix-blend-mode: screen;
	opacity: var(--bb-blob-opacity);
}

/* One liquid blob. Colour/size/position come inline from the JS; the slow
   border-radius morph gives each shape an organic, molten outline. */
.bb-hero__aurora {
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 46% 54% 52% 48% / 54% 46% 52% 48%;
	background: radial-gradient(
		circle at 36% 30%,
		rgba(255, 255, 255, 0.9) 0%,
		rgba(140, 90, 255, 0.8) 42%,
		transparent 70%
	);
	animation: bb-hero-blob-morph 16s ease-in-out infinite alternate;
	will-change: transform, border-radius;
}

/* Molten outline - the goo filter turns these soft radius shifts into
   convincing liquid surface movement where blobs meet. */
@keyframes bb-hero-blob-morph {
	0% {
		border-radius: 46% 54% 52% 48% / 54% 46% 52% 48%;
	}
	33% {
		border-radius: 62% 38% 44% 56% / 42% 60% 40% 58%;
	}
	66% {
		border-radius: 40% 60% 58% 42% / 58% 38% 62% 42%;
	}
	100% {
		border-radius: 54% 46% 38% 62% / 46% 56% 44% 56%;
	}
}

/* Pull the edges back toward black so the glows read as light in a dark room. */
.bb-hero__vignette {
	position: absolute;
	inset: 0;
	background: radial-gradient(
		ellipse 130% 110% at 50% 40%,
		transparent 40%,
		rgba(0, 0, 0, calc(var(--bb-vignette) * 0.8)) 100%
	);
}

/* Fine animated-feeling grain via SVG turbulence (static, very cheap). */
.bb-hero__grain {
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 180px 180px;
	opacity: var(--bb-grain-opacity);
	mix-blend-mode: overlay;
}

/* Accessibility: everything still renders, it just holds still (JS also stops). */
@media (prefers-reduced-motion: reduce) {
	.bb-hero__aurora {
		animation: none;
	}
}