// ─── App shell ──────────────────────────────────────────────────────────

const { useEffect } = React;

function App() {
  useEffect(() => {
    document.body.dataset.variant = 'polished';
    document.body.dataset.typepair = 'all-sans';
    document.body.dataset.bg = 'dots';
    document.body.dataset.cursor = 'ring';

    const dur = 0.4 + (4 / 5) * 0.9;
    gsap.defaults({ duration: dur });
    document.documentElement.style.setProperty('--motion-scale', String(4 / 3));
  }, []);

  useEffect(() => {
    const refresh = () => window.ScrollTrigger && window.ScrollTrigger.refresh();
    window.addEventListener('resize', refresh);
    const id = setTimeout(refresh, 300);
    return () => {
      window.removeEventListener('resize', refresh);
      clearTimeout(id);
    };
  }, []);

  return (
    <>
      <div className="bg-texture" aria-hidden="true" />
      <window.Cursor style="ring" />
      <window.Polished tweaks={{ heroVariant: 'type', caseLayout: 'horizontal' }} />
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);