// Reveal — fades + slides its children up when scrolled into view.
function Reveal({ children, delay = 0, style = {} }) {
  const ref = React.useRef(null);
  const [shown, setShown] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { setShown(true); io.disconnect(); } });
    }, { threshold: 0.12 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <div ref={ref} style={{
      opacity: shown ? 1 : 0,
      transform: shown ? 'translateY(0)' : 'translateY(28px)',
      transition: 'var(--t-reveal)', transitionDelay: `${delay}s`,
      ...style,
    }}>{children}</div>
  );
}
window.Reveal = Reveal;

// SectionShell — consistent section padding + centered container.
function SectionShell({ id, bg, children, style = {} }) {
  return (
    <section id={id} style={{ padding: 'var(--section-padding)', background: bg, ...style }}>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto' }}>{children}</div>
    </section>
  );
}
window.SectionShell = SectionShell;