Hero Section with Animated Avatar Marquee

<section
  class="bg-neutral-950 min-h-screen flex items-center justify-center p-4 md:p-8 text-neutral-50 antialiased selection:bg-neutral-800 font-light"
  style="font-family: 'Space Grotesk', sans-serif;">
  <link
    href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400&amp;family=Instrument+Serif:ital@0;1&amp;family=Space+Grotesk:wght@300;400&amp;display=swap"
    rel="stylesheet">

  <main
    class="w-full max-w-[1200px] bg-neutral-900 rounded-[2rem] shadow-[0_8px_40px_rgba(0,0,0,0.6)] relative overflow-hidden pt-16 pb-24 flex flex-col items-center border border-neutral-800">

    <!-- Container Sized Lines & Corner Squares -->
    <div class="absolute inset-4 border border-neutral-800 pointer-events-none rounded-xl z-0">
      <div class="absolute -top-1 -left-1 w-2 h-2 bg-neutral-950 border border-neutral-700"></div>
      <div class="absolute -top-1 -right-1 w-2 h-2 bg-neutral-950 border border-neutral-700"></div>
      <div class="absolute -bottom-1 -left-1 w-2 h-2 bg-neutral-950 border border-neutral-700"></div>
      <div class="absolute -bottom-1 -right-1 w-2 h-2 bg-neutral-950 border border-neutral-700"></div>
    </div>

    <!-- WebGL-style Animated Lines Canvas -->
    <canvas id="flowCanvas" class="absolute inset-0 w-full h-full pointer-events-none z-0 opacity-40"></canvas>

    <!-- Marquee Image Grid Section -->
    <div class="w-full overflow-hidden flex justify-start z-10 mb-12"
      style="-webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent); mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);">
      <div id="avatar-grid" class="flex items-start gap-3 md:gap-5 w-max h-[380px] md:h-[480px] pr-3 md:pr-5">

        <!-- Column 1 -->
        <div class="hidden lg:flex flex-col gap-4 mt-12 w-24 shrink-0">
          <div class="w-full h-20 bg-neutral-800/50 rounded-2xl border border-neutral-700/50"></div>
          <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&amp;q=80" alt="Profile" class="w-full h-24 object-cover rounded-2xl shadow-md transition-transform duration-500 hover:-translate-y-1">
          <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=400&amp;q=80" alt="Profile" class="w-full h-28 object-cover rounded-2xl shadow-md transition-transform duration-500 hover:-translate-y-1">
        </div>

        <!-- Column 2 -->
        <div class="hidden sm:flex flex-col gap-4 mt-4 w-28 shrink-0">
          <div class="w-full h-24 bg-neutral-800/50 rounded-2xl border border-neutral-700/50"></div>
          <img src="https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?w=400&amp;q=80" alt="Profile" class="w-full h-32 object-cover rounded-2xl shadow-md transition-transform duration-500 hover:-translate-y-1">
          <img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=400&amp;q=80" alt="Profile" class="w-full h-24 object-cover rounded-2xl shadow-md transition-transform duration-500 hover:-translate-y-1">
        </div>

        <!-- Column 3 -->
        <div class="flex flex-col gap-4 mt-16 w-28 md:w-32 shrink-0">
          <div class="w-full h-20 bg-neutral-800/50 rounded-2xl border border-neutral-700/50"></div>
          <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=400&amp;q=80" alt="Profile" class="w-full h-36 object-cover rounded-2xl shadow-md transition-transform duration-500 hover:-translate-y-1">
        </div>

        <!-- Column 4 (Center) -->
        <div class="flex flex-col gap-4 mt-6 w-32 md:w-36 shrink-0">
          <div class="w-full h-24 bg-neutral-800/50 rounded-2xl border border-neutral-700/50"></div>
          <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?w=400&amp;q=80" alt="Profile" class="w-full h-40 object-cover rounded-2xl shadow-md transition-transform duration-500 hover:-translate-y-1">
        </div>

        <!-- Column 5 -->
        <div class="flex flex-col gap-4 mt-20 w-28 md:w-32 shrink-0">
          <div class="w-full h-20 bg-neutral-800/50 rounded-2xl border border-neutral-700/50"></div>
          <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?w=400&amp;q=80" alt="Profile" class="w-full h-32 object-cover rounded-2xl shadow-md transition-transform duration-500 hover:-translate-y-1">
        </div>

        <!-- Column 6 (Tilted) -->
        <div class="hidden sm:flex flex-col gap-4 mt-28 w-32 shrink-0" style="perspective: 1000px;">
          <div class="w-full h-20 bg-neutral-800/50 rounded-2xl border border-neutral-700/50"></div>
          <div class="relative transition-transform duration-700 hover:scale-105 group cursor-pointer"
            style="transform: rotateY(-14deg) rotateX(6deg) rotateZ(-2deg); transform-style: preserve-3d;">
            <img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?w=400&amp;q=80" alt="Profile" class="w-full h-40 object-cover rounded-2xl shadow-[0_16px_40px_rgba(0,0,0,0.8)] border border-neutral-700">
            <div
              class="absolute -right-3 top-1/2 bg-neutral-800 rounded-full p-1.5 shadow-xl flex items-center justify-center transform translate-z-10 group-hover:scale-110 transition-transform border border-neutral-600">
              <iconify-icon icon="solar:cursor-linear" class="text-xl text-white"
                style="stroke-width: 1.5;"></iconify-icon>
            </div>
          </div>
        </div>

        <!-- Column 7 -->
        <div class="hidden lg:flex flex-col gap-4 mt-10 w-24 shrink-0">
          <div class="w-full h-24 bg-neutral-800/50 rounded-2xl border border-neutral-700/50"></div>
          <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=400&amp;q=80" alt="Profile" class="w-full h-28 object-cover rounded-2xl shadow-md transition-transform duration-500 hover:-translate-y-1">
          <img src="https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?w=400&amp;q=80" alt="Profile" class="w-full h-24 object-cover rounded-2xl shadow-md transition-transform duration-500 hover:-translate-y-1">
        </div>

      </div>
    </div>

    <!-- Content Section -->
    <div class="flex flex-col items-center z-10 px-6 text-center max-w-3xl mx-auto">
      <span class="bg-neutral-800/80 text-neutral-300 text-xs font-light tracking-widest uppercase px-4 py-2 rounded-full mb-8 border border-neutral-700/50 backdrop-blur-sm" style="font-family: 'DM Mono', monospace;">
                Global Infrastructure
            </span>

      <h1 class="text-5xl md:text-7xl font-normal tracking-tight text-white mb-4 leading-[1.05]"
        style="font-family: 'Instrument Serif', serif;">
        Empowering <i class="text-neutral-400 italic font-light">digital pioneers</i> <br>
                across the globe
      </h1>

      <p class="text-neutral-400 text-sm md:text-base mt-4 leading-relaxed max-w-[32rem] font-light">
        Discover how visionary creators leverage our robust architecture to build, scale, and lead their industries with
        absolute confidence.
      </p>

      <!-- Skeuomorphic Button -->
      <button class="mt-10 bg-gradient-to-b from-neutral-600 to-neutral-800 border border-neutral-500/50 shadow-[inset_0_1px_0_rgba(255,255,255,0.2),0_4px_12px_rgba(0,0,0,0.6)] active:shadow-[inset_0_2px_4px_rgba(0,0,0,0.5)] active:translate-y-[1px] text-white text-xs uppercase tracking-widest font-light px-7 py-4 rounded-full flex items-center gap-3 transition-all duration-200 group" style="font-family: 'DM Mono', monospace;">
                Explore Case Studies
                <iconify-icon icon="solar:arrow-right-linear" class="text-lg transition-transform duration-300 group-hover:translate-x-1 opacity-80" style="stroke-width: 1.5;"></iconify-icon>
            </button>
    </div>

  </main>

  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
  <script>
    // WebGL-style lines animation simulation (Dark Mode adapted)
        const canvas = document.getElementById('flowCanvas');
        const ctx = canvas.getContext('2d');
        let width, height;

        function resize() {
            width = canvas.width = canvas.offsetWidth;
            height = canvas.height = canvas.offsetHeight;
        }
        window.addEventListener('resize', resize);
        resize();

        const lines = [];
        const numLines = 14;
        
        for (let i = 0; i < numLines; i++) {
            lines.push({
                baseX: (i + 1) * (1 / (numLines + 1)),
                particles: [
                    { y: Math.random() * 1000, speed: 0.5 + Math.random() * 1.5, length: 30 + Math.random() * 50 },
                    { y: Math.random() * 1000 - 500, speed: 0.5 + Math.random() * 1.5, length: 20 + Math.random() * 40 }
                ]
            });
        }

        function draw() {
            ctx.clearRect(0, 0, width, height);

            lines.forEach((line) => {
                const x = line.baseX * width;

                // Draw static dashed line
                ctx.beginPath();
                ctx.strokeStyle = 'rgba(255, 255, 255, 0.05)';
                ctx.lineWidth = 1;
                ctx.setLineDash([4, 6]);
                ctx.moveTo(x, 0);
                ctx.lineTo(x, height);
                ctx.stroke();

                // Draw moving gradient particles
                ctx.setLineDash([]);
                line.particles.forEach(p => {
                    p.y += p.speed;
                    if (p.y > height + p.length) {
                        p.y = -p.length;
                    }

                    const grad = ctx.createLinearGradient(0, p.y - p.length/2, 0, p.y + p.length/2);
                    grad.addColorStop(0, 'rgba(255, 255, 255, 0)');
                    grad.addColorStop(0.5, 'rgba(255, 255, 255, 0.15)');
                    grad.addColorStop(1, 'rgba(255, 255, 255, 0)');

                    ctx.beginPath();
                    ctx.strokeStyle = grad;
                    ctx.lineWidth = 1.5;
                    ctx.moveTo(x, p.y - p.length/2);
                    ctx.lineTo(x, p.y + p.length/2);
                    ctx.stroke();
                });
            });

            requestAnimationFrame(draw);
        }
        draw();

        // Marquee Animation using Web Animations API
        const grid = document.getElementById('avatar-grid');
        if (grid) {
            grid.innerHTML += grid.innerHTML; // Duplicate content for seamless loop
            grid.animate([
                { transform: 'translateX(0)' },
                { transform: 'translateX(-50%)' }
            ], {
                duration: 35000,
                iterations: Infinity,
                easing: 'linear'
            });
        }
  </script>
</section>