AR

Running

App Files Files Community

MatteoScript commited on Dec 2, 2025

Commit

2cbe8b1

verified ·

1 Parent(s): 8ea1823

Update index.html

Browse files

Files changed (1) hide show

index.html +41 -1148

index.html CHANGED Viewed

@@ -3,1173 +3,66 @@
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-    <title>Matteo Bergamelli | Innovation Lab Candidate</title>
-    <!-- Tailwind CSS -->
-    <script src="https://cdn.tailwindcss.com"></script>
-    <!-- Fonts (Manteniamo i tuoi font originali) -->
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Fira+Code:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <!-- Three.js -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
-    <!-- A-Frame & MindAR -->
-    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.5/dist/mindar-image.prod.js"></script>
-    <script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.5/dist/mindar-image-aframe.prod.js"></script>
     <style>
-        /* --- STILE ORIGINALE --- */
-        :root {
-            --neon-green: #00ff41;
-            --dark-bg: #050505;
-            --glass: rgba(10, 10, 10, 0.8);
-        }
-        body {
-            margin: 0;
-            background-color: var(--dark-bg);
-            color: #f5f5f5;
-            font-family: 'Fira Code', monospace;
-            overflow-x: hidden;
-            -webkit-font-smoothing: antialiased;
-            cursor: default;
-            touch-action: manipulation;
-        }
-        /* Typography */
-        .font-serif { font-family: 'Playfair Display', serif; }
-        .font-mono { font-family: 'Fira Code', monospace; }
-        /* Selection Style (Nerd touch) */
-        ::selection {
-            background: var(--neon-green);
-            color: #000;
-        }
-        /* Scrollbar */
-        ::-webkit-scrollbar { width: 8px; }
-        ::-webkit-scrollbar-track { background: #0a0a0a; }
-        ::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
-        ::-webkit-scrollbar-thumb:hover { background: var(--neon-green); }
-        /* --- FX: SCANLINES & CRT --- */
-        .scanlines {
-            background: linear-gradient(
-                to bottom,
-                rgba(255,255,255,0),
-                rgba(255,255,255,0) 50%,
-                rgba(0,0,0,0.14) 50%, /* Opacità ridotta da 0.2 a 0.14 */
-                rgba(0,0,0,0.14)      /* Opacità ridotta da 0.2 a 0.14 */
-            );
-            background-size: 100% 4px;
-            position: fixed; pointer-events: none; top: 0; left: 0; right: 0; bottom: 0; z-index: 50;
-        }
-        /* --- FX: GLITCH TEXT --- */
-        .glitch-wrapper { position: relative; display: inline-block; }
-        .glitch { position: relative; color: inherit; }
-        .glitch::before, .glitch::after {
-            content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--dark-bg);
-        }
-        .glitch::before {
-            left: 2px; text-shadow: -1px 0 var(--neon-green); clip: rect(24px, 550px, 90px, 0);
-            animation: glitch-anim 3s infinite linear alternate-reverse;
-        }
-        .glitch::after {
-            left: -2px; text-shadow: -1px 0 #ff00ff; clip: rect(85px, 550px, 140px, 0);
-            animation: glitch-anim 2.5s infinite linear alternate-reverse;
-        }
-        @keyframes glitch-anim {
-            0% { clip: rect(10px, 9999px, 30px, 0); }
-            20% { clip: rect(80px, 9999px, 100px, 0); }
-            40% { clip: rect(40px, 9999px, 60px, 0); }
-            60% { clip: rect(20px, 9999px, 100px, 0); }
-            80% { clip: rect(90px, 9999px, 5px, 0); }
-            100% { clip: rect(10px, 9999px, 60px, 0); }
-        }
-        /* --- FX: RIPPLE CLICK --- */
-        .ripple {
-            position: absolute;
-            border-radius: 50%;
-            border: 1px solid var(--neon-green);
-            transform: scale(0);
-            animation: ripple-anim 0.6s linear;
-            pointer-events: none;
-            z-index: 999;
-        }
-        @keyframes ripple-anim {
-            to { transform: scale(4); opacity: 0; }
-        }
-        /* --- FX: MATRIX RAIN (Easter Egg) --- */
-        #matrix-canvas {
-            position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 40;
-            opacity: 0; pointer-events: none; transition: opacity 1s;
-        }
-        .matrix-active #matrix-canvas { opacity: 0.3; }
-        /* --- ANIMATIONS --- */
-        .reveal-on-scroll {
-            opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease-out, transform 0.8s ease-out;
-        }
-        .reveal-on-scroll.visible { opacity: 1; transform: translateY(0); }
-        .blink { animation: blink-anim 1s step-end infinite; }
-        @keyframes blink-anim { 50% { opacity: 0; } }
-        /* AR UI */
-        #ar-container { display: none; }
-        .mindar-ui-overlay { z-index: 1000 !important; }
     </style>
 </head>
 <body>
