/* Deep Dark-Orange Button Module */
.fluid-gradient-btn {
  position: relative;
  padding: 10px 20px;

  /* Typography Profile */
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-family: system-ui, -apple-system, sans-serif;

  /* The Muted Dark-Orange Palette */
  color: #fb923c; /* Crisp, mid-tone orange text for clean readability */
  background-color: #9a3412; /* Rich, deep burnt-orange base (not too bright) */
  border: 1px solid #c2410c; /* Slightly brighter border to define the shape */
  border-radius: 8px;
  cursor: pointer;
  overflow: hidden;
  outline: none;
  user-select: none;

  /* Clean, subtle shadow depth over dark layers */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  transition: transform 0.1s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Hover Accentuation: Shifts cleanly into a slightly warmer state */
.fluid-gradient-btn:hover {
  background-color: #c2410c; /* Deep orange steps up to mid-orange */
  border-color: #ea580c;
  color: #ffedd5; /* Text lifts slightly to soft cream on hover */
}

/* Physical compression click response */
.fluid-gradient-btn:active {
  transform: scale(0.96);
}

/* The Dynamic Fluid Ripple Layer */
.fluid-gradient-btn .gradient-ripple {
  position: absolute;
  /* An intense orange liquid burst that cuts through the dark base */
  background: radial-gradient(circle, #ffedd5 0%, #f97316 50%, #7c2d12 100%);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  mix-blend-mode: screen; /* Blends the ripple into the dark orange backing dynamically */
  opacity: 0.8;
  animation: gradient-expand 0.55s cubic-bezier(0.1, 0.8, 0.2, 1) forwards;
}

/* Fluid Expansion Math */
@keyframes gradient-expand {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.9;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.8);
    opacity: 0; /* Dissolves fluidly into the button base */
  }
}