/* Interactive pixel-text band. Full-bleed black; the canvas is the only
   painted surface. Height is fixed per breakpoint so the section never shifts
   layout while the particles rebuild. */

.pixel-text-hero {
	position: relative;
	padding-block: 0;
	margin: 0;
	background: #000;
	overflow: hidden;
	/* Vertical page gestures must still scroll; we never call preventDefault. */
	touch-action: pan-y pinch-zoom;
	/* Sized for the two-line lockup, scaled with the type so the band keeps the
	   same breathing room above and below the block. */
	height: clamp(344px, 27.2vw, 512px);
}

@media (max-width: 1024px) {
	.pixel-text-hero { height: clamp(240px, 28.8vw, 320px); }
}

@media (max-width: 640px) {
	.pixel-text-hero { height: clamp(144px, 33.6vw, 208px); }
}

.pixel-text-hero__canvas {
	display: block;
	width: 100%;
	height: 100%;
	/* Revealed once the engine has rasterised the word, so the text fallback
	   below is what shows if JS or canvas is unavailable. */
	opacity: 0;
}

.pixel-text-hero.is-ready .pixel-text-hero__canvas { opacity: 1; }

/* Real heading stays in the document for assistive tech and search engines.
   Clipped rather than display:none so it is still exposed to screen readers. */
.pixel-text-hero__semantic {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Plain-text fallback: no JS, no canvas, or an engine failure. */
.pixel-text-hero__fallback {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding-inline: clamp(24px, 5.8vw, 105px);
	font-family: var(--font-head);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
	color: #FFD6A6;
}

/* Rough stand-in for the canvas lockup: the short line reads large, the long
   line small, both centred. Only ever seen without JS or canvas. */
.pixel-text-hero__fallback span { display: block; font-size: clamp(1.6rem, 6.6vw, 5.6rem); }
.pixel-text-hero__fallback span:last-child { font-size: clamp(3rem, 13vw, 11rem); }

.pixel-text-hero.is-ready .pixel-text-hero__fallback { display: none; }