Demo-video Gaming Futuristic

                <!--
@type: Demo Video
@industry: Gaming
@style: Futuristic
@category: Page Section, Content
@framework: Tailwind
@license: Free
-->

<style>
  @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;500;700&display=swap');
  body {
    background-color: #09090b;
    font-family: 'Rajdhani', sans-serif;
    color: #fafafa;
  }
  .font-orbitron {
    font-family: 'Orbitron', sans-serif;
  }
</style>

<section class="relative bg-zinc-950 py-24 px-6 overflow-hidden border-y border-zinc-900">
  <div class="absolute top-0 right-0 w-1/3 h-full bg-yellow-400/5 skew-x-12 -z-10 translate-x-20"></div>
  <div class="absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(250,204,21,0.05),transparent_70%)]"></div>

  <div class="max-w-6xl mx-auto relative z-10">
    <div class="flex flex-col md:flex-row md:items-end justify-between gap-8 mb-12">
      <div class="max-w-2xl">
        <div class="flex items-center gap-2 mb-4">
          <span class="font-orbitron text-xs font-bold text-yellow-400 tracking-[0.4em] uppercase">Visual
            Transmission</span>
        </div>
        <h2 class="font-orbitron text-5xl md:text-6xl font-black uppercase tracking-tighter italic leading-none">
          FIELD <span class="text-zinc-700">FOOTAGE</span>
        </h2>
        <p class="mt-6 text-zinc-500 font-light uppercase tracking-widest text-sm border-l-2 border-zinc-800 pl-6">
          Recovered data packets from the last <span class="text-zinc-200">Sector-7</span> breach. Observe the physics
          of the neural-void before committing to your sync.
        </p>
      </div>

      <div class="hidden lg:block text-right">
        <p class="font-orbitron text-[10px] text-zinc-600 uppercase tracking-widest mb-1">Resolution</p>
        <p class="font-orbitron text-2xl font-bold text-white tracking-tighter">8K <span
            class="text-yellow-400">SURROUND</span></p>
      </div>
    </div>

    <div class="relative group cursor-pointer">
      <div
        class="absolute -top-4 -left-4 w-12 h-12 border-t-2 border-l-2 border-yellow-400 z-20">
      </div>
      <div
        class="absolute -bottom-4 -right-4 w-12 h-12 border-b-2 border-r-2 border-yellow-400 z-20">
      </div>

      <div class="relative aspect-video w-full bg-zinc-900 overflow-hidden border border-zinc-800">
        <img src="https://images.unsplash.com/photo-1538481199705-c710c4e965fc?q=80&w=2000" alt="Gameplay Preview"
          class="w-full h-full object-cover opacity-60 grayscale group-hover:grayscale-0 transition-all duration-700">

        <div class="absolute inset-0 bg-gradient-to-t from-zinc-950 via-transparent to-zinc-950/40"></div>

        <div class="absolute inset-0 flex items-center justify-center">
          <button class="relative flex items-center justify-center group/play">
            <div
              class="relative w-20 h-20 bg-yellow-400 flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-black" viewBox="0 0 24 24"
                fill="currentColor">
                <path d="M8 5v14l11-7z" />
              </svg>
            </div>
          </button>
        </div>

        <div class="absolute bottom-8 left-8 right-8 flex justify-between items-end pointer-events-none">
          <div class="space-y-2">
            <div class="flex gap-1">
              <div class="w-1 h-4 bg-yellow-400"></div>
              <div class="w-1 h-4 bg-yellow-400"></div>
              <div class="w-1 h-4 bg-zinc-700"></div>
              <div class="w-1 h-4 bg-zinc-700"></div>
            </div>
            <p class="font-orbitron text-[10px] text-zinc-400 uppercase tracking-widest">Rec: Channel 042</p>
          </div>
          <div class="font-orbitron text-[10px] text-yellow-400 flex flex-col items-end">
            <span class="animate-pulse">● LIVE STREAM</span>
            <span class="text-zinc-500">00:14:52:08</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>