animations.css

@keyframes fadeInSlideDown {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes scaleIn {
    from {
      transform: scale(0.95);
      opacity: 0;
    }
    to {
      transform: scale(1);
      opacity: 1;
    }
  }
  
  @keyframes barRise {
    from {
      transform: scaleY(0);
      opacity: 0;
    }
    to {
      transform: scaleY(1);
      opacity: 1;
    }
  }

  .header {
    animation: fadeInSlideDown 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
    opacity: 0; 
  }
  
  .controls {
    animation: fadeInSlideDown 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0.3s both;
    opacity: 0; 
  }
  
  .visualizer {
    animation: scaleIn 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.5s both;
    opacity: 0; 
    transform-origin: center bottom;
  }
  
  .bar {
    transform-origin: bottom center;
    animation: barRise 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    opacity: 0; 
  }
  

  .bar:nth-child(1) { animation-delay: 0.6s; }
  .bar:nth-child(2) { animation-delay: 0.65s; }
  .bar:nth-child(3) { animation-delay: 0.7s; }
  .bar:nth-child(4) { animation-delay: 0.75s; }

  .bar:nth-child(n+5) { animation-delay: 0.8s; }
  

  .bar-value {
    animation: fadeInSlideDown 0.4s ease-out 0.8s both;
    opacity: 0;
  }
  

  button, select, input[type="range"] {
    transition: 
      transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
      box-shadow 0.3s cubic-bezier(0.23, 1, 0.32, 1),
      opacity 0.3s ease;
  }

  .visualizer:hover {
    animation: visualizerHover 1.2s ease-in-out infinite alternate;
  }
  
  @keyframes visualizerHover {
    from {
      transform: translateY(0);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    }
    to {
      transform: translateY(-4px);
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    }
  }