/* =========================================================================
   HNZ Constructions — site watermark

   The H / N / Z letters scattered through the page background. The layer is
   emitted at the top of <body> by header.php and filled by initWatermark()
   in assets/js/main.js, which reads every knob below through
   getComputedStyle() — tune the look here, not in the JS.

   Enqueued by hnz_enqueue_assets() in inc/enqueue.php, which fixes the load
   order. Design tokens live in tokens.css; these four stay local to the
   feature because the JS reads them by name.
   ========================================================================= */

:root {
	--c-watermark: #cfcfcf;

	/* Multiplier on each letter's own native size — h 98x95, n 98x94,
	   z 95x94, straight off their SVGs. The three letters differ slightly,
	   as they do in the logo, so there is no single size token. */
	--watermark-scale: 1;

	/* Page area, in px², that each letter gets. Lower = denser. 216000 is
	   ~6 letters on a 1440x900 screen. */
	--watermark-density: 216000;

	/* Letters are never placed closer than this, centre to centre. */
	--watermark-min-gap: 180px;

	/* How far a letter travels as the pointer crosses the whole viewport.
	   Deliberately small — this should register as the page breathing, not
	   as something moving. */
	--watermark-drift: 10px;

	/* Half-angle in degrees that a letter's direction can stray from the
	   pointer's. 0 moves them all in lockstep; 90 has some travelling
	   sideways while none travel against the pointer; 180 is pure noise. */
	--watermark-drift-spread: 90;

	/* Letters the pointer reaches are knocked straight out of its way, by up
	   to --watermark-push, tapering to nothing at --watermark-push-radius.
	   They settle back on their own once it leaves. */
	--watermark-push: 26px;
	--watermark-push-radius: 130px;

	/* How long the knock itself takes. Still shorter than the letter's own
	   recovery time, so being hit reads as a shove rather than a glide, but
	   not so short that it snaps. */
	--watermark-push-lag: 340ms;
}

/* The letters keep their full size on narrow screens — only the spacing
   tightens, so a phone still gets a couple of them per screen. */
@media (max-width: 767px) {
	:root {
		--watermark-density: 140000;
		--watermark-min-gap: 120px;
	}
}

/* The layer spans the whole document. Height is set in px by the JS from
   documentElement.scrollHeight — `bottom: 0` would measure against <body>,
   whose height is short of the document once section margins collapse.

   z-index: -1 puts it under all content while staying visible: <body> has a
   background but is not a stacking context, so its background propagates to
   the canvas and is painted before negative-z descendants. Opaque sections —
   the dark hero, the footer — cover the letters, which is what the design
   wants. */
.site-watermark {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;

	/* Pointer position, -1 to 1 on each axis, written by watermarkDrift() in
	   assets/js/main.js. One style write per frame here drives every letter. */
	--watermark-x: 0;
	--watermark-y: 0;
}

/* Masked rather than drawn, so the colour comes from the token above and the
   same three SVGs can be re-tinted without editing their fill. */
.site-watermark__letter {
	position: absolute;
	width: calc(var(--watermark-w) * var(--watermark-scale));
	height: calc(var(--watermark-h) * var(--watermark-scale));
	background-color: var(--c-watermark);
	-webkit-mask: var(--watermark-glyph) no-repeat center / contain;
	mask: var(--watermark-glyph) no-repeat center / contain;

	/* The pointer vector, rotated and scaled per letter. The JS stamps the
	   two coefficients — cos and sin of that letter's own angle, times its
	   own amount — so each letter drifts its own way and its own distance
	   instead of the whole field sliding as one sheet. The JS also varies
	   transition-duration per letter, so they do not settle together. */
	--watermark-drift-x: 1;
	--watermark-drift-y: 0;

	/* Knock-aside offset in px, written per letter by the pointer loop. */
	--watermark-push-x: 0px;
	--watermark-push-y: 0px;

	/* Per-letter settling time, also from the JS. */
	--watermark-lag: 600ms;

	/* translate(-50%, -50%) first: the JS places a letter by its centre, and
	   the pointer loop measures distance to that same centre. */
	transform:
		translate(-50%, -50%)
		translate3d(
			calc(
				(
					var(--watermark-x) * var(--watermark-drift-x) -
					var(--watermark-y) * var(--watermark-drift-y)
				) * var(--watermark-drift) + var(--watermark-push-x)
			),
			calc(
				(
					var(--watermark-x) * var(--watermark-drift-y) +
					var(--watermark-y) * var(--watermark-drift-x)
				) * var(--watermark-drift) + var(--watermark-push-y)
			),
			0
		);
	transition-property: transform;
	transition-duration: var(--watermark-lag);
	transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Getting hit is quicker than recovering from it — the letter is shoved out
   of the way, then drifts back at its own pace. */
.site-watermark__letter.is-pushed {
	transition-duration: var(--watermark-push-lag);
	transition-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
}

@media (prefers-reduced-motion: reduce) {
	.site-watermark__letter,
	.site-watermark__letter.is-pushed {
		transform: translate(-50%, -50%);
		transition: none;
	}
}

.site-watermark__letter--h {
	--watermark-w: 98px;
	--watermark-h: 95px;
	--watermark-glyph: url("../img/h.svg");
}

.site-watermark__letter--n {
	--watermark-w: 98px;
	--watermark-h: 94px;
	--watermark-glyph: url("../img/n.svg");
}

.site-watermark__letter--z {
	--watermark-w: 95px;
	--watermark-h: 94px;
	--watermark-glyph: url("../img/z.svg");
}