.blend-button {
  --button-bg: #F16422;
  --button-fg: #ffffff;
  --hover-bg: #fffef0;
  --x: 0;
  --y: 0;
  --active: 0;
  --text-color: var(--button-fg);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1rem;
  font-size: 1rem;
  border-radius: 10px;
  border: 1px solid #312d2dd3;
  background: var(--button-bg);
  color: var(--text-color);
  cursor: pointer;
  overflow: hidden;
  transition: background 0.3s, color 0.3s;
  height: 50px; /* Fixed height for consistent sizing */
  min-width: 180px; /* Minimum width to accommodate content */
  aspect-ratio: unset; /* Remove aspect ratio to use fixed height */
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform, opacity;
  z-index: 1;
  box-sizing: border-box; /* Ensure padding is included in height */
}

.blend-button:hover,
.blend-button:focus-visible {
  --active: 1.5;
  --text-color: #333333;
}

.blend-button:active {
  --active: 3;
}

.blend-button .back {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  overflow: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform;
  z-index: 0;
}

.blend-button .back > span {
  position: absolute;
  width: 50%;
  aspect-ratio: 1 / 1;
  left: calc(var(--x, 0) * 1px);
  top: calc(var(--y, 0) * 1px);
  transform: translate(-50%, -50%) scale(var(--active));
  background: var(--hover-bg);
  border-radius: 50%;
  clip-path: circle(50%);
  pointer-events: none;
  mix-blend-mode: exclusion;
  transition: transform 0.25s ease-out, left 0.1s linear, top 0.1s linear;
  will-change: transform, left, top;
}

.blend-button:active .back > span {
  transition-duration: 0.15s;
}

.blend-button .label {
  position: relative;
  z-index: 2;
  color: white !important;
  /* mix-blend-mode: difference; */
  /* transition: color 0.3s ease; */
  display: flex;
  align-items: center;
  gap: 8px; /* Space between icon and text */
  line-height: 1.2; /* Consistent line height */
}
.blend-button:hover .label {

  color: #242323 !important;
 
}

@supports (transition-timing-function: linear(0, 1)) {
  .blend-button:hover .back > span,
  .blend-button:focus-visible .back > span {
    transition-duration: 0.5s;
    transition-timing-function: linear(
      0,
      0.5007 7.21%,
      0.7803 12.29%,
      0.8883 14.93%,
      0.9724 17.63%,
      1.0343 20.44%,
      1.0754 23.44%,
      1.0898 25.22%,
      1.0984 27.11%,
      1.1014 29.15%,
      1.0989 31.4%,
      1.0854 35.23%,
      1.0196 48.86%,
      1.0043 54.06%,
      0.9956 59.6%,
      0.9925 68.11%,
      1
    );
  }
}