// Black hole hero centerpiece — accretion disk with gravitational lensing
function BlackHole({ size = 720 }) {
  return (
    <div
      className="blackhole"
      style={{ width: size, height: size }}
      aria-hidden="true"
    >
      {/* outer halo glow */}
      <div className="bh-halo" />

      {/* gravitational lens ring (back disk visible above) */}
      <div className="bh-lens-top" />

      {/* accretion disk rotating */}
      <div className="bh-disk bh-disk-1" />
      <div className="bh-disk bh-disk-2" />
      <div className="bh-disk bh-disk-3" />

      {/* event horizon — pure black sphere */}
      <div className="bh-event">
        <div className="bh-event-shine" />
      </div>

      {/* lens ring (front, the bent light around horizon) */}
      <div className="bh-ring" />

      {/* photon sphere — bright thin ring */}
      <div className="bh-photon" />

      {/* dust/particles streaming */}
      <div className="bh-particles">
        {Array.from({ length: 14 }).map((_, i) => (
          <span
            key={i}
            className="bh-particle"
            style={{
              '--i': i,
              '--delay': `${i * -0.6}s`,
              '--dur': `${10 + (i % 5) * 2}s`,
              '--start': `${i * 26}deg`,
            }}
          />
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { BlackHole });