.button {
  cursor: pointer;
  padding: 14px 20px;
  border-radius: 25px;
  border: 4px solid #2d6a4f; /* Dark green border for depth */
  display: inline-block;
  overflow: hidden;
  background: linear-gradient(
    145deg,
    #40916c,
    #52796f
  ); /* Forest green gradient */
  box-shadow:
    /* Neumorphic outer shadows */
    6px 6px 12px rgba(0, 0, 0, 0.4),
    -6px -6px 12px rgba(255, 255, 255, 0.2),
    /* Skeuomorphic inset for carved effect */ inset 3px 3px 6px
      rgba(255, 255, 255, 0.3),
    inset -3px -3px 6px rgba(0, 0, 0, 0.5);
  position: relative;
  transition:
    box-shadow 0.3s ease,
    transform 0.1s ease;
}

/* Add a subtle wood-like texture using a pseudo-element */
.button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
      circle,
      rgba(255, 255, 255, 0.1) 1%,
      transparent 2%
    ),
    linear-gradient(
      45deg,
      rgba(0, 0, 0, 0.05) 25%,
      transparent 25%,
      transparent 75%,
      rgba(0, 0, 0, 0.05) 75%
    );
  background-size:
    10px 10px,
    20px 20px;
  opacity: 0.6;
  z-index: 0;
}

.button span {
  font-family: "Arial", sans-serif; /* Solid font for a carved feel */
  font-weight: 900;
  font-size: 26px;
  color: #d8f3dc; /* Light green text */
  text-shadow:
    /* Skeuomorphic engraved effect */
    1px 1px 2px rgba(0, 0, 0, 0.6),
    -1px -1px 1px rgba(255, 255, 255, 0.4);
  position: relative;
  display: inline-block;
  transition:
    transform 0.3s ease-out,
    color 0.3s ease;
  z-index: 1;
  padding: 0px 5px;
}

/* Staggered animation delays */
.button span:nth-child(1)::before {
  transition-delay: 0ms;
}
.button span:nth-child(2)::before {
  transition-delay: 100ms;
}
.button span:nth-child(3)::before {
  transition-delay: 200ms;
}
.button span:nth-child(4)::before {
  transition-delay: 300ms;
}
.button span:nth-child(5)::before {
  transition-delay: 400ms;
}

/* Active state */
.button:active span {
  color: #b7e4c7; /* Softer green when pressed */
  text-shadow:
    1px 1px 2px rgba(0, 0, 0, 0.7),
    -1px -1px 1px rgba(255, 255, 255, 0.5);
}

.button:active {
  box-shadow:
    /* Neumorphic pressed effect */
    inset 4px 4px 8px rgba(0, 0, 0, 0.6),
    inset -4px -4px 8px rgba(255, 255, 255, 0.3),
    /* Subtle outer shadow */ 2px 2px 4px rgba(0, 0, 0, 0.2);
  transform: scale(0.96); /* Stronger press effect */
}