<div class="relative w-80 h-96 cursor-pointer select-none group">
  <!-- Aurora Background Animation -->
  <div class="absolute inset-0 bg-gradient-to-br from-purple-900 via-blue-900 to-teal-900 rounded-3xl"></div>
  <div class="aurora-bg absolute inset-0 bg-gradient-to-r from-green-400/30 via-blue-500/40 via-purple-500/50 via-pink-500/40 to-yellow-400/30 rounded-3xl opacity-60 group-hover:opacity-90 transition-all duration-1000"></div>
  
  <!-- Aurora Waves -->
  <div class="absolute inset-0 overflow-hidden rounded-3xl">
    <div class="absolute -inset-10 opacity-40 group-hover:opacity-70 transition-all duration-1000">
      <div class="aurora-wave-1 absolute top-0 left-0 w-full h-full bg-gradient-to-r from-transparent via-emerald-400/50 to-transparent transform -skew-y-12 group-hover:skew-y-12 transition-transform duration-2000"></div>
      <div class="aurora-wave-2 absolute top-1/4 left-0 w-full h-full bg-gradient-to-r from-transparent via-blue-400/40 to-transparent transform skew-y-6 group-hover:-skew-y-6 transition-transform duration-2000"></div>
      <div class="aurora-wave-3 absolute top-1/2 left-0 w-full h-full bg-gradient-to-r from-transparent via-purple-400/60 to-transparent transform -skew-y-3 group-hover:skew-y-3 transition-transform duration-2000"></div>
    </div>
  </div>

  <!-- Main Card -->
  <div class="relative bg-black/20 backdrop-blur-sm rounded-3xl p-8 h-full border border-white/10 group-hover:border-white/20 group-hover:bg-black/10 transition-all duration-500 overflow-hidden">
    
    <!-- Aurora Particles -->
    <div class="absolute inset-0 overflow-hidden">
      <div class="absolute top-1/6 left-1/4 w-2 h-2 bg-emerald-400 rounded-full opacity-60 group-hover:opacity-100 animate-pulse particle-1"></div>
      <div class="absolute top-1/3 right-1/5 w-1.5 h-1.5 bg-blue-400 rounded-full opacity-60 group-hover:opacity-100 animate-pulse particle-2"></div>
      <div class="absolute bottom-1/3 left-1/5 w-3 h-3 bg-purple-400 rounded-full opacity-60 group-hover:opacity-100 animate-pulse particle-3"></div>
      <div class="absolute top-2/3 right-1/3 w-1 h-1 bg-pink-400 rounded-full opacity-60 group-hover:opacity-100 animate-pulse particle-4"></div>
    </div>
    
    <!-- Content -->
    <div class="relative z-10 h-full flex flex-col text-white">
      
      <!-- Header -->
      <div class="text-center mb-8">
        <div class="inline-flex items-center gap-2 mb-4">
          <div class="w-2 h-2 bg-emerald-400 rounded-full animate-pulse shadow-lg shadow-emerald-400/50"></div>
          <div class="w-2 h-2 bg-blue-400 rounded-full animate-pulse shadow-lg shadow-blue-400/50 pulse-delay-1"></div>
          <div class="w-2 h-2 bg-purple-400 rounded-full animate-pulse shadow-lg shadow-purple-400/50 pulse-delay-2"></div>
          <div class="w-2 h-2 bg-pink-400 rounded-full animate-pulse shadow-lg shadow-pink-400/50 pulse-delay-3"></div>
        </div>
        <h3 class="text-3xl font-bold mb-2 group-hover:aurora-text transition-all duration-500">Aurora</h3>
        <p class="text-white/70 text-sm">Northern Lights Effect</p>
      </div>
      
      <!-- Aurora Intensity Meters -->
      <div class="space-y-6 flex-1">
        
        <!-- Green Aurora -->
        <div class="space-y-2">
          <div class="flex items-center justify-between">
            <span class="text-emerald-300 font-medium">Emerald</span>
            <span class="text-emerald-300/70 text-sm">92%</span>
          </div>
          <div class="h-3 bg-black/30 rounded-full overflow-hidden backdrop-blur-sm">
            <div class="h-full bg-gradient-to-r from-emerald-500 to-emerald-300 rounded-full aurora-progress-1 relative">
              <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent animate-pulse"></div>
            </div>
          </div>
        </div>
        
        <!-- Blue Aurora -->
        <div class="space-y-2">
          <div class="flex items-center justify-between">
            <span class="text-blue-300 font-medium">Azure</span>
            <span class="text-blue-300/70 text-sm">78%</span>
          </div>
          <div class="h-3 bg-black/30 rounded-full overflow-hidden backdrop-blur-sm">
            <div class="h-full bg-gradient-to-r from-blue-500 to-blue-300 rounded-full aurora-progress-2">
              <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent animate-pulse pulse-delay-1"></div>
            </div>
          </div>
        </div>
        
        <!-- Purple Aurora -->
        <div class="space-y-2">
          <div class="flex items-center justify-between">
            <span class="text-purple-300 font-medium">Violet</span>
            <span class="text-purple-300/70 text-sm">85%</span>
          </div>
          <div class="h-3 bg-black/30 rounded-full overflow-hidden backdrop-blur-sm">
            <div class="h-full bg-gradient-to-r from-purple-500 to-purple-300 rounded-full aurora-progress-3">
              <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent animate-pulse pulse-delay-2"></div>
            </div>
          </div>
        </div>
        
        <!-- Pink Aurora -->
        <div class="space-y-2">
          <div class="flex items-center justify-between">
            <span class="text-pink-300 font-medium">Rosa</span>
            <span class="text-pink-300/70 text-sm">67%</span>
          </div>
          <div class="h-3 bg-black/30 rounded-full overflow-hidden backdrop-blur-sm">
            <div class="h-full bg-gradient-to-r from-pink-500 to-pink-300 rounded-full aurora-progress-4">
              <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent animate-pulse pulse-delay-3"></div>
            </div>
          </div>
        </div>
        
      </div>
      
      <!-- Action Button -->
      <div class="mt-8">
        <button class="w-full py-4 bg-gradient-to-r from-emerald-500/20 via-blue-500/20 via-purple-500/20 to-pink-500/20 backdrop-blur-sm border border-white/20 rounded-2xl font-medium text-white hover:from-emerald-500/30 hover:via-blue-500/30 hover:via-purple-500/30 hover:to-pink-500/30 hover:border-white/40 hover:scale-[1.02] transition-all duration-300 group-hover:shadow-lg">
          <span class="group-hover:aurora-text transition-all duration-500">Watch Aurora</span>
        </button>
      </div>
      
    </div>
  </div>
</div>