---
---
<section id="work" class="py-24">
    <div class="container mx-auto px-6 lg:px-12 mb-12">
        <span class="text-xs font-mono text-brand-accent mb-2 block">/// HIGHLIGHT</span>
        <h2 class="text-5xl md:text-7xl font-bold uppercase text-white mb-4">G-Star Raw <span
                class="text-stroke">Olympics</span></h2>
    </div>

    <!-- Full Width Project Card -->
    <div class="w-full h-[80vh] relative group overflow-hidden border-y border-white/10">
        <!-- Abstract Background representing the project -->
        <div
            class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=2564&auto=format&fit=crop')] bg-cover bg-center transition-transform duration-1000 group-hover:scale-105">
        </div>
        <div class="absolute inset-0 bg-brand-dark/80 mix-blend-multiply"></div>
        <div class="absolute inset-0 bg-gradient-to-t from-brand-dark via-brand-dark/20 to-transparent"></div>

        <!-- Grid Overlay on image -->
        <div
            class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdHRlcm4gaWQ9ImIiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PGNpcmNsZSBjeD0iMiIgY3k9IjIiIHI9IjEiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4xKSIvPjwvcGF0dGVybj48cmVjdCB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIGZpbGw9InVybCgjYikiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjYSkiLz48L3N2Zz4=')] opacity-30">
        </div>

        <div
            class="absolute bottom-0 left-0 w-full p-6 lg:p-12 flex flex-col md:flex-row items-end justify-between">
            <div
                class="max-w-2xl transform translate-y-8 group-hover:translate-y-0 transition-transform duration-500">
                <div class="flex gap-2 mb-4">
                    <span class="bg-brand-accent text-brand-dark text-[10px] font-bold uppercase px-2 py-1">VFX
                        Supervision</span>
                    <span
                        class="border border-white/30 text-white text-[10px] font-bold uppercase px-2 py-1">AI/ML</span>
                    <span
                        class="border border-white/30 text-white text-[10px] font-bold uppercase px-2 py-1">Houdini</span>
                </div>
                <p class="text-xl md:text-2xl text-white font-medium mb-6">
                    Managed full CG environment builds, procedural city generation, and integrated AI-generated
                    normal maps for relighting in Nuke.
                </p>
                <a href="https://f.io/7ijf23Wm"
                    class="inline-flex items-center gap-3 text-sm font-bold uppercase tracking-widest text-white hover:text-brand-accent transition-colors">
                    Watch Making Of <i data-lucide="play-circle" class="w-5 h-5"></i>
                </a>
            </div>

            <div class="hidden md:block text-right">
                <span class="block text-[10px] uppercase text-slate-500 tracking-widest mb-1">Year</span>
                <span class="block text-2xl font-bold text-white mb-4">2024</span>
                <span class="block text-[10px] uppercase text-slate-500 tracking-widest mb-1">Client</span>
                <span class="block text-xl font-bold text-white">Stinkfilms</span>
            </div>
        </div>
    </div>
</section>