/* Shared components: Starfield, Logo, Reveal, Glyphs */
const { useEffect, useRef, useState, useMemo } = React;
function Starfield({ density = 80, gold = 6, className = '' }) {
const stars = useMemo(() => {
return Array.from({ length: density }, (_, i) => ({
id: i,
left: Math.random() * 100,
top: Math.random() * 100,
size: Math.random() * 2 + 0.5,
dur: 2 + Math.random() * 4,
delay: Math.random() * 4,
gold: i < gold,
}));
}, [density, gold]);
return (
);
}
function LogoMark({ size = 32 }) {
// Original mark: diamond/portal — concentric ring with a gold core diamond
return (
);
}
function SectionDivider({ label, number }) {
return (
{number}
{label}
);
}
// Intersection-observer-based reveal — with sync fallback + transition bypass
// for hidden-document contexts (screenshots, PDF print) where CSS transitions freeze.
function useReveal() {
const ref = useRef(null);
useEffect(() => {
const el = ref.current;
if (!el) return;
const reveal = (instant) => {
el.classList.add('in');
if (instant || document.hidden) {
// Bypass CSS transition — paint immediately
el.style.transition = 'none';
el.style.opacity = '1';
el.style.transform = 'none';
}
};
// If document is hidden (screenshot tools, PDF print), show everything immediately
if (document.hidden) { reveal(true); return; }
// Already in viewport → reveal now (still animated)
const rect = el.getBoundingClientRect();
if (rect.top < window.innerHeight && rect.bottom > 0) { reveal(false); return; }
// Safety: force-reveal (instant) after a delay if IO never fires
const fallback = setTimeout(() => {
if (!el.classList.contains('in')) reveal(true);
}, 1800);
// Also force-reveal if document becomes hidden mid-flight
const onVis = () => { if (document.hidden) reveal(true); };
document.addEventListener('visibilitychange', onVis);
if (typeof IntersectionObserver === 'undefined') {
reveal(true);
clearTimeout(fallback);
document.removeEventListener('visibilitychange', onVis);
return;
}
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
reveal(false);
io.unobserve(e.target);
clearTimeout(fallback);
}
});
}, { threshold: 0.05, rootMargin: '0px 0px -5% 0px' });
io.observe(el);
return () => {
io.disconnect();
clearTimeout(fallback);
document.removeEventListener('visibilitychange', onVis);
};
}, []);
return ref;
}
function Reveal({ children, delay = 0, as: As = 'div', className = '', style = {} }) {
const ref = useReveal();
return (
{children}
);
}
// Tiny inline icon set — geometric / cosmic, original
const Glyph = {
Sparkle: (p) => (
),
Diamond: (p) => (
),
Layers: (p) => (
),
Shield: (p) => (
),
Cube: (p) => (
),
Arrow: (p) => (
),
Plus: (p) => (
),
Check: (p) => (
),
Search: (p) => (
),
Bell: (p) => (
),
Doc: (p) => (
),
Image: (p) => (
),
Video: (p) => (
),
Box: (p) => (
),
};
Object.assign(window, { Starfield, LogoMark, SectionDivider, Reveal, useReveal, Glyph });