// chrome.jsx — Header, Footer, CTA, Brand, DotLabel
// Small reusable pieces. Exports to window for the section files.
const { useEffect, useState } = React;
// -------- useSpotlight: viewport-wide cursor tracker for [data-glow] cards --------
// Writes --mx / --my (cursor in viewport px) on on every pointermove.
// Every card with data-glow (or matching class in styles.css) uses these via
// background-attachment:fixed, so a single global update lights the card
// under the cursor across the whole page. Locked to Traffy purple in CSS.
function useSpotlight() {
useEffect(() => {
const root = document.documentElement;
const onMove = (e) => {
root.style.setProperty("--mx", e.clientX);
root.style.setProperty("--my", e.clientY);
};
document.addEventListener("pointermove", onMove, { passive: true });
return () => document.removeEventListener("pointermove", onMove);
}, []);
}
// -------- ProgressiveBlur: edge fade via stacked backdrop-filter layers --------
// Adapted from ibelick/motion-primitives — re-written for plain JSX (no
// Tailwind, no `cn()`, no `motion/react` import). Each of N layers sits
// absolutely over the parent, masked to its own segment along `direction`,
// with increasing `backdropFilter: blur()`. Stacked together they form a
// smooth wave of blur intensity — heavier at the edge, none at center.
//
// Usage:
//