---
---
<section id="work" class="relative overflow-hidden group min-h-screen flex flex-col cursor-pointer">
    <!-- Main Link Overlay -->
    <a href="/blog/gstar-raw-olympics/" class="absolute inset-0 z-30" aria-label="View G-Star Raw Olympics Case Study"></a>

    <!-- Video Background -->
    <div class="absolute inset-0 z-0">
        <video
            autoplay
            loop
            muted
            playsinline
            class="w-full h-full object-cover opacity-70 transition-opacity duration-700 group-hover:opacity-100"
        >
            <source src="https://media.nicholai.work/FF_PUFF_GStar_DC_v08_4608x3164.mp4" type="video/mp4" />
        </video>
        <!-- Cinematic Letterboxing / Gradient Vignette -->
        <div class="absolute inset-0 bg-gradient-to-b from-brand-dark/80 via-transparent to-brand-dark/80 pointer-events-none"></div>
        <div class="absolute inset-0 bg-gradient-to-r from-brand-dark/40 via-transparent to-brand-dark/40 pointer-events-none"></div>

        <!-- Subtle Grid Overlay -->
        <div class="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:60px_60px] pointer-events-none opacity-30"></div>
    </div>

    <!-- Main Content Container - Spaced to frame the video -->
    <div class="container mx-auto px-6 lg:px-12 relative z-10 flex-1 flex flex-col justify-between py-12 lg:py-16 pointer-events-none">

        <!-- TOP HUD: Telemetry Data -->
        <div class="grid grid-cols-2 md:grid-cols-4 gap-8 border-t border-white/20 pt-6 animate-on-scroll slide-up">
            <div>
                <span class="text-[9px] font-mono text-brand-accent uppercase tracking-widest block mb-1">/// Role</span>
                <span class="text-xl md:text-2xl font-bold text-white uppercase tracking-tight">VFX Sup</span>
            </div>
            <div>
                <span class="text-[9px] font-mono text-brand-accent uppercase tracking-widest block mb-1">/// Client</span>
                <span class="text-xl md:text-2xl font-bold text-white uppercase tracking-tight">Stink</span>
            </div>
            <div>
                <span class="text-[9px] font-mono text-brand-accent uppercase tracking-widest block mb-1">/// Year</span>
                <span class="text-xl md:text-2xl font-bold text-white uppercase tracking-tight">2024</span>
            </div>
            <div class="text-right md:text-left">
                <span class="text-[9px] font-mono text-brand-accent uppercase tracking-widest block mb-1">/// Region</span>
                <span class="text-xl md:text-2xl font-bold text-white uppercase tracking-tight">Global</span>
            </div>
        </div>

        <!-- CENTER AREA: Clear for Video -->
        <div class="flex-1 relative">
            <!-- Side Vertical Title (Optional, unobtrusive) -->
            <div class="hidden lg:block absolute -left-8 top-1/2 -translate-y-1/2 origin-left -rotate-90">
                 <h2 class="text-6xl font-bold text-transparent text-stroke uppercase tracking-tighter opacity-20 select-none">
                    G-Star Raw
                </h2>
            </div>
        </div>

        <!-- BOTTOM HUD: Project Details & Stats -->
        <div class="border-b border-white/20 pb-6 animate-on-scroll slide-up stagger-1">
            <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-end">

                <!-- Title & Description -->
                <div class="lg:col-span-7">
                    <h2 class="text-5xl md:text-7xl font-bold uppercase text-white mb-4 tracking-tighter leading-none">
                        G-Star <span class="text-transparent text-stroke">Olympics</span>
                    </h2>
                    <p class="text-slate-300 font-light max-w-lg text-sm md:text-base leading-relaxed">
                        Full CG environment production for the 2024 Olympic Campaign.
                        Orchestrated procedural city generation and AI-enhanced lighting workflows.
                    </p>
                </div>

                <!-- Technical Stats (Mini-Table) -->
                <div class="lg:col-span-5">
                    <div class="grid grid-cols-2 gap-x-8 gap-y-4 font-mono text-xs">
                        <div class="border-l border-brand-accent/30 pl-3">
                            <span class="block text-slate-500 text-[10px] uppercase mb-1">Shot Count</span>
                            <span class="block text-white font-bold">12 Sequences</span>
                        </div>
                        <div class="border-l border-brand-accent/30 pl-3">
                            <span class="block text-slate-500 text-[10px] uppercase mb-1">Resolution</span>
                            <span class="block text-white font-bold">4K DCI</span>
                        </div>
                        <div class="border-l border-brand-accent/30 pl-3">
                            <span class="block text-slate-500 text-[10px] uppercase mb-1">Pipeline</span>
                            <span class="block text-white font-bold">Houdini / Solaris</span>
                        </div>
                        <div class="border-l border-brand-accent/30 pl-3">
                            <span class="block text-slate-500 text-[10px] uppercase mb-1">Render</span>
                            <span class="block text-white font-bold">Karma XPU</span>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>
</section>