/**
 * KA Paint Hero
 *
 * The canvas sits behind the hero's own content. Everything here is scoped to
 * .ka-paint-hero, a class the script adds only after WebGL has actually
 * initialised — so if the effect never starts, none of these rules apply and
 * the hero renders exactly as the theme intended.
 */

.ka-paint-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

/* The two-class selector is deliberate. WordPress's constrained-layout rule —
   `.is-layout-constrained > :where(:not(.alignfull)…) { max-width: …; margin: auto }` —
   matches every direct child of the hero, canvas included, and would otherwise
   squeeze this to the theme's 672px content width and centre it. `:where()`
   contributes no specificity, so scoping to `.ka-paint-hero > .ka-paint-hero__canvas`
   wins the cascade cleanly without !important. */
.ka-paint-hero > .ka-paint-hero__canvas {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity 1200ms ease-out;
	will-change: opacity;
}

/* Lift the hero's real content above the wash. The theme's own children are
   direct descendants, so this needs no knowledge of their class names. */
.ka-paint-hero > *:not(.ka-paint-hero__canvas) {
	position: relative;
	z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
	.ka-paint-hero__canvas {
		transition: none;
	}
}