/* Stile per il pulsante con effetto liquid*/
.btn-liquid {
  position: relative;
  overflow: hidden;
  border: 2px solid #7b68ee;
  background-color: transparent;
  color: #000;

  background-image: linear-gradient(#7b68ee 0 0);
  background-repeat: no-repeat;
  background-size: 200% var(--p, 0.2em);
  background-position: calc(200% - var(--p, 0%)) 100%;

  transition: 0.4s var(--t, 0s), background-position 0.4s calc(0.4s - var(--t, 0s)), color 0.4s;
}

.btn-liquid:hover {
  --p: 100%;
  --t: 0.4s;
  color: #fff;
}

/* --- Effetto Linea Lucente (Shimmer Effect) --- */

/* Definizione dell'animazione per la linea lucente */
@keyframes shimmer {
  0% {
    transform: translateX(-150%);
  }
  100% {
    transform: translateX(150%);
  }
}

.btn-liquid::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 75%;
  height: 100%;

  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0) 100%
  );

  transform: translateX(-150%);

  /* Animazione e transizione dell'opacità */
  animation: shimmer 2.5s infinite cubic-bezier(0.25, 0.1, 0.25, 1);
  opacity: 1;
  transition: opacity 0.3s ease-out;

  pointer-events: none;
  z-index: 2;
}

/* Quando il mouse è sopra il pulsante, l'effetto lucente scompare */
.btn-liquid:hover::after {
  opacity: 0;
  animation-play-state: paused;
}

/* Disattiva l'animazione lucida */
.btn-liquid.shimmer-disabled::after {
  /* Imposta la durata dell'animazione a 0s per fermarla istantaneamente */
  animation-duration: 0s !important; 
  
  /* Assicura che l'animazione non riparta quando fermata */
  animation-play-state: paused !important; /* Molto importante per "animation-duration: 0s" */
  
  /* Rende l'elemento completamente invisibile */
  opacity: 0 !important; 

}