/* Hero brand animation — minimal: one slow arc, a soft glow, the mark breathing. */
function HeroVisual() {
  return (
    <div className="w-heroart" style={{ position:'relative', display:'grid', placeItems:'center',
      width:'min(100%,420px)', aspectRatio:'1', margin:'0 auto' }}>
      <div style={{ position:'absolute', inset:0, pointerEvents:'none', display:'grid', placeItems:'center' }}>
        <div style={{ position:'absolute', width:'78%', aspectRatio:'1', borderRadius:'50%',
          background:'radial-gradient(circle,rgba(124,92,255,.34),rgba(59,107,255,.12) 52%,transparent 72%)',
          animation:'w-breathe 8s ease-in-out infinite' }} />
        <svg viewBox="0 0 200 200" style={{ position:'absolute', width:'92%', animation:'w-spin 34s linear infinite' }}>
          <circle cx="100" cy="100" r="96" fill="none" stroke="rgba(255,255,255,.07)" strokeWidth=".6" />
          <path d="M100 4 A96 96 0 0 1 188 62" fill="none" stroke="url(#hvArc)" strokeWidth="1.4" strokeLinecap="round" />
          <defs><linearGradient id="hvArc" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="#3B6BFF" /><stop offset="100%" stopColor="#B45CF7" />
          </linearGradient></defs>
        </svg>
      </div>
      <img src="assets/logo-mark-white.png" alt="GOAT" className="w-heromark"
        style={{ position:'relative', width:'52%', maxWidth:250, display:'block',
          filter:'drop-shadow(0 18px 50px rgba(124,92,255,.4))', animation:'w-float 9s ease-in-out infinite' }} />
    </div>
  );
}
Object.assign(window, { HeroVisual });