// Tiny scroll-reveal that plays when an element enters the viewport.
function Reveal({ children, as = 'div', delay = 0, className = '', style = {} }) {
	const ref = React.useRef(null);
	const [visible, setVisible] = React.useState(false);
	React.useEffect(() => {
		const el = ref.current;
		if (!el) return;
		const io = new IntersectionObserver((entries) => {
			entries.forEach(e => {
				if (e.isIntersecting) {
					setTimeout(() => setVisible(true), delay);
					io.disconnect();
				}
			});
		}, { threshold: 0.12, rootMargin: '0px 0px -60px 0px' });
		io.observe(el);
		return () => io.disconnect();
	}, [delay]);
	const Tag = as;
	return (
		<Tag ref={ref} className={`reveal ${visible ? 'in' : ''} ${className}`} style={style}>
			{children}
		</Tag>
	);
}
window.Reveal = Reveal;