---
---
<section id="experience" class="container mx-auto px-6 lg:px-12 py-32 border-t border-white/10">

    <!-- Section Header -->
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 mb-20">
        <div class="lg:col-span-8">
            <h2 class="text-6xl md:text-8xl lg:text-9xl font-bold uppercase tracking-tighter leading-[0.85] text-white">
                <span class="block animate-on-scroll slide-up">Experience</span>
                <span class="block text-transparent text-stroke animate-on-scroll slide-up stagger-1">History</span>
            </h2>
            </h2>
        </div>
        <div class="lg:col-span-4 flex flex-col justify-end pb-4">
            <div class="font-mono text-xs text-slate-500 uppercase tracking-widest mb-4">/// Career Timeline</div>
            <p class="text-slate-400 text-base leading-relaxed border-l border-brand-accent pl-6 animate-on-scroll fade-in stagger-2">
                Bridging creative vision with technical execution. From running a dedicated VFX studio to high-end freelance supervision.
            </p>
        </div>
    </div>

    <!-- "Rack Mount" Layout -->
    <div class="flex flex-col gap-6">

        <!-- Unit 01: Biohazard (Active System) -->
        <div class="group relative border border-white/10 bg-white/[0.02] hover:border-brand-accent/50 hover:bg-white/[0.04] transition-all duration-500 overflow-hidden animate-on-scroll slide-up stagger-1">
            <!-- Active Indicator Strip -->
            <div class="absolute top-0 left-0 w-1 h-full bg-brand-accent opacity-100"></div>
            <div class="absolute top-0 left-0 w-full h-1 bg-brand-accent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>

            <!-- Technical Header -->
            <div class="flex items-center justify-between px-8 py-4 border-b border-white/5 bg-white/[0.02]">
                <div class="flex items-center gap-4">
                    <span class="font-mono text-[10px] text-brand-accent uppercase tracking-widest">SYS.01 /// ACTIVE</span>
                    <div class="h-px w-12 bg-white/10"></div>
                </div>
                <span class="font-mono text-[10px] text-slate-500 uppercase tracking-widest">2022 — PRESENT</span>
            </div>

            <div class="p-8 lg:p-12 grid grid-cols-1 lg:grid-cols-12 gap-12">
                <div class="lg:col-span-4">
                    <h3 class="text-4xl font-bold text-white uppercase tracking-tight mb-2">Biohazard VFX</h3>
                    <span class="text-sm font-mono text-slate-400">Founder & Owner</span>

                    <div class="mt-8 flex flex-wrap gap-2">
                         <span class="px-2 py-1 text-[10px] font-mono uppercase border border-white/10 text-slate-400">Studio Lead</span>
                         <span class="px-2 py-1 text-[10px] font-mono uppercase border border-white/10 text-slate-400">Pipeline Arch</span>
                    </div>
                </div>
                <div class="lg:col-span-8 flex flex-col justify-between">
                    <p class="text-slate-300 leading-relaxed font-light text-lg mb-8">
                        Founded and lead a VFX studio specializing in high-end commercial and music video work.
                        Delivered projects for Post Malone, ENHYPEN, and Nike. Architected a custom pipeline combining cloud and self-hosted infrastructure.
                    </p>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 border-t border-white/5 pt-8">
                        <div>
                            <h4 class="text-[10px] font-mono text-slate-500 uppercase tracking-widest mb-2">Key Achievement</h4>
                            <p class="text-sm text-slate-400">Designed 7-plate reconciliation workflows for ENHYPEN (projection mapping live action onto CAD).</p>
                        </div>
                        <div>
                            <h4 class="text-[10px] font-mono text-slate-500 uppercase tracking-widest mb-2">System Impact</h4>
                            <p class="text-sm text-slate-400">Developed QA systems for AI-generated assets, transforming mid-tier output into production-ready deliverables.</p>
                        </div>
                    </div>

                    <div class="mt-8 flex justify-end">
                        <a href="https://biohazardvfx.com" target="_blank" class="inline-flex items-center gap-3 text-xs font-bold uppercase tracking-widest text-white hover:text-brand-accent transition-colors">
                            Visit Studio Uplink <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Split Row for Stink & Freelance -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">

            <!-- Unit 02: Stinkfilms -->
            <div class="group relative border border-white/10 bg-white/[0.02] hover:border-white/30 transition-all duration-500 overflow-hidden animate-on-scroll slide-up stagger-2">
                <!-- Inactive Indicator Strip -->
                <div class="absolute top-0 left-0 w-1 h-full bg-slate-700 opacity-50 group-hover:bg-white transition-colors"></div>

                 <!-- Technical Header -->
                <div class="flex items-center justify-between px-8 py-4 border-b border-white/5 bg-white/[0.02]">
                    <div class="flex items-center gap-4">
                        <span class="font-mono text-[10px] text-slate-500 uppercase tracking-widest">SYS.02 /// ARCHIVED</span>
                    </div>
                    <span class="font-mono text-[10px] text-slate-500 uppercase tracking-widest">SUMMER 2024</span>
                </div>

                <div class="p-8 lg:p-10 flex flex-col h-full">
                    <div class="mb-6">
                        <h3 class="text-2xl font-bold text-white uppercase tracking-tight mb-1">Stinkfilms</h3>
                        <span class="text-xs font-mono text-slate-400">VFX Supervisor</span>
                    </div>
                    <p class="text-slate-400 leading-relaxed font-light text-sm mb-8 flex-grow">
                        Led Biohazard VFX team (60+ artists) alongside director Felix Brady to create a brand film for G-Star Raw.
                        Managed full CG environments in Blender/Houdini.
                    </p>
                     <div class="pt-6 border-t border-white/5">
                        <a href="/blog/gstar-raw-olympics/" class="inline-flex items-center gap-3 text-xs font-bold uppercase tracking-widest text-slate-300 hover:text-white transition-colors">
                            Access Case Data <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                        </a>
                    </div>
                </div>
            </div>

            <!-- Unit 03: Freelance -->
            <div class="group relative border border-white/10 bg-white/[0.02] hover:border-white/30 transition-all duration-500 overflow-hidden animate-on-scroll slide-up stagger-3">
                <!-- Background Process Indicator Strip -->
                <div class="absolute top-0 left-0 w-1 h-full bg-slate-700 opacity-50 group-hover:bg-white transition-colors"></div>

                 <!-- Technical Header -->
                <div class="flex items-center justify-between px-8 py-4 border-b border-white/5 bg-white/[0.02]">
                    <div class="flex items-center gap-4">
                        <span class="font-mono text-[10px] text-slate-500 uppercase tracking-widest">SYS.03 /// DAEMON</span>
                    </div>
                    <span class="font-mono text-[10px] text-slate-500 uppercase tracking-widest">2016 — PRESENT</span>
                </div>

                <div class="p-8 lg:p-10 flex flex-col h-full">
                    <div class="mb-6">
                        <h3 class="text-2xl font-bold text-white uppercase tracking-tight mb-1">Freelance</h3>
                        <span class="text-xs font-mono text-slate-400">Senior Compositor</span>
                    </div>
                    <p class="text-slate-400 leading-relaxed font-light text-sm mb-8 flex-grow">
                         Taking on select freelance compositing and 3D work alongside studio operations.
                         Clients include Abyss Digital, Atlantic, Interscope.
                    </p>
                     <div class="pt-6 border-t border-white/5 flex flex-wrap gap-2">
                        <span class="px-2 py-1 text-[10px] font-mono uppercase border border-white/10 text-slate-500">Nuke</span>
                        <span class="px-2 py-1 text-[10px] font-mono uppercase border border-white/10 text-slate-500">Flame</span>
                    </div>
                </div>
            </div>

        </div>

    </div>
</section>