);
}
/* ---- Hero parallax hook ------------------------------------------------- */
// Attaches a scroll listener that moves the hero background image at a slower
// speed than the page, creating a subtle depth/parallax effect.
// • strength: total vertical travel of the image in px (default 70, boosted 25%)
// • scale(1.2) ensures no blank edges appear at the extremes of travel
// • Respects prefers-reduced-motion; disabled on mobile, halved on tablet
function useHeroParallax(strength) {
var sectionRef = React.useRef(null);
var imgRef = React.useRef(null);
React.useEffect(function () {
// base travel, boosted ~25% so the parallax reads as intentional (was 70)
var s = (typeof strength === "number" ? strength : 70) * 1.25;
// Accessibility: honour reduced-motion preference
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
// Mobile: skip — parallax can cause cropping / jank at small sizes
if (window.matchMedia("(max-width: 767px)").matches) return;
// Tablet: keep the effect but halve the travel
if (window.matchMedia("(max-width: 1279px)").matches) s = Math.round(s * 0.5);
var section = sectionRef.current;
var img = imgRef.current;
if (!section || !img) return;
img.style.willChange = "transform";
var raf = 0;
function update() {
var rect = section.getBoundingClientRect();
var vh = window.innerHeight;
// progress: 0 when section enters from bottom → 1 when it exits from top
var progress = (vh - rect.top) / (vh + rect.height);
var clamped = Math.max(0, Math.min(1, progress));
// ty: positive when section is low (image pushed down), negative when high
var ty = (0.5 - clamped) * s * 2;
img.style.transform = "translateY(" + ty.toFixed(2) + "px) scale(1.2)";
raf = 0;
}
function onScroll() {
if (!raf) raf = requestAnimationFrame(update);
}
window.addEventListener("scroll", onScroll, { passive: true });
update(); // set initial position before first scroll
return function () {
window.removeEventListener("scroll", onScroll);
if (raf) cancelAnimationFrame(raf);
if (img) img.style.willChange = "";
};
}, []);
return { sectionRef: sectionRef, imgRef: imgRef };
}
// ---- RevealH1: masked line-by-line hero heading reveal ----------------------
// The site-wide hero H1 animation (CSS in kit.css under ".h1-reveal"). The
// heading is split into VISUAL lines at runtime — words are rendered in a
// measurement pass and grouped by their rendered row — so responsive wrapping
// is always respected. Each visual line is wrapped in an overflow:hidden mask
// (.h1-mask) and the line text (.h1-inner) slides up from translateY(100%) → 0
// with a fade: 1.2s, cubic-bezier(0.16, 1, 0.3, 1). Line 1 starts at 0.35s;
// each following line starts 0.15s after the previous.
// • `lines` — array of strings: forced line breaks (homepage headline)
// • `text` — single string: wraps naturally; reveal grouped per rendered line
// Re-splits on viewport width changes; once the reveal has played, rebuilt
// lines render directly in their final static state (no replay).
// prefers-reduced-motion is handled in kit.css (static heading, no animation).
function RevealH1({ text, lines, className = "ill-h1", style }) {
const ref = React.useRef(null);
const segs = lines || [text || ""];
const segsKey = segs.join("\n");
React.useLayoutEffect(() => {
const el = ref.current;
if (!el) return;
function build() {
// Measurement pass: plain inline word spans separated by real spaces
// (wraps identically to raw text); forced segments are block-level.
el.textContent = "";
const words = [];
segs.forEach((seg) => {
const block = document.createElement("span");
block.style.display = "block";
String(seg).split(" ").filter(Boolean).forEach((w, i) => {
if (i) block.appendChild(document.createTextNode(" "));
const ws = document.createElement("span");
ws.textContent = w;
block.appendChild(ws);
words.push(ws);
});
el.appendChild(block);
});
// Group words into visual lines by their rendered top offset.
const lineTexts = [];
let top = null;
words.forEach((ws) => {
const t = ws.offsetTop;
if (top !== null && Math.abs(t - top) < 3) {
lineTexts[lineTexts.length - 1] += " " + ws.textContent;
} else {
lineTexts.push(ws.textContent);
}
top = t;
});
// Final structure: one mask per visual line, inner slides up into place.
el.textContent = "";
lineTexts.forEach((lineText, i) => {
const mask = document.createElement("span");
mask.className = "h1-mask";
const inner = document.createElement("span");
inner.className = "h1-inner";
inner.style.transitionDelay = (0.35 + i * 0.15).toFixed(2) + "s";
inner.textContent = lineText;
mask.appendChild(inner);
el.appendChild(mask);
});
}
build();
// Double rAF: guarantee one painted frame in the hidden state so the
// transition reliably runs from translateY(100%) on first load.
let raf2 = 0;
const raf1 = requestAnimationFrame(() => {
raf2 = requestAnimationFrame(() => el.classList.add("is-in"));
});
// Re-split when the viewport WIDTH changes (ignore mobile URL-bar height
// changes). Rebuilt lines render static because .is-in is already set.
let timer = 0;
let lastW = window.innerWidth;
const onResize = () => {
if (window.innerWidth === lastW) return;
lastW = window.innerWidth;
clearTimeout(timer);
timer = setTimeout(build, 150);
};
window.addEventListener("resize", onResize);
return () => {
cancelAnimationFrame(raf1);
cancelAnimationFrame(raf2);
clearTimeout(timer);
window.removeEventListener("resize", onResize);
};
}, [segsKey]);
return (