Framework Equalizer with Hover Tooltips

<div class="w-full bg-neutral-900/30 rounded-xl p-6">
  <style>@import url('https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,700,900&display=swap');
    
    @keyframes barGrow {
      from { 
        height: 8%; 
        opacity: 0.3;
      }
      to { 
        height: var(--bar-height); 
        opacity: 1;
      }
    }
    
    .equalizer-bar {
      height: 8%;
      opacity: 0.3;
    }
    
    .equalizer-bar.animate {
      animation: barGrow 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
      animation-delay: var(--bar-delay);
    }
    
    .bar-glow-gold {
      box-shadow: 0 0 8px rgba(217, 119, 6, 0.5);
    }
    
    .bar-glow-teal {
      box-shadow: 0 0 6px rgba(20, 184, 166, 0.4);
    }
    
    .bar-tooltip {
      position: absolute;
      bottom: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%) translateY(4px);
      opacity: 0;
      pointer-events: none;
      transition: all 0.2s ease;
      white-space: nowrap;
      z-index: 50;
      font-size: 10px;
      font-family: 'Satoshi', 'Helvetica Neue', sans-serif;
    }
    
    .bar-container:hover .bar-tooltip {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }</style>
  <div class="flex items-center justify-between mb-3">
    <span class="text-[11px] text-neutral-400 uppercase tracking-wider" style="font-family: 'Satoshi', 'Helvetica Neue', sans-serif;">Framework Breakdown</span>
  </div>
  <div id="equalizer-demo" class="flex items-end justify-between h-24 gap-1.5 w-full
    bg-neutral-900/50 rounded-lg p-3 pt-8 border border-white/5
    relative overflow-visible">
    <div class="bar-container relative flex-1 h-full flex flex-col justify-end">
      <div class="bar-tooltip text-amber-400 bg-neutral-900/95 px-2 py-1 rounded border border-amber-500/30">Hook 92</div>
      <div class="equalizer-bar bar-glow-gold w-full bg-gradient-to-t from-amber-600 to-amber-400 rounded-t-sm" style="--bar-height: 92%; --bar-delay: 0ms;" data-score="92"></div>
    </div>
    <div class="bar-container relative flex-1 h-full flex flex-col justify-end">
      <div class="bar-tooltip text-green-400 bg-neutral-900/95 px-2 py-1 rounded border border-green-500/30">Intro 78</div>
      <div class="equalizer-bar w-full bg-gradient-to-t from-green-600 to-green-400 rounded-t-sm" style="--bar-height: 78%; --bar-delay: 50ms;" data-score="78"></div>
    </div>
    <div class="bar-container relative flex-1 h-full flex flex-col justify-end">
      <div class="bar-tooltip text-teal-400 bg-neutral-900/95 px-2 py-1 rounded border border-teal-500/30">Value 85</div>
      <div class="equalizer-bar bar-glow-teal w-full bg-gradient-to-t from-teal-600 to-teal-400 rounded-t-sm" style="--bar-height: 85%; --bar-delay: 100ms;" data-score="85"></div>
    </div>
    <div class="bar-container relative flex-1 h-full flex flex-col justify-end">
      <div class="bar-tooltip text-teal-400 bg-neutral-900/95 px-2 py-1 rounded border border-teal-500/30">Order 81</div>
      <div class="equalizer-bar bar-glow-teal w-full bg-gradient-to-t from-teal-600 to-teal-400 rounded-t-sm" style="--bar-height: 81%; --bar-delay: 150ms;" data-score="81"></div>
    </div>
    <div class="bar-container relative flex-1 h-full flex flex-col justify-end">
      <div class="bar-tooltip text-teal-400 bg-neutral-900/95 px-2 py-1 rounded border border-teal-500/30">Pacing 89</div>
      <div class="equalizer-bar bar-glow-teal w-full bg-gradient-to-t from-teal-600 to-teal-400 rounded-t-sm" style="--bar-height: 89%; --bar-delay: 200ms;" data-score="89"></div>
    </div>
    <div class="bar-container relative flex-1 h-full flex flex-col justify-end">
      <div class="bar-tooltip text-green-400 bg-neutral-900/95 px-2 py-1 rounded border border-green-500/30">Emotion 76</div>
      <div class="equalizer-bar w-full bg-gradient-to-t from-green-600 to-green-400 rounded-t-sm" style="--bar-height: 76%; --bar-delay: 250ms;" data-score="76"></div>
    </div>
    <div class="bar-container relative flex-1 h-full flex flex-col justify-end">
      <div class="bar-tooltip text-teal-400 bg-neutral-900/95 px-2 py-1 rounded border border-teal-500/30">Outro 88</div>
      <div class="equalizer-bar bar-glow-teal w-full bg-gradient-to-t from-teal-600 to-teal-400 rounded-t-sm" style="--bar-height: 88%; --bar-delay: 300ms;" data-score="88"></div>
    </div>
    <div class="bar-container relative flex-1 h-full flex flex-col justify-end">
      <div class="bar-tooltip text-amber-400 bg-neutral-900/95 px-2 py-1 rounded border border-amber-500/30">Meta 94</div>
      <div class="equalizer-bar bar-glow-gold w-full bg-gradient-to-t from-amber-600 to-amber-400 rounded-t-sm" style="--bar-height: 94%; --bar-delay: 350ms;" data-score="94"></div>
    </div>
    <div class="bar-container relative flex-1 h-full flex flex-col justify-end">
      <div class="bar-tooltip text-teal-400 bg-neutral-900/95 px-2 py-1 rounded border border-teal-500/30">Psych 83</div>
      <div class="equalizer-bar bar-glow-teal w-full bg-gradient-to-t from-teal-600 to-teal-400 rounded-t-sm" style="--bar-height: 83%; --bar-delay: 400ms;" data-score="83"></div>
    </div>
    <div class="bar-container relative flex-1 h-full flex flex-col justify-end">
      <div class="bar-tooltip text-amber-400 bg-neutral-900/95 px-2 py-1 rounded border border-amber-500/30">Algo 91</div>
      <div class="equalizer-bar bar-glow-gold w-full bg-gradient-to-t from-amber-600 to-amber-400 rounded-t-sm" style="--bar-height: 91%; --bar-delay: 450ms;" data-score="91"></div>
    </div>
  </div>
  <script>(function() {
      function animateEqualizer() {
        const bars = document.querySelectorAll('#equalizer-demo .equalizer-bar');
        bars.forEach(bar => {
          bar.classList.add('animate');
        });
      }
      
      setTimeout(animateEqualizer, 500);
    })();</script>
</div>