.blend-button {
  --button-bg: #ED1D24;
  --button-fg: #ffffff;
  --hover-bg: #fffef0;
  --x: 0;
  --y: 0;
  --active: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.6rem 1rem;
  font-size: 1rem;
  border-radius: 30px;
  border: 2px solid var(--button-fg);
  background: var(--button-bg);
  cursor: pointer;
  overflow: hidden;
  transition: background 0.3s, color 0.3s;
  aspect-ratio: 3 / 1;
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform, opacity;
  z-index: 1;
}

.blend-button:hover,
.blend-button:focus-visible {
  --active: 1.5;
}

.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: difference; /* Keep blend mode only on the hover effect */
  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;
  /* Remove mix-blend-mode from here */
  color: var(--button-fg) !important; /* Use the button foreground color */
  transition: color 0.3s ease;
}

/* Optional: If you want the text color to change on hover */
.blend-button:hover .label,
.blend-button:focus-visible .label {
  color: #333333 !important; /* Dark color for contrast on light hover background */
}

@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
    );
  }
}