Showcase Hero Section with Parallax & Scroll Animations

<section class="overflow-hidden lg:py-24 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/d521c037-f8b6-43a7-ae68-c6c1d0215733_3840w.webp)] bg-cover pt-16 pb-16 relative" data-element-locator="html &gt; body:nth-of-type(1) &gt; section:nth-of-type(2)" id="showcase">
    <!-- Decorative grid lines -->
    <div class="pointer-events-none z-0 absolute inset-0">
      <div class="absolute inset-y-0 left-[12.5%] w-px bg-gradient-to-b from-transparent via-white/5 to-transparent">
      </div>
      <div class="absolute inset-y-0 left-[37.5%] w-px bg-gradient-to-b from-transparent via-white/5 to-transparent">
      </div>
      <div class="absolute inset-y-0 left-1/2 w-px bg-gradient-to-b from-transparent via-white/8 to-transparent"></div>
      <div class="absolute inset-y-0 left-[62.5%] w-px bg-gradient-to-b from-transparent via-white/5 to-transparent">
      </div>
      <div class="absolute inset-x-0 top-1/2 h-px bg-gradient-to-r from-transparent via-white/5 to-transparent"></div>
    </div>

    <!-- Floating portrait (desktop) -->
    <div class="hidden lg:block absolute right-8 top-10 z-10">
      <div class="rounded-xl overflow-hidden ring-1 ring-white/10 bg-white/5 backdrop-blur-sm">
        <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/20253914-1507-436f-a56d-f7abbc5d0c73_800w.webp" alt="Team portrait" class="w-48 h-36 object-cover">
      </div>
      <p class="text-[11px] text-slate-400 font-geist mt-2">Mia Chen — Lead Researcher</p>
    </div>

    <div class="relative z-10 max-w-7xl mx-auto px-6 md:px-8">
      <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 gap-x-8 gap-y-8 items-center">
        <!-- Large visual -->
        <div class="lg:col-span-7">
          <div class="aspect-[16/11] md:aspect-[5/4] overflow-hidden rounded-3xl relative">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/2bad1237-d4b7-4abc-a4ff-4bb6e105b47d_1600w.png" alt="Generative systems visual" class="[animation:parallaxElement_linear_both] [animation-timeline:view()] [animation-range:entry_0%_entry_100%] w-full h-full object-cover">

          </div>
        </div>

        <!-- Copy -->
        <div class="lg:col-span-5">
          <div class="inline-flex items-center gap-2 rounded-full bg-white/5 px-3 py-1.5 text-xs font-medium text-white/80 ring-1 ring-white/10 font-geist animate-on-scroll [animation:fadeSlideIn_1s_ease-out_0.05s_both] w-fit">
            
            Point of view
          </div>

          <h2 class="animate-on-scroll [animation:fadeSlideIn_1s_ease-out_0.15s_both] sm:text-5xl md:text-6xl md:font-normal md:tracking-tighter text-4xl font-semibold tracking-tight font-geist mt-4">
            Outcomes, Engineered with Intention
          </h2>

          <p class="md:mt-5 md:text-lg leading-relaxed animate-on-scroll [animation:fadeSlideIn_1s_ease-out_0.25s_both] text-base text-white/70 font-geist mt-5">
            We design production AI that does more than impress in a demo. From high‑velocity prototypes to
            mission‑critical deployments, our systems blend research rigor with product craft to deliver measurable
            impact—safely, reliably, and at scale.
          </p>

          <a href="#" class="group inline-flex items-center gap-2 mt-6 text-sm font-medium font-geist text-white underline decoration-white/30 underline-offset-4 hover:decoration-white/60 animate-on-scroll [animation:fadeSlideIn_1s_ease-out_0.35s_both]">
            Discover our work
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right w-4 h-4 transition-transform duration-200 group-hover:translate-x-0.5"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
          </a>
        </div>
      </div>
    </div>
  </section>