/* Reveal — blendet einen Bereich sanft ein, sobald er beim Scrollen ins Blickfeld kommt.
   Nutzt IntersectionObserver + CSS-Transition, analog zum Einblenden der 4 Kacheln auf so-funktionierts.html. */
function Reveal({ children, delay = 0, scaleFrom = 0.92, style, as = "div", id }) {
  const ref = React.useRef(null);
  const [visible, setVisible] = React.useState(false);

  React.useEffect(() => {
    const el = ref.current;
    if (!el || !window.IntersectionObserver) { setVisible(true); return; }
    const obs = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) { setVisible(true); obs.disconnect(); }
    }, { threshold: 0.2 });
    obs.observe(el);
    return () => obs.disconnect();
  }, []);

  const Tag = as;
  return (
    <Tag ref={ref} id={id} style={{
      opacity: visible ? 1 : 0,
      transform: visible ? "scale(1)" : "scale(" + scaleFrom + ")",
      transformOrigin: "center",
      transition: "opacity 700ms var(--ease-soft) " + delay + "ms, transform 700ms var(--ease-soft) " + delay + "ms",
      ...style
    }}>{children}</Tag>
  );
}
Object.assign(window, { Reveal });