/* StackBackdrop — fixed three-layer scene that lives behind the StackCards.
   Layer 1: animated copper/midnight gradient mesh (60s drift)
   Layer 2: parallax architectural photograph (translates on scroll)
   Layer 3: SVG fractal-noise grain texture
   Gives the frosted-glass surfaces of the page something rich to blur over. */

function StackBackdrop() {
  const photoRef = React.useRef(null);

  React.useEffect(() => {
    const el = photoRef.current;
    if (!el) return;
    const rm = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (rm) return;

    let raf = 0;
    let lastOffset = null;
    const update = () => {
      const y = window.pageYOffset || document.documentElement.scrollTop || 0;
      // Slow parallax: photo drifts up at ~12% of scroll speed
      const offset = -y * 0.12;
      if (lastOffset !== null && Math.abs(offset - lastOffset) < 0.5) return;
      lastOffset = offset;
      el.style.transform = `translate3d(0, ${offset.toFixed(1)}px, 0) scale(1.12)`;
    };
    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(() => { update(); raf = 0; });
    };
    update();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', update);
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', update);
      if (raf) cancelAnimationFrame(raf);
    };
  }, []);

  return (
    <div className="stack-backdrop" aria-hidden="true">
      <div className="stack-backdrop-mesh" />
      <div className="stack-backdrop-photo" ref={photoRef} />
      <div className="stack-backdrop-grain" />
    </div>
  );
}

Object.assign(window, { StackBackdrop });