/* === EFFETTO SHIMMER UNIVERSALE === */
/* Applicabile a qualsiasi elemento aggiungendo la classe "shimmer-effect" */

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

/* Classe principale per l'effetto shimmer */
.shimmer-effect {
  position: relative;
  overflow: hidden;
}

/* Pseudo-elemento che crea l'effetto shimmer */
.shimmer-effect::before {
  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.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateX(-150%);
  animation: shimmer-slide 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: 10; /* Z-index alto per essere sopra tutto */
}

/* Quando il mouse è sopra, l'effetto shimmer scompare */
.shimmer-effect:hover::before {
  opacity: 0;
  animation-play-state: paused;
}

/* === VARIANTI DI INTENSITÀ === */

/* Shimmer più intenso */
.shimmer-effect.shimmer-intense::before {
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  width: 60%;
}

/* Shimmer più sottile */
.shimmer-effect.shimmer-subtle::before {
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  width: 90%;
}

/* Shimmer colorato (oro) */
.shimmer-effect.shimmer-gold::before {
  background: linear-gradient(
    to right,
    rgba(255, 215, 0, 0) 0%,
    rgba(255, 215, 0, 0.4) 50%,
    rgba(255, 215, 0, 0) 100%
  );
}

/* === VARIANTI DI VELOCITÀ === */

/* Shimmer veloce */
.shimmer-effect.shimmer-fast::before {
  animation-duration: 1.5s;
}

/* Shimmer lento */
.shimmer-effect.shimmer-slow::before {
  animation-duration: 4s;
}

/* === CONTROLLI === */

/* Disabilita completamente l'effetto shimmer */
.shimmer-effect.shimmer-disabled::before {
  animation-duration: 0s !important;
  animation-play-state: paused !important;
  opacity: 0 !important;
}

/* Shimmer solo al primo caricamento (una volta sola) */
.shimmer-effect.shimmer-once::before {
  animation-iteration-count: 1;
}

/* Shimmer solo all'hover */
.shimmer-effect.shimmer-on-hover::before {
  opacity: 0;
  animation-play-state: paused;
}

.shimmer-effect.shimmer-on-hover:hover::before {
  opacity: 1;
  animation-play-state: running;
}

/* === DIREZIONI ALTERNATIVE === */

/* Shimmer da destra a sinistra */
@keyframes shimmer-reverse {
  0% {
    transform: translateX(150%);
  }
  100% {
    transform: translateX(-150%);
  }
}

.shimmer-effect.shimmer-reverse::before {
  animation-name: shimmer-reverse;
}

/* Shimmer verticale */
@keyframes shimmer-vertical {
  0% {
    transform: translateY(-150%);
  }
  100% {
    transform: translateY(150%);
  }
}

.shimmer-effect.shimmer-vertical::before {
  animation-name: shimmer-vertical;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  width: 100%;
  height: 75%;
}