<div class="relative w-80 h-96 cursor-pointer select-none group">
  <!-- Terminal Glow Background -->
  <div class="terminal-glow absolute -inset-1 bg-gradient-to-r from-green-500/20 to-emerald-400/20 rounded-2xl blur-lg group-hover:from-green-400/30 group-hover:to-emerald-300/30 group-hover:blur-xl transition-all duration-500"></div>
  
  <!-- Scanlines -->
  <div class="scanlines absolute inset-0 opacity-20 group-hover:opacity-30 transition-opacity duration-500"></div>

  <!-- Main Terminal -->
  <div class="relative bg-black/95 rounded-2xl p-6 h-full border border-green-400/30 group-hover:border-green-400/50 transition-all duration-500 overflow-hidden font-mono">
    
    <!-- Terminal Header -->
    <div class="flex items-center justify-between mb-6 pb-4 border-b border-green-400/20">
      <div class="flex items-center gap-3">
        <div class="flex gap-2">
          <div class="w-3 h-3 bg-red-400 rounded-full opacity-60"></div>
          <div class="w-3 h-3 bg-yellow-400 rounded-full opacity-60"></div>
          <div class="w-3 h-3 bg-green-400 rounded-full opacity-100 animate-pulse shadow-lg shadow-green-400/50"></div>
        </div>
        <span class="text-green-300 text-sm">terminal@system</span>
      </div>
      <div class="text-green-400/60 text-xs terminal-time">
        12:34:56
      </div>
    </div>
    
    <!-- Terminal Content -->
    <div class="space-y-3 flex-1">
      
      <!-- System Info -->
      <div class="space-y-1">
        <div class="text-green-300 text-sm">
          <span class="text-green-500">user@system:</span>
          <span class="text-blue-400">~</span>
          <span class="text-green-300">$ system --info</span>
        </div>
        <div class="text-green-400/80 text-xs ml-4">
          ▸ OS: QuantumLinux v2.1.5
        </div>
        <div class="text-green-400/80 text-xs ml-4">
          ▸ Kernel: 6.8.0-quantum
        </div>
        <div class="text-green-400/80 text-xs ml-4">
          ▸ Uptime: 42 days, 13:37:21
        </div>
      </div>
      
      <!-- Status Indicators -->
      <div class="space-y-2 mt-6">
        <div class="flex items-center justify-between text-xs">
          <span class="text-green-300">CPU:</span>
          <div class="flex items-center gap-2">
            <div class="w-16 h-1.5 bg-green-900 rounded-full overflow-hidden">
              <div class="cpu-bar h-full bg-gradient-to-r from-green-500 to-green-300 rounded-full w-3/4 group-hover:w-5/6 transition-all duration-1000"></div>
            </div>
            <span class="text-green-400">74%</span>
          </div>
        </div>
        
        <div class="flex items-center justify-between text-xs">
          <span class="text-green-300">RAM:</span>
          <div class="flex items-center gap-2">
            <div class="w-16 h-1.5 bg-green-900 rounded-full overflow-hidden">
              <div class="ram-bar h-full bg-gradient-to-r from-emerald-500 to-emerald-300 rounded-full w-1/2 group-hover:w-3/5 transition-all duration-1000"></div>
            </div>
            <span class="text-green-400">58%</span>
          </div>
        </div>
        
        <div class="flex items-center justify-between text-xs">
          <span class="text-green-300">NET:</span>
          <div class="flex items-center gap-2">
            <div class="w-16 h-1.5 bg-green-900 rounded-full overflow-hidden">
              <div class="net-bar h-full bg-gradient-to-r from-cyan-500 to-cyan-300 rounded-full w-5/6 group-hover:w-full transition-all duration-1000"></div>
            </div>
            <span class="text-green-400">91%</span>
          </div>
        </div>
      </div>
      
      <!-- Active Processes -->
      <div class="mt-6 space-y-1">
        <div class="text-green-300 text-sm">
          <span class="text-green-500">user@system:</span>
          <span class="text-blue-400">~</span>
          <span class="text-green-300">$ ps aux | head</span>
        </div>
        <div class="text-green-400/60 text-xs space-y-0.5 ml-4">
          <div>quantum-core    █████░░░ 23.4MB</div>
          <div>neural-net      ███░░░░░ 15.7MB</div>
          <div>crypto-daemon   ██████░░ 31.2MB</div>
          <div class="opacity-70">matrix-solver   ████░░░░ 19.8MB</div>
        </div>
      </div>
      
      <!-- Current Command Animation -->
      <div class="mt-6">
        <div class="text-green-300 text-sm flex items-center">
          <span class="text-green-500">user@system:</span>
          <span class="text-blue-400">~</span>
          <span class="ml-1 current-command">$ system --status</span>
          <div class="w-2 h-4 bg-green-400 ml-1 animate-pulse cursor-blink"></div>
        </div>
      </div>
      
    </div>
    
    <!-- Footer -->
    <div class="mt-6 pt-4 border-t border-green-400/20 flex items-center justify-between">
      <div class="text-green-400/60 text-xs">
        [SECURE SESSION]
      </div>
      <div class="flex items-center gap-1">
        <div class="w-1 h-1 bg-green-400 rounded-full animate-ping"></div>
        <span class="text-green-400/80 text-xs">ONLINE</span>
      </div>
    </div>
    
    <!-- Matrix Rain Effect -->
    <div class="matrix-rain absolute inset-0 overflow-hidden opacity-0 group-hover:opacity-20 transition-opacity duration-1000">
      <div class="matrix-digit-1 absolute top-0 left-4 text-green-400/30 text-xs animate-pulse">01</div>
      <div class="matrix-digit-2 absolute top-8 left-12 text-green-400/30 text-xs animate-pulse">10</div>
      <div class="matrix-digit-3 absolute top-4 right-8 text-green-400/30 text-xs animate-pulse">11</div>
      <div class="matrix-digit-4 absolute top-12 right-16 text-green-400/30 text-xs animate-pulse">00</div>
      <div class="matrix-digit-5 absolute bottom-20 left-8 text-green-400/30 text-xs animate-pulse">01</div>
      <div class="matrix-digit-6 absolute bottom-16 right-12 text-green-400/30 text-xs animate-pulse">10</div>
    </div>
  </div>
</div>