<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login - RestPO SaaS</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Alpine JS -->
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <!-- Google Font: Outfit -->
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <!-- FontAwesome Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        * {
            font-family: 'Outfit', sans-serif;
        }
        body {
            background: #030408;
            color: #f8fafc;
            overflow-x: hidden;
        }
        /* Glow Accents */
        .glow-purple {
            box-shadow: 0 25px 50px rgba(139, 92, 246, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.06);
        }
        .glow-input:focus-within {
            box-shadow: 0 0 15px rgba(139, 92, 246, 0.2);
            border-color: rgba(139, 92, 246, 0.4);
            background: rgba(11, 13, 27, 0.9) !important;
        }
        .glass-panel {
            background: rgba(8, 10, 20, 0.7);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border: 1px solid rgba(255, 255, 255, 0.06);
        }
        /* Animated Background Gradients (Pastel Meshes - Responsive size for mobile performance) */
        .bg-mesh {
            position: absolute;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            filter: blur(80px);
            z-index: 0;
            pointer-events: none;
            opacity: 0.20;
            animation: floatMesh 12s ease-in-out infinite alternate;
        }
        @media (min-width: 1024px) {
            .bg-mesh {
                width: 700px;
                height: 700px;
                filter: blur(140px);
                opacity: 0.25;
            }
        }
        @keyframes floatMesh {
            0% { transform: translate(0, 0) scale(1); }
            100% { transform: translate(60px, 40px) scale(1.15); }
        }
        /* Glass Card Border Animation */
        .animated-border {
            position: relative;
        }
        .animated-border::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 2.2rem;
            padding: 1.5px;
            background: linear-gradient(135deg, rgba(139, 92, 246, 0.4), rgba(255, 255, 255, 0.05), rgba(6, 182, 212, 0.4));
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
        }

        /* Entrance Animations */
        .animate-slide-up {
            opacity: 0;
            transform: translateY(15px);
            animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }
        .delay-1 { animation-delay: 0.1s; }
        .delay-2 { animation-delay: 0.2s; }
        .delay-3 { animation-delay: 0.3s; }
        .delay-4 { animation-delay: 0.4s; }

        @keyframes slideUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    </style>
