Isometric Process Timeline with Steps

<div
    class="lg:px-12 grid grid-cols-1 lg:grid-cols-2 lg:gap-32 z-10 w-full pr-6 pl-6 relative gap-x-20 gap-y-20 items-center m-8">

    <!-- Left: Isometric Process Visualization -->
    <div
        class="relative w-full aspect-square max-w-lg mx-auto lg:max-w-none flex items-center justify-center [animation:fadeSlideIn_0.8s_ease-out_0.2s_both] animate-on-scroll">

        <!-- Isometric Stack Container -->
        <div class="relative w-64 h-64 sm:w-80 sm:h-80">
            <!-- Layer 04 (Bottom) -->
            <div
                class="absolute inset-0 z-0 translate-y-24 transition-transform duration-700 hover:translate-y-28 group">
                <div
                    class="w-full h-full border border-white/10 bg-white/[0.02] backdrop-blur-[2px] rotate-45 scale-y-50 shadow-2xl transition-colors group-hover:border-[#FACC15]/30">
                </div>
                <!-- Label Right -->
                <div
                    class="absolute top-1/2 -right-12 sm:-right-24 -translate-y-1/2 translate-x-4 flex items-center gap-3 opacity-0 lg:opacity-100 transition-opacity duration-500 delay-300">
                    <div
                        class="px-3 py-1.5 rounded-full border border-white/10 bg-[#080808] flex items-center gap-2 shadow-xl">
                        <span class="text-xs font-medium text-neutral-400 uppercase tracking-wider">04. Fabricate</span>
                        <div class="w-8 h-4 bg-neutral-800 rounded-full relative">
                            <div class="absolute right-0.5 top-0.5 bottom-0.5 w-3 bg-green-500 rounded-full"></div>
                        </div>
                    </div>
                    <div class="w-12 h-[1px] bg-white/10 origin-left -rotate-[25deg]"></div>
                </div>
            </div>

            <!-- Layer 03 -->
            <div
                class="absolute inset-0 z-10 translate-y-12 transition-transform duration-700 hover:translate-y-14 group">
                <div
                    class="w-full h-full border border-white/10 bg-white/[0.04] backdrop-blur-[2px] rotate-45 scale-y-50 shadow-2xl transition-colors group-hover:border-[#FACC15]/30">
                </div>
                <!-- Label Left -->
                <div
                    class="absolute top-1/2 -left-12 sm:-left-24 -translate-y-1/2 -translate-x-4 flex flex-row-reverse items-center gap-3 opacity-0 lg:opacity-100 transition-opacity duration-500 delay-200">
                    <div
                        class="px-3 py-1.5 rounded-full border border-white/10 bg-[#080808] flex items-center gap-2 shadow-xl">
                        <div class="w-8 h-4 bg-neutral-800 rounded-full relative">
                            <div class="absolute right-0.5 top-0.5 bottom-0.5 w-3 bg-white/20 rounded-full"></div>
                        </div>
                        <span class="text-xs font-medium text-neutral-400 uppercase tracking-wider">03. Engineer</span>
                    </div>
                    <div class="w-12 h-[1px] bg-white/10 origin-right rotate-[25deg]"></div>
                </div>
            </div>

            <!-- Layer 02 -->
            <div
                class="absolute inset-0 z-20 translate-y-0 transition-transform duration-700 hover:-translate-y-2 group">
                <div
                    class="w-full h-full border border-white/10 bg-white/[0.06] backdrop-blur-[2px] rotate-45 scale-y-50 shadow-2xl transition-colors group-hover:border-[#FACC15]/30">
                </div>
                <!-- Label Right -->
                <div
                    class="absolute top-1/2 -right-12 sm:-right-24 -translate-y-1/2 translate-x-4 flex items-center gap-3 opacity-0 lg:opacity-100 transition-opacity duration-500 delay-100">
                    <div class="px-3 flex items-center gap-2 shadow-xl">
                        <span class="text-xs font-medium text-neutral-400 uppercase tracking-wider">02. Simulate</span>
                        <div class="w-8 h-4 bg-[#FACC15] rounded-full relative">
                            <div class="absolute right-0.5 top-0.5 bottom-0.5 w-3 bg-black rounded-full"></div>
                        </div>
                    </div>
                    <div class="w-12 h-[1px] bg-white/10 origin-left -rotate-[25deg]"></div>
                </div>
            </div>

            <!-- Layer 01 (Top) -->
            <div
                class="absolute inset-0 z-30 -translate-y-12 transition-transform duration-700 hover:-translate-y-16 group">
                <div
                    class="w-full h-full border border-white/10 bg-white/[0.08] backdrop-blur-[2px] rotate-45 scale-y-50 shadow-2xl transition-colors group-hover:border-[#FACC15]/50 hover:bg-white/10">
                </div>
                <!-- Label Left -->
                <div
                    class="absolute top-1/2 -left-12 sm:-left-24 -translate-y-1/2 -translate-x-4 flex flex-row-reverse items-center gap-3 opacity-0 lg:opacity-100 transition-opacity duration-500">
                    <div
                        class="px-3 py-1.5 rounded-full border border-white/10 bg-[#080808] flex items-center gap-2 shadow-xl">
                        <div class="w-8 h-4 bg-[#FACC15] rounded-full relative">
                            <div class="absolute right-0.5 top-0.5 bottom-0.5 w-3 bg-black rounded-full"></div>
                        </div>
                        <span class="text-xs font-medium text-neutral-400 uppercase tracking-wider">01. Analyze</span>
                    </div>
                    <div class="w-12 h-[1px] bg-white/10 origin-right rotate-[25deg]"></div>
                </div>
            </div>

            <!-- Connecting dashed line through center -->
            <div
                class="absolute left-1/2 top-[-20%] bottom-[-20%] w-px border-l border-dashed border-white/20 -translate-x-1/2 z-[-1]">
            </div>
        </div>
    </div>

    <!-- Right: Content Steps -->
    <div class="flex flex-col justify-center [animation:fadeSlideIn_0.8s_ease-out_0.4s_both] animate-on-scroll">
        <h2 class="text-4xl lg:text-6xl font-light text-white tracking-tight leading-[1.1] mb-6">
            From Algorithm
            <span class="text-neutral-500">to Artifact</span>
        </h2>

        <p class="text-lg text-neutral-400 leading-relaxed mb-16 max-w-md font-light">
            We strip away the unnecessary, focusing on structural purity and parametric efficiency to deliver timeless
            monuments.
        </p>

        <!-- Steps List -->
        <div class="relative space-y-12 pl-2">
            <!-- Vertical Connector Line -->
            <div
                class="bg-gradient-to-b from-[#FACC15] via-white/10 to-transparent opacity-30 w-[1px] absolute top-4 bottom-4 left-[27px]">
            </div>

            <!-- Step 1 -->
            <div class="relative flex gap-8 group cursor-default">
                <div class="relative z-10 shrink-0">
                    <div
                        class="w-10 h-10 rounded-full bg-[#080808] border border-white/10 flex items-center justify-center group-hover:border-[#FACC15] group-hover:text-[#FACC15] transition-all duration-300">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="1em" viewBox="0 0 24 24" class=""
                            style="" data-icon-set="solar" data-solar="magnifer-bold-duotone">
                            <path fill="currentColor"
                                d="M20.313 11.157a9.157 9.157 0 1 1-18.313 0a9.157 9.157 0 0 1 18.313 0" opacity=".5"
                                class=""></path>
                            <path fill="currentColor"
                                d="m17.1 18.122l3.666 3.666a.723.723 0 0 0 1.023-1.022L18.122 17.1a9 9 0 0 1-1.022 1.022"
                                class=""></path>
                        </svg>
                    </div>
                </div>
                <div class="pt-1">
                    <h3 class="text-xl text-white font-normal mb-2 group-hover:text-[#FACC15] transition-colors">Site
                        &amp; Context Analysis</h3>
                    <p class="text-neutral-500 font-light leading-relaxed">
                        We decode the genius loci, analyzing environmental data and urban flows to establish the
                        project's constraints.
                    </p>
                </div>
            </div>

            <!-- Step 2 -->
            <div class="relative flex gap-8 group cursor-default">
                <div class="relative z-10 shrink-0">
                    <div
                        class="w-10 h-10 rounded-full bg-[#080808] border border-white/10 flex items-center justify-center group-hover:border-[#FACC15] group-hover:text-[#FACC15] transition-all duration-300">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="1em" viewBox="0 0 24 24"
                            class="w-[20px] h-[16px]" data-icon-set="solar"
                            data-solar="layers-minimalistic-bold-duotone" stroke-width="2" data-icon-replaced="true"
                            style="color: rgb(250, 204, 21); width: 20px; height: 16px">
                            <path fill="currentColor"
                                d="M7.624 4.449C9.501 3.698 10.621 3.25 12 3.25s2.499.448 4.376 1.199l2.97 1.188c.954.382 1.727.69 2.258.969c.268.14.528.3.729.493c.206.198.417.498.417.901s-.21.703-.417.901c-.2.193-.46.352-.73.493c-.53.278-1.303.587-2.258.97l-2.97 1.187C14.5 12.302 13.38 12.75 12 12.75s-2.499-.448-4.376-1.199l-2.969-1.188c-.955-.382-1.728-.69-2.259-.969a3.2 3.2 0 0 1-.729-.493C1.461 8.703 1.25 8.403 1.25 8s.21-.703.417-.901c.2-.193.46-.352.73-.493c.53-.278 1.303-.587 2.258-.97z"
                                class=""></path>
                            <path fill="currentColor"
                                d="M2.502 11.443L2.5 11.44a.75.75 0 0 0-1 1.119L2 12l-.5.559l.002.002l.005.004l.014.012l.045.039q.057.047.161.129c.14.108.343.256.61.429c.533.346 1.32.79 2.363 1.207l2.809 1.124l.115.046c1.877.751 2.997 1.199 4.376 1.199s2.499-.448 4.375-1.199l.116-.046L19.3 14.38a13.7 13.7 0 0 0 2.363-1.207a9 9 0 0 0 .771-.558l.045-.039l.014-.012l.005-.004l.001-.002h.002a.75.75 0 0 0-1-1.119l-.002.002l-.002.001l-.024.021l-.118.094a8 8 0 0 1-.508.357c-.46.299-1.161.697-2.105 1.074l-2.808 1.123c-2.025.81-2.874 1.138-3.934 1.138s-1.91-.328-3.934-1.138L5.257 12.99a12 12 0 0 1-2.104-1.074a8 8 0 0 1-.65-.472"
                                opacity=".7" class=""></path>
                            <path fill="currentColor"
                                d="M2.499 15.5a.75.75 0 0 0-1 1.118H1.5l.002.002l.005.004l.014.012l.045.039l.161.13c.14.107.343.255.61.428c.533.346 1.32.79 2.363 1.207l2.809 1.124l.115.046c1.877.751 2.997 1.2 4.376 1.2s2.499-.449 4.375-1.2l.116-.046L19.3 18.44a13.7 13.7 0 0 0 2.363-1.208a9 9 0 0 0 .771-.558l.045-.039l.014-.012l.005-.004l.001-.001l.002-.002a.75.75 0 0 0-1-1.118l-.002.002l-.002.001l-.024.021l-.118.094a8 8 0 0 1-.508.357c-.46.299-1.161.697-2.105 1.074l-2.808 1.123c-2.025.81-2.874 1.138-3.934 1.138s-1.91-.328-3.934-1.138l-2.809-1.123a12 12 0 0 1-2.104-1.073a8 8 0 0 1-.626-.452l-.025-.02z"
                                opacity=".4" class=""></path>
                        </svg>
                    </div>
                </div>
                <div class="pt-1">
                    <h3 class="text-xl text-white font-normal mb-2 group-hover:text-[#FACC15] transition-colors">
                        Parametric Synthesis</h3>
                    <p class="text-neutral-500 font-light leading-relaxed">
                        Algorithms generate optimized form factors, balancing structural integrity with our brutalist
                        aesthetic code.
                    </p>
                </div>
            </div>

            <!-- Step 3 -->
            <div class="relative flex gap-8 group cursor-default">
                <div class="relative z-10 shrink-0">
                    <div
                        class="w-10 h-10 rounded-full bg-[#080808] border border-white/10 flex items-center justify-center group-hover:border-[#FACC15] group-hover:text-[#FACC15] transition-all duration-300">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="1em" viewBox="0 0 24 24" class=""
                            style="" data-icon-set="solar" data-solar="ruler-pen-bold-duotone">
                            <path fill="currentColor"
                                d="M16 22c-1.886 0-2.828 0-3.414-.586c-.503-.502-.574-1.267-.584-2.664L12 17.25V6.75l.002-1.5c.01-1.397.081-2.162.584-2.664C13.172 2 14.114 2 16 2h2c1.886 0 2.828 0 3.414.586S22 4.114 22 6v12c0 1.886 0 2.828-.586 3.414S19.886 22 18 22z"
                                opacity=".5" class=""></path>
                            <path fill="currentColor"
                                d="M15 8.25h-3v1.5h3a.75.75 0 0 0 0-1.5m-1-3h-1.998L12 6.75h2a.75.75 0 0 0 0-1.5m0 6h-2v1.5h2a.75.75 0 0 0 0-1.5m1 3h-3v1.5h3a.75.75 0 0 0 0-1.5m-1 3h-2l.002 1.5H14a.75.75 0 0 0 0-1.5m-6-2.27V7a7.9 7.9 0 0 1-3 .59A7.9 7.9 0 0 1 2 7v7.98c0 .622 0 .934.038 1.24a5 5 0 0 0 .25 1.056c.102.29.241.569.52 1.126l1.468 2.937a.809.809 0 0 0 1.448 0l1.468-2.937c.279-.557.418-.835.52-1.126a5 5 0 0 0 .25-1.057C8 15.914 8 15.602 8 14.98"
                                class=""></path>
                            <path fill="currentColor"
                                d="M5 2a3 3 0 0 1 3 3v2a7.9 7.9 0 0 1-3 .589A7.9 7.9 0 0 1 2 7V5a3 3 0 0 1 3-3"
                                opacity=".5" class=""></path>
                        </svg>
                    </div>
                </div>
                <div class="pt-1">
                    <h3 class="text-xl text-white font-normal mb-2 group-hover:text-[#FACC15] transition-colors">BIM
                        Integration</h3>
                    <p class="text-neutral-500 font-light leading-relaxed">
                        Every joint and surface is modeled with sub-millimeter precision, ensuring the digital vision
                        translates perfectly.
                    </p>
                </div>
            </div>

            <!-- Step 4 -->
            <div class="relative flex gap-8 group cursor-default">
                <div class="relative z-10 shrink-0">
                    <div
                        class="w-10 h-10 rounded-full bg-[#080808] border border-white/10 flex items-center justify-center group-hover:border-[#FACC15] group-hover:text-[#FACC15] transition-all duration-300">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="1em" viewBox="0 0 24 24" class=""
                            style="" data-icon-set="solar" data-solar="buildings-bold-duotone">
                            <path fill="currentColor" fill-rule="evenodd"
                                d="M7 5h4c1.886 0 2.828 0 3.414.586S15 7.114 15 9v12.25h7a.75.75 0 0 1 0 1.5H2a.75.75 0 0 1 0-1.5h1V9c0-1.886 0-2.828.586-3.414S5.114 5 7 5M5.25 8A.75.75 0 0 1 6 7.25h6a.75.75 0 0 1 0 1.5H6A.75.75 0 0 1 5.25 8m0 3a.75.75 0 0 1 .75-.75h6a.75.75 0 0 1 0 1.5H6a.75.75 0 0 1-.75-.75m0 3a.75.75 0 0 1 .75-.75h6a.75.75 0 0 1 0 1.5H6a.75.75 0 0 1-.75-.75M9 18.25a.75.75 0 0 1 .75.75v2.25h-1.5V19a.75.75 0 0 1 .75-.75"
                                clip-rule="evenodd" class=""></path>
                            <path fill="currentColor"
                                d="M15 2h2c1.886 0 2.828 0 3.414.586S21 4.114 21 6v15.25h-6V9c0-1.886 0-2.828-.586-3.414C13.842 5.013 12.928 5 11.126 5V3.5c.084-.387.225-.68.46-.914C12.17 2 13.114 2 15 2"
                                opacity=".5" class=""></path>
                        </svg>
                    </div>
                </div>
                <div class="pt-1">
                    <h3 class="text-xl text-white font-normal mb-2 group-hover:text-[#FACC15] transition-colors">Robotic
                        Fabrication</h3>
                    <p class="text-neutral-500 font-light leading-relaxed">
                        Automated construction methods realize the design, turning digital void into concrete matter.
                    </p>
                </div>
            </div>
        </div>

        <!-- Technology Stack Logos (Monotone) -->
        <div class="mt-16 pt-10 border-t border-white/5">
            <p class="text-xs uppercase tracking-widest text-neutral-600 mb-6">Powered by</p>
            <div
                class="flex flex-wrap gap-8 items-center opacity-40 grayscale hover:grayscale-0 transition-all duration-500">
                <iconify-icon icon="simple-icons:autodesk" width="24"
                    class="hover:text-white transition-colors"></iconify-icon>
                <iconify-icon icon="simple-icons:rhinoceros" width="28"
                    class="hover:text-white transition-colors"></iconify-icon>
                <iconify-icon icon="simple-icons:unrealengine" width="24"
                    class="hover:text-white transition-colors"></iconify-icon>
                <iconify-icon icon="simple-icons:blender" width="24"
                    class="hover:text-white transition-colors"></iconify-icon>
                <iconify-icon icon="cib:adobe-creative-cloud" width="26"
                    class="hover:text-white transition-colors"></iconify-icon>
            </div>
        </div>
    </div>
</div>