// Reveal — fade+rise; tem fallback (skill landing-pages-render-safe item 4)
function Reveal({ children, delay = 0, style = {}, as = 'div' }) {
  const ref = React.useRef(null);
  const [seen, setSeen] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    if (!('IntersectionObserver' in window)) { setSeen(true); return; }
    const r = el.getBoundingClientRect();
    if (r.top < window.innerHeight && r.bottom > 0) { setSeen(true); return; }
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setSeen(true); io.disconnect(); }
    }, { rootMargin: '0px 0px -10% 0px', threshold: 0.01 });
    io.observe(el);
    const t = setTimeout(() => setSeen(true), 3000);
    return () => { io.disconnect(); clearTimeout(t); };
  }, []);
  const Tag = as;
  return (
    <Tag ref={ref} className={'reveal' + (seen ? ' in' : '')} style={{ ...style, transitionDelay: `${delay}s` }}>
      {children}
    </Tag>
  );
}

window.Reveal = Reveal;