</head>
<body class="min-h-screen flex relative overflow-x-hidden overflow-y-auto lg:overflow-hidden bg-[#030408]">

    <!-- Decorative Gradient Meshes (Subtle Cyber Fades) -->
    <div class="bg-mesh bg-gradient-to-br from-purple-900/30 to-indigo-850/15 top-[-10%] left-[-10%]"></div>
    <div class="bg-mesh bg-gradient-to-tr from-cyan-900/15 to-teal-850/5 bottom-[-15%] left-[20%]"></div>
    <div class="bg-mesh bg-gradient-to-br from-blue-900/20 to-indigo-850/15 bottom-[10%] right-[-10%]"></div>

    <!-- HTML5 Video Background Layer (Increased to 45% for high clarity and premium visibility) -->
    <video id="bg-video" autoplay muted loop playsinline class="absolute inset-0 w-full h-full object-cover z-0 opacity-45 pointer-events-none">
        <source src="/login-bg.webm" type="video/webm">
        <source src="login-bg.webm" type="video/webm">
    </video>
    
    <!-- Premium subtle dark shading to safeguard form text legibility without washing out the video -->
    <div class="absolute inset-0 z-0 bg-black/15 pointer-events-none"></div>

    <!-- Background 3D Canvas (Soft, interactive digital network at 35%) -->
    <div id="canvas-container" class="absolute inset-0 z-0 opacity-35 pointer-events-none"></div>

    <!-- ═══ SPLIT LAYOUT ═══ -->
    <div class="w-full min-h-screen flex z-10 flex-col lg:flex-row">
        
        <!-- ── LEFT COLUMN: Login Form (100% on Mobile, 42% on Desktop, bg-transparent to display bg video crisply) ── -->
        <div class="w-full lg:w-[42%] xl:w-[38%] flex flex-col justify-between p-4 sm:p-8 lg:p-12 relative min-h-screen bg-transparent">
            
            <!-- Top Branding (Centered on mobile, left-aligned on desktop) -->
            <div class="flex items-center justify-center lg:justify-start gap-3 animate-slide-up">
                <div class="w-10 h-10 rounded-xl bg-gradient-to-tr from-purple-600 to-indigo-650 flex items-center justify-center shadow-md shadow-purple-500/20">
                    <i class="fas fa-utensils text-white text-lg"></i>
                </div>
                <div>
                    <h1 class="text-xl font-black text-white tracking-wider leading-none">RestPO</h1>
                    <span class="text-[10px] text-purple-400 font-extrabold uppercase tracking-widest leading-none">SaaS Platform</span>
                </div>
            </div>

            <!-- Mobile Character View (Optimized sizing for high-end device responsiveness) -->
            <div class="flex lg:hidden justify-center mt-4 mb-1 animate-slide-up delay-1">
                <div class="character-holder w-[140px] h-[140px] sm:w-[170px] sm:h-[170px]"></div>
            </div>

            <!-- Main Form Card -->
            <div class="my-auto py-4">
                <div class="mb-6 lg:mb-8 text-center lg:text-left animate-slide-up delay-1">
                    <h2 class="text-3xl lg:text-4xl font-black text-white tracking-tight leading-tight">Welcome Back</h2>
                    <p class="text-slate-400 text-sm mt-2">Enter your credentials to manage your restaurant branch.</p>
                </div>

                <!-- PHP Error Alerts -->
                <?php if (isset($_SESSION['error'])): ?>
                    <div class="bg-red-500/10 border border-red-500/20 text-red-300 p-4 mb-6 rounded-2xl flex items-start gap-3 shadow-md animate-bounce" role="alert">
                        <i class="fas fa-circle-exclamation text-red-400 text-lg mt-0.5"></i>
                        <div>
                            <p class="text-sm font-bold">Authentication Failed</p>
                            <p class="text-xs text-red-300 mt-0.5"><?php echo htmlspecialchars($_SESSION['error']); unset($_SESSION['error']); ?></p>
                        </div>
                    </div>
                <?php endif; ?>

                <!-- Form Panel -->
                <div class="glass-panel animated-border rounded-[1.8rem] sm:rounded-[2.2rem] p-5 sm:p-8 glow-purple animate-slide-up delay-2">
                    <form action="/login" method="POST" @submit="loading = true" class="space-y-4" x-data="{ loading: false, showPass: false }">
                        
                        <!-- Email Input -->
                        <div class="space-y-1.5">
                            <label for="email" class="block text-xs font-bold uppercase tracking-wider text-slate-400">Email Address</label>
                            <div class="glow-input flex items-center gap-3 w-full px-4 py-3 rounded-xl border border-white/10 bg-white/[0.02] backdrop-blur-sm transition duration-200">
                                <i class="far fa-envelope text-slate-500 text-sm"></i>
                                <input type="email" id="email" name="email" required 
                                    class="w-full text-white text-sm outline-none bg-transparent placeholder-slate-600 placeholder-slate-500"
                                    placeholder="admin@restpo.com">
                            </div>
                        </div>

                        <!-- Password Input -->
                        <div class="space-y-1.5">
                            <div class="flex justify-between items-center">
                                <label for="password" class="block text-xs font-bold uppercase tracking-wider text-slate-400">Password</label>
                                <a href="#" class="text-xs text-purple-400 hover:text-purple-300 transition font-bold">Forgot Password?</a>
                            </div>
                            <div class="glow-input flex items-center gap-3 w-full px-4 py-3 rounded-xl border border-white/10 bg-white/[0.02] backdrop-blur-sm transition duration-200">
                                <i class="fas fa-lock text-slate-500 text-sm"></i>
                                <input :type="showPass ? 'text' : 'password'" id="password" name="password" required 
                                    class="w-full text-white text-sm outline-none bg-transparent placeholder-slate-650 placeholder-slate-500"
                                    placeholder="••••••••">
                                <button type="button" @click="showPass = !showPass" class="text-slate-500 hover:text-slate-350 transition">
                                    <i :class="showPass ? 'far fa-eye' : 'far fa-eye-slash'" class="text-xs"></i>
                                </button>
                            </div>
                        </div>

                        <!-- Remember Me -->
                        <div class="flex items-center gap-2 py-0.5">
                            <input type="checkbox" id="remember" name="remember" class="w-4 h-4 rounded border-white/10 text-purple-650 focus:ring-purple-500 bg-white/[0.02]">
                            <label for="remember" class="text-xs font-semibold text-slate-400 select-none cursor-pointer">Remember me on this device</label>
                        </div>

                        <!-- Submit Button -->
                        <button type="submit" 
                            class="w-full bg-gradient-to-r from-purple-600 to-indigo-650 hover:from-purple-500 hover:to-indigo-500 text-white font-bold py-3.5 px-4 rounded-xl shadow-md shadow-purple-650/20 transition duration-200 flex justify-center items-center relative overflow-hidden group"
                            :class="{ 'opacity-75 cursor-not-allowed': loading }" :disabled="loading">
                            <span x-show="!loading" class="flex items-center gap-2">
                                Sign In <i class="fas fa-arrow-right text-xs group-hover:translate-x-1 transition"></i>
                            </span>
                            <div x-show="loading" style="display: none;" class="flex items-center gap-2">
                                <svg class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                </svg>
                                <span>Authenticating...</span>
                            </div>
                        </button>
                    </form>
                </div>

                <div class="mt-6 text-center text-sm text-slate-500 animate-slide-up delay-3">
                    <p>Don't have an account? <a href="#" class="text-purple-400 hover:text-purple-300 font-bold transition">Contact Sales</a></p>
                </div>
            </div>

            <!-- Footer & Secure Badges -->
            <div class="flex flex-col gap-4 animate-slide-up delay-4">
                <!-- Trust Secure Badges (Centered on mobile, left-aligned on desktop, wraps cleanly on narrow screens) -->
                <div class="flex flex-wrap items-center justify-center lg:justify-start gap-x-4 gap-y-2 text-[10px] text-slate-400 font-bold border-t border-white/5 pt-4">
                    <span class="flex items-center gap-1.5 whitespace-nowrap"><i class="fas fa-shield-halved text-purple-400"></i> SSL SECURED</span>
                    <span class="flex items-center gap-1.5 whitespace-nowrap"><i class="fas fa-database text-purple-400"></i> SANDBOX SCOPED</span>
                    <span class="flex items-center gap-1.5 whitespace-nowrap"><i class="fas fa-key text-purple-400"></i> SECURE SESSION</span>
                </div>
                
                <!-- Copyright Footer (Centered on mobile, left-aligned on desktop) -->
                <div class="text-center lg:text-left text-xs text-slate-500 font-medium">
                    <span>&copy; 2026 RestPO. Powered by <span class="text-purple-500/80 font-bold">RESTPO SaaS</span></span>
                </div>
            </div>
        </div>
        
        <!-- ── RIGHT COLUMN: Slogans & Desktop Character (55% on Desktop, Hidden on Mobile) ── -->
        <div class="hidden lg:flex lg:w-[55%] relative flex-col justify-between p-16 overflow-hidden bg-black/10 border-left border-white/5">
            
            <!-- Desktop Character View Container (Fitted with a very subtle, high-end 3D lag turn) -->
            <div class="m-auto z-10 flex flex-col items-center justify-center relative">
                <div class="character-holder w-[290px] h-[290px] transition-transform duration-200 ease-out" style="transform-style: preserve-3d; transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);"></div>
            </div>

            <!-- Slogans & Badges -->
            <div class="self-end z-10 absolute top-16 right-16">
                <div class="glass-panel px-4 py-2 rounded-full text-xs font-bold text-purple-300 flex items-center gap-2 border border-white/10 shadow-sm">
                    <span class="w-2 h-2 rounded-full bg-emerald-500 animate-ping"></span>
                    <span>v2.8 Production Ready</span>
                </div>
            </div>

            <!-- Slogans at Bottom -->
            <div class="z-10 mt-auto">
                <div class="max-w-xl">
                    <h2 class="text-4xl xl:text-5xl font-black text-white leading-tight tracking-tight">
                        The Future of <span class="bg-gradient-to-r from-purple-400 via-pink-400 to-blue-400 bg-clip-text text-transparent">Restaurant Operations</span>
                    </h2>
                    <p class="text-slate-400 text-sm md:text-base mt-4 leading-relaxed">
                        RestPO streamlines point-of-sale operations, digital kitchen préparatifs, and real-time waiter analytics into a single high-performance cloud panel. Experience zero latency multi-tenant branch management.
                    </p>
                </div>

                <!-- Feature Badges -->
                <div class="grid grid-cols-3 gap-4 mt-8 max-w-lg">
                    <div class="glass-panel p-4 rounded-2xl border border-white/5 flex flex-col gap-2 hover:border-purple-500/40 transition group shadow-sm">
                        <i class="fas fa-bolt text-purple-400 text-lg group-hover:scale-110 transition"></i>
                        <span class="text-xs font-bold text-white leading-none">Instant KOT</span>
                        <span class="text-[10px] text-slate-500">Real-time prep</span>
                    </div>
                    <div class="glass-panel p-4 rounded-2xl border border-white/5 flex flex-col gap-2 hover:border-purple-500/40 transition group shadow-sm">
                        <i class="fas fa-chart-pie text-emerald-400 text-lg group-hover:scale-110 transition"></i>
                        <span class="text-xs font-bold text-white leading-none">Smart Analytics</span>
                        <span class="text-[10px] text-slate-500">Zero reload reports</span>
                    </div>
                    <div class="glass-panel p-4 rounded-2xl border border-white/5 flex flex-col gap-2 hover:border-purple-500/40 transition group shadow-sm">
                        <i class="fas fa-shield-halved text-blue-400 text-lg group-hover:scale-110 transition"></i>
                        <span class="text-xs font-bold text-white leading-none">SaaS Security</span>
                        <span class="text-[10px] text-slate-500">Encrypted sessions</span>
                    </div>
                </div>
            </div>
            
        </div>
        
    </div>

    <!-- Reusable Chef Illustration Node (Sleek Cyber Chef visored avatar with high-end luxury styling) -->
    <div id="chef-illustration-template" style="display:none">
        <svg width="100%" height="100%" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg" class="filter drop-shadow-[0_20px_45px_rgba(139,92,246,0.15)] select-none" style="opacity: 0.88;">
            <!-- Definitions for premium cyberpunk gradients and filters -->
            <defs>
                <!-- Titanium/Carbon Metallic Plate Gradient -->
                <linearGradient id="cyberMetal" x1="0" y1="0" x2="300" y2="300" gradientUnits="userSpaceOnUse">
                    <stop offset="0%" stop-color="#2d1b4e" />
                    <stop offset="35%" stop-color="#121324" />
                    <stop offset="70%" stop-color="#0a0b16" />
                    <stop offset="100%" stop-color="#180e2b" />
                </linearGradient>
                <!-- Gold Accent Gradient -->
                <linearGradient id="goldAccent" x1="0" y1="0" x2="100" y2="100" gradientUnits="userSpaceOnUse">
                    <stop offset="0%" stop-color="#fbbf24" />
                    <stop offset="100%" stop-color="#d97706" />
                </linearGradient>
                <!-- Translucent Cyan Glass Gradient -->
                <linearGradient id="cyberGlass" x1="0" y1="0" x2="300" y2="300" gradientUnits="userSpaceOnUse">
                    <stop offset="0%" stop-color="rgba(34,211,238,0.25)" />
                    <stop offset="100%" stop-color="rgba(139,92,246,0.05)" />
                </linearGradient>
                <!-- Dark Carbon Visor Background -->
                <linearGradient id="visorBg" x1="0" y1="120" x2="0" y2="155" gradientUnits="userSpaceOnUse">
                    <stop offset="0%" stop-color="#090a12" />
                    <stop offset="50%" stop-color="#16182c" />
                    <stop offset="100%" stop-color="#07080e" />
                </linearGradient>
                <!-- Neon Cyan Visor Glow -->
                <linearGradient id="cyanGlowGrad" x1="0" y1="0" x2="300" y2="0" gradientUnits="userSpaceOnUse">
                    <stop offset="0%" stop-color="#06b6d4" />
                    <stop offset="100%" stop-color="#8b5cf6" />
                </linearGradient>
                <!-- High-quality Drop Shadows & Neon Glow Filters -->
                <filter id="neonGlow" x="-20%" y="-20%" width="140%" height="140%">
                    <feGaussianBlur stdDeviation="3" result="blur" />
                    <feComposite in="SourceGraphic" in2="blur" operator="over" />
                </filter>
                <filter id="intenseGlow" x="-50%" y="-50%" width="200%" height="200%">
                    <feGaussianBlur stdDeviation="6" result="blur1" />
                    <feGaussianBlur stdDeviation="2" result="blur2" />
                    <feMerge>
                        <feMergeNode in="blur1" />
                        <feMergeNode in="blur2" />
                        <feMergeNode in="SourceGraphic" />
                    </feMerge>
                </filter>
            </defs>

            <!-- ══ BACKGROUND HUD READOUT ══ -->
            <!-- Extremely thin, elegant technological overlay behind the character -->
            <circle cx="150" cy="150" r="115" stroke="rgba(139, 92, 246, 0.08)" stroke-width="1" stroke-dasharray="4,8" />
            <circle cx="150" cy="150" r="130" stroke="rgba(6, 182, 212, 0.06)" stroke-width="1.5" />
            <path d="M35 150 H55 M245 150 H265 M150 35 V55 M150 245 V265" stroke="rgba(6, 182, 212, 0.15)" stroke-width="1" />

            <!-- ══ ROBOTIC COLLAR & SHOULDERS ══ -->
            <!-- Base metal shoulders with intricate structural cuts -->
            <path d="M80 235 L58 290 H242 L220 235 L175 222 L150 228 L125 222 Z" fill="url(#cyberMetal)" stroke="rgba(139, 92, 246, 0.3)" stroke-width="1.5" />
            <!-- Carbon plate shoulder overlays -->
            <path d="M58 290 L75 248 L110 232 L95 290 Z" fill="#0b0c16" stroke="rgba(6, 182, 212, 0.2)" stroke-width="1" />
            <path d="M242 290 L225 248 L190 232 L205 290 Z" fill="#0b0c16" stroke="rgba(6, 182, 212, 0.2)" stroke-width="1" />
            <!-- Glowing circuit connections -->
            <path d="M115 232 V265 L135 282 V290" stroke="#06b6d4" stroke-width="1.5" stroke-linecap="round" opacity="0.7" filter="url(#neonGlow)" />
            <path d="M185 232 V265 L165 282 V290" stroke="#8b5cf6" stroke-width="1.5" stroke-linecap="round" opacity="0.7" filter="url(#neonGlow)" />
            <!-- Gold joint details -->
            <circle cx="110" cy="232" r="3.5" fill="url(#goldAccent)" />
            <circle cx="190" cy="232" r="3.5" fill="url(#goldAccent)" />

            <!-- Joint neck connector with mechanical ridges -->
            <rect x="135" y="175" width="30" height="22" rx="3" fill="#07080e" stroke="rgba(139, 92, 246, 0.4)" stroke-width="1.5" />
            <line x1="140" y1="180" x2="160" y2="180" stroke="rgba(6, 182, 212, 0.4)" stroke-width="1" />
            <line x1="140" y1="186" x2="160" y2="186" stroke="rgba(6, 182, 212, 0.4)" stroke-width="1" />
            <line x1="140" y1="192" x2="160" y2="192" stroke="rgba(6, 182, 212, 0.4)" stroke-width="1" />

            <!-- Neck Base Collar -->
            <path d="M120 195 C120 195, 135 205, 150 205 C165 205, 180 195, 180 195 L184 205 H116 Z" fill="#121324" stroke="rgba(139, 92, 246, 0.3)" stroke-width="1" />

            <!-- ══ HEAD CHASSIS ══ -->
            <!-- Titanium Head Base -->
            <path d="M104 140 C104 110, 120 90, 150 90 C180 90, 196 110, 196 140 C196 170, 180 182, 150 182 C120 182, 104 170, 104 140 Z" fill="url(#cyberMetal)" stroke="rgba(139, 92, 246, 0.45)" stroke-width="2" />
            
            <!-- Side ear-cap mechanical pods -->
            <rect x="96" y="128" width="8" height="24" rx="4" fill="#0b0c16" stroke="rgba(6, 182, 212, 0.5)" stroke-width="1" />
            <rect x="196" y="128" width="8" height="24" rx="4" fill="#0b0c16" stroke="rgba(6, 182, 212, 0.5)" stroke-width="1" />
            <!-- Micro light on ear-cap -->
            <circle cx="100" cy="140" r="1.5" fill="#22d3ee" filter="url(#neonGlow)" />
            <circle cx="200" cy="140" r="1.5" fill="#22d3ee" filter="url(#neonGlow)" />

            <!-- ══ FUTURISTIC CYBER CHEF HAT ══ -->
            <!-- High-tech structural crown hat base -->
            <path d="M110 90 L190 90 L182 62 H118 Z" fill="#090a12" stroke="rgba(139, 92, 246, 0.5)" stroke-width="1.5" />
            <!-- Elegant gold crown divider line -->
            <path d="M110 88 H190" stroke="url(#goldAccent)" stroke-width="2.5" />
            
            <!-- Main pleated body of the cyber hat with faceted technical cuts -->
            <path d="M118 62 L106 38 C115 22, 135 15, 150 32 C165 15, 185 22, 194 38 L182 62 Z" fill="rgba(13, 14, 28, 0.85)" stroke="rgba(139, 92, 246, 0.5)" stroke-width="1.5" />
            
            <!-- Sleek laser-line grids and panel subdivisions inside the chef hat -->
            <path d="M132 62 L124 35" stroke="rgba(6, 182, 212, 0.4)" stroke-width="1" stroke-dasharray="2,2" />
            <path d="M150 62 V32" stroke="url(#goldAccent)" stroke-width="1.5" />
            <path d="M168 62 L176 35" stroke="rgba(6, 182, 212, 0.4)" stroke-width="1" stroke-dasharray="2,2" />
            
            <!-- Glowing energy core inside the chef hat -->
            <path d="M118 62 C130 50, 170 50, 182 62" fill="none" stroke="#d946ef" stroke-width="1.5" opacity="0.65" filter="url(#neonGlow)" />

            <!-- ══ HIGH-END TRANSPARENT CYBER VISOR ══ -->
            <!-- Thick visor housing plate -->
            <rect x="106" y="118" width="88" height="32" rx="16" fill="url(#visorBg)" stroke="rgba(139, 92, 246, 0.6)" stroke-width="1.5" />
            <!-- Futuristic cyan neon framing outline -->
            <rect x="108" y="120" width="84" height="28" rx="14" fill="none" stroke="url(#cyanGlowGrad)" stroke-width="2" filter="url(#neonGlow)" />

            <!-- Visor horizontal glass glares/scanning lines -->
            <line x1="120" y1="124" x2="180" y2="124" stroke="rgba(6, 182, 212, 0.25)" stroke-width="1" />
            <line x1="114" y1="144" x2="186" y2="144" stroke="rgba(139, 92, 246, 0.2)" stroke-width="1" />

            <!-- ── Dynamic Moving Eye Pupils ── -->
            <!-- Left pupil socket with HUD coordinates -->
            <g transform="translate(126, 134)">
                <!-- Compass dial/outer coordinate ring -->
                <circle cx="0" cy="0" r="10" fill="none" stroke="rgba(6, 182, 212, 0.2)" stroke-width="0.75" />
                <circle cx="0" cy="0" r="10" fill="none" stroke="#06b6d4" stroke-width="1" stroke-dasharray="3,3" />
                <!-- Glowing dynamic eye-pupil -->
                <g class="eye-pupil" style="transition: transform 0.08s ease-out;">
                    <!-- Concentric tech pupil -->
                    <circle cx="0" cy="0" r="5.5" fill="rgba(6, 182, 212, 0.25)" />
                    <circle cx="0" cy="0" r="3.5" fill="#00f0ff" filter="url(#intenseGlow)" />
                    <circle cx="-1" cy="-1" r="1" fill="#ffffff" />
                </g>
            </g>

            <!-- Right pupil socket with HUD coordinates -->
            <g transform="translate(174, 134)">
                <!-- Compass dial/outer coordinate ring -->
                <circle cx="0" cy="0" r="10" fill="none" stroke="rgba(6, 182, 212, 0.2)" stroke-width="0.75" />
                <circle cx="0" cy="0" r="10" fill="none" stroke="#06b6d4" stroke-width="1" stroke-dasharray="3,3" />
                <!-- Glowing dynamic eye-pupil -->
                <g class="eye-pupil" style="transition: transform 0.08s ease-out;">
                    <!-- Concentric tech pupil -->
                    <circle cx="0" cy="0" r="5.5" fill="rgba(6, 182, 212, 0.25)" />
                    <circle cx="0" cy="0" r="3.5" fill="#00f0ff" filter="url(#intenseGlow)" />
                    <circle cx="-1" cy="-1" r="1" fill="#ffffff" />
                </g>
            </g>

            <!-- Specular light reflections overlay on Visor glass -->
            <path d="M112 122 Q130 114, 158 122" fill="none" stroke="rgba(255, 255, 255, 0.4)" stroke-width="1" stroke-linecap="round" />
            <path d="M116 126 Q128 122, 140 126" fill="none" stroke="rgba(255, 255, 255, 0.2)" stroke-width="0.75" stroke-linecap="round" />

            <!-- HUD Target locks in corner of visor -->
            <path d="M109 130 V125 H114" stroke="#06b6d4" stroke-width="1" />
            <path d="M191 130 V125 H186" stroke="#06b6d4" stroke-width="1" />
            <path d="M109 138 V143 H114" stroke="#06b6d4" stroke-width="1" />
            <path d="M191 138 V143 H186" stroke="#06b6d4" stroke-width="1" />

            <!-- ══ FLOATING HOLOGRAPHIC PLATTER ══ -->
            <!-- Bottom structural energy platter ring (Cyan & Purple Neon) -->
            <ellipse cx="150" cy="254" rx="100" ry="10" fill="url(#cyberGlass)" stroke="url(#cyanGlowGrad)" stroke-width="2" filter="url(#neonGlow)" />
            
            <!-- Secondary concentric projection orbit -->
            <ellipse cx="150" cy="254" rx="112" ry="13" fill="none" stroke="rgba(139, 92, 246, 0.25)" stroke-width="1" stroke-dasharray="5,5" />
            <ellipse cx="150" cy="254" rx="85" ry="7" fill="none" stroke="rgba(6, 182, 212, 0.4)" stroke-width="1" />

            <!-- Floating Orbital Culinary Galaxy/Core in center of Platter -->
            <g transform="translate(150, 238)">
                <!-- Laser alignment grid -->
                <line x1="-35" y1="16" x2="35" y2="16" stroke="rgba(6, 182, 212, 0.3)" stroke-width="0.75" stroke-dasharray="2,2" />
                
                <!-- Rotating technical wireframe circles -->
                <ellipse cx="0" cy="0" rx="22" ry="7" fill="none" stroke="#8b5cf6" stroke-width="1.25" stroke-dasharray="4,4" class="animate-spin" style="animation-duration: 8s;" />
                <ellipse cx="0" cy="0" rx="30" ry="10" fill="none" stroke="#06b6d4" stroke-width="1.5" stroke-dasharray="6,2" class="animate-spin" style="animation-duration: 14s; direction: reverse;" />
                
                <!-- Radiant culinary glowing star core -->
                <circle cx="0" cy="-2" r="6" fill="#d946ef" filter="url(#intenseGlow)" />
                <circle cx="0" cy="-2" r="2.5" fill="#ffffff" />
                
                <!-- Tiny floating sub-orbital atoms -->
                <circle cx="-16" cy="-8" r="2" fill="#22d3ee" filter="url(#neonGlow)" class="animate-bounce" style="animation-duration: 3s;" />
                <circle cx="18" cy="-5" r="1.5" fill="#fbbf24" filter="url(#neonGlow)" class="animate-bounce" style="animation-duration: 4s;" />
                <circle cx="8" cy="-12" r="2.5" fill="#a78bfa" filter="url(#neonGlow)" class="animate-bounce" style="animation-duration: 2.5s;" />
            </g>

            <!-- Holographic rising power steam lines -->
            <path d="M125 240 Q130 220, 134 225 T138 210" fill="none" stroke="#d946ef" stroke-width="2" stroke-linecap="round" opacity="0.6" filter="url(#neonGlow)" />
            <path d="M175 240 Q170 220, 166 225 T162 210" fill="none" stroke="#06b6d4" stroke-width="2" stroke-linecap="round" opacity="0.6" filter="url(#neonGlow)" />
        </svg>
    </div>

    <!-- Three.js (3D Graphics Rendering Library) -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
        // ── DYNAMIC RESPONSIVE ILLUSTRATION INJECTION ──
        const template = document.getElementById('chef-illustration-template').innerHTML;
        document.querySelectorAll('.character-holder').forEach(el => {
            el.innerHTML = template;
        });

        // ── THREE.JS WebGL PREMIUM DIGITAL NETWORK BACKGROUND ──
        const container = document.getElementById('canvas-container');
        if (container) {
            const scene = new THREE.Scene();
            
            // Camera
            const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100);
            camera.position.z = 12;
            
            // Renderer
            const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
            container.appendChild(renderer.domElement);
            
            // Query the existing HTML5 Video from DOM
            const video = document.getElementById('bg-video');
            let videoTexture = null;
            if (video) {
                video.play().catch(e => console.log('Video autoplay blocked or delayed'));
                videoTexture = new THREE.VideoTexture(video);
                videoTexture.minFilter = THREE.LinearFilter;
                videoTexture.magFilter = THREE.LinearFilter;
            }
            
            // Central Glass Sphere refracting the video texture (Highly transparent, thin shell)
            const mainGeometry = new THREE.SphereGeometry(1.8, 64, 64);
            const mainMaterial = new THREE.MeshPhysicalMaterial({
                color: 0xffffff,
                roughness: 0.08,
                metalness: 0.1,
                transmission: 0.98,
                ior: 1.45,
                reflectivity: 0.95,
                transparent: true,
                opacity: 0.15, // Extremely subtle, elegant glass look
                clearcoat: 1.0,
                clearcoatRoughness: 0.05,
                envMap: videoTexture || null,
                envMapIntensity: videoTexture ? 2.0 : 0,
                side: THREE.DoubleSide
            });
            const mainMesh = new THREE.Mesh(mainGeometry, mainMaterial);
            scene.add(mainMesh);

            // Double Gyroscopic Rings around the central sphere
            // Outer Ring: Sleek violet translucent ribbon
            const ringGeometry = new THREE.TorusGeometry(2.4, 0.05, 16, 100);
            const ringMaterial = new THREE.MeshPhysicalMaterial({
                color: 0x8b5cf6, // Purple
                roughness: 0.15,
                metalness: 0.2,
                transmission: 0.85,
                transparent: true,
                opacity: 0.16,
                map: videoTexture || null
            });
            const ringMesh = new THREE.Mesh(ringGeometry, ringMaterial);
            ringMesh.rotation.x = Math.PI / 3;
            scene.add(ringMesh);

            // Inner Ring: Thin cyan mechanical wireframe ring
            const innerRingGeometry = new THREE.TorusGeometry(2.1, 0.02, 8, 80);
            const innerRingMaterial = new THREE.MeshBasicMaterial({
                color: 0x06b6d4, // Cyan
                transparent: true,
                opacity: 0.15,
                wireframe: true
            });
            const innerRingMesh = new THREE.Mesh(innerRingGeometry, innerRingMaterial);
            innerRingMesh.rotation.x = -Math.PI / 4;
            scene.add(innerRingMesh);
            
            // 3D Ultra-Premium Glass & Wireframe Network Elements
            const particles = [];
            const particleMaterials = [
                // Translucent violet glass
                new THREE.MeshPhysicalMaterial({
                    color: 0x8b5cf6,
                    roughness: 0.1,
                    metalness: 0.1,
                    transmission: 0.9,
                    transparent: true,
                    opacity: 0.16,
                    clearcoat: 1.0,
                    envMap: videoTexture || null
                }),
                // Translucent cyan glass
                new THREE.MeshPhysicalMaterial({
                    color: 0x06b6d4,
                    roughness: 0.1,
                    metalness: 0.1,
                    transmission: 0.9,
                    transparent: true,
                    opacity: 0.16,
                    clearcoat: 1.0,
                    envMap: videoTexture || null
                }),
                // Pure frosted crystal
                new THREE.MeshPhysicalMaterial({
                    color: 0xffffff,
                    roughness: 0.2,
                    metalness: 0.1,
                    transmission: 0.95,
                    transparent: true,
                    opacity: 0.12,
                    clearcoat: 1.0,
                    envMap: videoTexture || null
                })
            ];
            
            const boxGeom = new THREE.BoxGeometry(0.35, 0.35, 0.35);
            const sphereGeom = new THREE.SphereGeometry(0.18, 16, 16);
            const torusGeom = new THREE.TorusGeometry(0.28, 0.04, 8, 24);
            const coneGeom = new THREE.ConeGeometry(0.2, 0.4, 16);
            
            for (let i = 0; i < 35; i++) {
                const mat = particleMaterials[Math.floor(Math.random() * particleMaterials.length)].clone();
                
                // Add wireframe styles dynamically to select particles for a sophisticated tech mesh aesthetic
                const rWire = Math.random();
                if (rWire < 0.25) {
                    mat.wireframe = true;
                    mat.opacity = 0.22;
                }
                
                let geom;
                const r = Math.random();
                if (r < 0.25) geom = boxGeom;
                else if (r < 0.5) geom = sphereGeom;
                else if (r < 0.75) geom = torusGeom;
                else geom = coneGeom;
                
                const mesh = new THREE.Mesh(geom, mat);
                
                mesh.position.set(
                    (Math.random() - 0.5) * 16,
                    (Math.random() - 0.5) * 12,
                    (Math.random() - 0.5) * 5
                );
                
                mesh.rotation.set(Math.random() * 3, Math.random() * 3, Math.random() * 3);
                const scale = 0.5 + Math.random() * 1.0;
                mesh.scale.set(scale, scale, scale);
                
                mesh.userData = {
                    speedX: (Math.random() - 0.5) * 0.003,
                    speedY: (Math.random() - 0.5) * 0.003,
                    rotX: (Math.random() - 0.5) * 0.006,
                    rotY: (Math.random() - 0.5) * 0.006,
                    offset: Math.random() * 100
                };
                
                scene.add(mesh);
                particles.push(mesh);
            }
            
            // Ambient Lighting
            const ambientLight = new THREE.AmbientLight(0xffffff, 1.2);
            scene.add(ambientLight);
            
            // Directional Light
            const dirLight = new THREE.DirectionalLight(0xffffff, 1.0);
            dirLight.position.set(6, 10, 6);
            scene.add(dirLight);
            
            // Cursor Glowing Spot Light (Subtle Indigo)
            const cursorLight = new THREE.PointLight(0x6366f1, 3.5, 30);
            cursorLight.position.set(0, 0, 5);
            scene.add(cursorLight);
            
            // Mouse Interaction Tracker
            let mouseX = 0, mouseY = 0;
            let targetX = 0, targetY = 0;
            
            window.addEventListener('mousemove', (e) => {
                // 1. Math for Three.js camera parallax
                mouseX = (e.clientX - window.innerWidth / 2) / 100;
                mouseY = -(e.clientY - window.innerHeight / 2) / 100;
                
                cursorLight.position.x = mouseX * 1.8;
                cursorLight.position.y = mouseY * 1.8;
                
                // 2. Normalized 3D head-tilt and parallax rotation strictly capped at a subtle, luxury 2.5deg
                const normX = (e.clientX - window.innerWidth / 2) / (window.innerWidth / 2);
                const normY = -(e.clientY - window.innerHeight / 2) / (window.innerHeight / 2);
                
                const holders = document.querySelectorAll('.character-holder');
                holders.forEach(el => {
                    const maxTilt = 2.5; 
                    const tiltX = -normY * maxTilt;
                    const tiltY = normX * maxTilt;
                    el.style.transform = `perspective(1000px) rotateX(${tiltX}deg) rotateY(${tiltY}deg) scale(1.01)`;
                });
                
                // 3. Mathematical trigonometry for precise, smooth eye-pupil tracking
                const pupils = document.querySelectorAll('.eye-pupil');
                pupils.forEach(pupil => {
                    const rect = pupil.getBoundingClientRect();
                    const pupilX = rect.left + rect.width / 2;
                    const pupilY = rect.top + rect.height / 2;
                    
                    const dx = e.clientX - pupilX;
                    const dy = e.clientY - pupilY;
                    const angle = Math.atan2(dy, dx);
                    
                    const maxDist = 3.5; // Constrain within premium technical visor limits
                    const distance = Math.min(maxDist, Math.sqrt(dx * dx + dy * dy) / 30);
                    const offsetX = Math.cos(angle) * distance;
                    const offsetY = Math.sin(angle) * distance;
                    
                    pupil.style.transform = `translate(${offsetX}px, ${offsetY}px)`;
                });
            });
            
            // Render Loop
            const clock = new THREE.Clock();
            
            function animate() {
                requestAnimationFrame(animate);
                
                const elapsedTime = clock.getElapsedTime();
                
                // Slow rotation on central element and double gyroscopic rings
                mainMesh.rotation.y = elapsedTime * 0.08;
                ringMesh.rotation.z = -elapsedTime * 0.12;
                innerRingMesh.rotation.z = elapsedTime * 0.18;
                
                // Smooth camera parallax easing
                targetX += (mouseX - targetX) * 0.04;
                targetY += (mouseY - targetY) * 0.04;
                camera.position.x = targetX * 0.4;
                camera.position.y = targetY * 0.4;
                camera.lookAt(0, 0, 0);
                
                // Easing float particles
                particles.forEach(p => {
                    p.position.x += p.userData.speedX;
                    p.position.y += p.userData.speedY;
                    p.rotation.x += p.userData.rotX;
                    p.rotation.y += p.userData.rotY;
                    
                    p.position.y += Math.sin(elapsedTime * 0.4 + p.userData.offset) * 0.003;
                    
                    // Wraparound boundary bounds
                    if (p.position.x > 9) p.position.x = -9;
                    if (p.position.x < -9) p.position.x = 9;
                    if (p.position.y > 7) p.position.y = -7;
                    if (p.position.y < -7) p.position.y = 7;
                });
                
                renderer.render(scene, camera);
            }
            animate();
            
            // Responsive Canvas Resize
            window.addEventListener('resize', () => {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize(window.innerWidth, window.innerHeight);
            });
        }
    </script>
</body>
</html>
