/* ============================================================
BRITO · NOESIS — reusable components (window globals)
============================================================ */
const { useState, useEffect, useRef, useCallback } = React;
const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const isTouch = window.matchMedia('(pointer: coarse)').matches;
/* ---------- The Observer Mark (faithful reproduction of the logo) ---------- */
function PhiMark({ className = "", stroke = "var(--gold)", w = 40 }) {
const h = +(w * (166 / 120)).toFixed(2);
return (
);
}
/* ---------- Corner frame wrapper ---------- */
function CornerFrame({ children, className = "" }) {
return (
{children}
);
}
/* ---------- Section head ---------- */
function SectionHead({ eyebrow, title }) {
return (
);
}
/* ---------- Reveal on scroll (robust: IO + scroll fallback + safety net) ---------- */
function useRevealRoot() {
useEffect(() => {
if (prefersReduced) {
document.querySelectorAll('.reveal').forEach(el => el.classList.add('in'));
return;
}
// scroll/load fallback — reveals anything within (or above) the viewport.
const revealNear = () => {
const vh = window.innerHeight || document.documentElement.clientHeight;
document.querySelectorAll('.reveal:not(.in)').forEach(el => {
const r = el.getBoundingClientRect();
if (r.top < vh - 8 && r.bottom > -60) el.classList.add('in');
});
};
let io = null;
try {
io = new IntersectionObserver((entries) => {
entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
}, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" });
document.querySelectorAll('.reveal:not(.in)').forEach(el => io.observe(el));
} catch (err) { io = null; }
revealNear();
window.addEventListener('scroll', revealNear, { passive: true });
window.addEventListener('resize', revealNear, { passive: true });
const t1 = setTimeout(revealNear, 300);
// safety net: guarantee the first viewport-worth of content is visible.
const t2 = setTimeout(() => {
const vh = window.innerHeight || 800;
document.querySelectorAll('.reveal:not(.in)').forEach(el => {
if (el.getBoundingClientRect().top < vh * 1.15) el.classList.add('in');
});
}, 700);
// last resort: if transitions aren't progressing (non-painting capture
// context), an already-revealed element still computes ~0 opacity — snap
// everything to its final state so content is never stuck invisible.
const t3 = setTimeout(() => {
const sample = document.querySelector('.reveal.in');
if (sample && parseFloat(getComputedStyle(sample).opacity) < 0.05) {
document.documentElement.classList.add('reveal-static');
document.querySelectorAll('.reveal').forEach(el => el.classList.add('in'));
}
}, 1400);
return () => {
clearTimeout(t1); clearTimeout(t2);
window.removeEventListener('scroll', revealNear);
window.removeEventListener('resize', revealNear);
if (io) io.disconnect();
};
}, []);
}
/* ---------- Custom cursor ---------- */
function CustomCursor() {
const ring = useRef(null), dot = useRef(null);
useEffect(() => {
if (isTouch) return;
document.body.classList.add('has-cursor');
let rx = innerWidth / 2, ry = innerHeight / 2, dx = rx, dy = ry, tx = rx, ty = ry, raf;
const move = (e) => { tx = e.clientX; ty = e.clientY; dx = tx; dy = ty;
if (dot.current) dot.current.style.transform = `translate(${dx}px,${dy}px)`; };
const hot = (e) => {
const t = e.target.closest('a,button,.tile,.node,.pcard,.verb,.lang button,[data-hot]');
if (ring.current) ring.current.classList.toggle('hot', !!t);
};
const loop = () => {
rx += (tx - rx) * 0.16; ry += (ty - ry) * 0.16;
if (ring.current) ring.current.style.transform = `translate(${rx}px,${ry}px)`;
raf = requestAnimationFrame(loop);
};
window.addEventListener('mousemove', move, { passive: true });
window.addEventListener('mouseover', hot, { passive: true });
loop();
return () => { cancelAnimationFrame(raf); window.removeEventListener('mousemove', move); window.removeEventListener('mouseover', hot); document.body.classList.remove('has-cursor'); };
}, []);
if (isTouch) return null;
return (<>);
}
/* ---------- Constellation background ---------- */
function Constellation() {
const cv = useRef(null);
useEffect(() => {
if (prefersReduced) return;
const canvas = cv.current, ctx = canvas.getContext('2d');
let W, H, dpr, pts = [], mouse = { x: -999, y: -999 }, raf;
const resize = () => {
dpr = Math.min(devicePixelRatio || 1, 2);
W = canvas.width = innerWidth * dpr; H = canvas.height = innerHeight * dpr;
canvas.style.width = innerWidth + 'px'; canvas.style.height = innerHeight + 'px';
const count = Math.min(120, Math.floor((innerWidth * innerHeight) / 16000));
pts = Array.from({ length: count }, () => ({
x: Math.random() * W, y: Math.random() * H,
vx: (Math.random() - .5) * 0.12 * dpr, vy: (Math.random() - .5) * 0.12 * dpr,
r: (Math.random() * 1.1 + 0.4) * dpr,
}));
};
const onMove = (e) => { mouse.x = e.clientX * dpr; mouse.y = e.clientY * dpr; };
const onLeave = () => { mouse.x = -9999; mouse.y = -9999; };
const LINK = 130;
const draw = () => {
ctx.clearRect(0, 0, W, H);
const link = LINK * dpr, link2 = link * link;
for (const p of pts) {
p.x += p.vx; p.y += p.vy;
if (p.x < 0 || p.x > W) p.vx *= -1;
if (p.y < 0 || p.y > H) p.vy *= -1;
const mdx = p.x - mouse.x, mdy = p.y - mouse.y, md2 = mdx * mdx + mdy * mdy;
if (md2 < (200 * dpr) * (200 * dpr)) {
const f = (1 - Math.sqrt(md2) / (200 * dpr)) * 0.35;
p.x += mdx / Math.sqrt(md2 + 1) * f; p.y += mdy / Math.sqrt(md2 + 1) * f;
}
}
for (let i = 0; i < pts.length; i++) {
const a = pts[i];
for (let j = i + 1; j < pts.length; j++) {
const b = pts[j], dx = a.x - b.x, dy = a.y - b.y, d2 = dx * dx + dy * dy;
if (d2 < link2) {
const o = (1 - d2 / link2) * 0.16;
ctx.strokeStyle = `rgba(201,163,94,${o})`;
ctx.lineWidth = 0.6 * dpr;
ctx.beginPath(); ctx.moveTo(a.x, a.y); ctx.lineTo(b.x, b.y); ctx.stroke();
}
}
const dmx = a.x - mouse.x, dmy = a.y - mouse.y, dm2 = dmx * dmx + dmy * dmy, ml = (190 * dpr) * (190 * dpr);
if (dm2 < ml) {
const o = (1 - dm2 / ml) * 0.4;
ctx.strokeStyle = `rgba(216,184,120,${o})`;
ctx.lineWidth = 0.6 * dpr;
ctx.beginPath(); ctx.moveTo(a.x, a.y); ctx.lineTo(mouse.x, mouse.y); ctx.stroke();
}
}
for (const p of pts) {
ctx.fillStyle = 'rgba(201,163,94,0.5)';
ctx.beginPath(); ctx.arc(p.x, p.y, p.r, 0, 7); ctx.fill();
}
raf = requestAnimationFrame(draw);
};
resize(); draw();
window.addEventListener('resize', resize);
window.addEventListener('mousemove', onMove, { passive: true });
window.addEventListener('mouseout', onLeave);
return () => { cancelAnimationFrame(raf); window.removeEventListener('resize', resize); window.removeEventListener('mousemove', onMove); window.removeEventListener('mouseout', onLeave); };
}, []);
return ;
}
/* ---------- Orbital rings (SVG) for hero ---------- */
function OrbitRings() {
return (
);
}
/* ---------- Glyphs (minimal line icons) ---------- */
function Glyph({ name }) {
const s = { stroke: "var(--gold)", fill: "none", strokeWidth: 1.4, strokeLinecap: "round", strokeLinejoin: "round" };
const map = {
learning: ,
memory: ,
experiment: ,
synthesis: ,
reasoning: ,
evolution: ,
eye: ,
adapt: ,
};
return ;
}
/* ---------- NOESIS seal stamp ---------- */
function Seal() {
return (
);
}
Object.assign(window, { PhiMark, CornerFrame, SectionHead, useRevealRoot, CustomCursor, Constellation, OrbitRings, Glyph, Seal, prefersReduced, isTouch });