---
---
<section id="experience" class="container mx-auto px-6 lg:px-12 py-32">
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16">
        <div class="lg:col-span-4 animate-on-scroll slide-right">
            <h2 class="text-3xl md:text-4xl font-bold uppercase tracking-tight mb-2 text-stroke">Experience</h2>
            <h2 class="text-3xl md:text-4xl font-bold uppercase tracking-tight mb-10">History</h2>
            <p class="text-slate-400 text-base leading-relaxed mb-10 max-w-sm font-light">
                From founding my own VFX house to supervising global campaigns. I bridge the gap between
                creative vision and technical execution.
            </p>
            <a href="https://biohazardvfx.com" target="_blank"
                class="inline-flex items-center gap-3 text-xs font-mono uppercase text-brand-accent hover:text-white transition-colors duration-300 group">
                Visit Biohazard VFX
                <i data-lucide="arrow-up-right" class="w-4 h-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5"></i>
            </a>
        </div>

        <div class="lg:col-span-8 relative">
            <!-- Vertical line -->
            <div class="absolute left-0 top-0 bottom-0 w-[1px] bg-gradient-to-b from-brand-accent via-slate-700/50 to-transparent"></div>

            <!-- Item 1 -->
            <div class="pl-10 lg:pl-14 mb-20 relative animate-on-scroll slide-up stagger-1">
                <div class="absolute left-[-5px] top-2 w-3 h-3 bg-brand-dark border-2 border-brand-accent rounded-full"></div>
                <div class="flex flex-col md:flex-row md:items-baseline gap-3 md:gap-4 mb-5">
                    <h3 class="text-xl md:text-2xl font-bold text-white uppercase tracking-tight">Biohazard VFX</h3>
                    <span class="font-mono text-[10px] text-brand-accent bg-brand-accent/10 px-3 py-1.5 tracking-wide">FOUNDER / VFX SUPERVISOR</span>
                    <span class="font-mono text-xs text-slate-500 md:ml-auto">MAR 2022 — OCT 2025</span>
                </div>
                <p class="text-slate-400 mb-8 leading-relaxed font-light">
                    Founded and led a VFX studio specializing in high-end commercial and music video work for
                    Post Malone, ENHYPEN, and Nike. Architected a custom pipeline combining cloud and
                    self-hosted infrastructure.
                </p>
                <ul class="space-y-3">
                    <li class="flex items-start gap-4 text-sm text-slate-300 font-light">
                        <span class="text-brand-accent mt-0.5 text-xs">▹</span>
                        Designed 7-plate reconciliation workflows for ENHYPEN (projection mapping live action
                        onto CAD).
                    </li>
                    <li class="flex items-start gap-4 text-sm text-slate-300 font-light">
                        <span class="text-brand-accent mt-0.5 text-xs">▹</span>
                        Developed QA systems for AI-generated assets, transforming mid-tier output into
                        production-ready deliverables.
                    </li>
                </ul>
            </div>

            <!-- Item 2 -->
            <div class="pl-10 lg:pl-14 mb-20 relative animate-on-scroll slide-up stagger-2">
                <div class="absolute left-[-5px] top-2 w-3 h-3 bg-slate-700 rounded-full transition-colors duration-300"></div>
                <div class="flex flex-col md:flex-row md:items-baseline gap-3 md:gap-4 mb-5">
                    <h3 class="text-xl md:text-2xl font-bold text-white uppercase tracking-tight">Stinkfilms</h3>
                    <span class="font-mono text-[10px] text-slate-400 border border-slate-700 px-3 py-1.5 tracking-wide">GLOBAL PRODUCTION STUDIO</span>
                    <span class="font-mono text-xs text-slate-500 md:ml-auto">SUMMER 2024</span>
                </div>
                <p class="text-slate-400 mb-8 leading-relaxed font-light">
                    Led Biohazard VFX team (60+ artists) alongside director Felix Brady to create a brand film
                    for G-Star Raw.
                </p>
                <div class="border border-white/10 bg-white/[0.02] p-6 lg:p-8 backdrop-blur-sm hover:border-brand-accent/30 transition-all duration-500 cursor-pointer group">
                    <h4 class="text-sm font-bold uppercase text-white mb-3 flex justify-between items-center tracking-wide">
                        Project: G-Star Raw Olympics Campaign
                        <i data-lucide="arrow-right"
                            class="w-4 h-4 opacity-0 group-hover:opacity-100 transition-all duration-300 text-brand-accent transform group-hover:translate-x-1"></i>
                    </h4>
                    <p class="text-sm text-slate-400 mb-5 leading-relaxed font-light">
                        Managed full CG environments in Blender/Houdini and integrated AI/ML workflows (Stable Diffusion reference gen, Copycat cleanup).
                    </p>
                    <a href="https://stinkfilms.com"
                        class="text-[10px] font-bold text-brand-accent uppercase tracking-widest hover:text-white transition-colors duration-300">
                        View Case Study
                    </a>
                </div>
            </div>

            <!-- Item 3 -->
            <div class="pl-10 lg:pl-14 relative animate-on-scroll slide-up stagger-3">
                <div class="absolute left-[-5px] top-2 w-3 h-3 bg-slate-700 rounded-full"></div>
                <div class="flex flex-col md:flex-row md:items-baseline gap-3 md:gap-4 mb-5">
                    <h3 class="text-xl md:text-2xl font-bold text-white uppercase tracking-tight">Freelance</h3>
                    <span class="font-mono text-[10px] text-slate-400 border border-slate-700 px-3 py-1.5 tracking-wide">2D/3D ARTIST</span>
                    <span class="font-mono text-xs text-slate-500 md:ml-auto">2015 — PRESENT</span>
                </div>
                <p class="text-slate-400 leading-relaxed font-light">
                    Compositor for Abyss Digital and major labels (Atlantic, Interscope). Clients: David
                    Kushner, Opium, Lil Durk, Don Toliver.
                </p>
            </div>
        </div>
    </div>
</section>