:root {
  --transition-fast: 0.2s;
  --transition-medium: 0.4s;
  --transition-slow: 0.7s;
  --transition-very-slow: 1s;
}

.anim-vibrate{
    opacity: 0;
  }
  
  .anim-vibrate.visible{
    opacity: 1;
    animation: fadeInAndVibrate 1s ease forwards;
  }
  
  .anim-fade-in {
    opacity: 0;
    transition: opacity var(--transition-slow) ease, transform var(--transition-slow) ease;
  }
  
  .anim-fade-in.visible {
    opacity: 1;
    
  }
  
  .anim-fade-in-bottom {
    opacity: 0;
    transform: translateY(10px); /* Partenza dal basso */
    transition: opacity var(--transition-slow) ease, transform var(--transition-slow) ease;
  }
  
  .anim-fade-in-bottom.visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  .anim-fade-in-top {
    opacity: 0;
    transform: translateY(-100px); /* Partenza dal basso */
    transition: opacity var(--transition-slow) ease, transform var(--transition-slow) ease;
  }
  
  .anim-fade-in-top.visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* Animazione di slide-in da sinistra */
  .anim-slide-in-left {
    opacity: 0;
    transform: translateX(-100px); /* Partenza da sinistra */
    transition: opacity var(--transition-slow) ease, transform var(--transition-slow) ease;
  }
  
  .anim-slide-in-left.visible {
    opacity: 1;
    transform: translateX(0);
  }
  
  
  .anim-slide-in-right {
    opacity: 0;
    transform: translateX(100px);
    transition: opacity var(--transition-slow) ease, transform var(--transition-slow) ease;
  }
  
  .anim-slide-in-right.visible {
    opacity: 1;
    transform: translateX(0);
  }
  
  .anim-zoom-in {
    opacity: 0;
    transform: translateY(-300px) scale(0.1) ; /* Partenza da scala 0 */
    transition: transform var(--transition-medium) ease, opacity var(--transition-medium) ease;

  }
  
  .anim-zoom-in.visible {
    opacity: 1;
    transform: scale(1) translateY(0px)  ;
  }
  
  
  
  
  
  @keyframes fadeInAndVibrate {
    0% {
      opacity: 1;
      transform: translateX(0);
    }
    50% {
      opacity: 1;
      transform: translateX(0); /* Dissolvenza completata */
    }
    55% { transform: translateX(-10px); }
    60% { transform: translateX(10px); }
    65% { transform: translateX(-20px); }
    70% { transform: translateX(20px); }
    75% { transform: translateX(0); }
    100% { transform: translateX(0); }
  }