export function PulseRingButton() {
  return (
    <div className="bg-[#FAFAF8] p-12 grid place-items-center">
      <style>{`
        @keyframes pulse-ring {
          0%   { transform: scale(1); opacity: 0.6; }
          80%  { transform: scale(1.6); opacity: 0; }
          100% { transform: scale(1.6); opacity: 0; }
        }
        .pulse-wrap { position: relative; isolation: isolate; }
        .pulse-ring,
        .pulse-ring-2 {
          position: absolute;
          inset: 0;
          border-radius: 9999px;
          background: #ef4444;
          z-index: -1;
          opacity: 0;
          pointer-events: none;
        }
        .pulse-wrap:hover .pulse-ring {
          animation: pulse-ring 1.4s ease-out infinite;
        }
        .pulse-wrap:hover .pulse-ring-2 {
          animation: pulse-ring 1.4s ease-out infinite;
          animation-delay: .7s;
        }
        .pulse-core {
          transition: transform .2s ease;
        }
        .pulse-wrap:active .pulse-core { transform: scale(.96); }
      `}</style>
      <div className="pulse-wrap inline-block">
        <span aria-hidden className="pulse-ring" />
        <span aria-hidden className="pulse-ring-2" />
        <button
          type="button"
          className="pulse-core inline-flex items-center gap-2 px-6 py-3 rounded-full text-[13px] font-semibold uppercase tracking-[0.12em] text-white"
          style={{
            background: "#ef4444",
            boxShadow: "0 8px 20px -6px rgba(239,68,68,0.6)",
          }}
        >
          <span
            className="h-2 w-2 rounded-full"
            style={{ background: "#fff" }}
          />
          Recording
        </button>
      </div>
    </div>
  );
}
Pulse Ring Button
