export function WaxSealButton() {
  return (
    <div
      className="p-12 grid place-items-center"
      style={{
        background:
          "radial-gradient(circle at 30% 30%, #f7f1e3 0%, #e8dfc8 70%)",
      }}
    >
      <style>{`
        .wax-btn {
          width: 132px; height: 132px;
          border-radius: 50%;
          color: #fff7e6;
          font-family: var(--font-instrument-serif), serif;
          font-style: italic;
          font-size: 18px;
          text-shadow: 0 1px 0 rgba(0,0,0,0.4);
          background:
            radial-gradient(circle at 35% 30%, #b8333a 0%, #7e1d22 60%, #4d0d10 100%);
          box-shadow:
            inset 0 4px 8px rgba(255,200,180,0.35),
            inset 0 -6px 10px rgba(0,0,0,0.45),
            0 6px 14px -4px rgba(80,15,15,0.5);
          transition: transform .2s ease, box-shadow .2s ease;
          position: relative;
          overflow: hidden;
        }
        .wax-btn::before {
          content: "";
          position: absolute;
          inset: 8%;
          border-radius: 50%;
          border: 1.5px dashed rgba(255,236,210,0.4);
          pointer-events: none;
        }
        .wax-btn:hover {
          transform: rotate(-6deg) scale(1.03);
          box-shadow:
            inset 0 4px 8px rgba(255,200,180,0.4),
            inset 0 -6px 12px rgba(0,0,0,0.55),
            0 10px 22px -6px rgba(80,15,15,0.6);
        }
        .wax-btn:active {
          transform: scale(.96);
        }
      `}</style>
      <button type="button" className="wax-btn">
        Sealed
        <br />
        with care
      </button>
    </div>
  );
}
Wax Seal Button
