export function BorealisGlowButton() {
  return (
    <div className="bg-[#050816] p-12 grid place-items-center">
      <style>{`
        @keyframes borealis-shift {
          0%, 100% {
            box-shadow:
              0 0 30px 4px #6366f155,
              0 0 60px 8px #22d3ee44,
              0 0 90px 16px #a855f733;
          }
          50% {
            box-shadow:
              0 0 40px 6px #22d3ee55,
              0 0 70px 12px #a855f744,
              0 0 100px 22px #6366f133;
          }
        }
        .bor-btn {
          position: relative;
          background: #0d0f23;
          color: #e0e7ff;
          border: 1px solid #1e2148;
          animation: borealis-shift 3.6s ease-in-out infinite;
          transition: transform .25s ease;
        }
        .bor-btn::before {
          content: "";
          position: absolute;
          inset: -1px;
          border-radius: inherit;
          padding: 1px;
          background: linear-gradient(135deg, #22d3ee, #a855f7, #6366f1);
          -webkit-mask:
            linear-gradient(#000 0 0) content-box,
            linear-gradient(#000 0 0);
          -webkit-mask-composite: xor;
                  mask-composite: exclude;
          pointer-events: none;
        }
        .bor-btn:hover { transform: translateY(-2px) scale(1.02); }
        .bor-btn:active { transform: scale(.97); }
      `}</style>
      <button
        type="button"
        className="bor-btn px-7 py-3.5 rounded-2xl text-[14px] font-medium"
      >
        Travel to Tromsø
      </button>
    </div>
  );
}
Borealis Glow Button
