Animated Smart Home Dashboard Card Grid

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
  <!-- Enhanced Temperature Card with Animated Numbers -->
  <div
    class="glass-card glass-card-hover rounded-2xl p-6 animate-scale-in delay-400 transition-all duration-500 group relative overflow-hidden card-hover-gradient cursor-pointer"
    style="--hover-gradient: linear-gradient(135deg, rgba(251, 113, 133, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%)">
    <div class="relative z-10">
      <div class="flex items-start justify-between mb-6">
        <div
          class="p-3 rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 backdrop-blur-sm group-hover:scale-110 transition-transform">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
            data-lucide="thermometer"
            class="lucide lucide-thermometer w-6 h-6 text-orange-400 group-hover:scale-110 transition-transform">
            <path d="M14 4v10.54a4 4 0 1 1-4 0V4a2 2 0 0 1 4 0Z"></path>
          </svg>
        </div>
        <div class="relative group-hover:scale-110 transition-transform">
          <svg class="w-12 h-12 animate-rotate" viewBox="0 0 100 100">
            <circle cx="50" cy="50" r="40" stroke="rgba(255,255,255,0.1)" stroke-width="4" fill="none"></circle>
            <circle cx="50" cy="50" r="40" stroke="#fb7185" stroke-width="4" fill="none" class="progress-ring"
              stroke-linecap="round"></circle>
          </svg>
          <div class="absolute inset-0 flex items-center justify-center">
            <span class="text-xs font-medium text-white/80 number-digit group-hover:scale-125 transition-transform" style="--digit-delay: 1.3s">75%</span>
          </div>
        </div>
      </div>
      <div class="space-y-2">
        <p class="text-sm text-white/60 font-medium group-hover:text-white/80 transition-colors">Living Room</p>
        <p
          class="text-4xl font-bold tracking-tight bg-gradient-to-r from-white to-orange-200 bg-clip-text text-transparent group-hover:scale-105 transition-transform">
          <span class="number-digit" style="--digit-delay: 1s">2</span><span class="number-digit" style="--digit-delay: 1.1s">2</span><span class="number-digit" style="--digit-delay: 1.2s">°</span><span class="number-digit" style="--digit-delay: 1.3s">C</span>
        </p>
        <div class="flex items-center space-x-2">
          <span class="text-xs text-white/50 group-hover:text-white/70 transition-colors">Target: 21°C</span>
          <div class="flex space-x-1">
            <div class="w-1 h-1 bg-orange-400 rounded-full animate-pulse group-hover:scale-150"></div>
            <div class="w-1 h-1 bg-orange-400 rounded-full animate-pulse delay-100 group-hover:scale-150"></div>
            <div class="w-1 h-1 bg-orange-400/50 rounded-full animate-pulse delay-200 group-hover:scale-150"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Enhanced Energy Usage Card -->
  <div
    class="glass-card glass-card-hover animate-scale-in delay-500 transition-all duration-500 group relative overflow-hidden card-hover-gradient cursor-pointer rounded-2xl pt-6 pr-6 pb-6 pl-6"
    style="--hover-gradient: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%)">
    <div class="relative z-10">
      <div class="flex items-start justify-between mb-6">
        <div
          class="p-3 rounded-2xl bg-gradient-to-br from-green-500/20 to-emerald-500/20 backdrop-blur-sm group-hover:scale-110 transition-transform">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="zap"
            class="lucide lucide-zap w-6 h-6 text-green-400 group-hover:scale-110 transition-transform">
            <path
              d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z">
            </path>
          </svg>
        </div>
        <div class="flex items-center space-x-2 group-hover:scale-110 transition-transform">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
            data-lucide="trending-down" class="lucide lucide-trending-down w-4 h-4 text-green-400">
            <path d="M16 17h6v-6"></path>
            <path d="m22 17-8.5-8.5-5 5L2 7"></path>
          </svg>
          <span class="text-xs text-green-400 bg-green-500/20 px-2 py-1 rounded-full font-medium hover:bg-green-500/30 transition-colors">-12%</span>
        </div>
      </div>
      <div class="space-y-4">
        <p class="text-sm text-white/60 font-medium group-hover:text-white/80 transition-colors">Energy Usage</p>
        <p
          class="text-4xl font-bold tracking-tight bg-gradient-to-r from-white to-green-200 bg-clip-text text-transparent group-hover:scale-105 transition-transform">
          <span class="number-digit" style="--digit-delay: 1s">1</span><span class="number-digit" style="--digit-delay: 1.1s">.</span><span class="number-digit" style="--digit-delay: 1.2s">2</span><span class="number-digit" style="--digit-delay: 1.3s">k</span><span class="number-digit" style="--digit-delay: 1.4s">W</span>
        </p>
        <div class="space-y-2 progress-hover">
          <div class="w-full bg-white/10 rounded-full h-2 overflow-hidden group-hover:h-3 transition-all">
            <div
              class="progress-bar bg-gradient-to-r from-green-400 to-emerald-500 h-2 rounded-full animate-progress-fill group-hover:h-3 transition-all"
              style="--progress-width: 35%"></div>
          </div>
          <div class="flex justify-between text-xs text-white/50 group-hover:text-white/70 transition-colors">
            <span>0kW</span>
            <span>3.5kW max</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Enhanced Security Card -->
  <div
    class="glass-card glass-card-hover rounded-2xl p-6 animate-scale-in delay-600 transition-all duration-500 group relative overflow-hidden card-hover-gradient cursor-pointer"
    style="--hover-gradient: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(6, 182, 212, 0.05) 100%)">
    <div class="relative z-10">
      <div class="flex items-start justify-between mb-6">
        <div
          class="p-3 rounded-2xl bg-gradient-to-br from-blue-500/20 to-cyan-500/20 backdrop-blur-sm group-hover:scale-110 transition-transform">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
            data-lucide="shield-check"
            class="lucide lucide-shield-check w-6 h-6 text-blue-400 group-hover:scale-110 transition-transform">
            <path
              d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z">
            </path>
            <path d="m9 12 2 2 4-4"></path>
          </svg>
        </div>
        <div class="flex items-center space-x-2 group-hover:scale-110 transition-transform">
          <div class="w-3 h-3 bg-green-400 rounded-full animate-pulse group-hover:scale-125"></div>
          <span class="text-xs text-green-400 font-medium number-digit hover:text-green-300 transition-colors" style="--digit-delay: 1.2s">ACTIVE</span>
        </div>
      </div>
      <div class="space-y-2">
        <p class="text-sm text-white/60 font-medium group-hover:text-white/80 transition-colors">Security System</p>
        <p
          class="text-2xl font-bold tracking-tight text-white animate-counter group-hover:scale-105 transition-transform">
          Armed - Home</p>
        <div class="flex items-center space-x-4 mt-4">
          <div class="flex items-center space-x-1 hover-lift cursor-pointer">
            <div class="w-1.5 h-1.5 bg-green-400 rounded-full group-hover:scale-150 transition-transform"></div>
            <span class="text-xs text-white/60 group-hover:text-white/80 transition-colors">
                      <span class="number-digit" style="--digit-delay: 1.4s">8</span> sensors
            </span>
          </div>
          <div class="flex items-center space-x-1 hover-lift cursor-pointer">
            <div class="w-1.5 h-1.5 bg-blue-400 rounded-full group-hover:scale-150 transition-transform"></div>
            <span class="text-xs text-white/60 group-hover:text-white/80 transition-colors">
                      <span class="number-digit" style="--digit-delay: 1.5s">4</span> cameras
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Enhanced Lights Card -->
  <div
    class="glass-card glass-card-hover rounded-2xl p-6 animate-scale-in delay-700 transition-all duration-500 group relative overflow-hidden card-hover-gradient cursor-pointer edit-mode-hover"
    style="--hover-gradient: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(249, 115, 22, 0.05) 100%)">
    <div class="relative z-10">
      <div class="flex items-start justify-between mb-6">
        <div
          class="p-3 rounded-2xl bg-gradient-to-br from-yellow-500/20 to-orange-500/20 backdrop-blur-sm group-hover:scale-110 transition-transform">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
            data-lucide="lightbulb"
            class="lucide lucide-lightbulb w-6 h-6 text-yellow-400 group-hover:scale-110 transition-transform">
            <path
              d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5">
            </path>
            <path d="M9 18h6"></path>
            <path d="M10 22h4"></path>
          </svg>
        </div>
        <span class="text-xs text-white/60 bg-white/10 px-3 py-1 rounded-full hover:bg-white/20 transition-colors group-hover:scale-110">
                  <span class="number-digit" style="--digit-delay: 1.3s">6</span> of
        <span class="number-digit" style="--digit-delay: 1.4s">12</span> on
        </span>
      </div>
      <div class="space-y-4">
        <p class="text-sm text-white/60 font-medium group-hover:text-white/80 transition-colors">Smart Lighting</p>
        <p
          class="text-4xl font-bold tracking-tight bg-gradient-to-r from-white to-yellow-200 bg-clip-text text-transparent group-hover:scale-105 transition-transform">
          <span class="number-digit" style="--digit-delay: 1s">7</span><span class="number-digit" style="--digit-delay: 1.1s">5</span><span class="number-digit" style="--digit-delay: 1.2s">%</span>
        </p>
        <div class="flex items-center space-x-2 mt-4">
          <div class="flex space-x-1 group-hover:scale-110 transition-transform">
            <div
              class="w-2 h-8 bg-gradient-to-t from-yellow-400 to-yellow-300 rounded-full animate-pulse group-hover:scale-125">
            </div>
            <div
              class="w-2 h-6 bg-gradient-to-t from-yellow-400/60 to-yellow-300/60 rounded-full animate-pulse delay-100 group-hover:scale-125">
            </div>
            <div class="w-2 h-4 bg-white/20 rounded-full group-hover:bg-white/40 transition-colors"></div>
            <div class="w-2 h-3 bg-white/20 rounded-full group-hover:bg-white/40 transition-colors"></div>
          </div>
          <span class="text-xs text-white/50 ml-2 group-hover:text-white/70 transition-colors">Adaptive brightness</span>
        </div>
      </div>
    </div>
  </div>
</div>