/* Neumorphic button with left-to-right black fill + ash bottom border */
.button2 {
  display: inline-block;
  position: relative;
  overflow: hidden;
  cursor: pointer;

  padding: 0.4em 1.2em;
  font-size: 18px;
  border-radius: 2rem;

  color: #090909;
  background-color: #e8e8e8; /* base background */
  background-image: linear-gradient(
    to right,
    #000,
    #000
  ); /* overlay that fills left→right */
  background-repeat: no-repeat;
  background-position: left center; /* start at left */
  background-size: 0% 100%; /* start width = 0% */

  transition: background-size 0.45s cubic-bezier(0.55, 0, 0.1, 1),
    color 0.2s ease, box-shadow 0.2s ease;

  box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;
  border: none;
  border-bottom: 2px solid #7f7f7f; /* ash bottom border */
}

.button2:hover {
  color: #ffffff;
  background-size: 100% 100%; /* expand width fully */
}

.button2:active {
  color: #eaeaea;
  box-shadow: inset 4px 4px 12px #e4e4e4, inset -4px -4px 12px #ffffff;
}

/* Optional: accessibility */
@media (prefers-reduced-motion: reduce) {
  .button2 {
    transition: none;
  }
}