.button-custom {
  cursor: pointer;
  background-color: var(--color-nier-mid);
  color: var(--color-nier-dark);
  position: relative;
  border: 1px solid transparent;
  border-left: none;
  border-right: none;
  overflow: hidden;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.button-custom::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;  /* Space from top border */
  bottom: 3px; /* Space from bottom border */
  width: 0;
  height: auto; /* This makes it respect top and bottom values */
  background-color: var(--color-nier-dark);
  transition: width 0.2s ease;
  z-index: 0;
}

/* Normal hover/focus state - keep your original behavior */
.button-custom:hover,
.button-custom:focus {
  color: var(--color-nier-text-light);
  background-color: transparent;
  border-color: var(--color-nier-dark);
}

.button-custom:hover::before,
.button-custom:focus::before {
  width: 100%;
}

/* Add NieR-style glitch effects on hover */
.button-custom::after {
  content: attr(data-label); /* Use the button's text from data-label attribute */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-nier-text-light);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
}

.button-custom:hover::after {
  animation: nier-button-glitch 0.6s ease forwards;
}

/* Add subtle scan line on hover */
.button-custom .scan-line {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 1px;
  background-color: var(--color-nier-text-light);
  opacity: 0;
  z-index: 3;
  pointer-events: none;
}

.button-custom:hover .scan-line {
  animation: nier-button-scan 0.3s ease forwards;
}

/* The glitch effect animation */
@keyframes nier-button-glitch {
  0%, 100% {
    opacity: 0;
    transform: translateX(0);
    clip-path: inset(0 0 0 0);
  }
  10% {
    opacity: 0.2;
    transform: translateX(-2px);
    clip-path: inset(10% 0 80% 0);
  }
  12% {
    opacity: 0;
    transform: translateX(0);
  }
  20% {
    opacity: 0.2;
    transform: translateX(2px);
    clip-path: inset(30% 0 50% 0);
  }
  22% {
    opacity: 0;
    transform: translateX(0);
  }
  30% {
    opacity: 0.1;
    transform: translateX(-1px);
    clip-path: inset(50% 0 20% 0);
  }
  32% {
    opacity: 0;
    transform: translateX(0);
  }
}

/* The scan line animation */
@keyframes nier-button-scan {
  0% {
    opacity: 0.5;
    left: -100%;
  }
  100% {
    opacity: 0;
    left: 100%;
  }
}

/* Add a brief effect on button click */
.button-custom:active {
  transform: scale(0.98);
}

.button-custom:active::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.1);
  opacity: 0;
  animation: nier-button-flash 0.2s ease;
}

@keyframes nier-button-flash {
  0% {
    opacity: 0.2;
  }
  100% {
    opacity: 0;
  }
}