export const AnimatedOrpheusLogo = ({ className }: { className?: string }) => {
  return (
    <div className={className}>
      <svg
        id='euZJKofpmBY1'
        xmlns='http://www.w3.org/2000/svg'
        viewBox='0 0 24 24'
        width='24'
        height='24'
        shapeRendering='geometricPrecision'
        textRendering='geometricPrecision'
        className='h-full w-full'
      >
        <defs>
          <linearGradient
            id='euZJKofpmBY4-fill'
            x1='0.5'
            y1='0'
            x2='0.5'
            y2='1'
            spreadMethod='pad'
            gradientUnits='objectBoundingBox'
          >
            <stop offset='0%' stopColor='rgba(255,255,255,0)' />
            <stop offset='100%' stopColor='#010022' />
          </linearGradient>
        </defs>

        {/* Central scaling group */}
        <g
          className='animate-pulse'
          style={{
            transformOrigin: '6px 6px',
            animationDuration: '3s',
            animationIterationCount: 'infinite',
          }}
        >
          <path
            d='M5.49999,3c0,.55228-.44773,1-1.00004,1s-1.00004-.44772-1.00004-1s.44774-1,1.00004-1s1.00004.44772,1.00004,1Zm0,6c0,.55229-.44773,1-1.00004,1s-1.00004-.44771-1.00004-1s.44774-1,1.00004-1s1.00004.44771,1.00004,1ZM3.49991,6c0,.55228-.44773,1-1.00004,1s-1.00004-.44772-1.00004-1s.44773-1,1.00004-1s1.00004.44772,1.00004,1ZM7.50007,6c0,.82843-.6716,1.5-1.50006,1.5s-1.50006-.67157-1.50006-1.5.6716-1.5,1.50006-1.5s1.50006.67157,1.50006,1.5ZM8.50012,3c0,.55228-.44774,1-1.00005,1s-1.00004-.44772-1.00004-1s.44774-1,1.00004-1s1.00005.44772,1.00005,1Zm.00023,6c0,.55229-.44774,1-1.00005,1s-1.00004-.44771-1.00004-1s.44774-1,1.00004-1s1.00005.44771,1.00005,1Zm1.99982-3c0,.55228-.4477,1-1.00001,1s-1.00004-.44772-1.00004-1s.44773-1,1.00004-1s1.00001.44772,1.00001,1Z'
            fill='#fff'
          />
        </g>

        {/* Rotating outer ring */}
        <g
          className='animate-spin'
          style={{
            transformOrigin: '6px 6px',
            animationDuration: '3s',
            animationTimingFunction: 'cubic-bezier(0.25, 0.2, 0.75, 0.5)',
            animationIterationCount: 'infinite',
          }}
        >
          <path
            d='M6.50026,0.5c0,.27614-.22386.5-.50002.5s-.50002-.22386-.50002-.5.22387-.5.50002-.5.50002.22386.50002.5Zm2.68303.98685c-.13807.23914-.44388.32108-.68304.18301s-.32109-.44387-.18302-.68301.44389-.32108.68304-.18301.3211.44387.18302.68302v-.00001ZM11.0132,3.68292c-.2391.13807-.5449.05613-.683-.18301s-.0561-.54494.183-.68302c.2392-.13807.545-.05613.6831.18302.138.23914.0561.54494-.1831.68301ZM11.5,6.49976c-.2762,0-.5-.22386-.5-.5s.2238-.5.5-.5.5.22385.5.5-.2239.5-.5.5Zm-.9868,2.68279c-.2391-.13807-.3211-.44386-.183-.68301s.4439-.32108.683-.18301c.2392.13807.3211.44387.1831.68301-.1381.23915-.4439.32108-.6831.18301ZM8.31693,11.0125c-.13808-.2391-.05614-.5449.18302-.683s.54496-.0561.68304.183c.13808.2392.05614.545-.18302.6831-.23916.138-.54496.0561-.68304-.1831ZM6.50026,11.5c0,.2761-.22386.5-.50002.5s-.50002-.2239-.50002-.5.22387-.5.50002-.5.50002.2239.50002.5Zm-2.81719-.4868c-.13808.2391-.44388.321-.68304.183s-.3211-.4439-.18302-.683.44388-.3211.68304-.1831.3211.4439.18302.6831ZM1.48697,9.18298c-.23916.13807-.54496.05613-.68304-.18301s-.05614-.54494.18302-.68301.54496-.05614.68304.18301.05614.54494-.18302.68301ZM0.50002,6.5C0.22387,6.5,0,6.27614,0,6s.22387-.5.50002-.5.50002.22386.50002.5-.22387.5-.50002.5Zm.48693-2.81702c-.23916-.13807-.3211-.44387-.18302-.68301s.44388-.32109.68304-.18301.3211.44386.18302.68301-.44388.32108-.68304.18301ZM2.81719,1.48685c-.13807-.23915-.05613-.54494.18302-.68301s.54497-.05613.68305.18301.05613.54494-.18302.68301-.54497.05613-.68305-.18301Z'
            fill='#fff'
          />
        </g>

        <style jsx>{`
          .animate-pulse {
            animation: pulse 2.67s linear infinite;
          }

          @keyframes pulse {
            0%,
            100% {
              transform: translate(6px, 6px) scale(1, 1);
            }
            50% {
              transform: translate(6px, 6px) scale(0.7, 0.7);
            }
          }

          .animate-spin {
            animation: spin 2.67s linear infinite;
          }

          @keyframes spin {
            from {
              transform: translate(6px, 6px) rotate(0deg);
            }
            to {
              transform: translate(6px, 6px) rotate(360deg);
            }
          }
        `}</style>
      </svg>
    </div>
  );
};
