export function AuroraBorderButton() {
  return (
    <div className="bg-[#050414] p-12 grid place-items-center">
      <style>{`
        @keyframes aurora-flow {
          0%   { background-position: 0% 50%; }
          50%  { background-position: 100% 50%; }
          100% { background-position: 0% 50%; }
        }
        .aurora-wrap {
          position: relative;
          padding: 2px;
          border-radius: 9999px;
          background: linear-gradient(
            120deg,
            #4ade80, #22d3ee, #a78bfa, #f472b6, #facc15, #4ade80
          );
          background-size: 300% 300%;
          animation: aurora-flow 6s ease-in-out infinite;
          transition: filter .3s ease, transform .3s ease;
        }
        .aurora-wrap::after {
          content: "";
          position: absolute; inset: -8px;
          border-radius: inherit;
          background: inherit;
          filter: blur(18px);
          opacity: 0.55;
          z-index: -1;
          animation: inherit;
        }
        .aurora-wrap:hover { transform: scale(1.04); animation-duration: 2.5s; }
        .aurora-wrap:hover::after { opacity: 0.85; }
        .aurora-inner {
          padding: 12px 28px;
          border-radius: 9999px;
          background: #0a0820;
          color: #f5f3ff;
          font-size: 14px;
          font-weight: 500;
        }
      `}</style>
      <button type="button" className="aurora-wrap">
        <span className="aurora-inner">Step into the aurora</span>
      </button>
    </div>
  );
}
Aurora Border Button
