/* global React */
const { useEffect, useRef, useState } = React;
const EASE_CSS = "cubic-bezier(0.22,1,0.36,1)";
const prefersReduce = () => matchMedia("(prefers-reduced-motion: reduce)").matches;
/* ── Reveal engine — rect-based (IntersectionObserver is unreliable in some
embedded preview frames). A single shared scroll/raf loop flips elements to
shown when they enter the viewport; a failsafe guarantees nothing stays
hidden. Reduced-motion → instantly shown. ──────────────────────────────── */
const _revealReg = new Set();
let _revealRAF = 0;
function _revealTick() {
_revealRAF = 0;
const vh = window.innerHeight || document.documentElement.clientHeight;
_revealReg.forEach((entry) => {
const el = entry.ref.current;
if (!el) return;
const r = el.getBoundingClientRect();
if (r.top < vh * 0.92 && r.bottom > 0) { entry.set(true); _revealReg.delete(entry); }
});
}
function _revealSchedule() { if (!_revealRAF) _revealRAF = requestAnimationFrame(_revealTick); }
if (typeof window !== "undefined") {
window.addEventListener("scroll", _revealSchedule, { passive: true });
window.addEventListener("resize", _revealSchedule, { passive: true });
}
const _useLayout = React.useLayoutEffect || useEffect;
function useReveal() {
const ref = useRef(null);
const [shown, setShown] = useState(true); // default VISIBLE → never stuck hidden
_useLayout(() => {
if (prefersReduce()) return;
const el = ref.current;
if (!el) return;
const r = el.getBoundingClientRect();
const vh = window.innerHeight || document.documentElement.clientHeight;
if (r.top < vh * 0.92 && r.bottom > 0) return; // already in view → stay visible
// below the fold → hide pre-paint (no flash) and reveal on scroll
setShown(false);
const entry = { ref, set: setShown };
_revealReg.add(entry);
_revealSchedule();
const fs = setTimeout(() => { setShown(true); _revealReg.delete(entry); }, 2600);
return () => { _revealReg.delete(entry); clearTimeout(fs); };
}, []);
return [ref, shown];
}
/* ── Reveal — fade + 20px rise (scroll-triggered, default-visible) ────────── */
function Reveal({ as: Tag = "div", delay = 0, className = "", children, style, ...rest }) {
const [ref, shown] = useReveal();
return (
{children}
);
}
/* ── Rise — pure-CSS load entrance (no JS gating; always ends visible) ────── */
function Rise({ as: Tag = "div", delay = 0, className = "", children, style, ...rest }) {
return (
{children}
);
}
/* ── RevealLines — line-by-line headline reveal, pure CSS (hero) ──────────── */
function RevealLines({ as: Tag = "h1", className = "", lines = [], stagger = 95, style }) {
return (
{lines.map((ln, i) => (
{ln}
))}
);
}
/* ── SectionLabel — mono index · accent hex tick · uppercase label ───────── */
function SectionLabel({ index, children }) {
return (
{index && {index}}
{children}
);
}
/* ── MagneticButton — eases toward cursor; no-op for reduced-motion ──────── */
function MagneticButton({ as = "a", strength = 13, className = "", children, style, ...rest }) {
const ref = useRef(null);
const reduce = useRef(false);
useEffect(() => { reduce.current = prefersReduce(); }, []);
function move(e) {
if (reduce.current || !ref.current) return;
const r = ref.current.getBoundingClientRect();
const x = ((e.clientX - (r.left + r.width / 2)) / (r.width / 2)) * strength;
const y = ((e.clientY - (r.top + r.height / 2)) / (r.height / 2)) * strength;
ref.current.style.transform = `translate(${x}px, ${y}px)`;
}
function leave() { if (ref.current) ref.current.style.transform = "translate(0,0)"; }
const Tag = as;
return (
{children}
);
}
/* ── Marquee — seamless capability ticker, hex separators ────────────────── */
function Marquee({ items }) {
const Row = ({ hidden }) => (
{items.map((it, i) => (
{it}
))}
);
return (
);
}
Object.assign(window, { useReveal, Reveal, Rise, RevealLines, SectionLabel, MagneticButton, Marquee, prefersReduce });