3D Collaborative Features Section with Animated UI

<div class="max-w-[90rem] mr-auto ml-auto space-y-32 my-24">
  <!-- Feature 1 -->
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 gap-x-16 gap-y-16 items-center">
    <div
      class="order-2 lg:order-1 aspect-square lg:aspect-video overflow-hidden group bg-[#0A0A0A] border-white/10 border rounded-2xl relative animate-on-scroll">
      <style>
        @keyframes cursor-float-1 {

          0%,
          100% {
            transform: translate3d(-20px, 40px, 0);
          }

          33% {
            transform: translate3d(60px, -30px, 0);
          }

          66% {
            transform: translate3d(-40px, -10px, 0);
          }
        }

        @keyframes cursor-float-2 {

          0%,
          100% {
            transform: translate3d(40px, -40px, 0);
          }

          50% {
            transform: translate3d(-30px, 50px, 0);
          }
        }

        @keyframes comment-pop {
          0% {
            opacity: 0;
            transform: scale(0.8) translateY(10px);
          }

          10%,
          90% {
            opacity: 1;
            transform: scale(1) translateY(0);
          }

          100% {
            opacity: 0;
            transform: scale(0.8) translateY(10px);
          }
        }
      </style>

      <!-- Background Grid -->
      <div
        class="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.03)_1px,transparent_1px)] bg-[size:40px_40px] [mask-image:radial-gradient(ellipse_at_center,black_50%,transparent_90%)]">
      </div>

      <!-- Central Scene Container -->
      <div
        class="flex overflow-hidden absolute top-0 right-0 bottom-0 left-0 perspective-[800px] items-center justify-center">
        <!-- 3D Component -->
        <div
          class="relative w-64 h-40 bg-[#111]/90 backdrop-blur-md border border-white/10 rounded-xl shadow-2xl transform transition-transform duration-700 ease-out group-hover:rotate-x-6 group-hover:rotate-y-6 rotate-x-12 rotate-y-[-12deg] flex flex-col p-1 z-10">
          <!-- Window Bar -->
          <div class="flex items-center gap-2 px-3 py-2 border-b border-white/5">
            <div class="flex gap-1.5">
              <div class="w-2.5 h-2.5 rounded-full bg-red-500/20"></div>
              <div class="w-2.5 h-2.5 rounded-full bg-yellow-500/20"></div>
            </div>
            <div class="w-20 h-1.5 bg-white/5 rounded-full ml-auto"></div>
          </div>
          <!-- Content -->
          <div class="flex-1 p-3 grid grid-cols-2 gap-3 relative">
            <div
              class="group-hover:bg-purple-500/10 transition-colors bg-purple-500/5 border-purple-500/10 border rounded">
            </div>
            <div class="bg-blue-500/5 rounded border border-blue-500/10 group-hover:bg-blue-500/10 transition-colors">
            </div>

            <!-- Comment Floating Attached -->
            <div
              class="absolute -right-24 top-0 bg-neutral-800 border border-white/10 rounded-lg p-3 shadow-xl z-50 w-40 animate-[comment-pop_8s_ease-in-out_infinite] origin-bottom-left">
              <div class="flex items-center gap-2 mb-1.5">
                <div
                  class="flex text-[9px] font-bold text-black bg-gradient-to-tr from-green-500 to-emerald-400 w-5 h-5 border-white/10 border rounded-full items-center justify-center">
                  JD
                </div>
                <span class="text-[9px] text-neutral-500">Just now</span>
              </div>
              <div class="text-[11px] text-neutral-300 leading-snug">
                Can we make this texture more responsive?
              </div>
              <!-- Connector -->
              <div
                class="absolute bottom-4 -left-1.5 w-3 h-3 bg-neutral-800 border-b border-l border-white/10 transform rotate-45">
              </div>
            </div>
          </div>
        </div>

        <!-- User 1 Cursor (Sarah - Purple) -->
        <div class="absolute inset-0 flex items-center justify-center pointer-events-none z-20">
          <div class="animate-[cursor-float-1_12s_infinite_ease-in-out]">
            <svg class="w-5 h-5 text-purple-500 drop-shadow-[0_4px_12px_rgba(168,85,247,0.5)]" viewBox="0 0 24 24"
              fill="currentColor" style="transform: rotate(-25deg)">
              <path
                d="M5.5 3.21l10.8 5.4a1 1 0 0 1 .16 1.7l-4.2 2.1 2.1 4.2a1 1 0 0 1-1.8.9l-2.1-4.2-4.2 2.1a1 1 0 0 1-1.45-1.09l1.69-11.11z"
                class=""></path>
            </svg>
            <div
              class="ml-3.5 -mt-1 px-2 py-0.5 rounded-full bg-purple-500 text-[10px] font-bold text-white shadow-sm whitespace-nowrap opacity-90">
              Sarah
            </div>
          </div>
        </div>

        <!-- User 2 Cursor (John - Green) -->
        <div class="absolute inset-0 flex items-center justify-center pointer-events-none z-20">
          <div class="animate-[cursor-float-2_15s_infinite_ease-in-out_1s]">
            <svg class="w-5 h-5 text-green-500 drop-shadow-[0_4px_12px_rgba(34,197,94,0.5)]" viewBox="0 0 24 24"
              fill="currentColor" style="transform: rotate(-25deg)">
              <path
                d="M5.5 3.21l10.8 5.4a1 1 0 0 1 .16 1.7l-4.2 2.1 2.1 4.2a1 1 0 0 1-1.8.9l-2.1-4.2-4.2 2.1a1 1 0 0 1-1.45-1.09l1.69-11.11z"
                class=""></path>
            </svg>
            <div
              class="ml-3.5 -mt-1 px-2 py-0.5 rounded-full bg-green-500 text-[10px] font-bold text-black shadow-sm whitespace-nowrap opacity-90">
              John
            </div>
          </div>
        </div>
      </div>

      <!-- Bottom Status Bar -->
      <div class="absolute bottom-4 left-4 right-4 flex justify-between items-center">
        <div class="flex -space-x-2">
          <div
            class="w-8 h-8 rounded-full border-2 border-[#0A0A0A] bg-purple-500 flex items-center justify-center text-xs font-bold text-white">
            S
          </div>
          <div
            class="w-8 h-8 rounded-full border-2 border-[#0A0A0A] bg-green-500 flex items-center justify-center text-xs font-bold text-black">
            J
          </div>
          <div
            class="w-8 h-8 rounded-full border-2 border-[#0A0A0A] bg-neutral-700 flex items-center justify-center text-xs text-white text-[10px]">
            +2
          </div>
        </div>
        <div
          class="px-3 py-1 rounded-full bg-green-500/10 border border-green-500/20 text-green-400 text-[10px] uppercase tracking-wider font-mono flex items-center gap-2">
          <span class="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse"></span>
          Live
        </div>
      </div>
    </div>
    <div class="order-1 lg:order-2 animate-on-scroll" style="animation-delay: 200ms;">
      <h3 class="text-3xl font-medium text-white tracking-tight font-display mb-4">
        Multiplayer by Default
      </h3>
      <p class="leading-relaxed text-lg text-neutral-400 mb-8">
        Work together in real-time. See cursors, share component states,
        and leave comments directly in 3D space. No more screen sharing.
      </p>
      <ul class="space-y-4">
        <li class="flex items-center gap-3 text-sm text-neutral-300">
          <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="check"
            class="lucide lucide-check w-4 h-4 text-orange-500">
            <path d="M20 6 9 17l-5-5" class=""></path>
          </svg>
          Live cursor tracking
        </li>
        <li class="flex items-center gap-3 text-sm text-neutral-300">
          <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="check"
            class="lucide lucide-check w-4 h-4 text-orange-500">
            <path d="M20 6 9 17l-5-5" class=""></path>
          </svg>
          Threaded spatial comments
        </li>
        <li class="flex items-center gap-3 text-sm text-neutral-300">
          <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="check"
            class="lucide lucide-check w-4 h-4 text-orange-500">
            <path d="M20 6 9 17l-5-5" class=""></path>
          </svg>
          Version history &amp; rollback
        </li>
      </ul>
    </div>
  </div>

  <!-- Feature 2 -->
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 gap-x-16 gap-y-16 items-center">
    <!-- Left Text Content -->
    <div class="flex flex-col justify-center animate-on-scroll">
      <h3 class="text-3xl font-medium text-white tracking-tight font-display mb-4">
        Optimized for Production
      </h3>
      <p class="leading-relaxed text-lg text-neutral-400 mb-8">
        Flux isn't just a prototyping tool. Our engine automatically
        optimizes geometries, compresses textures, and bakes lighting for
        maximum runtime performance.
      </p>
      <button class="group inline-flex items-center gap-2 text-sm text-white hover:text-orange-400 transition-colors w-fit">
              <span class="border-b border-orange-500/50 pb-0.5 group-hover:border-orange-400 transition-colors">
                Read the technical paper
              </span>
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right w-4 h-4 transition-transform duration-300 group-hover:translate-x-1">
                <path d="M5 12h14" class=""></path>
                <path d="m12 5 7 7-7 7" class=""></path>
              </svg>
            </button>
    </div>

    <!-- Right Visual Schema -->
    <div
      class="aspect-square lg:aspect-video overflow-hidden flex flex-col group select-none bg-[#0A0A0A] border-white/10 border rounded-2xl relative animate-on-scroll"
      style="animation-delay: 200ms;">
      <style>
        @keyframes flux-packet-1 {
          0% {
            left: 24%;
            top: 25%;
            opacity: 0;
            transform: scale(0);
          }

          10% {
            opacity: 1;
            transform: scale(1);
          }

          50% {
            left: 50%;
            top: 50%;
            opacity: 1;
            transform: scale(0.5);
          }

          51% {
            opacity: 0;
          }

          100% {
            opacity: 0;
          }
        }

        @keyframes flux-packet-2 {
          0% {
            left: 24%;
            top: 50%;
            opacity: 0;
            transform: scale(0);
          }

          10% {
            opacity: 1;
            transform: scale(1);
          }

          50% {
            left: 50%;
            top: 50%;
            opacity: 1;
            transform: scale(0.5);
          }

          51% {
            opacity: 0;
          }

          100% {
            opacity: 0;
          }
        }

        @keyframes flux-packet-3 {
          0% {
            left: 24%;
            top: 75%;
            opacity: 0;
            transform: scale(0);
          }

          10% {
            opacity: 1;
            transform: scale(1);
          }

          50% {
            left: 50%;
            top: 50%;
            opacity: 1;
            transform: scale(0.5);
          }

          51% {
            opacity: 0;
          }

          100% {
            opacity: 0;
          }
        }

        @keyframes flux-spin {
          to {
            transform: rotate(360deg);
          }
        }

        @keyframes flux-dash {
          to {
            stroke-dashoffset: -8;
          }
        }
      </style>
      <div
        class="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.03)_1px,transparent_1px)] bg-[size:32px_32px] [mask-image:radial-gradient(circle_at_center,black,transparent_80%)]">
      </div>
      <div class="absolute inset-0 flex items-center justify-center perspective-[1000px]">
        <div
          class="w-[90%] h-[80%] relative transform-style-3d transition-transform duration-700 group-hover:rotate-x-0 group-hover:rotate-y-0 rotate-x-6 rotate-y-[-6deg]">
          <div
            class="absolute inset-0 bg-neutral-900/40 backdrop-blur-md border border-white/10 rounded-xl flex items-center justify-between px-6 py-6 shadow-2xl overflow-hidden">
            <svg class="absolute inset-0 w-full h-full pointer-events-none z-0">
              <path d="M24% 25% C 40% 25%, 40% 50%, 50% 50%" stroke="url(#lineGrad1)" stroke-width="1.5" fill="none"
                class="opacity-20"></path>
              <path d="M24% 50% L 50% 50%" stroke="url(#lineGrad2)" stroke-width="1.5" fill="none" class="opacity-20">
              </path>
              <path d="M24% 75% C 40% 75%, 40% 50%, 50% 50%" stroke="url(#lineGrad3)" stroke-width="1.5" fill="none"
                class="opacity-20"></path>
              <line x1="50%" y1="50%" x2="72%" y2="50%" stroke="#10b981" stroke-width="1.5" stroke-dasharray="4 4"
                class="opacity-40" style="animation: flux-dash 1s linear infinite"></line>
              <defs class=""></defs>
            </svg>
            <div class="flex flex-col justify-between h-full py-4 z-10 w-28">
              <div
                class="flex items-center gap-2.5 p-2 rounded-lg bg-neutral-800/80 border border-white/5 backdrop-blur shadow-lg transform transition-transform group-hover:translate-x-1 duration-500">
                <div class="p-1.5 rounded bg-blue-500/20 text-blue-400">
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                    class="">
                    <path
                      d="m12 3-1.9 5.8a2 2 0 0 1-1.2 1.2l-5.8 1.9 5.8 1.9a2 2 0 0 1 1.2 1.2l1.9 5.8 1.9-5.8a2 2 0 0 1 1.2-1.2l5.8-1.9-5.8-1.9a2 2 0 0 1-1.2-1.2l-1.9-5.8Z"
                      class=""></path>
                  </svg>
                </div>
                <div class="text-[9px] font-mono text-neutral-400">
                  GEOMETRY
                </div>
              </div>
              <div
                class="flex items-center gap-2.5 p-2 rounded-lg bg-neutral-800/80 border border-white/5 backdrop-blur shadow-lg transform transition-transform group-hover:translate-x-1 duration-500 delay-75">
                <div class="p-1.5 rounded bg-purple-500/20 text-purple-400">
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                    class="">
                    <rect width="18" height="18" x="3" y="3" rx="2" class=""></rect>
                    <circle cx="8.5" cy="8.5" r="1.5" class=""></circle>
                    <path d="m21 15-5-5L5 21" class=""></path>
                  </svg>
                </div>
                <div class="text-[9px] font-mono text-neutral-400">
                  TEXTURES
                </div>
              </div>
              <div
                class="flex items-center gap-2.5 p-2 rounded-lg bg-neutral-800/80 border border-white/5 backdrop-blur shadow-lg transform transition-transform group-hover:translate-x-1 duration-500 delay-150">
                <div class="p-1.5 rounded bg-orange-500/20 text-orange-400">
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                    class="">
                    <circle cx="12" cy="12" r="4" class=""></circle>
                    <path d="M12 2v2" class=""></path>
                    <path d="M12 20v2" class=""></path>
                    <path d="m4.93 4.93 1.41 1.41" class=""></path>
                    <path d="m17.66 17.66 1.41 1.41" class=""></path>
                    <path d="M2 12h2" class=""></path>
                    <path d="M20 12h2" class=""></path>
                    <path d="m6.34 17.66-1.41-1.41" class=""></path>
                    <path d="m19.07 4.93-1.41 1.41" class=""></path>
                  </svg>
                </div>
                <div class="text-[9px] font-mono text-neutral-400">
                  LIGHTING
                </div>
              </div>
            </div>
            <div class="z-20 relative w-24 h-24 flex items-center justify-center">
              <div class="absolute inset-0 bg-orange-500/10 rounded-full animate-ping opacity-20"></div>
              <div
                class="w-16 h-16 bg-neutral-900 rounded-full border border-orange-500/30 flex items-center justify-center shadow-[0_0_20px_rgba(249,115,22,0.3)] relative">
                <svg class="w-20 h-20 absolute text-orange-500/20" viewBox="0 0 100 100"
                  style="animation: flux-spin 10s linear infinite">
                  <circle cx="50" cy="50" r="48" stroke="currentColor" stroke-width="1" fill="none"
                    stroke-dasharray="10 20" class=""></circle>
                </svg>
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                  class="text-orange-500">
                  <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10" class=""></path>
                </svg>
              </div>
            </div>
            <div class="z-10 w-36">
              <div
                class="bg-neutral-800/90 border border-green-500/30 rounded-xl p-3 shadow-2xl relative overflow-hidden">
                <div class="absolute inset-0 bg-green-500/5"></div>
                <div class="flex flex-col gap-2 relative">
                  <div class="flex justify-between items-center border-b border-white/5 pb-2">
                    <span class="text-[10px] font-semibold text-green-400 uppercase tracking-wide">
                            Production
                          </span>
                    <div class="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse"></div>
                  </div>
                  <div class="space-y-1.5">
                    <div class="flex justify-between text-[9px] text-neutral-400">
                      <span>Mesh</span>
                      <span class="text-neutral-200 font-mono">
                              Instanced
                            </span>
                    </div>
                    <div class="flex justify-between text-[9px] text-neutral-400">
                      <span>Tex</span>
                      <span class="text-neutral-200 font-mono">KTX2</span>
                    </div>
                    <div class="flex justify-between text-[9px] text-neutral-400">
                      <span>Light</span>
                      <span class="text-neutral-200 font-mono">
                              Baked
                            </span>
                    </div>
                  </div>
                  <div class="mt-2 pt-2 border-t border-white/5">
                    <div class="w-full bg-neutral-700 h-1 rounded-full overflow-hidden">
                      <div class="bg-green-500 w-[95%] h-full shadow-[0_0_8px_rgba(34,197,94,0.6)]"></div>
                    </div>
                    <div class="text-[8px] text-right mt-1 text-green-400 font-mono">
                      -85% Size
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="absolute w-1.5 h-1.5 bg-blue-400 rounded-full shadow-[0_0_8px_currentColor]"
              style="animation: flux-packet-1 3s linear infinite"></div>
            <div class="absolute w-1.5 h-1.5 bg-purple-400 rounded-full shadow-[0_0_8px_currentColor]"
              style="animation: flux-packet-2 3s linear infinite 1s"></div>
            <div class="absolute w-1.5 h-1.5 bg-orange-400 rounded-full shadow-[0_0_8px_currentColor]"
              style="animation: flux-packet-3 3s linear infinite 0.5s"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>