3D Hover Cards Grid with Blueprint Background

<div class="relative w-full min-h-screen bg-[#050505] text-[#F3F4F6] antialiased overflow-hidden"
  style="font-family:'Space Grotesk', sans-serif;">
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Rajdhani:wght@700&display=swap');

    .lift-card {
      position: relative;
      transform-style: preserve-3d;
      transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    }

    .lift-card::before {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 5%;
      right: 5%;
      height: 10px;
      background: rgba(6, 182, 212, 0);
      filter: blur(8px);
      transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
      transform: translateZ(-1px);
    }

    .lift-card::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: rgba(255, 255, 255, 0.1);
      transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
      transform-origin: bottom;
    }

    .lift-card:hover {
      transform: perspective(1000px) rotateX(2deg) translateY(-4px);
    }

    .lift-card:hover::before {
      background: rgba(6, 182, 212, 0.4);
      bottom: -15px;
      height: 15px;
      filter: blur(12px);
    }

    .lift-card:hover::after {
      height: 6px;
      background: rgba(6, 182, 212, 0.8);
      transform: rotateX(-80deg);
    }

    .sweep-container {
      position: absolute;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
    }

    .sweep {
      position: absolute;
      top: 0;
      bottom: 0;
      left: -100%;
      width: 50%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
      transform: skewX(-20deg);
    }

    .lift-card:hover .sweep {
      animation: sweep-anim 1s cubic-bezier(0.19, 1, 0.22, 1) forwards;
    }

    @keyframes sweep-anim {
      0% {
        left: -100%;
      }

      100% {
        left: 200%;
      }
    }

    .corner-tick {
      position: absolute;
      width: 8px;
      height: 8px;
      opacity: 0;
      transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
      pointer-events: none;
    }

    .corner-tl {
      top: 0;
      left: 0;
      border-top: 1px solid #06b6d4;
      border-left: 1px solid #06b6d4;
      transform: translate(-4px, -4px);
    }

    .corner-tr {
      top: 0;
      right: 0;
      border-top: 1px solid #06b6d4;
      border-right: 1px solid #06b6d4;
      transform: translate(4px, -4px);
    }

    .corner-bl {
      bottom: 0;
      left: 0;
      border-bottom: 1px solid #06b6d4;
      border-left: 1px solid #06b6d4;
      transform: translate(-4px, 4px);
    }

    .corner-br {
      bottom: 0;
      right: 0;
      border-bottom: 1px solid #06b6d4;
      border-right: 1px solid #06b6d4;
      transform: translate(4px, 4px);
    }

    .lift-card:hover .corner-tick {
      opacity: 1;
    }

    .lift-card:hover .corner-tl {
      transform: translate(8px, 8px);
    }

    .lift-card:hover .corner-tr {
      transform: translate(-8px, 8px);
    }

    .lift-card:hover .corner-bl {
      transform: translate(8px, -8px);
    }

    .lift-card:hover .corner-br {
      transform: translate(-8px, -8px);
    }
  </style>

  <!-- Blueprint Background Layer -->
  <div class="absolute inset-0 z-0 pointer-events-none">
    <div class="absolute inset-0 opacity-30"
      style="background-image: linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 3rem 3rem;">
    </div>
    <div class="absolute inset-0" style="background: radial-gradient(circle at center, transparent 10%, #050505 100%);">
    </div>
  </div>

  <!-- Content Section -->
  <section class="relative z-10 py-24 md:py-32 flex items-center justify-center min-h-screen">
    <div class="max-w-7xl w-full mx-auto px-6">
      <div class="grid grid-cols-1 md:grid-cols-3 gap-px border border-white/10 bg-white/5">

        <!-- CARD 01 -->
        <div
          class="bg-[#050505] aspect-square p-8 md:p-12 flex flex-col justify-between hover:bg-white/[0.02] transition-colors lift-card group cursor-pointer">
          <div class="text-[#06b6d4] text-xs tracking-widest font-mono" style="font-family:'JetBrains Mono',monospace;">
            [01]</div>
          <div>
            <h3 class="text-4xl uppercase tracking-tight mb-3 text-white" style="font-family:'Rajdhani',sans-serif;">
              Assembly</h3>
            <p class="text-xs text-white/50 uppercase tracking-widest font-mono"
              style="font-family:'JetBrains Mono',monospace;">Architectural Stagger</p>
          </div>
          <div class="sweep-container">
            <div class="sweep"></div>
          </div>
          <div class="corner-tick corner-tl"></div>
          <div class="corner-tick corner-tr"></div>
          <div class="corner-tick corner-bl"></div>
          <div class="corner-tick corner-br"></div>
        </div>

        <!-- CARD 02 -->
        <div
          class="bg-[#050505] aspect-square p-8 md:p-12 flex flex-col justify-between hover:bg-white/[0.02] transition-colors lift-card group cursor-pointer">
          <div class="text-[#06b6d4] text-xs tracking-widest font-mono" style="font-family:'JetBrains Mono',monospace;">
            [02]</div>
          <div>
            <h3 class="text-4xl uppercase tracking-tight mb-3 text-white" style="font-family:'Rajdhani',sans-serif;">
              Impact</h3>
            <p class="text-xs text-white/50 uppercase tracking-widest font-mono"
              style="font-family:'JetBrains Mono',monospace;">Kinetic Flash Framing</p>
          </div>
          <div class="sweep-container">
            <div class="sweep"></div>
          </div>
          <div class="corner-tick corner-tl"></div>
          <div class="corner-tick corner-tr"></div>
          <div class="corner-tick corner-bl"></div>
          <div class="corner-tick corner-br"></div>
        </div>

        <!-- CARD 03 -->
        <div
          class="bg-[#050505] aspect-square p-8 md:p-12 flex flex-col justify-between hover:bg-white/[0.02] transition-colors lift-card group cursor-pointer">
          <div class="text-[#06b6d4] text-xs tracking-widest font-mono" style="font-family:'JetBrains Mono',monospace;">
            [03]</div>
          <div>
            <h3 class="text-4xl uppercase tracking-tight mb-3 text-white" style="font-family:'Rajdhani',sans-serif;">
              Slice</h3>
            <p class="text-xs text-white/50 uppercase tracking-widest font-mono"
              style="font-family:'JetBrains Mono',monospace;">Path Geometry Wipes</p>
          </div>
          <div class="sweep-container">
            <div class="sweep"></div>
          </div>
          <div class="corner-tick corner-tl"></div>
          <div class="corner-tick corner-tr"></div>
          <div class="corner-tick corner-bl"></div>
          <div class="corner-tick corner-br"></div>
        </div>

      </div>
    </div>
  </section>
</div>