-    <!-- EASTER EGG: MATRIX RAIN CANVAS -->
-    <canvas id="matrix-canvas"></canvas>
-    <!-- 1. TERMINAL LOADER -->
-    <div id="terminal-loader" class="fixed inset-0 z-[100] flex items-center justify-center bg-black transition-opacity duration-500">
-        <div class="w-full max-w-md p-6 font-mono text-sm md:text-base">
-            <div id="terminal-lines"></div>
-            <div class="mt-2">
-                <span class="text-[#00ff41]">></span> <span class="inline-block w-3 h-5 bg-[#00ff41] align-middle blink"></span>
-            </div>
-        </div>
-    </div>
-    <!-- 2. 3D BACKGROUND (Digital Fabric) -->
-    <div id="canvas-container" class="fixed inset-0 z-0 opacity-0 transition-opacity duration-1000"></div>
-    <!-- 3. SCANLINES -->
-    <div class="scanlines"></div>
-    <!-- STATUS BAR (Fixed Top) -->
-    <div id="status-bar" class="fixed top-0 w-full p-4 z-40 flex justify-between items-center pointer-events-none opacity-0 transition-opacity duration-1000 mix-blend-screen">
-        <div class="text-[10px] text-[#00ff41] font-mono">SYS.STATUS: ONLINE</div>
-        <div class="text-[10px] text-[#00ff41] font-mono">JOB_ID: <span id="job-id-scramble">XXXXXXXXX</span></div>
-    </div>
-    <!-- 4. MAIN CONTENT -->
-    <div id="main-content" class="relative z-10 w-full h-full opacity-0 transition-opacity duration-1000">
-        <!-- HERO SECTION -->
-        <section class="min-h-screen flex flex-col items-center justify-center px-6 py-20 relative">
-            <div class="max-w-4xl mx-auto text-center z-10">
-                <div class="mb-8 hover:scale-105 transition-transform duration-500 cursor-default">
-                    <div class="glitch-wrapper font-serif text-5xl md:text-7xl font-bold mb-2 text-white">
-                        <span class="glitch" data-text="Physical Touch,">Physical Touch,</span>
-                    </div>
-                    <br>
-                    <div class="glitch-wrapper font-serif text-5xl md:text-7xl font-bold text-[#00ff41]">
-                        <span class="glitch" data-text="Digital Mind.">Digital Mind.</span>
-                    </div>
-                </div>
-                <p class="text-base md:text-xl leading-relaxed mb-12 max-w-2xl mx-auto font-mono opacity-80 reveal-on-scroll border-l-2 border-[#00ff41] pl-4 text-left md:text-center md:border-l-0 md:pl-0">
-                    Ciao, hai appena trasformato un pezzo di stoffa in un experience digitale.
-                    Questo è il mio concetto di <span class="text-[#00ff41] font-bold relative group cursor-help">
-                        Omnichannel
-                        <span class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-48 bg-black border border-[#00ff41] text-[#00ff41] text-[10px] p-2 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none">
-                            (Spoiler: È la mia specialità)
-                        </span>
-                    </span>
-                </p>
-                <div class="flex flex-col items-center reveal-on-scroll group" style="transition-delay: 0.2s;">
-                    <div id="profile-pic" class="w-24 h-24 md:w-32 md:h-32 rounded-full border-2 border-[#00ff41] flex items-center justify-center bg-black/50 backdrop-blur-sm mb-4 shadow-[0_0_20px_rgba(0,255,65,0.3)] cursor-pointer transition-all hover:shadow-[0_0_40px_rgba(0,255,65,0.6)] active:scale-95">
-                        <span class="text-3xl font-bold text-[#00ff41] group-hover:animate-pulse">MB</span>
-                    </div>
-                    <h2 class="font-serif text-2xl md:text-3xl font-bold mb-1">Matteo Bergamelli</h2>
-                    <p class="text-[#00ff41] text-xs md:text-sm font-mono tracking-wider mb-2">INNOVATION / AI DEVELOPER</p>
-                    <span class="px-3 py-1 border border-[#00ff41]/50 rounded-full text-[10px] text-[#00ff41] bg-[#00ff41]/10">
-                        📍 Padenghe sul Garda (BS)
-                    </span>
-                </div>
-            </div>
-        </section>
-        <!-- FABRIC DECODER SECTION -->
-        <section class="px-6 py-24 relative z-10">
-            <div class="max-w-5xl mx-auto">
-                <div class="mb-16 text-center reveal-on-scroll">
-                    <div class="inline-flex items-center gap-2 px-3 py-1 rounded border border-[#00ff41]/30 bg-[#00ff41]/5 mb-4 backdrop-blur-sm">
-                        <span class="w-2 h-2 bg-[#00ff41] rounded-full animate-pulse"></span>
-                        <span class="text-[10px] text-[#00ff41] font-mono tracking-widest uppercase">Tecnical Background</span>
-                    </div>
-                    <h2 class="font-serif text-4xl md:text-5xl font-bold mb-4">
-                        The Fabric <span class="text-[#00ff41]">Decoder</span>
-                    </h2>
-                    <p class="font-mono text-sm opacity-60">
-                        // Tre tessuti. Tre layer tecnologici. Una sola visione.
-                    </p>
-                </div>
-                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-                    <div class="fabric-card relative p-8 rounded-xl overflow-hidden group transition-all duration-300 backdrop-blur-md bg-[#0f0f0f]/80 border border-[#333] hover:border-[#00ff41]/50 hover:-translate-y-2 reveal-on-scroll">
-                        <div class="absolute inset-0 bg-gradient-to-r from-transparent via-[#00ff41]/5 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000 ease-in-out pointer-events-none"></div>
-                        <div class="mb-6 pt-1">
-                            <div class="p-3 bg-black/50 rounded-lg border border-[#333] group-hover:border-[#00ff41] transition-colors w-min">
-                                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#00ff41" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2" ry="2"></rect><rect x="9" y="9" width="6" height="6"></rect><line x1="9" y1="1" x2="9" y2="4"></line><line x1="15" y1="1" x2="15" y2="4"></line><line x1="9" y1="20" x2="9" y2="23"></line><line x1="15" y1="20" x2="15" y2="23"></line></svg>
-                            </div>
-                        </div>
-                        <h3 class="font-serif text-2xl font-bold mb-2 text-white">STRUCTURAL CORE</h3>
-                        <p class="text-xs text-[#00ff41] mb-4 font-mono tracking-widest">COTONE TWILL / WEAVE</p>
-                        <p class="text-sm italic opacity-80 mb-6 font-serif border-l-2 border-[#333] pl-4 group-hover:border-[#00ff41] transition-colors">
-                            "Una trama diagonale fitta. Robusto. La spina dorsale su cui tutto si regge."
-                        </p>
-                        <ul class="space-y-3 mb-6 text-sm font-mono opacity-90">
-                            <li class="flex gap-2"><span class="text-[#00ff41]">→</span> <span><span class="text-[#00ff41] font-bold">13</span> anni di esperienza</span></li>
-                            <li class="flex gap-2"><span class="text-[#00ff41]">→</span> <span>ERP <span class="text-[#00ff41] font-bold">SAP</span> & <span class="text-[#00ff41] font-bold">Zucchetti</span></span></li>
-                            <li class="flex gap-2"><span class="text-[#00ff41]">→</span> <span><span class="text-[#00ff41] font-bold">Hardware</span> & OpcUa Integrator</span></li>
-                            <li class="flex gap-2"><span class="text-[#00ff41]">→</span> <span><span class="text-[#00ff41] font-bold">SQL</span> Server Expert</span></li>
-                        </ul>
-                    </div>
-                    <div class="fabric-card relative p-8 rounded-xl overflow-hidden group transition-all duration-300 backdrop-blur-md bg-[#0f0f0f]/80 border border-[#333] hover:border-[#00ff41]/50 hover:-translate-y-2 reveal-on-scroll" style="transition-delay: 0.2s;">
-                        <div class="absolute inset-0 bg-gradient-to-r from-transparent via-[#00ff41]/5 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000 ease-in-out pointer-events-none"></div>
-                        <div class="mb-6 pt-1">
-                            <div class="p-3 bg-black/50 rounded-lg border border-[#333] group-hover:border-[#00ff41] transition-colors w-min">
-                                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#00ff41" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 1.98-3A2.5 2.5 0 0 1 9.5 2Z"></path><path d="M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-1.98-3A2.5 2.5 0 0 0 14.5 2Z"></path></svg>
-                            </div>
-                        </div>
-                        <h3 class="font-serif text-2xl font-bold mb-2 text-white">FLUID INTELLIGENCE</h3>
-                        <p class="text-xs text-[#00ff41] mb-4 font-mono tracking-widest">NASTRO RASO / FLOW</p>
-                        <p class="text-sm italic opacity-80 mb-6 font-serif border-l-2 border-[#333] pl-4 group-hover:border-[#00ff41] transition-colors">
-                            "Liscio. Senza attrito. Dati che scorrono veloci come un nastro continuo."
-                        </p>
-                        <ul class="space-y-3 mb-6 text-sm font-mono opacity-90">
-                            <li class="flex gap-2"><span class="text-[#00ff41]">→</span> <span><span class="text-[#00ff41] font-bold">Python</span> Automation</span></li>
-                            <li class="flex gap-2"><span class="text-[#00ff41]">→</span> <span>Agenti AI <span class="text-[#00ff41] font-bold">multimodali</span></span></li>
-                            <li class="flex gap-2"><span class="text-[#00ff41]">→</span> <span><span class="text-[#00ff41] font-bold">RAG</span> su Knowledge Base</span></li>
-                            <li class="flex gap-2"><span class="text-[#00ff41]">→</span> <span><span class="text-[#00ff41] font-bold">PDF-to-JSON</span> Pipeline</span></li>
-                        </ul>
-                    </div>
-                    <div class="fabric-card relative p-8 rounded-xl overflow-hidden group transition-all duration-300 backdrop-blur-md bg-gradient-to-br from-[#1a1a1a]/90 to-[#0a0a0a]/90 border border-[#00ff41] hover:-translate-y-2 reveal-on-scroll" style="transition-delay: 0.4s;">
-                        <div class="absolute inset-0 bg-gradient-to-r from-transparent via-[#00ff41]/10 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000 ease-in-out pointer-events-none"></div>
-                        <div class="mb-6 pt-1">
-                            <div class="p-3 bg-black/50 rounded-lg border border-[#00ff41] transition-colors w-min">
-                                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#00ff41" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12h20"></path><path d="M2 12l5 5"></path><path d="M2 12l5-5"></path><rect x="5" y="2" width="14" height="20" rx="2" ry="2" opacity="0.5"></rect></svg>
-                            </div>
-                        </div>
-                        <h3 class="font-serif text-2xl font-bold mb-2 text-[#00ff41]">THE OMNICHANNEL</h3>
-                        <p class="text-xs text-[#00ff41] mb-4 font-mono tracking-widest">ORGANZA / SHEER</p>
-                        <p class="text-sm italic opacity-80 mb-6 font-serif border-l-2 border-[#333] pl-4 group-hover:border-[#00ff41] transition-colors">
-                            "Trasparenza strutturata. Vedere il digitale attraverso il fisico."
-                        </p>
-                        <ul class="space-y-3 mb-6 text-sm font-mono opacity-90">
-                            <li class="flex gap-2"><span class="text-[#00ff41]">→</span> <span>Middleware <span class="text-[#00ff41] font-bold">SAP con AI</span></span></li>
-                            <li class="flex gap-2"><span class="text-[#00ff41]">→</span> <span><span class="text-[#00ff41] font-bold"></span>HTML5, PoC <span class="text-[#00ff41] font-bold">Angular</span></span></li>
-                            <li class="flex gap-2"><span class="text-[#00ff41]">→</span> <span>Graphic & <span class="text-[#00ff41] font-bold">Meta</span> AR</span></li>
-                            <li class="flex gap-2"><span class="text-[#00ff41]">→</span> <span><span class="text-[#00ff41] font-bold">Physical</span> & <span class="text-[#00ff41] font-bold">Digital</span></span></li>
-                        </ul>
-                        <p class="text-xs mt-4 italic text-[#00ff41] font-bold">"Sposta questo tessuto e guarda cosa c'è sotto"</p>
-                    </div>
-                </div>
-            </div>
-        </section>
-<section class="relative z-10 py-32 bg-[#030303] overflow-hidden border-t border-[#333]">
-            <div class="absolute inset-0 pointer-events-none select-none opacity-20"
-                 style="background-image: url('data:image/svg+xml,%3Csvg width=%2780%27 height=%2780%27 viewBox=%270 0 80 80%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cg fill=%27none%27 fill-rule=%27evenodd%27%3E%3Cpath d=%27M11 11h1v1h-1v-1zm1 2h1v1h-1v-1zm-2 2h1v1h-1v-1zm10 10h1v1h-1v-1zm1 2h1v1h-1v-1zm-2 2h1v1h-1v-1zm10 10h1v1h-1v-1zm1 2h1v1h-1v-1zm-2 2h1v1h-1v-1zM11 51h1v1h-1v-1zm1 2h1v1h-1v-1zm-2 2h1v1h-1v-1zm10 10h1v1h-1v-1zm1 2h1v1h-1v-1zm-2 2h1v1h-1v-1zM51 11h1v1h-1v-1zm1 2h1v1h-1v-1zm-2 2h1v1h-1v-1zm10 10h1v1h-1v-1zm1 2h1v1h-1v-1zm-2 2h1v1h-1v-1zm10 10h1v1h-1v-1zm1 2h1v1h-1v-1zm-2 2h1v1h-1v-1zM51 51h1v1h-1v-1zm1 2h1v1h-1v-1zm-2 2h1v1h-1v-1zm10 10h1v1h-1v-1zm1 2h1v1h-1v-1zm-2 2h1v1h-1v-1z%27 fill=%27%2300ff41%27 fill-opacity=%270.4%27/%3E%3C/g%3E%3C/svg%3E');">
-            </div>
-            <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-[#00ff41] rounded-full filter blur-[200px] opacity-5 animate-pulse pointer-events-none"></div>
-            <div class="max-w-6xl mx-auto relative z-20 px-6">
-                <div class="mb-16 text-center reveal-on-scroll">
-                    <div class="inline-flex items-center gap-2 px-3 py-1 rounded border border-[#00ff41]/30 bg-[#00ff41]/5 mb-4 backdrop-blur-sm">
-                        <span class="w-2 h-2 bg-[#00ff41] rounded-full animate-pulse"></span>
-                        <span class="text-[10px] text-[#00ff41] font-mono tracking-widest uppercase">Research & Development</span>
-                    </div>
-                    <h2 class="font-serif text-3xl md:text-5xl font-bold mb-4 text-white">
-                        Oniverse <span class="text-[#00ff41]">Prototyping</span>
-                    </h2>
-                    <p class="font-mono text-xs md:text-sm opacity-60 max-w-2xl mx-auto">
-                        // Architetture sperimentali per l'ecosistema Phygital.
-                    </p>
-                </div>
-                <div class="grid grid-cols-1 md:grid-cols-3 gap-8 relative">
-                    <svg class="hidden md:block absolute top-12 left-0 w-full h-full pointer-events-none z-0 opacity-20" xmlns="http://www.w3.org/2000/svg">
-                        <line x1="16%" y1="50%" x2="84%" y2="50%" stroke="#00ff41" stroke-width="1" stroke-dasharray="4,4"/>
-                    </svg>
-                    <div class="group relative rounded-2xl p-[1px] bg-gradient-to-b from-[#333] via-[#1a1a1a] to-black hover:from-[#00ff41] hover:via-[#00ff41]/50 hover:to-[#003300] transition-all duration-500 overflow-hidden reveal-on-scroll hover:-translate-y-2 hover:shadow-[0_10px_40px_-10px_rgba(0,255,65,0.2)] cursor-pointer active:scale-95">
-                        <div class="relative h-full bg-[#0a0a0a]/90 backdrop-blur-xl rounded-2xl p-8 flex flex-col z-10">
-                            <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSIjMDBmZjQxIiBvcGFjaXR5PSIwLjEiLz48L3N2Zz4=')] opacity-20 pointer-events-none"></div>
-                            <div class="flex justify-between items-start mb-6">
-                                <div class="p-3 bg-[#00ff41]/10 rounded-xl border border-[#00ff41]/30 text-[#00ff41] group-hover:shadow-[0_0_20px_#00ff41] transition-shadow duration-500">
-                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
-                                </div>
-                                <span class="font-mono text-[9px] text-[#00ff41] tracking-widest opacity-60 border border-[#00ff41]/20 px-2 py-1 rounded-full bg-black/50">INITIATIVE: OMNICHANNEL</span>
-                            </div>
-                            <h3 class="font-serif text-xl font-bold text-white mb-2 group-hover:text-[#00ff41] transition-colors">PROJECT: STYLE_INTELLIGENCE</h3>
-                            <p class="text-gray-400 font-mono text-xs mb-6 leading-relaxed">
-                                Piattaforma di Hyper-Personalization Cross-Brand. Unisce AI armocromatica e Virtual Try-On.
-                            </p>
-                            <ul class="mt-auto space-y-3 font-mono text-xs text-gray-400">
-                                <li class="flex items-start gap-3 border-b border-[#333] pb-2 last:border-0 group-hover:border-[#00ff41]/30 transition-colors">
-                                    <span class="text-[#00ff41] mt-0.5">▹</span>
-                                    <div>
-                                        <strong class="text-white block mb-0.5">Customer Identity Analysis</strong>
-                                        Profilazione automatica (Armocromia) per upselling mirato tra brand (es. Intimissimi/Falconeri).
-                                    </div>
-                                </li>
-                                <li class="flex items-start gap-3 border-b border-[#333] pb-2 last:border-0 group-hover:border-[#00ff41]/30 transition-colors">
-                                    <span class="text-[#00ff41] mt-0.5">▹</span>
-                                    <div>
-                                        <strong class="text-white block mb-0.5">Generative Fitting Room</strong>
-                                        Virtual Try-On su figura utente per abbattere i resi e aumentare il conversion rate.
-                                    </div>
-                                </li>
-                                <li class="flex items-start gap-3 pb-2">
-                                    <span class="text-[#00ff41] mt-0.5">▹</span>
-                                    <div>
-                                        <strong class="text-white block mb-0.5">Store Digital Extension</strong>
-                                        Scan-to-Look: Il prodotto fisico in negozio genera contenuti video AI (Sora/Gemini) istantanei.
-                                    </div>
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                    <div class="group relative rounded-2xl p-[1px] bg-gradient-to-b from-[#333] via-[#1a1a1a] to-black hover:from-[#00ff41] hover:via-[#00ff41]/50 hover:to-[#003300] transition-all duration-500 overflow-hidden reveal-on-scroll hover:-translate-y-2 hover:shadow-[0_10px_40px_-10px_rgba(0,255,65,0.2)] cursor-pointer active:scale-95" style="transition-delay: 0.2s;">
-                        <div class="relative h-full bg-[#0a0a0a]/90 backdrop-blur-xl rounded-2xl p-8 flex flex-col z-10">
-                            <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSIjMDBmZjQxIiBvcGFjaXR5PSIwLjEiLz48L3N2Zz4=')] opacity-20 pointer-events-none"></div>
-                            <div class="flex justify-between items-start mb-6">
-                                <div class="p-3 bg-[#00ff41]/10 rounded-xl border border-[#00ff41]/30 text-[#00ff41] group-hover:shadow-[0_0_20px_#00ff41] transition-shadow duration-500">
-                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12h10"/><path d="M9 4v16"/><path d="M3 9l3 3-3 3"/><path d="M12 9l3 3-3 3"/></svg>
-                                </div>
-                                <span class="font-mono text-[9px] text-[#00ff41] tracking-widest opacity-60 border border-[#00ff41]/20 px-2 py-1 rounded-full bg-black/50">INITIATIVE: SUSTAINABILITY</span>
-                            </div>
-                            <h3 class="font-serif text-xl font-bold text-white mb-2 group-hover:text-[#00ff41] transition-colors">PROJECT: SMART_PRODUCT_LINK</h3>
-                            <p class="text-gray-400 font-mono text-xs mb-6 leading-relaxed">
-                                Trasformazione dell'oggetto fisico (Loyalty) in un touchpoint digitale attivo e sostenibile.
-                            </p>
-                            <ul class="mt-auto space-y-3 font-mono text-xs text-gray-400">
-                                <li class="flex items-start gap-3 border-b border-[#333] pb-2 last:border-0 group-hover:border-[#00ff41]/30 transition-colors">
-                                    <span class="text-[#00ff41] mt-0.5">▹</span>
-                                    <div>
-                                        <strong class="text-white block mb-0.5">Phygital Gateway</strong>
-                                        QR Code su prodotto (padella) che attiva l'assistente AI, aumentando la retention post-acquisto.
-                                    </div>
-                                </li>
-                                <li class="flex items-start gap-3 border-b border-[#333] pb-2 last:border-0 group-hover:border-[#00ff41]/30 transition-colors">
-                                    <span class="text-[#00ff41] mt-0.5">▹</span>
-                                    <div>
-                                        <strong class="text-white block mb-0.5">Computer Vision Inventory</strong>
-                                        Analisi visiva degli ingredienti per gestione scadenze e riduzione sprechi.
-                                    </div>
-                                </li>
-                                <li class="flex items-start gap-3 pb-2">
-                                    <span class="text-[#00ff41] mt-0.5">▹</span>
-                                    <div>
-                                        <strong class="text-white block mb-0.5">Contextual Content (RAG)</strong>
-                                        Generazione dinamica di ricette basata su disponibilità reale e preferenze salute.
-                                    </div>
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                    <div class="group relative rounded-2xl p-[1px] bg-gradient-to-b from-[#333] via-[#1a1a1a] to-black hover:from-[#00ff41] hover:via-[#00ff41]/50 hover:to-[#003300] transition-all duration-500 overflow-hidden reveal-on-scroll hover:-translate-y-2 hover:shadow-[0_10px_40px_-10px_rgba(0,255,65,0.2)] cursor-pointer active:scale-95" style="transition-delay: 0.4s;">
-                        <div class="relative h-full bg-[#0a0a0a]/90 backdrop-blur-xl rounded-2xl p-8 flex flex-col z-10">
-                            <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSIjMDBmZjQxIiBvcGFjaXR5PSIwLjEiLz48L3N2Zz4=')] opacity-20 pointer-events-none"></div>
-                            <div class="flex justify-between items-start mb-6">
-                                <div class="p-3 bg-[#00ff41]/10 rounded-xl border border-[#00ff41]/30 text-[#00ff41] group-hover:shadow-[0_0_20px_#00ff41] transition-shadow duration-500">
-                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
-                                </div>
-                                <span class="font-mono text-[9px] text-[#00ff41] tracking-widest opacity-60 border border-[#00ff41]/20 px-2 py-1 rounded-full bg-black/50">INITIATIVE: RETENTION</span>
-                            </div>
-                            <h3 class="font-serif text-xl font-bold text-white mb-2 group-hover:text-[#00ff41] transition-colors">PROJECT: ENGAGEMENT_ECOSYSTEM</h3>
-                            <p class="text-gray-400 font-mono text-xs mb-6 leading-relaxed">
-                                Strategia di Gamification circolare per massimizzare la frequenza di visita e la Data Collection.
-                            </p>
-                            <ul class="mt-auto space-y-3 font-mono text-xs text-gray-400">
-                                <li class="flex items-start gap-3 border-b border-[#333] pb-2 last:border-0 group-hover:border-[#00ff41]/30 transition-colors">
-                                    <span class="text-[#00ff41] mt-0.5">▹</span>
-                                    <div>
-                                        <strong class="text-white block mb-0.5">Cross-Brand Journey</strong>
-                                        Sistema unificato di Badge/Achievement che guida l'utente attraverso i diversi brand del gruppo.
-                                    </div>
-                                </li>
-                                <li class="flex items-start gap-3 border-b border-[#333] pb-2 last:border-0 group-hover:border-[#00ff41]/30 transition-colors">
-                                    <span class="text-[#00ff41] mt-0.5">▹</span>
-                                    <div>
-                                        <strong class="text-white block mb-0.5">Performance Marketing</strong>
-                                        Conversione dell'attività ludica in incentivi d'acquisto dinamici (codici sconto targettizzati).
-                                    </div>
-                                </li>
-                                <li class="flex items-start gap-3 pb-2">
-                                    <span class="text-[#00ff41] mt-0.5">▹</span>
-                                    <div>
-                                        <strong class="text-white block mb-0.5">Behavioral Insights</strong>
-                                        Utilizzo del layer di gioco per profilazione preferenze in modalità non invasiva.
-                                    </div>
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </section>
-        <style>
-            /* --- GESTIONE IFRAME GAME --- */
-            .game-zoom-container {
-                width: 100%;
-                height: 100%;
-                overflow: hidden;
-                /* Blocca zoom e gesti touch sul contenitore */
-                touch-action: none;
-                -ms-touch-action: none;
-                user-select: none;
-                -webkit-user-select: none;
-            }
-            .game-zoom-frame {
-                border: none;
-                /* DEFAULT (PC/Tablet orizzontale): */
-                /* Riempie semplicemente il box 11:9 che abbiamo impostato nell'HTML */
-                width: 100%;
-                height: 100%;
-                touch-action: none;
-            }
-            /* --- SOLO MOBILE VERTICALE (Smartphone) --- */
-            /* Qui manteniamo il tuo zoom out perché gli schermi sono stretti */
-            @media (max-width: 768px) {
-                .game-zoom-frame {
-                    width: 182%;       /* Allarga la vista */
-                    height: 182%;
-                    transform: scale(0.55); /* Rimpicciolisce tutto per farlo stare nel box */
-                    transform-origin: top left;
-                }
-            }
-        </style>
-        <section class="px-6 py-24 relative z-10 bg-black/40 backdrop-blur-sm border-t border-[#333]">
-            <div class="max-w-5xl mx-auto reveal-on-scroll">
-                <div class="text-center mb-8">
-                    <div class="inline-flex items-center gap-2 px-3 py-1 rounded border border-[#00ff41]/30 bg-[#00ff41]/5 mb-4 backdrop-blur-sm">
-                        <span class="w-2 h-2 bg-[#00ff41] rounded-full animate-pulse"></span>
-                        <span class="text-[10px] text-[#00ff41] font-mono tracking-widest uppercase">Gamification</span>
-                    </div>
-                    <h2 class="font-serif text-4xl md:text-5xl font-bold mb-4">
-                        Innovation <span class="text-[#00ff41]">Run</span>
-                    </h2>
-                    <p class="font-mono text-xs md:text-sm opacity-70 max-w-lg mx-auto">
-                        // Mission: Crea un PoC visionario OMNICANALE
-                    </p>
-                </div>
-                <div id="game-monitor" class="relative w-full aspect-[3/4] md:aspect-[11/9] rounded-xl overflow-hidden border-2 border-[#00ff41] shadow-[0_0_40px_rgba(0,255,65,0.15)] bg-black group transition-all hover:shadow-[0_0_60px_rgba(0,255,65,0.25)] mx-auto max-w-sm md:max-w-4xl">
-                    <div class="absolute top-0 left-0 w-full h-8 bg-[#0a0a0a] border-b border-[#00ff41]/50 flex items-center justify-between px-4 z-20 select-none pointer-events-none">
-                        <div class="flex items-center gap-2">
-                            <div class="w-2 h-2 rounded-full bg-[#00ff41] animate-pulse"></div>
-                            <span class="text-[10px] font-mono text-[#00ff41] tracking-wider">LIVE_EXECUTION</span>
-                        </div>
-                        <span class="text-[10px] font-mono text-[#00ff41]/50">./play.html</span>
-                    </div>
-                    <div id="game-overlay" class="absolute inset-0 z-30 bg-black/80 flex flex-col items-center justify-center cursor-pointer backdrop-blur-sm transition-opacity duration-500" onclick="activateGame()">
-                        <div class="w-16 h-16 rounded-full border-2 border-[#00ff41] flex items-center justify-center mb-4 animate-pulse shadow-[0_0_20px_#00ff41]">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="#00ff41" stroke="none"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
-                        </div>
-                        <p class="text-[#00ff41] font-mono text-xs md:text-sm tracking-widest uppercase font-bold text-center px-4">
-                            TAP TO INITIALIZE<br>
-                        </p>
-                    </div>
-                    <div class="game-zoom-container pt-8 bg-black">
-                        <iframe
-                            id="game-iframe"
-                            src="./play.html"
-                            class="game-zoom-frame"
-                            scrolling="no"
-                            loading="lazy"
-                            title="Innovation Run Game">
-                        </iframe>
-                    </div>
-                    <div class="absolute inset-0 pointer-events-none z-10 bg-[linear-gradient(rgba(18,16,16,0)_50%,rgba(0,0,0,0.1)_50%),linear-gradient(90deg,rgba(255,0,0,0.03),rgba(0,255,0,0.01),rgba(0,0,255,0.03))] bg-[length:100%_2px,3px_100%] opacity-50"></div>
-                </div>
-                <div class="mt-4 flex justify-between items-center px-2 max-w-sm md:max-w-4xl mx-auto">
-                    <p class="text-[10px] text-[#00ff41]/50 font-mono">
-                        [WIDE VIEW ACTIVE]
-                    </p>
-                    <div class="flex gap-4 text-[10px] text-[#00ff41]/50 font-mono">
-                        <span>INPUT: TAP</span>
-                        <span>ZOOM: 55%</span>
-                    </div>
-                </div>
-            </div>
-        </section>
-        <script>
-            function activateGame() {
-                const overlay = document.getElementById('game-overlay');
-                const iframe = document.getElementById('game-iframe');
-                overlay.style.opacity = '0';
-                setTimeout(() => overlay.style.display = 'none', 500);
-                iframe.contentWindow.focus();
-            }
-            document.addEventListener('DOMContentLoaded', () => {
-                // 1. Previene il "Pinch to Zoom" (Pizzico con due dita) su tutto il documento
-                document.addEventListener('touchmove', function (event) {
-                    if (event.touches.length > 1) {
-                        event.preventDefault(); // Blocca se ci sono più di 1 dito
-                    }
-                }, { passive: false });
-                // 2. Previene il doppio tap veloce (Zoom) su tutto il documento
-                let lastTouchEnd = 0;
-                document.addEventListener('touchend', function (event) {
-                    const now = (new Date()).getTime();
-                    if (now - lastTouchEnd <= 300) {
-                        event.preventDefault();
-                    }
-                    lastTouchEnd = now;
-                }, false);
-                // 3. Gestione specifica per il contenitore del gioco (Massima priorità)
-                const gameContainer = document.querySelector('.game-zoom-container');
-                if (gameContainer) {
-                    gameContainer.addEventListener('touchmove', function(e) {
-                        // Impedisce qualsiasi movimento della pagina mentre si gioca
-                        e.preventDefault();
-                    }, { passive: false });
-                }
-            });
-        </script>
-        <!-- UNLOCK AR LAYER -->
-        <section class="px-6 py-24 relative z-20 overflow-hidden">
-            <div class="absolute inset-0 bg-gradient-to-b from-black via-[#0d0d0d] to-black opacity-90"></div>
-            <div class="absolute inset-0 opacity-20" style="background-image: url('data:image/svg+xml,%3Csvg viewBox=%220 0 200 200%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cfilter id=%22noiseFilter%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.65%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23noiseFilter)%22 opacity=%221%22/%3E%3C/svg%3E');"></div>
-            <div class="max-w-3xl mx-auto relative text-center reveal-on-scroll">
-                <div class="mb-8">
-                    <div class="inline-flex items-center gap-2 px-3 py-1 rounded border border-[#00ff41]/30 bg-[#00ff41]/5 mb-4 backdrop-blur-sm">
-                        <span class="w-2 h-2 bg-[#00ff41] rounded-full animate-pulse"></span>
-                        <span class="text-[10px] text-[#00ff41] font-mono tracking-widest uppercase">Augmented Reality</span>
-                    </div>
-                    <h2 class="font-serif text-4xl md:text-5xl font-bold mb-4 text-white">
-                        The Hidden <span class="text-[#00ff41] animate-pulse">Layer</span>
-                    </h2>
-                    <p class="font-mono text-xs md:text-sm opacity-70 max-w-lg mx-auto">
-                        // C'è un quarto livello di realtà nascosta. Sblocca il protocollo AR!
-                    </p>
-                </div>
-                <div class="py-8 flex justify-center">
-                    <!-- Slider Component -->
-                    <div id="slider-container" class="relative w-full max-w-xs h-14 bg-black border border-[#333] rounded-full overflow-hidden backdrop-blur-sm shadow-[0_0_15px_rgba(0,0,0,0.5)] select-none touch-none">
-                        <div class="absolute -top-8 left-0 right-0 text-center">
-                            <div class="text-[10px] text-[#00ff41] font-mono tracking-widest uppercase animate-pulse">Secure Connection Available</div>
-                        </div>
-                        <!-- Background Fill -->
-                        <div id="slider-fill" class="absolute inset-0 bg-[#00ff41] opacity-10 transition-opacity" style="width: 0%"></div>
-                        <div class="absolute inset-0 opacity-20 bg-[linear-gradient(90deg,transparent_0%,rgba(0,255,65,0.2)_50%,transparent_100%)] bg-[length:200%_100%] animate-[shimmer_2s_infinite] pointer-events-none"></div>
-                        <!-- Text -->
-                        <div id="slider-text" class="absolute inset-0 flex items-center justify-center pointer-events-none transition-opacity duration-300">
-                            <span class="font-mono text-xs font-bold text-white tracking-[0.2em] uppercase flex items-center gap-2">
-                                Slide to Decode <span class="animate-bounce">→</span>
-                            </span>
-                        </div>
-                        <!-- Handle -->
-                        <div id="slider-handle" class="absolute top-1 left-1 bottom-1 w-12 bg-[#0d0d0d] rounded-full border border-[#00ff41] flex items-center justify-center cursor-grab z-20 shadow-[0_0_10px_rgba(0,255,65,0.3)] active:cursor-grabbing hover:scale-105 transition-transform">
-                            <svg id="icon-arrow" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="animate-pulse"><polyline points="9 18 15 12 9 6"></polyline></svg>
-                            <svg id="icon-lock" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#00ff41" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="hidden"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
-                        </div>
-                    </div>
-                </div>
-                <p class="mt-8 text-[10px] text-[#00ff41]/60 font-mono">
-                    // REQUIRES CAMERA PERMISSION
-                </p>
-            </div>
-        </section>
-        <!-- MISSING LINK SECTION & CODE BLOCK -->
-        <section class="px-6 py-24 relative z-10 bg-black/60 backdrop-blur-md border-y border-[#333]">
-            <div class="max-w-3xl mx-auto reveal-on-scroll">
-                <h2 class="font-serif text-4xl md:text-5xl font-bold text-center mb-12">
-                    The <span class="text-[#00ff41]">"Missing Link"</span>
-                </h2>
-                <!-- Code Block Component -->
-                <div class="relative rounded-lg overflow-hidden bg-[#0d0d0d] border border-[#00ff41] shadow-[0_0_15px_rgba(0,255,65,0.15)] max-w-xl mx-auto transition-transform hover:scale-[1.02] duration-500 group">
-                    <div class="flex items-center justify-between px-4 py-2 bg-[#1a1a1a] border-b border-[#333]">
-                        <div class="flex gap-2">
-                            <div class="w-3 h-3 rounded-full bg-red-500/50"></div>
-                            <div class="w-3 h-3 rounded-full bg-yellow-500/50"></div>
-                            <div class="w-3 h-3 rounded-full bg-green-500/50"></div>
-                        </div>
-                        <span class="text-[10px] text-[#00ff41] font-mono opacity-70">// middleware.js</span>
-                    </div>
-                    <div class="p-6 font-mono text-xs md:text-sm leading-relaxed overflow-x-auto text-left">
-                        <div class="text-gray-400">
-                            <span class="text-[#c678dd]">const</span> <span class="text-[#61afef]">checkCompatibility</span> = (<span class="text-[#d19a66]">system</span>) = {
-                        </div>
-                        <div class="pl-4">
-                            <span class="text-[#c678dd]">if</span> (
-                            <span class="text-[#e06c75]">Legacy_Systems</span> &&
-                            <span class="text-[#e06c75]">Future_AI</span>
-                            )
-                        </div>
-                        <div class="pl-8 text-[#98c379]">
-                            return <span class="text-[#e06c75]">"Matteo Bergamelli"</span>;
-                        </div>
-                        <div class="pl-4">
-                             <span class="text-[#c678dd]">else</span>
-                        </div>
-                        <div class="pl-8 text-[#98c379]">
-                            return <span class="text-red-400">"Gap Tecnologico"</span>;
-                        </div>
-                        <div class="pl-4"></div>
-                        <div>};</div>
-                    </div>
-                    <!-- Blink Cursor -->
-                    <div class="absolute bottom-6 right-6 w-2 h-4 bg-[#00ff41] animate-pulse"></div>
-                    <!-- Easter Egg Copy -->
-                    <button onclick="copyCodeEasterEgg()" class="absolute top-14 right-4 text-[10px] text-[#00ff41] bg-black/80 px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity border border-[#00ff41]">COPY</button>
-                </div>
-                <p class="text-center text-sm md:text-base leading-relaxed opacity-90 mt-8 font-mono">
-                    La vostra Job Description <span class="text-[#00ff41] font-bold">(ID 247442889)</span> cerca qualcuno che unisca questi mondi.
-                    <br />
-                    <span class="font-serif text-xl md:text-2xl font-bold mt-6 block text-white">
-                        Mi piacerebbe essere quel connettore.
-                    </span>
-                </p>
-                <div class="mt-12 p-6 bg-[#0a0a0a]/80 rounded-lg border border-[#333] backdrop-blur-sm text-center">
-                    <p class="text-xs font-mono opacity-60 mb-4 text-[#00ff41]">// CURRENT STACK</p>
-                    <div class="flex flex-wrap justify-center gap-2">
-                        <span class="px-3 py-1 bg-[#151515] border border-[#00ff41]/40 rounded text-xs font-mono text-[#00ff41] hover:bg-[#00ff41] hover:text-black transition-colors cursor-default">Python</span>
-                        <span class="px-3 py-1 bg-[#151515] border border-[#00ff41]/40 rounded text-xs font-mono text-[#00ff41] hover:bg-[#00ff41] hover:text-black transition-colors cursor-default">SAP B1</span>
-                        <span class="px-3 py-1 bg-[#151515] border border-[#00ff41]/40 rounded text-xs font-mono text-[#00ff41] hover:bg-[#00ff41] hover:text-black transition-colors cursor-default">SQL Server</span>
-                        <span class="px-3 py-1 bg-[#151515] border border-[#00ff41]/40 rounded text-xs font-mono text-[#00ff41] hover:bg-[#00ff41] hover:text-black transition-colors cursor-default">LLM Agents</span>
-                        <span class="px-3 py-1 bg-[#151515] border border-[#00ff41]/40 rounded text-xs font-mono text-[#00ff41] hover:bg-[#00ff41] hover:text-black transition-colors cursor-default">RAG</span>
-                        <span class="px-3 py-1 bg-[#151515] border border-[#00ff41]/40 rounded text-xs font-mono text-[#00ff41] hover:bg-[#00ff41] hover:text-black transition-colors cursor-default">IoT</span>
-                        <span class="px-3 py-1 bg-[#151515] border border-[#00ff41]/40 rounded text-xs font-mono text-[#00ff41] hover:bg-[#00ff41] hover:text-black transition-colors cursor-default">OpcUa</span>
-                        <span class="px-3 py-1 bg-[#151515] border border-[#00ff41]/40 rounded text-xs font-mono text-[#00ff41] hover:bg-[#00ff41] hover:text-black transition-colors cursor-default">Spark AR</span>
-                        <span class="px-3 py-1 bg-[#151515] border border-[#00ff41]/40 rounded text-xs font-mono text-[#00ff41] hover:bg-[#00ff41] hover:text-black transition-colors cursor-default">Angular</span>
-                    </div>
-                </div>
-            </div>
-        </section>
-        <!-- FOOTER -->
-        <section class="px-6 py-20 bg-black relative z-10">
-            <div class="max-w-2xl mx-auto text-center reveal-on-scroll">
-                <h2 class="font-serif text-4xl md:text-5xl font-bold mb-12">
-                    Iniziamo a <span class="text-[#00ff41]">Innovare</span>?
-                </h2>
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-16">
-                    <a href="./CV.pdf" class="group flex items-center justify-center gap-2 px-6 py-4 bg-[#00ff41] text-black font-mono text-sm font-bold rounded hover:bg-transparent hover:text-[#00ff41] border border-[#00ff41] transition-all">
-                        <span class="group-hover:translate-x-1 transition-transform">📄 CV Tecnico</span>
-                    </a>
-                    <a href="tel:+393428194066" class="flex items-center justify-center gap-2 px-6 py-4 bg-transparent text-[#f5f5f5] font-mono text-sm border border-[#333] rounded hover:border-[#00ff41] hover:text-[#00ff41] transition-all">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
-                        Telefono
-                    </a>
-                    <a href="mailto:matteo.bergamelli1989@gmail.com" class="flex items-center justify-center gap-2 px-6 py-4 bg-transparent text-[#f5f5f5] font-mono text-sm border border-[#333] rounded hover:border-[#00ff41] hover:text-[#00ff41] transition-all">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="16" x="2" y="4" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></svg>
-                        Email
-                    </a>
-                </div>
-                <div class="pt-8 border-t border-[#333] text-left md:text-center">
-                    <p class="font-mono text-[10px] md:text-xs opacity-40 leading-relaxed uppercase tracking-widest">
-                        ━━━━━━━━━━━━━━━━━━━━━━━━━━━━<br/>
-                        ONIVERSE PHYGITAL EXPERIENCE<br/>
-                        ━━━━━━━━━━━━━━━━━━━━━━━━━━━━<br/><br/>
-                        Printed at: Padenghe s/G<br/>
-                        Cost: 0€<br/>
-                        Value: <span class="text-[#00ff41]">Infinite</span><br/><br/>
-                        ━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-                    </p>
-                </div>
-            </div>
-        </section>
-    </div>
     <script>
-        /* ==========================================
-           0. EASTER EGGS & NERD STUFF
-           ========================================== */
-        // A) Console ASCII Art (First place devs look)
-        console.log(`%c
-███╗   ███╗██████╗
-████╗ ████║██╔══██╗
-██╔████╔██║██████╔╝
-██║╚██╔╝██║██╔══██╗
-██║ ╚═╝ ██║██████╔╝
-╚═╝     ╚═╝╚═════╝
-%c> Ciao Dev di Oniverse.
-> Se stai leggendo questo, stiamo parlando la stessa lingua.
-> Stack: React, Python, AI, AR.
-> Status: Ready to deploy.
-`, "color: #00ff41; font-weight: bold; font-family: monospace;", "color: #f5f5f5; font-family: monospace;");
-        // B) Konami Code (The classic) -> Triggers Matrix Rain
-        let konamiCode = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a'];
-        let konamiIndex = 0;
-        document.addEventListener('keydown', (e) => {
-            if (e.key.toLowerCase() === konamiCode[konamiIndex].toLowerCase() || e.key === konamiCode[konamiIndex]) {
-                konamiIndex++;
-                if (konamiIndex === konamiCode.length) {
-                    activateMatrixMode();
-                    konamiIndex = 0;
-                }
-            } else {
-                konamiIndex = 0;
-            }
         });
-        function activateMatrixMode() {
-            alert("🔓 GOD MODE ACTIVATED: You found the secret!");
-            startMatrixRain();
-        }
-        // C) Matrix Rain Canvas Logic
-        function startMatrixRain() {
-            const canvas = document.getElementById('matrix-canvas');
-            const ctx = canvas.getContext('2d');
-            canvas.width = window.innerWidth;
-            canvas.height = window.innerHeight;
-            canvas.classList.add('matrix-active');
-            const chars = "01010101MATTEOBERGAMELLIONIVERSEINNOVATIONLAB";
-            const fontSize = 14;
-            const columns = canvas.width / fontSize;
-            const drops = [];
-            for(let x = 0; x < columns; x++) drops[x] = 1;
-            function draw() {
-                ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
-                ctx.fillRect(0, 0, canvas.width, canvas.height);
-                ctx.fillStyle = "#00ff41";
-                ctx.font = fontSize + "px monospace";
-                for(let i = 0; i < drops.length; i++) {
-                    const text = chars.charAt(Math.floor(Math.random() * chars.length));
-                    ctx.fillText(text, i * fontSize, drops[i] * fontSize);
-                    if(drops[i] * fontSize > canvas.height && Math.random() > 0.975) drops[i] = 0;
-                    drops[i]++;
-                }
-                requestAnimationFrame(draw);
-            }
-            draw();
-        }
-        // D) Ripple Effect on Click (Physical Touch visual feedback)
-        document.addEventListener('click', (e) => {
-            // Don't trigger on interactive elements to avoid confusion
-            if(e.target.closest('button') || e.target.closest('a') || e.target.closest('#slider-container')) return;
-            const ripple = document.createElement('div');
-            ripple.className = 'ripple';
-            ripple.style.left = e.clientX + 'px';
-            ripple.style.top = e.clientY + 'px';
-            // Size based on viewport
-            const size = Math.max(window.innerWidth, window.innerHeight) / 10;
-            ripple.style.width = ripple.style.height = size + 'px';
-            ripple.style.marginTop = ripple.style.marginLeft = -(size/2) + 'px';
-            document.body.appendChild(ripple);
-            setTimeout(() => ripple.remove(), 600);
         });
-        // E) Copy Code Easter Egg
-        window.copyCodeEasterEgg = function() {
-            navigator.clipboard.writeText("function bridgeLegacyAndAI() { return 'Matteo Bergamelli'; }");
-            alert("📋 Copied to clipboard: A secret function just for you.");
-        }
-        /* ==========================================
-           1. TERMINAL LOADER LOGIC
-           ========================================== */
-        const terminalLines = [
-            "> CONNECTING TO INNOVATION LAB...",
-            "> ANALYZING STACK: SAP+PYTHON+AI...",
-            "> DETECTING PHYGITAL ASSETS...",
-            "> SYNCING NEURAL MESH...",
-            "> ACCESS GRANTED!"
-        ];
-        const terminalEl = document.getElementById('terminal-lines');
-        let lineIndex = 0;
-        function typeWriter() {
-            if (lineIndex < terminalLines.length) {
-                const div = document.createElement('div');
-                div.className = "mb-2 text-[#00ff41] drop-shadow-[0_0_5px_rgba(0,255,65,0.8)] opacity-0 transition-opacity duration-300";
-                div.textContent = terminalLines[lineIndex];
-                terminalEl.appendChild(div);
-                void div.offsetWidth; // Reflow
-                div.style.opacity = "1";
-                lineIndex++;
-                setTimeout(typeWriter, 600);
-            } else {
-                // Finished
-                setTimeout(() => {
-                    document.getElementById('terminal-loader').style.opacity = '0';
-                    document.getElementById('main-content').style.opacity = '1';
-                    document.getElementById('canvas-container').style.opacity = '1';
-                    document.getElementById('status-bar').style.opacity = '1';
-                    // Decrypt Job ID
-                    scrambleText(document.getElementById('job-id-scramble'), "247442889");
-                    setTimeout(() => {
-                        document.getElementById('terminal-loader').style.display = 'none';
-                    }, 500);
-                }, 800);
-            }
-        }
-        // Text Scrambler Function
-        function scrambleText(element, finalString) {
-            let iterations = 0;
-            const possible = "0123456789XYK@#%";
-            const interval = setInterval(() => {
-                element.innerText = finalString
-                    .split("")
-                    .map((letter, index) => {
-                        if (index < iterations) return finalString[index];
-                        return possible[Math.floor(Math.random() * possible.length)];
-                    })
-                    .join("");
-                if (iterations >= finalString.length) clearInterval(interval);
-                iterations += 1/3;
-            }, 30);
-        }
-        window.addEventListener('load', typeWriter);
-        /* ==========================================
-           2. THREE.JS BACKGROUND (Digital Fabric)
-           ========================================== */
-        function initThreeJS() {
-            const container = document.getElementById('canvas-container');
-            const scene = new THREE.Scene();
-            const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100);
-            camera.position.set(0, 5, 10);
-            camera.lookAt(0, 0, 0);
-            const renderer = new THREE.WebGLRenderer({ antialias: false, alpha: true });
-            renderer.setSize(window.innerWidth, window.innerHeight);
-            renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
-            container.appendChild(renderer.domElement);
-            // Create Particles
-            const particleCount = 12000;
-            const geometry = new THREE.BufferGeometry();
-            const positions = new Float32Array(particleCount * 3);
-            const size = 20;
-            const gap = 0.2;
-            const rows = Math.sqrt(particleCount);
-            for (let i = 0; i < particleCount; i++) {
-                const row = Math.floor(i / rows);
-                const col = i % rows;
-                const x = (col * gap) - (rows * gap) / 2;
-                const z = (row * gap) - (rows * gap) / 2;
-                positions[i * 3] = x;
-                positions[i * 3 + 1] = 0;
-                positions[i * 3 + 2] = z;
             }
-            geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
-            const material = new THREE.PointsMaterial({
-                size: 0.05,
-                color: 0x00ff41,
-                transparent: true,
-                opacity: 0.5,
-                sizeAttenuation: true,
-                blending: THREE.AdditiveBlending
-            });
-            const points = new THREE.Points(geometry, material);
-            scene.add(points);
-            // Interaction
-            let mouseX = 0;
-            let mouseY = 0;
-            document.addEventListener('mousemove', (event) => {
-                mouseX = (event.clientX / window.innerWidth) * 2 - 1;
-                mouseY = -(event.clientY / window.innerHeight) * 2 + 1;
-            });
-            // Animation Loop
-            const clock = new THREE.Clock();
-            function animate() {
-                requestAnimationFrame(animate);
-                const time = clock.getElapsedTime();
-                const positions = points.geometry.attributes.position.array;
-                for (let i = 0; i < particleCount; i++) {
-                    const x = positions[i * 3];
-                    const z = positions[i * 3 + 2];
-                    // Wave equation + Mouse Interaction influence
-                    // (Subtle distortion based on mouse position)
-                    const mouseDist = Math.sqrt((x - mouseX * 5)**2 + (z - mouseY * 5)**2);
-                    const interaction = Math.max(0, 3 - mouseDist) * 0.2;
-                    const y =
-                        Math.sin(x * 0.5 + time * 0.5) * 1.5 +
-                        Math.sin(z * 0.3 + time * 0.3) * 1.5 +
-                        Math.sin((x + z) * 0.2 + time) * 0.5 +
-                        Math.sin(time * 2 + mouseDist) * interaction; // Interactive ripple
-                    positions[i * 3 + 1] = y;
-                }
-                points.geometry.attributes.position.needsUpdate = true;
-                points.rotation.y = time * 0.05;
-                renderer.render(scene, camera);
-            }
-            animate();
-            window.addEventListener('resize', () => {
-                camera.aspect = window.innerWidth / window.innerHeight;
-                camera.updateProjectionMatrix();
-                renderer.setSize(window.innerWidth, window.innerHeight);
-            });
-        }
-        initThreeJS();
-        /* ==========================================
-           3. SCROLL REVEAL ANIMATIONS
-           ========================================== */
-        const observer = new IntersectionObserver((entries) => {
-            entries.forEach(entry => {
-                if (entry.isIntersecting) {
-                    entry.target.classList.add('visible');
-                }
-            });
-        }, { threshold: 0.1 });
-        document.querySelectorAll('.reveal-on-scroll').forEach(el => observer.observe(el));
-        /* ==========================================
-           4. UNLOCK SLIDER LOGIC
-           ========================================== */
-        const sliderHandle = document.getElementById('slider-handle');
-        const sliderFill = document.getElementById('slider-fill');
-        const sliderText = document.getElementById('slider-text');
-        const iconArrow = document.getElementById('icon-arrow');
-        const iconLock = document.getElementById('icon-lock');
-        let isDragging = false;
-        let startX = 0;
-        let currentX = 0;
-        const maxDrag = 260;
-        function playClickSound() {
-            // Very short oscillator beep using Web Audio API (no external file needed)
-            const AudioContext = window.AudioContext || window.webkitAudioContext;
-            if (AudioContext) {
-                const audioCtx = new AudioContext();
-                const oscillator = audioCtx.createOscillator();
-                const gainNode = audioCtx.createGain();
-                oscillator.connect(gainNode);
-                gainNode.connect(audioCtx.destination);
-                oscillator.type = 'sine';
-                oscillator.frequency.value = 800;
-                gainNode.gain.setValueAtTime(0.05, audioCtx.currentTime);
-                gainNode.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.1);
-                oscillator.start();
-                oscillator.stop(audioCtx.currentTime + 0.1);
-            }
-        }
-        sliderHandle.addEventListener('mousedown', startDrag);
-        window.addEventListener('mousemove', drag);
-        window.addEventListener('mouseup', endDrag);
-        sliderHandle.addEventListener('touchstart', (e) => startDrag(e.touches[0]));
-        window.addEventListener('touchmove', (e) => drag(e.touches[0]));
-        window.addEventListener('touchend', endDrag);
-        function startDrag(e) {
-            isDragging = true;
-            startX = e.clientX;
-            sliderHandle.style.transition = 'none';
-            sliderFill.style.transition = 'none';
-            playClickSound();
-        }
-        function drag(e) {
-            if (!isDragging) return;
-            let x = e.clientX - startX;
-            if (x < 0) x = 0;
-            if (x > maxDrag) x = maxDrag;
-            currentX = x;
-            updateSliderUI(x);
-        }
-        function endDrag() {
-            if (!isDragging) return;
-            isDragging = false;
-            if (currentX > maxDrag * 0.85) {
-                updateSliderUI(maxDrag);
-                unlockSuccess();
-            } else {
-                sliderHandle.style.transition = 'left 0.3s ease';
-                sliderFill.style.transition = 'width 0.3s ease, opacity 0.3s ease';
-                updateSliderUI(0);
-            }
-        }
-        function updateSliderUI(x) {
-            sliderHandle.style.left = `${x}px`;
-            const percentage = (x / maxDrag);
-            sliderFill.style.width = `${x + 40}px`;
-            sliderFill.style.opacity = 0.1 + (percentage * 0.3);
-            sliderText.style.opacity = 1 - (percentage * 1.5);
-        }
-        function unlockSuccess() {
-            playClickSound();
-            iconArrow.classList.add('hidden');
-            iconLock.classList.remove('hidden');
-            sliderHandle.style.borderColor = '#00ff41';
-            sliderHandle.style.backgroundColor = '#00ff41';
-            iconLock.style.stroke = 'black';
-            // CHANGE: Redirect instead of starting AR
-            setTimeout(() => window.location.href = './ar.html', 500);
-        }
-        /* ==========================================
-           5. AR EXPERIENCE LOGIC
-           ========================================== */
-        const arContainer = document.getElementById('ar-container');
-        const closeArBtn = document.getElementById('close-ar-btn');
-        const arStatusBox = document.getElementById('ar-status-box');
-        function startAR() {
-            arContainer.style.display = 'block';
-            const arScene = document.querySelector('a-scene');
-            if (arScene && arScene.systems['mindar-image-system']) {
-                arScene.systems['mindar-image-system'].start();
-            }
-            const targetEl = document.getElementById('target-entity');
-            const arVideo = document.getElementById('ar-video');
-            if (targetEl) {
-                targetEl.addEventListener('targetFound', () => {
-                    arStatusBox.innerHTML = `
-                        <span class="relative flex h-3 w-3"><span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#00ff41] opacity-75"></span><span class="relative inline-flex rounded-full h-3 w-3 bg-[#00ff41]"></span></span>
-                        <span class="text-sm font-mono font-bold tracking-widest text-[#00ff41]">SIGNAL LOCKED</span>
-                    `;
-                    arStatusBox.classList.add('bg-[#00ff41]/10', 'border-[#00ff41]');
-                    arStatusBox.classList.remove('bg-black/60', 'text-white/60');
-                    if(arVideo) arVideo.play();
-                });
-                targetEl.addEventListener('targetLost', () => {
-                    arStatusBox.innerHTML = `
-                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="animate-pulse"><path d="M3 7V5a2 2 0 0 1 2-2h2"></path><path d="M17 3h2a2 2 0 0 1 2 2v2"></path><path d="M21 17v2a2 2 0 0 1-2 2h-2"></path><path d="M7 21H5a2 2 0 0 1-2-2v-2"></path></svg>
-                        <span class="text-sm font-mono tracking-widest">SCANNING TARGET...</span>
-                    `;
-                    arStatusBox.classList.remove('bg-[#00ff41]/10', 'border-[#00ff41]');
-                    arStatusBox.classList.add('bg-black/60', 'text-white/60');
-                    if(arVideo) arVideo.pause();
-                });
-            }
-        }
-        closeArBtn.addEventListener('click', () => {
-            arContainer.style.display = 'none';
-            const arScene = document.querySelector('a-scene');
-            if (arScene && arScene.systems['mindar-image-system']) {
-                arScene.systems['mindar-image-system'].stop();
-            }
-            const videoFeed = document.querySelector('.mindar-ui-overlay');
-            if (videoFeed) videoFeed.remove();
-            // Reset slider
-            isDragging = false;
-            currentX = 0;
-            iconArrow.classList.remove('hidden');
-            iconLock.classList.add('hidden');
-            sliderHandle.style.backgroundColor = '#0d0d0d';
-            sliderHandle.style.left = '0px';
-            sliderFill.style.width = '0px';
-            sliderFill.style.opacity = '0.1';
-            sliderText.style.opacity = '1';
         });
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <title>AR Video Simple</title>
+    <script src="https://aframe.io/releases/1.4.2/aframe.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.2/dist/mindar-image.prod.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.2/dist/mindar-image-aframe.prod.js"></script>
     <style>
