/* NCF Blob Reveal — works with the colourfield2026 theme's banner:

   .hintrotitle
     video / img      ← ACF "Banner background". We clip this with the blob.
     .intro-text      ← white bg + mix-blend-mode: screen, so the layers behind
                        only show through the letters.

   .ncf-blob-active is added by our JS once the blob is set up. Without JS the
   banner stays exactly as the theme renders it. */

.hintrotitle.ncf-blob-active {
	/* What the letters show where the blob isn't. #232323 = "Black Carbon" from the theme palette. */
	background-color: var(--ncf-blob-base, #232323);
}

/* Normal arrow over the title instead of the text-select I-beam. */
.hintrotitle.ncf-blob-active,
.hintrotitle.ncf-blob-active * {
	cursor: default;
}

/* Generated shader background (banner-bg.js), in place of the ACF video. */
.hintrotitle > .ncf-blob-canvas {
	position: absolute;
	z-index: 9;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

/* No WebGL: the SVG blob reveals this gradient instead. */
.ncf-blob-fallback {
	position: absolute;
	z-index: 9;
	inset: 0;
	background:
		radial-gradient(circle at 20% 30%, #ff4d6d 0 18%, transparent 40%),
		radial-gradient(circle at 75% 25%, #ffd166 0 15%, transparent 38%),
		radial-gradient(circle at 60% 80%, #06d6a0 0 18%, transparent 42%),
		linear-gradient(120deg, #7209b7, #f72585);
}

/* The <svg> only holds the clipPath definition — take it out of layout. */
.ncf-blob-defs {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}