+        body { margin: 0; overflow: hidden; }
+        /* Nasconde il video sorgente dalla vista standard */
+        #vid { position: absolute; top: 0; left: 0; opacity: 0; z-index: -1; pointer-events: none; }
     </style>
 </head>
 <body>
+    <a-scene
+        mindar-image="imageTargetSrc: img/targets.mind; filterMinCF:0.0001; filterBeta: 0.01; uiLoading: no; uiScanning: no;"
+        color-space="sRGB"
+        renderer="colorManagement: true, physicallyCorrectLights"
+        vr-mode-ui="enabled: false"
+        device-orientation-permission-ui="enabled: false">
+        <a-assets>
+            <video id="vid" src="./img/video.mp4" loop muted playsinline webkit-playsinline crossorigin="anonymous"></video>
+        </a-assets>
+        <a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
+        <a-entity id="example-target" mindar-image-target="targetIndex: 0">
+            <a-entity id="ar-video-plane"
+                geometry="primitive: plane; width: 1.25; height: 1"
+                material="src: #vid; shader: flat; transparent: true; opacity: 1"
+                position="0 0 0">
+            </a-entity>
+        </a-entity>
+    </a-scene>
     <script>
+        const video = document.querySelector("#vid");
+        const target = document.querySelector("#example-target");
+        // Quando il target viene trovato -> Play Video
+        target.addEventListener("targetFound", () => {
+            console.log("Target trovato: Play video");
+            video.play();
         });
+        // Quando il target viene perso -> Pause Video
+        target.addEventListener("targetLost", () => {
+            console.log("Target perso: Pause video");
+            video.pause();
         });
+        // FIX AUDIO: I browser moderni bloccano l'audio senza interazione utente.
+        // Cliccando ovunque sullo schermo, sblocchiamo l'audio del video.
+        document.body.addEventListener('click', () => {
+            if(video.muted) {
+                video.muted = false;
+                console.log("Audio attivato tramite tocco utente");
             }
         });
     </script>
 </body>
 </html>