<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>VibeCreAI - AI-Powered Creative Innovation</title>
    <link rel="icon" type="image/png" href="Assets/Image/favicon.png">
    
    <!-- Open Graph Meta Tags for Social Media -->
    <meta property="og:title" content="VibeCreAI - AI-Powered Creative Innovation">
            <meta property="og:description" content="Experience the future of AI creativity with VibeCreAI. Explore our innovative 3D website showcasing AI-powered apps, creative tools, and cutting-edge technology solutions.">
    <meta property="og:image" content="Assets/Image/og_image.png">
    <meta property="og:image:alt" content="VibeCreAI - AI-Powered Creative Innovation Platform">
    <meta property="og:url" content="https://vibecreai.com">
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="VibeCreAI">
    <meta property="og:locale" content="en_US">
    
    <!-- Twitter Card Meta Tags -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="VibeCreAI - AI-Powered Creative Innovation">
            <meta name="twitter:description" content="Experience the future of AI creativity with VibeCreAI. Explore our innovative 3D website showcasing AI-powered apps, creative tools, and cutting-edge technology solutions.">
    <meta name="twitter:image" content="Assets/Image/og_image.png">
    <meta name="twitter:image:alt" content="VibeCreAI - AI-Powered Creative Innovation Platform">
    <meta name="twitter:site" content="@VibeCreAI">
    <meta name="twitter:creator" content="@VibeCreAI">
    
    <!-- Additional SEO Meta Tags -->
    <meta name="description" content="VibeCreAI is a one-person company collaborating with multiple AI agents to create innovative AI-powered applications. Experience our 3D interactive website showcasing creative innovation, tech solutions, and future-oriented AI tools.">
    <meta name="keywords" content="AI, artificial intelligence, creative tools, 3D website, innovation, technology, apps, VibeCreAI, AI collaboration, creative innovation">
    <meta name="author" content="VibeCreAI">
    <meta name="robots" content="index, follow">
    <link rel="canonical" href="https://vibecreai.com">
    
    <!-- Google Fonts -->
    <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=Orbitron:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
    
    <!-- lil-gui for real-time camera controls -->
    <script src="https://cdn.jsdelivr.net/npm/lil-gui@0.19.2/dist/lil-gui.umd.min.js"></script>
    <style>
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            background: #0a0a0a;
            font-family: 'Orbitron', sans-serif;
            overflow: hidden;
        }
        
        canvas {
            display: block;
            width: 100vw;
            height: 100vh;
        }
        
        /* Screen reader only content - hidden visually but accessible to assistive technologies */
        .sr-only {
            position: absolute !important;
            width: 1px !important;
            height: 1px !important;
            padding: 0 !important;
            margin: -1px !important;
            overflow: hidden !important;
            clip: rect(0, 0, 0, 0) !important;
            white-space: nowrap !important;
            border: 0 !important;
        }
        
        /* Hidden content for SEO but visible to screen readers when focused */
        .seo-content {
            position: absolute;
            left: -10000px;
            top: auto;
            width: 1px;
            height: 1px;
            overflow: hidden;
        }
        
        .seo-content:focus {
            position: static;
            width: auto;
            height: auto;
            padding: 20px;
            background: #1a1a2e;
            color: #ffffff;
            border: 2px solid #2cb4dd;
            border-radius: 10px;
            font-family: 'Orbitron', sans-serif;
            z-index: 9999;
        }
        
        #ui {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 100;
        }
        
        /* Subscription Popup Modal Styles */
        #subscriptionModal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(10px);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 9998;
            pointer-events: all;
            animation: fadeIn 0.3s ease-out;
        }
        
        #subscriptionModal.show {
            display: flex;
        }
        
        /* Email Modal Styles */
        #emailModal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(10px);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 9997;
            pointer-events: all;
            animation: fadeIn 0.3s ease-out;
        }

        #emailModal.show {
            display: flex;
        }

        .email-display {
            display: flex;
            align-items: center;
            gap: 15px;
            margin: 20px 0;
            padding: 15px;
            background: rgba(44, 180, 221, 0.1);
            border: 2px solid #2cb4dd;
            border-radius: 10px;
            flex-wrap: wrap;
        }

        .email-address {
            font-family: 'Orbitron', monospace;
            font-size: 18px;
            font-weight: 600;
            color: #2cb4dd;
            flex: 1;
            min-width: 200px;
            word-break: break-all;
        }

        .copy-button {
            background: linear-gradient(135deg, #2cb4dd 0%, #1abc9c 100%);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 25px;
            font-family: 'Orbitron', sans-serif;
            font-weight: 600;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s ease;
            white-space: nowrap;
        }

        .copy-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(44, 180, 221, 0.3);
        }

        .copy-button:active {
            transform: translateY(0);
        }

        .copy-button.copied {
            background: linear-gradient(135deg, #1abc9c 0%, #27ae60 100%);
        }

        .email-note {
            font-size: 14px;
            color: #888;
            text-align: center;
            margin-top: 10px;
            line-height: 1.4;
        }
        
        .modal-content {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f1419 100%);
            border: 2px solid #2cb4dd;
            border-radius: 20px;
            padding: 40px;
            max-width: 500px;
            width: 90%;
            text-align: center;
            box-shadow: 0 20px 60px rgba(44, 180, 221, 0.3);
            animation: slideIn 0.4s ease-out;
            position: relative;
        }
        
        .modal-close {
            position: absolute;
            top: 15px;
            right: 20px;
            background: none;
            border: none;
            color: #2cb4dd;
            font-size: 24px;
            cursor: pointer;
            padding: 5px;
            width: 35px;
            height: 35px;
            border-radius: 50%;
            transition: all 0.3s ease;
        }
        
        .modal-close:hover {
            background: rgba(44, 180, 221, 0.2);
            transform: scale(1.1);
        }
        
        .modal-title {
            color: #2cb4dd;
            font-size: 28px;
            font-weight: bold;
            margin-bottom: 15px;
            text-shadow: 0 0 10px rgba(44, 180, 221, 0.5);
        }
        
        .modal-subtitle {
            color: #ffffff;
            font-size: 16px;
            margin-bottom: 30px;
            opacity: 0.9;
            line-height: 1.5;
        }
        
        .modal-form {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        .modal-input {
            background: rgba(255, 255, 255, 0.1);
            border: 2px solid rgba(44, 180, 221, 0.3);
            border-radius: 12px;
            padding: 15px 20px;
            color: #ffffff;
            font-size: 16px;
            font-family: 'Orbitron', sans-serif;
            transition: all 0.3s ease;
            outline: none;
        }
        
        .modal-input:focus {
            border-color: #2cb4dd;
            box-shadow: 0 0 20px rgba(44, 180, 221, 0.3);
            transform: scale(1.02);
        }
        
        .modal-input::placeholder {
            color: rgba(255, 255, 255, 0.6);
        }
        
        .modal-submit {
            background: linear-gradient(135deg, #2cb4dd 0%, #1abc9c 100%);
            border: none;
            border-radius: 12px;
            padding: 15px 30px;
            color: #ffffff;
            font-size: 18px;
            font-weight: 600;
            font-family: 'Orbitron', sans-serif;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 5px 20px rgba(44, 180, 221, 0.3);
        }
        
        .modal-submit:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(44, 180, 221, 0.5);
        }
        
        .modal-submit:active {
            transform: translateY(0);
        }
        
        .modal-submit:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }
        
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
        
        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(-50px) scale(0.9);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        
        /* Loading Screen Styles */
        #loadingScreen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            transition: opacity 0.5s ease-out;
        }
        
        #loadingScreen.hidden {
            opacity: 0;
            pointer-events: none;
        }
        
        .loading-logo {
            width: 120px;
            height: 120px;
            margin-bottom: 30px;
            animation: pulse 2s ease-in-out infinite;
            filter: drop-shadow(0 0 20px #2eb5dd);
        }
        
        .loading-text {
            color: #ffffff;
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 20px;
            text-align: center;
            letter-spacing: 2px;
        }
        
        .loading-subtitle {
            color: #2eb5dd;
            font-size: 14px;
            margin-bottom: 40px;
            text-align: center;
            opacity: 0.8;
        }
        
        .loading-bar-container {
            width: 300px;
            height: 4px;
            background: rgba(0, 0, 0, 0.1);
            border-radius: 2px;
            overflow: hidden;
            margin-bottom: 20px;
        }
        
        .loading-bar {
            height: 100%;
            background: linear-gradient(90deg, #1abc9c, #3498db, #9b59b6);
            border-radius: 2px;
            width: 0%;
            transition: width 0.3s ease;
            animation: shimmer 2s ease-in-out infinite;
        }
        
        .loading-percentage {
            color: #ffffff;
            font-size: 16px;
            font-weight: bold;
        }
        
        @keyframes pulse {
            0%, 100% {
                transform: scale(1);
                filter: drop-shadow(0 0 20px #1981a0);
            }
            50% {
                transform: scale(1.05);
                filter: drop-shadow(0 0 30px #33c6ec);
            }
        }
        
        @keyframes shimmer {
            0% {
                background-position: -300px 0;
            }
            100% {
                background-position: 300px 0;
            }
        }
        
        .loading-bar {
            background: linear-gradient(90deg, #1abc9c 0%, #3498db 50%, #9b59b6 100%);
            background-size: 300px 100%;
        }
        
        /* Top Navigation Menu */
        #topNav {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 60px;
            background: rgba(10, 10, 10, 0.9);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid #2cb4dd;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0 20px;
            z-index: 1000;
            transition: all 0.3s ease;
        }
        
        .hamburger {
            width: 30px;
            height: 30px;
            cursor: pointer;
            display: none; /* Hidden by default - only shown on extreme narrow screens */
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            padding: 5px;
            transition: transform 0.3s ease;
            position: absolute;
            right: 20px;
            background: transparent; /* Remove white background */
            border: none; /* Remove default button border */
        }
        
        .hamburger:hover {
            transform: scale(1.1);
        }
        
        .hamburger span {
            width: 25px;
            height: 3px;
            background: #2cb4dd;
            border-radius: 2px;
            transition: all 0.3s ease;
        }
        
        .hamburger.active span:nth-child(1) {
            transform: rotate(45deg) translate(6px, 6px);
        }
        
        .hamburger.active span:nth-child(2) {
            opacity: 0;
        }
        
        .hamburger.active span:nth-child(3) {
            transform: rotate(-45deg) translate(6px, -6px);
        }
        
        /* Navigation Menu - Default Expanded Horizontal Layout */
        .nav-menu {
            display: flex;
            flex-direction: row;
            gap: 15px;
            background: transparent;
            border: none;
            position: static;
            width: auto;
            opacity: 1;
            visibility: visible;
            transform: none;
            transition: all 0.3s ease;
            list-style: none; /* Remove default list styling */
            margin: 0;
            padding: 0;
        }
        
        .nav-menu-item {
            padding: 12px 24px;
            color: #ffffff;
            font-family: 'Orbitron', sans-serif;
            font-size: 18px; /* Increased from 16px */
            font-weight: 600;
            cursor: pointer;
            border: 2px solid transparent;
            border-radius: 8px;
            transition: all 0.3s ease;
            text-align: center;
            white-space: nowrap;
            letter-spacing: 0.5px; /* Add slight letter spacing for futuristic look */
            background: transparent; /* Ensure button background is transparent */
            outline: none; /* Remove default button outline */
        }
        
        .nav-menu-item:focus {
            outline: 2px solid #2cb4dd;
            outline-offset: 2px;
        }
        
        .nav-menu-item:hover {
            background: rgba(44, 180, 221, 0.1);
            color: #2cb4dd;
            border-color: #2cb4dd;
            transform: translateY(-2px);
        }
        
        .nav-menu-item.active {
            background: rgba(44, 180, 221, 0.2);
            color: #2cb4dd;
            border-color: #2cb4dd;
        }
        
        /* Large Desktop Navigation (1200px and above) */
        @media (min-width: 1200px) {
            .nav-menu-item {
                font-size: 20px; /* Even larger on big screens */
                padding: 14px 28px;
            }
        }
        
        /* Medium Mobile Navigation (480px to 767px) - Still expanded horizontal */
        @media (min-width: 480px) and (max-width: 767px) {
            .nav-menu {
                gap: 10px; /* Reduce gap for smaller screens */
            }
            
            .nav-menu-item {
                font-size: 16px;
                padding: 10px 18px;
            }
        }
        
        /* Small Mobile Navigation (320px to 479px) - Still expanded horizontal but smaller */
        @media (min-width: 320px) and (max-width: 479px) {
            .nav-menu {
                gap: 8px; /* Further reduce gap */
            }
            
            .nav-menu-item {
                font-size: 14px;
                padding: 8px 12px;
            }
        }
        
        /* Extreme Narrow Navigation (below 320px) - Hamburger menu only */
        @media (max-width: 319px) {
            #topNav {
                justify-content: flex-end;
                padding: 0 15px;
            }
            
            .hamburger {
                display: flex; /* Show hamburger only on extreme narrow screens */
                width: 25px;
                height: 25px;
                right: 15px;
            }
            
            .hamburger span {
                width: 20px;
                height: 2px;
            }
            
            .nav-menu {
                position: absolute;
                top: 60px;
                right: 0;
                width: 180px;
                background: #000000;
                border: 1px solid #2cb4dd;
                border-radius: 0 0 0 10px;
                transform: translateY(-20px);
                opacity: 0;
                visibility: hidden;
                flex-direction: column;
                gap: 0;
            }
            
            .nav-menu.active {
                transform: translateY(0);
                opacity: 1;
                visibility: visible;
            }
            
            .nav-menu-item {
                font-size: 14px;
                padding: 12px 15px;
                border: none;
                border-bottom: 1px solid #2cb4dd;
                border-radius: 0;
            }
            
            .nav-menu-item:last-child {
                border-bottom: none;
                border-radius: 0 0 0 10px;
            }
            
            .nav-menu-item:hover {
                padding-left: 20px;
                transform: none;
                border-color: transparent;
            }
        }
        
        /* Back to Home Button */
        #backToHomeBtn {
            position: fixed;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.9);
            border: 2px solid #2cb4dd;
            border-radius: 25px;
            padding: 12px 24px;
            color: #ffffff;
            font-family: 'Orbitron', sans-serif;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transform: translateX(-50%) translateY(20px);
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
        }
        
        #backToHomeBtn.show {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(0);
        }
        
        #backToHomeBtn:hover {
            background: rgba(44, 180, 221, 0.1);
            color: #2cb4dd;
            border-color: #2cb4dd;
            transform: translateX(-50%) translateY(-2px);
            box-shadow: 0 4px 15px rgba(44, 180, 221, 0.3);
        }
        
        #backToHomeBtn:active {
            transform: translateX(-50%) translateY(0) scale(0.95);
        }

        /* Card Navigation Arrows */
        #cardNavigation {
            position: fixed;
            right: 30px;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            flex-direction: column;
            gap: 15px;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        #cardNavigation.show {
            opacity: 1;
            visibility: visible;
        }

        .card-nav-btn {
            width: 50px;
            height: 50px;
            background: rgba(10, 10, 10, 0.9);
            border: 2px solid #2cb4dd;
            border-radius: 50%;
            color: #ffffff;
            font-family: 'Orbitron', sans-serif;
            font-size: 20px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
        }

        .card-nav-btn:hover {
            background: rgba(44, 180, 221, 0.1);
            color: #2cb4dd;
            border-color: #2cb4dd;
            transform: scale(1.1);
            box-shadow: 0 4px 15px rgba(44, 180, 221, 0.3);
        }

        .card-nav-btn:active {
            transform: scale(0.95);
        }

        .card-nav-btn:disabled {
            opacity: 0.3;
            cursor: not-allowed;
            transform: none;
        }

        .card-nav-btn:disabled:hover {
            background: rgba(10, 10, 10, 0.9);
            color: #ffffff;
            border-color: #2cb4dd;
            transform: none;
            box-shadow: none;
        }

        /* Mobile responsiveness for card navigation */
        @media (max-width: 768px) {
            #cardNavigation {
                right: 15px;
                gap: 10px;
            }
            
            .card-nav-btn {
                width: 40px;
                height: 40px;
                font-size: 16px;
            }
        }

        /* Audio Control Button */
        .audio-toggle {
            position: fixed;
            top: 80px;
            right: 30px;
            width: 50px;
            height: 50px;
            background: rgba(10, 10, 10, 0.9);
            border: 2px solid #2cb4dd;
            border-radius: 50%;
            color: #ffffff;
            font-size: 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
        }

        .audio-toggle:hover {
            background: rgba(44, 180, 221, 0.1);
            color: #2cb4dd;
            border-color: #2cb4dd;
            transform: scale(1.1);
            box-shadow: 0 4px 15px rgba(44, 180, 221, 0.3);
        }

        .audio-toggle:active {
            transform: scale(0.95);
        }

        .audio-toggle.muted {
            opacity: 0.5;
            border-color: #888888;
        }

        .audio-toggle.muted:hover {
            border-color: #2cb4dd;
            opacity: 1;
        }

        /* Mobile responsiveness for audio toggle */
        @media (max-width: 768px) {
            .audio-toggle {
                top: 70px;
                right: 15px;
                width: 40px;
                height: 40px;
                font-size: 16px;
            }
        }
    </style>
</head>
<body>
    <!-- Skip to main content link for accessibility -->
    <a href="#main-content" class="sr-only">Skip to main content</a>
    
    <!-- SEO and Accessibility Content - Hidden but accessible to search engines and screen readers -->
    <header class="seo-content" tabindex="0">
        <h1>VibeCreAI - AI-Powered Creative Innovation</h1>
        <p>Experience the future of AI creativity through our innovative 3D interactive website. VibeCreAI is a one-person company collaborating with multiple AI agents to create cutting-edge applications.</p>
    </header>
    
    <main id="main-content" class="seo-content" tabindex="0">
        <section id="home-section" aria-label="Welcome to VibeCreAI">
            <h2>Vibe Code Your Imagination</h2>
            <p>Welcome to VibeCreAI, where creativity meets artificial intelligence. Navigate through our 3D interactive experience to explore our innovative projects and learn about our unique approach to AI-powered development.</p>
        </section>
        
        <section id="about-section" aria-label="About VibeCreAI">
            <h2>About VibeCreAI</h2>
            <article>
                <h3>Who Am I</h3>
                <p>I am a vibe coder with zero coding background. I am a drummer, and a father of four daughters. I just want to make things that are fun and interesting.</p>
            </article>
            <article>
                <h3>What I Do</h3>
                <p>I build apps, games, and interactive experiments with AI through Vibe Coding.</p>
            </article>
            <article>
                <h3>Why I Do It</h3>
                <p>This is a hobby. A creative outlet. A playground. VibeCreAI isn't about perfection or profit. It's about learning, experimenting, and having fun.</p>
            </article>
        </section>
        
        <section id="apps-section" aria-label="Our Applications">
            <h2>AI-Powered Applications</h2>
            <article>
                <h3>SPIN 2 PICK</h3>
                <p>Fun activity picker for kids with AI suggestions</p>
                <p><strong>Status:</strong> Live</p>
                <a href="https://www.vibecreai.com/spin2pick" target="_blank" rel="noopener noreferrer">Try Spin2Pick</a>
            </article>
            <article>
                <h3>Games</h3>
                <p>Innovative gaming experiences powered by AI</p>
                <p><strong>Status:</strong> Coming Soon</p>
            </article>
            <article>
                <h3>Smart Tools</h3>
                <p>AI-powered tools for daily life and work</p>
                <p><strong>Status:</strong> Planning</p>
            </article>
        </section>
        
        <section id="contact-section" aria-label="Contact Information">
            <h2>Contact Us</h2>
            <p>Ready to connect? Get in touch with us at:</p>
            <p><strong>Email:</strong> <a href="mailto:contact@vibecreai.com">contact@vibecreai.com</a></p>
            <p>Join our community and be the first to know about new AI-powered apps, features, and exciting updates from VibeCreAI.</p>
        </section>
    </main>

    <!-- Top Navigation Menu -->
    <nav id="topNav" aria-label="Main navigation">
        <button class="hamburger" id="hamburger" aria-label="Toggle navigation menu" aria-expanded="false">
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
        </button>
        <ul class="nav-menu" id="navMenu" role="menubar">
            <li role="none"><button class="nav-menu-item" data-section="Home" role="menuitem" aria-current="page">Home</button></li>
            <li role="none"><button class="nav-menu-item" data-section="About" role="menuitem">About</button></li>
            <li role="none"><button class="nav-menu-item" data-section="Apps" role="menuitem">Apps</button></li>
            <li role="none"><button class="nav-menu-item" data-section="Contact" role="menuitem">Contact</button></li>
        </ul>
    </nav>

    <!-- Back to Home Button -->
    <button id="backToHomeBtn" aria-label="Navigate back to home section">Back to Home</button>

    <!-- Card Navigation Arrows -->
    <div id="cardNavigation" aria-label="Card navigation controls">
        <button id="prevCardBtn" class="card-nav-btn" aria-label="View previous card">
            <span aria-hidden="true">&#8593;</span>
        </button>
        <button id="nextCardBtn" class="card-nav-btn" aria-label="View next card">
            <span aria-hidden="true">&#8595;</span>
        </button>
    </div>

    <!-- Audio Elements -->
    <audio id="backgroundMusic" loop preload="auto" aria-label="Background ambient music">
        <source src="Assets/Audio/audio.mp3?v=2024122301" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio>
    
    <audio id="transitionSound" preload="auto" aria-label="Navigation transition sound effect">
        <source src="Assets/Audio/transition.wav" type="audio/wav">
        Your browser does not support the audio element.
    </audio>

    <!-- Audio Control Button -->
    <button id="audioToggle" class="audio-toggle" aria-label="Toggle audio on/off" aria-pressed="false">
        <span id="audioIcon" aria-hidden="true">🔊</span>
    </button>

    <!-- Loading Screen -->
    <div id="loadingScreen" aria-live="polite" aria-label="Loading 3D website">
        <img src="Assets/Image/logo.png" alt="VibeCreAI Logo" class="loading-logo">
        <div class="loading-subtitle">Loading 3D Experience...</div>
        <div class="loading-bar-container" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
            <div class="loading-bar" id="loadingBar"></div>
        </div>
        <div class="loading-percentage" id="loadingPercentage" aria-live="polite">0%</div>
    </div>

    <!-- Subscription Modal -->
    <div id="subscriptionModal" role="dialog" aria-modal="true" aria-labelledby="subscription-title">
        <div class="modal-content">
            <button class="modal-close" id="modalClose" aria-label="Close subscription modal">&times;</button>
            <h2 class="modal-title" id="subscription-title">Stay Updated!</h2>
            <p class="modal-subtitle">Join our community and be the first to know about new AI-powered apps, features, and exciting updates from VibeCreAI.</p>
            <form class="modal-form" id="subscriptionForm" aria-label="Email subscription form">
                <label for="emailInput" class="sr-only">Email address</label>
                <input 
                    type="email" 
                    class="modal-input" 
                    id="emailInput" 
                    placeholder="Enter your email address"
                    aria-describedby="email-description"
                    required
                >
                <div id="email-description" class="sr-only">Enter your email to subscribe to updates from VibeCreAI</div>
                <button type="submit" class="modal-submit" id="submitButton">
                    Subscribe Now
                </button>
            </form>
        </div>
    </div>

    <!-- Email Contact Modal -->
    <div id="emailModal" role="dialog" aria-modal="true" aria-labelledby="email-title">
        <div class="modal-content">
            <button class="modal-close" id="emailModalClose" aria-label="Close contact modal">&times;</button>
            <h2 class="modal-title" id="email-title">📧 Get in Touch</h2>
            <p class="modal-subtitle">Ready to connect? Here's our email address:</p>
            <div class="email-display">
                <span class="email-address" id="emailAddress" aria-label="Email address">contact@vibecreai.com</span>
                <button class="copy-button" id="copyEmailBtn" aria-label="Copy email address to clipboard">📋 Copy</button>
            </div>
            <p class="email-note">Click copy to copy the email address to your clipboard, then paste it into your email client.</p>
        </div>
    </div>

    <div id="ui">

        
    </div>

    <script src="https://unpkg.com/three@0.128.0/build/three.min.js"></script>
    <script src="https://unpkg.com/three@0.128.0/examples/js/loaders/OBJLoader.js"></script>
    <script src="https://unpkg.com/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script>
    <script>
        console.log('=== VibeCreAI 3D Website Starting ===');
        
        // Loading management
        let loadingManager = new THREE.LoadingManager();
        let loadingScreen = document.getElementById('loadingScreen');
        let loadingBar = document.getElementById('loadingBar');
        let loadingPercentage = document.getElementById('loadingPercentage');
        let totalAssets = 0;
        let loadedAssets = 0;
        
        // Global variables
        let scene, camera, renderer;
        let logoGroup, floorSections = [];
        let aboutCards = []; // Add about cards array
        let appsCards = []; // Add apps cards array
        let appsIcons = []; // Add apps icons array for separate click detection
        let contactCards = []; // Add contact cards array
        let taglineMesh = null; // Add tagline mesh variable
        let mouse = new THREE.Vector2();
        let raycaster = new THREE.Raycaster();
        let autoRotate = true; // Start with auto-rotation ON (but slower)
        
        // Audio variables
        let backgroundMusic = null;
        let transitionSound = null;
        let audioEnabled = true; // Try to start with audio enabled
        let audioInitialized = false;
        
        // Robot variables
        let robot = null;
        let robotMixer = null;
        let robotAction = null;
        let clock = new THREE.Clock();
        
        // Camera control variables (global scope)
        let phi = 1.57; // horizontal rotation
        let theta = Math.PI / 2; // vertical rotation (face logo directly from front)
        let radius = 11; // distance from center
        let currentSection = 'Home'; // Track current section for zoom limits
        
        // Camera transition variables
        let isTransitioning = false;
        let isCardTransitioning = false; // Track card navigation transitions
        let transitionStartTime = 0;
        let transitionDuration = 1500; // 1.5 seconds
        let startPhi, startTheta, startRadius;
        let targetPhi, targetTheta, targetRadius;
        let rotationControlsDisabled = false; // Track if rotation controls should be disabled (zoom still works)
        
        // Camera look-at transition variables
        let currentLookAt = [0, 1, 0]; // Current look-at target
        let startLookAt = [0, 1, 0]; // Start look-at for transition
        let targetLookAt = [0, 1, 0]; // Target look-at for transition
        
        // Camera rotation parameters - optimized values from GUI testing
        const cameraParams = {
            // Contact section - optimized values
            contactCamX: 0.1,
            contactCamZ: -0.1,
            contactLookX: 0.1,
            contactLookZ: 0,
            
            // Apps section - optimized values
            appsCamX: -0.1,
            appsCamZ: 0,
            appsLookX: 0,
            appsLookZ: 0,
            
            // About section - optimized values
            aboutCamX: 0.1,
            aboutCamZ: 0,
            aboutLookX: 0,
            aboutLookZ: 0,
            
            // General settings
            cameraHeight: 4
        };
        
        // Vector-based transition variables
        let startCameraPosition, targetCameraPosition;
        let isVectorBasedTransition = false;
        
        // Card zoom state tracking
        let isViewingCard = false;
        let currentCardIndex = -1;
        
        // About section lighting
        let aboutSectionLight = null;
        
        // Apps section lighting
        let appsSectionLight = null;
        
        // Contact section lighting
        let contactSectionLight = null;
        
        // Predefined camera positions for each section
        const cameraPositions = {
            'Home': { phi: 1.57, theta: Math.PI / 2, radius: 11, lookAt: [0, 1, 0] }, // Front view of logo
            'Contact': { phi: 4.715, theta: Math.PI / 2.5, radius: 11, lookAt: [0, -3, -8] }, // Safer angle for zoom
            'Apps': { phi: 3.142, theta: Math.PI / 2.5, radius: 11, lookAt: [-9, -3, 0] }, // Safer angle for zoom
            'About': { phi: 0.00005, theta: Math.PI / 2.5, radius: 11, lookAt: [10, -1.5, 0] } // Safer angle for zoom
        };
        
        // Smooth camera movement variables
        let thetaVelocity = 0;
        let phiVelocity = 0;
        let lastMouseX = 0;
        let lastMouseY = 0;
        let isDragging = false;
        let lastInteractionTime = Date.now();
        const dampingFactor = 0.95; // How quickly movement slows down (0.9-0.99)
        const sensitivity = 0.005; // Mouse sensitivity
        const autoRotateDelay = 3000; // Start auto-rotation after 3 seconds of inactivity
        
        // Loading management functions
        function updateLoadingProgress() {
            const progress = Math.round((loadedAssets / Math.max(totalAssets, 1)) * 100);
            loadingBar.style.width = progress + '%';
            loadingPercentage.textContent = progress + '%';
            
            if (progress >= 100) {
                setTimeout(() => {
                    hideLoadingScreen();
                }, 500); // Small delay before hiding
            }
        }
        
        function hideLoadingScreen() {
            loadingScreen.classList.add('hidden');
            setTimeout(() => {
                loadingScreen.style.display = 'none';
            }, 500); // Wait for fade out animation
        }
        
        // Setup loading manager
        loadingManager.onStart = function(url, itemsLoaded, itemsTotal) {
            console.log('Started loading file: ' + url);
            totalAssets = itemsTotal;
            updateLoadingProgress();
        };
        
        loadingManager.onLoad = function() {
            console.log('Loading complete!');
            updateLoadingProgress();
        };
        
        loadingManager.onProgress = function(url, itemsLoaded, itemsTotal) {
            console.log('Loading file: ' + url + '. Loaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.');
            loadedAssets = itemsLoaded;
            totalAssets = itemsTotal;
            updateLoadingProgress();
        };
        
        loadingManager.onError = function(url) {
            console.log('There was an error loading ' + url);
        };
        
        // Global function to update camera position based on spherical coordinates
        function updateCameraPosition() {
            // Dynamic theta adjustment for close zoom in non-Home sections
            let adjustedTheta = theta;
            if (currentSection !== 'Home' && radius < 8) {
                // When zooming in close in sections, gradually adjust theta to safer angle
                const zoomFactor = (8 - radius) / 3; // 0 to 1 as radius goes from 8 to 5
                const safeTheta = Math.PI / 2.2; // Safer angle for close viewing
                adjustedTheta = theta + (safeTheta - theta) * zoomFactor * 0.3; // Gradual transition
            }
            
            camera.position.x = radius * Math.sin(adjustedTheta) * Math.cos(phi);
            camera.position.y = Math.max(0.5, radius * Math.cos(adjustedTheta) + 5); // Prevent going below floor level (0.5)
            camera.position.z = radius * Math.sin(adjustedTheta) * Math.sin(phi);
            camera.lookAt(currentLookAt[0], currentLookAt[1], currentLookAt[2]); // Look at the current look-at target
        }
        
        // Function to normalize angle to 0-2π range
        function normalizeAngle(angle) {
            while (angle < 0) angle += Math.PI * 2;
            while (angle >= Math.PI * 2) angle -= Math.PI * 2;
            return angle;
        }
        
        // Function to find shortest rotation path between two angles
        function getShortestAngleDifference(from, to) {
            const normalizedFrom = normalizeAngle(from);
            const normalizedTo = normalizeAngle(to);
            
            let diff = normalizedTo - normalizedFrom;
            
            // Choose shortest path
            if (diff > Math.PI) {
                diff -= Math.PI * 2;
            } else if (diff < -Math.PI) {
                diff += Math.PI * 2;
            }
            
            return diff;
        }
        
        // Function to zoom to a specific Contact card
        function zoomToContactCard(cardIndex) {
            // Allow interrupting ongoing transitions for better UX
            if (isTransitioning) {
                console.log('🔄 Interrupting ongoing transition for new navigation');
                isTransitioning = false; // Stop current transition
            }
            
            // Define card positions (matching the positions from createContactCards)
            const cardPositions = [
                [-0.1, 0.25, -5]   // Stay Updated card (Y=0.25 from createContactCards)
            ];
            
            if (cardIndex < 0 || cardIndex >= cardPositions.length) return;
            
            const cardPos = cardPositions[cardIndex];
            
            // Perfect top-down camera view for card inspection with GUI controls
            const cameraHeight = cameraParams.cameraHeight;
            
            // Position camera using GUI parameters for Contact section
            const newCameraPos = new THREE.Vector3(
                cardPos[0] + cameraParams.contactCamX, 
                cameraHeight, 
                cardPos[2] + cameraParams.contactCamZ
            );
            
            // Store current position as start for vector-based transition
            startCameraPosition = camera.position.clone();
            startLookAt = [...currentLookAt];
            
            // Set target position and look-at using GUI parameters
            targetCameraPosition = newCameraPos;
            targetLookAt = [
                cardPos[0] + cameraParams.contactLookX, 
                cardPos[1], 
                cardPos[2] + cameraParams.contactLookZ
            ];
            
            // Set current section to maintain zoom limits
            currentSection = 'Contact';
            rotationControlsDisabled = true; // Disable rotation for focused view
            
            // Set card viewing state
            isViewingCard = true;
            currentCardIndex = cardIndex;
            
            // Start transition
            isTransitioning = true;
            transitionStartTime = Date.now();
            isVectorBasedTransition = true; // Use vector-based transition for card zoom
            
            // Play transition sound
            if (window.playTransitionSound) {
                window.playTransitionSound();
            }
            
            // Update navigation button to show "Back to Home" (since Contact goes directly to card)
            if (window.updateBackButtonForCard) {
                window.updateBackButtonForCard(true, 'Home');
            }
            
            // Update card navigation (Contact doesn't need arrows since it has only 1 card)
            if (window.updateCardNavigation) {
                window.updateCardNavigation();
            }
            
            console.log(`🎥 Zooming to Contact card ${cardIndex}: Stay Updated`);
        }
        
        // Function to zoom to a specific Apps card
        function zoomToAppsCard(cardIndex) {
            // Allow interrupting ongoing transitions for better UX
            if (isTransitioning) {
                console.log('🔄 Interrupting ongoing transition for new navigation');
                isTransitioning = false; // Stop current transition
            }
            if (isCardTransitioning) {
                console.log('🔄 Interrupting ongoing card transition for new navigation');
                isCardTransitioning = false; // Stop current card transition
            }
            
            // Define card positions (matching the positions from createAppsCards)
            const cardPositions = [
                [-7, 0.15, 0],   // Spin2Pick
                [-10, 0.15, 0],  // Creative Games  
                [-13, 0.15, 0]   // Smart Tools
            ];
            
            if (cardIndex < 0 || cardIndex >= cardPositions.length) return;
            
            const cardPos = cardPositions[cardIndex];
            
            // Perfect top-down camera view for card inspection with GUI controls
            const cameraHeight = cameraParams.cameraHeight;
            
            // Position camera using GUI parameters for Apps section
            const newCameraPos = new THREE.Vector3(
                cardPos[0] + cameraParams.appsCamX, 
                cameraHeight, 
                cardPos[2] + cameraParams.appsCamZ
            );
            
            // Store current position as start for vector-based transition
            startCameraPosition = camera.position.clone();
            startLookAt = [...currentLookAt];
            
            // Set target position and look-at using GUI parameters
            targetCameraPosition = newCameraPos;
            targetLookAt = [
                cardPos[0] + cameraParams.appsLookX, 
                cardPos[1], 
                cardPos[2] + cameraParams.appsLookZ
            ];
            
            // Set current section to maintain zoom limits
            currentSection = 'Apps';
            rotationControlsDisabled = true; // Disable rotation for focused view
            
            // Set card viewing state
            isViewingCard = true;
            currentCardIndex = cardIndex;
            
            // Start transition
            isTransitioning = true;
            transitionStartTime = Date.now();
            isVectorBasedTransition = true; // Use vector-based transition for card zoom
            
            // Play transition sound
            if (window.playTransitionSound) {
                window.playTransitionSound();
            }
            
            // Update navigation button to show "Back to Apps"
            if (window.updateBackButtonForCard) {
                window.updateBackButtonForCard(true);
            }
            
            // Update card navigation arrows
            if (window.updateCardNavigation) {
                window.updateCardNavigation();
            }
            
            console.log(`🎥 Zooming to Apps card ${cardIndex}: ${['Spin2Pick', 'Creative Games', 'Smart Tools'][cardIndex]}`);
        }
        
        // Function to zoom to the dancing robot
        function zoomToRobot() {
            // Allow interrupting ongoing transitions for better UX
            if (isTransitioning) {
                console.log('🔄 Interrupting ongoing transition for new navigation');
                isTransitioning = false; // Stop current transition
            }
            
            // Robot is positioned at (3, 0, 1.9)
            const robotPos = [3, 0, 1.9];
            
            // Position camera for a nice close-up view of the robot
            const targetCameraPos = new THREE.Vector3(
                robotPos[0],    // Move camera to the right of robot
                robotPos[1] + 1,    // Slightly above robot
                robotPos[2] + 2     // Move camera forward
            );
            
            // Store current position as start for vector-based transition
            startCameraPosition = camera.position.clone();
            startLookAt = [...currentLookAt];
            
            // Set target position and look-at
            targetCameraPosition = targetCameraPos;
            targetLookAt = [
                robotPos[0],        // Look at robot's X position
                robotPos[1] + 0.5,  // Look slightly above robot's center
                robotPos[2]         // Look at robot's Z position
            ];
            
            // Set current section to maintain zoom limits
            currentSection = 'Robot';
            rotationControlsDisabled = true; // Disable rotation for focused view
            
            // Set robot viewing state
            isViewingCard = true; // Reuse card viewing state for robot
            currentCardIndex = -1; // No card index for robot
            
            // Start transition
            isTransitioning = true;
            transitionStartTime = Date.now();
            isVectorBasedTransition = true; // Flag for vector-based transition
            
            // Play transition sound
            if (window.playTransitionSound) {
                window.playTransitionSound();
            }
            
            // Update navigation button to show "Back to Home"
            if (window.updateBackButtonForCard) {
                window.updateBackButtonForCard(true, 'Home');
            }
            
            console.log('🤖 Zooming to dancing robot for close-up view!');
        }

        // Function to zoom to a specific About card
        function zoomToAboutCard(cardIndex) {
            // Allow interrupting ongoing transitions for better UX
            if (isTransitioning) {
                console.log('🔄 Interrupting ongoing transition for new navigation');
                isTransitioning = false; // Stop current transition
            }
            if (isCardTransitioning) {
                console.log('🔄 Interrupting ongoing card transition for new navigation');
                isCardTransitioning = false; // Stop current card transition
            }
            
            // Define card positions (matching the positions from createAboutCards)
            const cardPositions = [
                [7, 0.15, 0],   // Creative Innovation
                [10, 0.15, 0],  // Tech Innovation  
                [13, 0.15, 0]   // Future Oriented
            ];
            
            if (cardIndex < 0 || cardIndex >= cardPositions.length) return;
            
            const cardPos = cardPositions[cardIndex];
            
            // Perfect top-down camera view for card inspection with GUI controls
            const cameraHeight = cameraParams.cameraHeight;
            
            // Position camera using GUI parameters for About section
            const newCameraPos = new THREE.Vector3(
                cardPos[0] + cameraParams.aboutCamX, 
                cameraHeight, 
                cardPos[2] + cameraParams.aboutCamZ
            );
            
            // Store current position as start for vector-based transition
            startCameraPosition = camera.position.clone();
            startLookAt = [...currentLookAt];
            
            // Set target position and look-at using GUI parameters
            targetCameraPosition = newCameraPos;
            targetLookAt = [
                cardPos[0] + cameraParams.aboutLookX, 
                cardPos[1], 
                cardPos[2] + cameraParams.aboutLookZ
            ];
            
            // Set current section to maintain zoom limits
            currentSection = 'About';
            rotationControlsDisabled = true; // Disable rotation for focused view
            
            // Set card viewing state
            isViewingCard = true;
            currentCardIndex = cardIndex;
            
            // Start transition
            isTransitioning = true;
            transitionStartTime = Date.now();
            isVectorBasedTransition = true; // Flag for vector-based transition
            
            // Play transition sound
            if (window.playTransitionSound) {
                window.playTransitionSound();
            }
            
            // Update navigation button to show "Back to About"
            if (window.updateBackButtonForCard) {
                window.updateBackButtonForCard(true);
            }
            
            // Update card navigation arrows
            if (window.updateCardNavigation) {
                window.updateCardNavigation();
            }
            
            console.log(`🎯 Zooming to About card ${cardIndex}: ${['Creative Innovation', 'Tech Innovation', 'Future Oriented'][cardIndex]}`);
        }
        
        // Function to return to Home from Contact card view (vector-based to match smooth transitions)
        function returnToContactSection() {
            // Allow interrupting ongoing transitions for better UX
            if (isTransitioning) {
                console.log('🔄 Interrupting ongoing transition for return to Contact');
                isTransitioning = false; // Stop current transition
            }
            
            // Use vector-based approach to return to Home (matching About/Apps behavior)
            const homeSectionPosition = cameraPositions['Home'];
            
            // Calculate the target camera position using vector method
            const homeLookAt = new THREE.Vector3(...homeSectionPosition.lookAt);
            
            // Position camera at Home position
            const targetCameraPos = new THREE.Vector3(0, 5, 10); // Home camera position
            
            // Store current position as start for vector-based transition
            startCameraPosition = camera.position.clone();
            startLookAt = [...currentLookAt];
            
            // Set target position and look-at
            targetCameraPosition = targetCameraPos;
            targetLookAt = [...homeSectionPosition.lookAt];
            
            // Reset card viewing state
            isViewingCard = false;
            currentCardIndex = -1;
            
            // Hide card navigation arrows
            if (window.updateCardNavigation) {
                window.updateCardNavigation();
            }
            
            // Set current section to Home
            currentSection = 'Home';
            rotationControlsDisabled = false; // Re-enable rotation controls for Home
            
            // Turn off Contact section lighting when leaving
            if (contactSectionLight) {
                contactSectionLight.visible = false;
                setContactCardsVisibility(false);
                console.log('💡 Contact section light turned OFF');
            }
            
            // Start vector-based transition
            isTransitioning = true;
            transitionStartTime = Date.now();
            isVectorBasedTransition = true; // Use vector-based transition for smooth movement
            
            // Play transition sound
            if (window.playTransitionSound) {
                window.playTransitionSound();
            }
            
            console.log('🏠 Returning to Home from Contact card (vector-based)');
        }
        
        // Function to return to Apps section from card view (vector-based to avoid flipping)
        function returnToAppsSection() {
            // Allow interrupting ongoing transitions for better UX
            if (isTransitioning) {
                console.log('🔄 Interrupting ongoing transition for return to Apps');
                isTransitioning = false; // Stop current transition
            }
            
            // Use vector-based approach to return to Apps section overview
            const appsSectionPosition = cameraPositions['Apps'];
            
            // Calculate the exact same camera position as when "Apps" text is clicked
            // Convert spherical coordinates to Cartesian: phi: 3.142, theta: Math.PI / 2.5, radius: 11
            const phi = appsSectionPosition.phi;
            const theta = appsSectionPosition.theta;
            const radius = appsSectionPosition.radius;
            
            const targetCameraPos = new THREE.Vector3(
                radius * Math.sin(theta) * Math.cos(phi),
                Math.max(0.5, radius * Math.cos(theta) + 5),
                radius * Math.sin(theta) * Math.sin(phi)
            );
            
            // Store current position as start for vector-based transition
            startCameraPosition = camera.position.clone();
            startLookAt = [...currentLookAt];
            
            // Set target position and look-at (exact same as section navigation)
            targetCameraPosition = targetCameraPos;
            targetLookAt = [...appsSectionPosition.lookAt];
            
            // Reset card viewing state
            isViewingCard = false;
            currentCardIndex = -1;
            
            // Hide card navigation arrows
            if (window.updateCardNavigation) {
                window.updateCardNavigation();
            }
            
            // Set current section
            currentSection = 'Apps';
            rotationControlsDisabled = true; // Keep rotation disabled for Apps section
            
            // Ensure Apps section light and cards stay visible
            if (appsSectionLight) {
                appsSectionLight.visible = true;
                setAppsCardsVisibility(true);  // Ensure cards are visible when returning to Apps
            }
            
            // Start vector-based transition
            isTransitioning = true;
            transitionStartTime = Date.now();
            isVectorBasedTransition = true; // Use vector-based transition
            
            // Play transition sound
            if (window.playTransitionSound) {
                window.playTransitionSound();
            }
            
            console.log('🔙 Returning to Apps section overview (vector-based, exact match)');
        }
        
        // Function to return to About section from card view (vector-based to avoid flipping)
        function returnToAboutSection() {
            // Allow interrupting ongoing transitions for better UX
            if (isTransitioning) {
                console.log('🔄 Interrupting ongoing transition for return to About');
                isTransitioning = false; // Stop current transition
            }
            
            // Use vector-based approach to return to About section overview
            const aboutSectionPosition = cameraPositions['About'];
            
            // Calculate the exact same camera position as when "About" text is clicked
            // Convert spherical coordinates to Cartesian: phi: 0.00005, theta: Math.PI / 2.5, radius: 11
            const phi = aboutSectionPosition.phi;
            const theta = aboutSectionPosition.theta;
            const radius = aboutSectionPosition.radius;
            
            const targetCameraPos = new THREE.Vector3(
                radius * Math.sin(theta) * Math.cos(phi),
                Math.max(0.5, radius * Math.cos(theta) + 5),
                radius * Math.sin(theta) * Math.sin(phi)
            );
            
            // Store current position as start for vector-based transition
            startCameraPosition = camera.position.clone();
            startLookAt = [...currentLookAt];
            
            // Set target position and look-at (exact same as section navigation)
            targetCameraPosition = targetCameraPos;
            targetLookAt = [...aboutSectionPosition.lookAt];
            
            // Reset card viewing state
            isViewingCard = false;
            currentCardIndex = -1;
            
            // Hide card navigation arrows
            if (window.updateCardNavigation) {
                window.updateCardNavigation();
            }
            
            // Set current section
            currentSection = 'About';
            rotationControlsDisabled = true; // Keep rotation disabled for About section
            
            // Ensure About section light and cards stay visible
            if (aboutSectionLight) {
                aboutSectionLight.visible = true;
                setAboutCardsVisibility(true);  // Ensure cards are visible when returning to About
            }
            
            // Start vector-based transition
            isTransitioning = true;
            transitionStartTime = Date.now();
            isVectorBasedTransition = true; // Use vector-based transition
            
            // Play transition sound
            if (window.playTransitionSound) {
                window.playTransitionSound();
            }
            
            console.log('🔙 Returning to About section overview (vector-based, exact match)');
        }
        
        // Function to smoothly transition camera to a specific section
        function transitionToSection(sectionName) {
            // Allow interrupting ongoing transitions for better UX
            if (isTransitioning) {
                console.log('🔄 Interrupting ongoing transition for section transition to', sectionName);
                isTransitioning = false; // Stop current transition
            }
            
            // Special handling for Contact section - go directly to card zoom
            if (sectionName === 'Contact') {
                // Hide cards from other sections before showing Contact
                if (aboutSectionLight) {
                    aboutSectionLight.visible = false;
                    setAboutCardsVisibility(false);
                    console.log('💡 About section light turned OFF (switching to Contact)');
                }
                
                if (appsSectionLight) {
                    appsSectionLight.visible = false;
                    setAppsCardsVisibility(false);
                    console.log('💡 Apps section light turned OFF (switching to Contact)');
                }
                
                // Turn on Contact section light and show cards BEFORE zooming
                if (contactSectionLight) {
                    contactSectionLight.visible = true;
                    setContactCardsVisibility(true);
                    console.log('💡 Contact section light turned ON');
                }
                
                // Reset card viewing state and controls
                isViewingCard = false;
                currentCardIndex = -1;
                currentSection = 'Contact';
                rotationControlsDisabled = true;
                
                // Update navigation button back to normal
                if (window.updateBackButtonForCard) {
                    window.updateBackButtonForCard(false);
                }
                
                // Go directly to Contact card zoom
                zoomToContactCard(0); // Index 0 for the "Stay Updated" card
                console.log('📧 Contact section - Going directly to Stay Updated card');
                return; // Exit early, zoomToContactCard handles the transition
            }
            
            const targetPosition = cameraPositions[sectionName];
            if (!targetPosition) return;
            
            // Store current position as start
            startPhi = phi;
            startTheta = theta;
            startRadius = radius;
            startLookAt = [...currentLookAt]; // Copy current look-at
            
            // Set target position with angle normalization
            targetPhi = targetPosition.phi;
            targetTheta = targetPosition.theta;
            targetRadius = targetPosition.radius;
            targetLookAt = [...targetPosition.lookAt]; // Copy target look-at
            
            // SPECIAL FIX FOR HOME: Always reset to original front-facing position using shortest path
            if (sectionName === 'Home') {
                // Reset phi to original Home position using shortest path calculation
                const originalHomePhi = 1.57; // Original front-facing position
                const phiDifference = getShortestAngleDifference(startPhi, originalHomePhi);
                targetPhi = startPhi + phiDifference; // Use relative target for shortest path
                console.log(`🏠 Home transition: Using shortest path to front-facing position (from ${startPhi.toFixed(2)} to ${targetPhi.toFixed(2)}, diff: ${phiDifference.toFixed(2)})`);
            } else {
                // Calculate shortest path for phi rotation (for other sections)
            const phiDifference = getShortestAngleDifference(startPhi, targetPhi);
            targetPhi = startPhi + phiDifference; // Use relative target for shortest path
            }
            
            // Handle manual controls based on section
            currentSection = sectionName; // Update current section for zoom limits
            
            // Reset card viewing state when transitioning to any section
            isViewingCard = false;
            currentCardIndex = -1;
            
            // Update card navigation arrows to hide them
            if (window.updateCardNavigation) {
                window.updateCardNavigation();
            }
            
            if (sectionName === 'Home') {
                rotationControlsDisabled = false; // Re-enable rotation controls for Home
                console.log('🎮 Manual camera rotation controls re-enabled');
            } else {
                rotationControlsDisabled = true; // Disable rotation controls for other sections (zoom still works)
                console.log('🔒 Manual camera rotation controls disabled (zoom still available)');
            }
            
            // Control section lighting and card visibility
                if (sectionName === 'About') {
                // Turn on About section light and show cards
                if (aboutSectionLight) {
                    aboutSectionLight.visible = true;
                    setAboutCardsVisibility(true);
                    console.log('💡 About section light turned ON');
            }
            
                // Turn off other sections
            if (appsSectionLight) {
                    appsSectionLight.visible = false;
                    setAppsCardsVisibility(false);
                    console.log('💡 Apps section light turned OFF');
                }
                if (contactSectionLight) {
                    contactSectionLight.visible = false;
                    setContactCardsVisibility(false);
                    console.log('💡 Contact section light turned OFF');
                }
            } else if (sectionName === 'Apps') {
                // Turn on Apps section light and show cards
                if (appsSectionLight) {
                    appsSectionLight.visible = true;
                    setAppsCardsVisibility(true);
                    console.log('💡 Apps section light turned ON');
                }
                
                // Turn off other sections
                if (aboutSectionLight) {
                    aboutSectionLight.visible = false;
                    setAboutCardsVisibility(false);
                    console.log('💡 About section light turned OFF');
                }
                if (contactSectionLight) {
                    contactSectionLight.visible = false;
                    setContactCardsVisibility(false);
                    console.log('💡 Contact section light turned OFF');
                }
            } else if (sectionName === 'Home') {
                // Turn off all section lights when going to Home
                if (aboutSectionLight) {
                    aboutSectionLight.visible = false;
                    setAboutCardsVisibility(false);
                    console.log('💡 About section light turned OFF');
                }
                if (appsSectionLight) {
                    appsSectionLight.visible = false;
                    setAppsCardsVisibility(false);
                    console.log('💡 Apps section light turned OFF');
                }
            }
            
            // Control Contact section lighting and card visibility (only for leaving Contact)
            if (contactSectionLight && sectionName !== 'Contact') {
                contactSectionLight.visible = false;
                setContactCardsVisibility(false); // Hide cards when leaving Contact
                console.log('💡 Contact section light turned OFF');
            }
            
            // Start transition
            isTransitioning = true;
            transitionStartTime = Date.now();
            isVectorBasedTransition = false; // Use spherical coordinates for section transitions
            
            // Play transition sound
            if (window.playTransitionSound) {
                window.playTransitionSound();
            }
            
            console.log(`🎥 Transitioning camera to ${sectionName} section (shortest path)`);
        }
        
        // Easing function for smooth transitions
        function easeInOutCubic(t) {
            return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
        }
        
        // Update camera transition
        function updateCameraTransition() {
            if (!isTransitioning) return;
            
            const elapsed = Date.now() - transitionStartTime;
            const progress = Math.min(elapsed / transitionDuration, 1);
            const easedProgress = easeInOutCubic(progress);
            
            if (isVectorBasedTransition) {
                // Vector-based transition (for card zoom)
                // Interpolate camera position directly
                const currentPos = startCameraPosition.clone().lerp(targetCameraPosition, easedProgress);
                camera.position.copy(currentPos);
                
                // Interpolate look-at target
                currentLookAt[0] = startLookAt[0] + (targetLookAt[0] - startLookAt[0]) * easedProgress;
                currentLookAt[1] = startLookAt[1] + (targetLookAt[1] - startLookAt[1]) * easedProgress;
                currentLookAt[2] = startLookAt[2] + (targetLookAt[2] - startLookAt[2]) * easedProgress;
                
                camera.lookAt(currentLookAt[0], currentLookAt[1], currentLookAt[2]);
            } else {
                // Spherical coordinate transition (for section navigation)
                // Interpolate between start and target positions
                phi = startPhi + (targetPhi - startPhi) * easedProgress;
                theta = startTheta + (targetTheta - startTheta) * easedProgress;
                radius = startRadius + (targetRadius - startRadius) * easedProgress;
                
                // Interpolate between start and target look-at points
                currentLookAt[0] = startLookAt[0] + (targetLookAt[0] - startLookAt[0]) * easedProgress;
                currentLookAt[1] = startLookAt[1] + (targetLookAt[1] - startLookAt[1]) * easedProgress;
                currentLookAt[2] = startLookAt[2] + (targetLookAt[2] - startLookAt[2]) * easedProgress;
                
                updateCameraPosition();
            }
            
            // End transition when complete
            if (progress >= 1) {
                isTransitioning = false;
                isCardTransitioning = false; // Reset card transition flag
                isVectorBasedTransition = false; // Reset vector transition flag
                
                if (!isVectorBasedTransition) {
                    // Normalize phi to prevent angle accumulation (only for spherical transitions)
                    phi = normalizeAngle(phi);
                    
                    // IMPORTANT: Reset phi to exact Home position after Home transition completes
                    // This prevents auto-rotation from starting at wrong angle
                    if (currentSection === 'Home') {
                        phi = 1.57; // Ensure exact Home position for consistent auto-rotation
                        console.log('🏠 Home transition complete: phi reset to exact front-facing position (1.57)');
                    }
                }
                
                console.log('✅ Camera transition complete');
            }
        }
        
        // Enhanced function to create sharp text textures optimized for mobile
        function createTextTexture(text, color, width, height, fixedFontSize = null) {
            // Detect mobile for different scaling strategy (device-based only)
            const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
            
            // Use higher resolution for mobile to combat blurriness
            const pixelRatio = window.devicePixelRatio || 1;
            const mobileScale = isMobile ? 2 : 1; // Force 2x resolution on mobile
            const scaleFactor = Math.max(pixelRatio, mobileScale);
            
            const canvas = document.createElement('canvas');
            canvas.width = width * scaleFactor;
            canvas.height = height * scaleFactor;
            const context = canvas.getContext('2d');
            
            // Scale the context to match the higher resolution
            context.scale(scaleFactor, scaleFactor);
            
            // Enhanced rendering settings for sharp text
            context.imageSmoothingEnabled = false; // Disable smoothing for crisp text
            context.textRenderingOptimization = 'optimizeQuality';
            context.webkitImageSmoothingEnabled = false;
            context.mozImageSmoothingEnabled = false;
            
            // Clear canvas with transparent background
            context.clearRect(0, 0, canvas.width, canvas.height);
            
            // Check if text contains newlines (multi-line text)
            const isMultiLine = text.includes('\n');
            
            if (isMultiLine) {
                // Handle multi-line text
                const lines = text.split('\n');
                // Use fixed font size directly without any scaling
                const fontSize = fixedFontSize ? fixedFontSize : Math.min(height * 0.15, width * 0.08);
                
                context.font = `${fontSize}px 'Orbitron', sans-serif`;
                context.textAlign = 'center';
                context.textBaseline = 'middle';
                
                const lineHeight = fontSize * 1.2;
                const totalTextHeight = lines.length * lineHeight;
                const startY = (height - totalTextHeight) / 2 + lineHeight / 2;
                
                lines.forEach((line, index) => {
                    const y = startY + index * lineHeight;
                    
                    // Add black border for visibility
                    context.strokeStyle = '#000000';
                    context.lineWidth = fixedFontSize ? 1 : 3; // Fixed stroke widths
                    context.lineJoin = 'round';
                    context.lineCap = 'round';
                    context.strokeText(line, width / 2, y);
                    
                    // Add secondary border
                    context.strokeStyle = 'rgba(0, 0, 0, 0.8)';
                    context.lineWidth = fixedFontSize ? 0.5 : 2; // Fixed stroke widths
                    context.strokeText(line, width / 2, y);
                    
                    // Draw the main text
                    context.fillStyle = color;
                    context.fillText(line, width / 2, y);
                });
            } else {
                // Handle single-line text with automatic wrapping
                // Use fixed font size if provided, otherwise use dynamic sizing
                const fontSize = fixedFontSize ? fixedFontSize : height * 0.6;
                
                // Force font loading by drawing invisible text first
                context.font = `600 ${fontSize}px 'Orbitron', sans-serif`;
                context.fillStyle = 'transparent';
                context.fillText('test', 0, 0);
                
                // Set text properties using Orbitron font
                context.font = `600 ${fontSize}px 'Orbitron', sans-serif`;
                context.textAlign = 'center';
                context.textBaseline = 'middle';
                
                // Auto-wrap text if it's too long
                const maxWidth = width * 0.9; // Use 90% of canvas width for padding
                const words = text.split(' ');
                const lines = [];
                let currentLine = '';
                
                for (let i = 0; i < words.length; i++) {
                    const testLine = currentLine + (currentLine ? ' ' : '') + words[i];
                    const metrics = context.measureText(testLine);
                    
                    if (metrics.width > maxWidth && currentLine !== '') {
                        lines.push(currentLine);
                        currentLine = words[i];
                    } else {
                        currentLine = testLine;
                    }
                }
                if (currentLine) {
                    lines.push(currentLine);
                }
                
                // Calculate line positioning
                const lineHeight = fontSize * 1.2;
                const totalTextHeight = lines.length * lineHeight;
                const startY = (height - totalTextHeight) / 2 + lineHeight / 2;
                
                // Draw each line
                lines.forEach((line, index) => {
                    const y = startY + index * lineHeight;
                    
                    // Add strong black border for visibility against reflections
                    context.strokeStyle = '#000000';
                    context.lineWidth = fixedFontSize ? 1 : 6; // Smaller stroke for fixed font
                    context.lineJoin = 'round';
                    context.lineCap = 'round';
                    context.strokeText(line, width / 2, y);
                    
                    // Add secondary border for extra definition
                    context.strokeStyle = 'rgba(0, 0, 0, 0.8)';
                    context.lineWidth = fixedFontSize ? 0.5 : 4; // Smaller stroke for fixed font
                    context.strokeText(line, width / 2, y);
                    
                    // Draw the main text
                    context.fillStyle = color;
                    context.fillText(line, width / 2, y);
                });
            }
            
            return canvas;
        }
        
        // Function to update camera in real-time when GUI values change
        function updateCameraFromGUI() {
            if (!isViewingCard || !currentSection) return;
            
            // Get the current card position based on section and index
            let cardPos;
            if (currentSection === 'Contact') {
                const cardPositions = [[0, 0.25, -5]];
                cardPos = cardPositions[currentCardIndex] || cardPositions[0];
            } else if (currentSection === 'Apps') {
                const cardPositions = [[-7, 0.15, 0], [-10, 0.15, 0], [-13, 0.15, 0]];
                cardPos = cardPositions[currentCardIndex] || cardPositions[0];
            } else if (currentSection === 'About') {
                const cardPositions = [[7, 0.15, 0], [10, 0.15, 0], [13, 0.15, 0]];
                cardPos = cardPositions[currentCardIndex] || cardPositions[0];
            } else {
                return;
            }
            
            // Calculate new camera position and lookAt based on current section
            let newCameraPos, newLookAt;
            
            if (currentSection === 'Contact') {
                newCameraPos = new THREE.Vector3(
                    cardPos[0] + cameraParams.contactCamX,
                    cameraParams.cameraHeight,
                    cardPos[2] + cameraParams.contactCamZ
                );
                newLookAt = [
                    cardPos[0] + cameraParams.contactLookX,
                    cardPos[1],
                    cardPos[2] + cameraParams.contactLookZ
                ];
            } else if (currentSection === 'Apps') {
                newCameraPos = new THREE.Vector3(
                    cardPos[0] + cameraParams.appsCamX,
                    cameraParams.cameraHeight,
                    cardPos[2] + cameraParams.appsCamZ
                );
                newLookAt = [
                    cardPos[0] + cameraParams.appsLookX,
                    cardPos[1],
                    cardPos[2] + cameraParams.appsLookZ
                ];
            } else if (currentSection === 'About') {
                newCameraPos = new THREE.Vector3(
                    cardPos[0] + cameraParams.aboutCamX,
                    cameraParams.cameraHeight,
                    cardPos[2] + cameraParams.aboutCamZ
                );
                newLookAt = [
                    cardPos[0] + cameraParams.aboutLookX,
                    cardPos[1],
                    cardPos[2] + cameraParams.aboutLookZ
                ];
            }
            
            // Update camera immediately (no transition)
            camera.position.copy(newCameraPos);
            camera.lookAt(newLookAt[0], newLookAt[1], newLookAt[2]);
            currentLookAt = [...newLookAt];
        }
        
        // Setup GUI for real-time camera control
        function setupCameraGUI() {
            if (typeof lil === 'undefined') {
                console.warn('lil-gui not loaded, skipping GUI setup');
                return;
            }
            
            const gui = new lil.GUI();
            gui.title('Camera Rotation Controls');
            
            // General settings
            const generalFolder = gui.addFolder('General Settings');
            generalFolder.add(cameraParams, 'cameraHeight', 3, 10, 0.1).name('Camera Height').onChange(updateCameraFromGUI);
            generalFolder.open();
            
            // Contact section controls
            const contactFolder = gui.addFolder('📧 Contact Section');
            contactFolder.add(cameraParams, 'contactCamX', -5, 5, 0.1).name('Camera X Offset').onChange(updateCameraFromGUI);
            contactFolder.add(cameraParams, 'contactCamZ', -5, 5, 0.1).name('Camera Z Offset').onChange(updateCameraFromGUI);
            contactFolder.add(cameraParams, 'contactLookX', -5, 5, 0.1).name('LookAt X Offset').onChange(updateCameraFromGUI);
            contactFolder.add(cameraParams, 'contactLookZ', -5, 5, 0.1).name('LookAt Z Offset').onChange(updateCameraFromGUI);
            
            // Apps section controls
            const appsFolder = gui.addFolder('📱 Apps Section');
            appsFolder.add(cameraParams, 'appsCamX', -5, 5, 0.1).name('Camera X Offset').onChange(updateCameraFromGUI);
            appsFolder.add(cameraParams, 'appsCamZ', -5, 5, 0.1).name('Camera Z Offset').onChange(updateCameraFromGUI);
            appsFolder.add(cameraParams, 'appsLookX', -5, 5, 0.1).name('LookAt X Offset').onChange(updateCameraFromGUI);
            appsFolder.add(cameraParams, 'appsLookZ', -5, 5, 0.1).name('LookAt Z Offset').onChange(updateCameraFromGUI);
            
            // About section controls
            const aboutFolder = gui.addFolder('ℹ️ About Section');
            aboutFolder.add(cameraParams, 'aboutCamX', -5, 5, 0.1).name('Camera X Offset').onChange(updateCameraFromGUI);
            aboutFolder.add(cameraParams, 'aboutCamZ', -5, 5, 0.1).name('Camera Z Offset').onChange(updateCameraFromGUI);
            aboutFolder.add(cameraParams, 'aboutLookX', -5, 5, 0.1).name('LookAt X Offset').onChange(updateCameraFromGUI);
            aboutFolder.add(cameraParams, 'aboutLookZ', -5, 5, 0.1).name('LookAt Z Offset').onChange(updateCameraFromGUI);
            
            // Utility functions
            const utilsFolder = gui.addFolder('🔧 Utils');
            utilsFolder.add(cameraParams, 'resetToDefaults').name('Reset to Defaults').onChange(updateCameraFromGUI);
            utilsFolder.add({
                logCurrentValues: function() {
                    console.log('Current Camera Parameters:', JSON.stringify(cameraParams, null, 2));
                }
            }, 'logCurrentValues').name('Log Current Values');
            
            console.log('✓ Camera GUI controls added with real-time updates');
        }
        
        // Initialize the website
        function init() {
            console.log('Initializing 3D website...');
            
            // Detect mobile device for performance optimization (device-based only, not viewport-based)
            const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
            const isNarrowViewport = window.innerWidth < 768;
            console.log(`📱 Device: ${isMobile ? 'Mobile' : 'Desktop'}, Viewport: ${isNarrowViewport ? 'Narrow' : 'Wide'}`);
            
            try {
                // Create scene
                scene = new THREE.Scene();
                scene.background = new THREE.Color(0x050508); // Match floor color for seamless horizon
                console.log('✓ Scene created');
                
                // Create camera with viewport-dependent near plane optimization
                const aspectRatio = window.innerWidth / window.innerHeight;
                const optimizedNear = aspectRatio < 1 ? 1.0 : 0.1;  // Larger near plane for narrow viewports
                camera = new THREE.PerspectiveCamera(75, aspectRatio, optimizedNear, 1000);
                camera.position.set(0, 5, 10);
                camera.lookAt(0, 1, 0);
                console.log(`✓ Camera created with optimized near plane: ${optimizedNear} for aspect ratio: ${aspectRatio.toFixed(2)}`);
                
                // Create renderer with consistent settings (same for desktop and mobile to prevent flickering)
                renderer = new THREE.WebGLRenderer({ 
                    antialias: true, // Enable antialiasing for all devices
                    alpha: false,
                    premultipliedAlpha: false,
                    stencil: false,
                    preserveDrawingBuffer: false,
                    powerPreference: "high-performance" // Use high-performance for all devices
                });
                renderer.setSize(window.innerWidth, window.innerHeight);
                renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); // Consistent pixel ratio
                renderer.setClearColor(0x050508); // Match floor color for seamless horizon
                renderer.shadowMap.enabled = true; // Enable shadows for all devices
                    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
                renderer.toneMapping = THREE.ACESFilmicToneMapping; // Better color rendering
                renderer.toneMappingExposure = 1.2; // Slightly brighter for reflections
                renderer.outputEncoding = THREE.sRGBEncoding; // Proper color space
                document.body.appendChild(renderer.domElement);
                console.log(`✓ Renderer created with consistent settings for all devices (Device: ${isMobile ? 'Mobile' : 'Desktop'}, Viewport: ${isNarrowViewport ? 'Narrow' : 'Wide'})`);
                
                // Add enhanced omnidirectional lighting for 3D text
                const ambientLight = new THREE.AmbientLight(0x404040, 0.3); // Strong ambient light base
                scene.add(ambientLight);
                
                            // Directional light removed for cleaner scene
                
                // Ring lights removed for cleaner neon effect
                
                // All directional lights removed to eliminate camera-following effects
                
                // AI accent lights removed for cleaner neon effect
                
                console.log('✓ Enhanced multi-directional lighting added for even illumination');
                
                // Create content
                            createLogo();
            createSimpleFloatingCubes();
            createRobot();
            createFloor();
            createAboutCards();
            createAppsCards();
            createContactCards();
                createGrid();
                
                // Setup controls
                setupControls();
                
                // Setup interaction
                setupInteraction();
                
                // Setup GUI for camera controls (disabled - values optimized)
                // setupCameraGUI();
                
                // Start animation
                animate();
                console.log('✓ Website initialized successfully');
                
            } catch (error) {
                console.error('❌ Error initializing website:', error);
            }
        }
        
        function createLogo() {
            console.log('Creating VibeCreAI 3D logo...');
            
            // Create logo group
            logoGroup = new THREE.Group();
            
            // Create tube neon effect function
            function createTubeNeonEffect(child, baseColor, brightColor, scaleFactor = 1.001) {
                const tubes = [];
                const edgesGeometry = new THREE.EdgesGeometry(child.geometry, 15);
                const positions = edgesGeometry.attributes.position.array;
                
                // Process each edge (pair of vertices)
                for (let i = 0; i < positions.length; i += 6) {
                    const start = new THREE.Vector3(positions[i], positions[i + 1], positions[i + 2]);
                    const end = new THREE.Vector3(positions[i + 3], positions[i + 4], positions[i + 5]);
                    
                    const distance = start.distanceTo(end);
                    if (distance > 0.001) { // Only create tube if there's meaningful distance
                        const curve = new THREE.LineCurve3(start, end);
                        
                        // Create tube layers for neon effect - adjustable thickness
                        const layers = [
                            { radius: 1.0, color: baseColor, opacity: 1.0 },      // Core tube
                            { radius: 0.8, color: brightColor, opacity: 0.8 },   // Inner glow
                            { radius: 0.5, color: baseColor, opacity: 0.5 }      // Outer glow
                        ];
                        
                        layers.forEach((layer, index) => {
                            const tubeGeometry = new THREE.TubeGeometry(curve, 2, layer.radius, 8, false);
                            const material = new THREE.MeshStandardMaterial({
                                color: layer.color,
                                transparent: true,
                                opacity: layer.opacity,
                                emissive: layer.color,                    // Same color as emissive
                                emissiveIntensity: 50,                    // Keep same brightness
                                
                                // Mobile anti-flickering - only render order fix
                                depthWrite: true,                         // Keep depth write enabled
                                depthTest: true,                          // Keep depth test enabled
                                side: THREE.DoubleSide                    // Keep double sided for visibility
                            });
                            
                            const tube = new THREE.Mesh(tubeGeometry, material);
                            tube.position.copy(child.position);
                            tube.rotation.copy(child.rotation);
                            tube.scale.setScalar(scaleFactor + index * 0.001);
                            tube.userData.isTube = true;
                            
                            // Set render order to prevent transparency sorting issues
                            tube.renderOrder = 100 + index;
                            
                            tubes.push(tube);
                        });
                    }
                }
                
                // Add just one strategic light per letter (at the center)
                const bbox = child.geometry.boundingBox;
                if (bbox) {
                    const center = bbox.getCenter(new THREE.Vector3());
                    const pointLight = new THREE.PointLight(baseColor, 3.0, 8.0); // Strong single light
                    pointLight.position.copy(center);
                    pointLight.userData.isNeonLight = true;
                    tubes.push(pointLight);
                }
                
                return tubes;
            }
            
            // OBJ loader for 3D text models
            const loader = new THREE.OBJLoader(loadingManager);
            
            // Define logo parts with their properties - tighter spacing
            const logoParts = [
                { file: 'V.obj', color: 0xffffff, position: [-4, -2, 0], scale: 0.03 },
                { file: 'IBE.obj', color: 0xffffff, position: [-3, -2, 0], scale: 0.025 },
                { file: 'C.obj', color: 0xffffff, position: [-0.5, -2, 0], scale: 0.03 },
                { file: 'RE.obj', color: 0xffffff, position: [0.53, -2, 0], scale: 0.025 },
                { file: 'AI.obj', color: 0x2cb4dc, position: [2.33, -2, 0], scale: 0.03 }
            ];
            
            let loadedParts = 0;
            const totalParts = logoParts.length;
            
            // Load each OBJ file
            logoParts.forEach((part, index) => {
                loader.load(
                    `./Assets/Font/${part.file}`,
                    function (object) {
                        console.log(`✓ Loaded ${part.file}`);
                        
                        // Store wireframe meshes to add after traverse
                        const wireframesToAdd = [];
                        
                        // Apply material and positioning to each mesh in the object
                        object.traverse(function (child) {
                            if (child.isMesh && !child.userData.isWireframe) {
                                // Ensure proper geometry
                                child.geometry.computeVertexNormals();
                                child.geometry.computeBoundingBox();
                                
                                // Create border-only neon effect using edges
                                if (part.color === 0x2cb4dc) {
                                    // AI letters - smooth surface with very dark blue
                                    child.material = new THREE.MeshBasicMaterial({
                                        color: 0x0a2a35,  // Very dark blue
                                        side: THREE.DoubleSide
                                    });
                                    
                                    // Create tube neon effect for AI letters
                                    const tubes = createTubeNeonEffect(child, 0x2cb4dc, 0x4dd4ff, 1.001);
                                    wireframesToAdd.push(...tubes);
                                    
                                } else {
                                    // Other letters - smooth surface with brighter gray
                                    child.material = new THREE.MeshBasicMaterial({
                                        color: 0x999999,  // Brighter gray (was 0x666666)
                                        side: THREE.DoubleSide
                                    });
                                    
                                    // Create tube neon effect for other letters
                                    const tubes = createTubeNeonEffect(child, 0x66ccdd, 0xccffff, 1.001);
                                    wireframesToAdd.push(...tubes);
                                }
                                
                                // Enable shadows
                                child.castShadow = true;
                                child.receiveShadow = true;
                            }
                        });
                        
                        // Add wireframe meshes to the object (not as children of individual meshes)
                        wireframesToAdd.forEach(wireframe => {
                            object.add(wireframe);
                        });
                        
                        // Position and scale the object
                        object.position.set(part.position[0], part.position[1], part.position[2]);
                        object.scale.setScalar(part.scale);
                        
                        // Rotate slightly to show 3D depth if needed
                        object.rotation.y = 0; // Keep facing forward
                        
                        // Add to logo group
                        logoGroup.add(object);
                        
                        loadedParts++;
                        
                        // When all parts are loaded, add to scene
                        if (loadedParts === totalParts) {
                            logoGroup.position.set(0, 3, 0); // Static position at height 3
                            scene.add(logoGroup);
                            console.log('✓ VibeCreAI 3D logo fully loaded and added to scene');
                        }
                    },
                    function (progress) {
                        console.log(`Loading ${part.file}:`, (progress.loaded / progress.total * 100) + '%');
                    },
                    function (error) {
                        console.error(`❌ Error loading ${part.file}:`, error);
                        
                        // Create fallback for this part
                        createFallbackText(part);
                        loadedParts++;
                        
                        if (loadedParts === totalParts) {
                            logoGroup.position.set(0, 3, 0);
                            scene.add(logoGroup);
                            console.log('✓ VibeCreAI logo added to scene (with fallbacks)');
                        }
                    }
                );
            });
            
            // Fallback function for failed OBJ loads
            function createFallbackText(part) {
                console.log(`Creating fallback for ${part.file}`);
                
                const canvas = createTextTexture(
                    part.file.replace('.obj', ''), 
                    part.color === 0x2bb4db ? '#2bb4db' : '#ffffff', 
                    200, 
                    80
                );
                const texture = new THREE.CanvasTexture(canvas);
                const geometry = new THREE.PlaneGeometry(part.scale * 1.5, 1);
                const material = new THREE.MeshPhongMaterial({ 
                    map: texture, 
                    transparent: true,
                    alphaTest: 0.1,
                    color: part.color
                });
                
                const mesh = new THREE.Mesh(geometry, material);
                mesh.position.set(part.position[0], part.position[1], part.position[2]);
                logoGroup.add(mesh);
            }
        }
        
        function createSimpleFloatingCubes() {
            const numCubes = 40; // Keep same number but optimize
            const spawnArea = 15;
            const cubeSize = 0.1;
            
            // Use InstancedMesh for better performance
            const cubeGeometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
            
            // Lambert material for better lighting response + emissive glow
            const cubeMaterial = new THREE.MeshLambertMaterial({
                color: 0xffffff,
                transparent: true,
                opacity: 0.8,
                // Add emissive glow
                emissive: 0x2cb4dd,
                emissiveIntensity: 0.3
            });
            
            // Create instanced mesh for all cubes
            const instancedCubes = new THREE.InstancedMesh(cubeGeometry, cubeMaterial, numCubes);
            
            // Strategic lighting setup for cube area
            const cubesAmbientLight = new THREE.AmbientLight(0x2cb4dd, 0.2);
            scene.add(cubesAmbientLight);
            
            // Cube area lights removed - using only 3D logo lighting
            
            // Store cube data in arrays for better performance
            const cubePositions = [];
            const cubeRotations = [];
            const cubeData = [];
            
            // Initialize cube data
            for (let i = 0; i < numCubes; i++) {
                const position = new THREE.Vector3(
                    (Math.random() - 0.5) * spawnArea,
                    (i / numCubes) * 50 + 0.5,
                    (Math.random() - 0.5) * spawnArea
                );
                
                const rotation = new THREE.Euler(0, 0, 0);
                
                cubePositions.push(position);
                cubeRotations.push(rotation);
                
                // Simplified cube data with 3D movement
                cubeData.push({
                    velocity: new THREE.Vector3(
                        (Math.random() - 0.5) * 0.016, // X movement: -0.008 to 0.008
                        Math.random() * 0.008 + 0.002, // Y movement: 0.002 to 0.01 (slight upward bias)
                        (Math.random() - 0.5) * 0.016  // Z movement: -0.008 to 0.008
                    ),
                    rotationSpeed: {
                        x: (Math.random() - 0.5) * 0.005,
                        y: (Math.random() - 0.5) * 0.005,
                        z: (Math.random() - 0.5) * 0.005
                    },
                    colorPhase: Math.random() * Math.PI * 2,
                    nextColorChange: Math.random() * 10000 + 5000,
                    boundsCheck: Math.random() * 1000 // Stagger bounds checking for performance
                });
                
                // Set initial transform
                const matrix = new THREE.Matrix4();
                matrix.compose(position, new THREE.Quaternion(), new THREE.Vector3(1, 1, 1));
                instancedCubes.setMatrixAt(i, matrix);
            }
            
            instancedCubes.instanceMatrix.needsUpdate = true;
            scene.add(instancedCubes);
            
            // Data Network Particle System
            const networkParticles = [];
            const activeConnections = [];
            const maxParticles = 100;
            const connectionDistance = 4.0; // Distance threshold for cube connections
            const particleLifespan = 2000; // 2 seconds
            
            // Create particle geometry and material
            const particleGeometry = new THREE.SphereGeometry(0.01, 4, 4); // Very small spheres
            const particleMaterial = new THREE.MeshBasicMaterial({
                color: 0xffffff,
                transparent: true,
                opacity: 0.8
            });
            
            // Particle pool for performance
            const particlePool = [];
            for (let i = 0; i < maxParticles; i++) {
                const particle = new THREE.Mesh(particleGeometry, particleMaterial.clone());
                particle.visible = false;
                scene.add(particle);
                particlePool.push({
                    mesh: particle,
                    active: false,
                    startTime: 0,
                    startCubeIndex: -1,  // Index of source cube
                    endCubeIndex: -1,    // Index of target cube
                    startPos: new THREE.Vector3(),
                    endPos: new THREE.Vector3(),
                    progress: 0
                });
            }
            
            // Function to spawn network particles between two cubes
            function spawnNetworkConnection(cubeIndex1, cubeIndex2) {
                // Find available particles
                const availableParticles = particlePool.filter(p => !p.active);
                const particleCount = Math.min(8, availableParticles.length); // More particles for smoother flow
                
                for (let i = 0; i < particleCount; i++) {
                    const particle = availableParticles[i];
                    if (!particle) break;
                    
                    particle.active = true;
                    particle.startTime = Date.now() - (i * 200); // Stagger start times for flowing effect
                    particle.startCubeIndex = cubeIndex1;
                    particle.endCubeIndex = cubeIndex2;
                    particle.startPos.copy(cubePositions[cubeIndex1]);
                    particle.endPos.copy(cubePositions[cubeIndex2]);
                    particle.progress = 0; // All particles start from beginning
                    particle.mesh.visible = true;
                    
                    // Particles will now track moving cubes in real-time
                }
            }
            
            // Function to update network particles
            function updateNetworkParticles() {
                const currentTime = Date.now();
                
                particlePool.forEach(particle => {
                    if (!particle.active) return;
                    
                    const age = currentTime - particle.startTime;
                    const lifeProgress = age / particleLifespan;
                    
                    if (lifeProgress >= 1.0) {
                        // Particle has expired
                        particle.active = false;
                        particle.mesh.visible = false;
                        return;
                    }
                    
                    if (lifeProgress < 0) return; // Particle hasn't started yet (due to staggering)
                    
                    // Update target positions in real-time to track moving cubes
                    const currentStartPos = cubePositions[particle.startCubeIndex];
                    const currentEndPos = cubePositions[particle.endCubeIndex];
                    
                    // Smooth eased progress for natural flow
                    const easedProgress = 1 - Math.pow(1 - lifeProgress, 3); // Ease out cubic
                    
                    // Update particle position along the real-time path between moving cubes
                    particle.mesh.position.lerpVectors(currentStartPos, currentEndPos, easedProgress);
                    
                    // Smooth opacity transition
                    let opacity;
                    if (lifeProgress < 0.1) {
                        // Fade in
                        opacity = lifeProgress * 10;
                    } else if (lifeProgress > 0.8) {
                        // Fade out
                        opacity = (1.0 - lifeProgress) * 5;
                    } else {
                        // Full opacity in middle
                        opacity = 1.0;
                    }
                    particle.mesh.material.opacity = Math.min(0.9, opacity);
                    
                    // Subtle pulse effect - using opacity instead of emissive
                    const pulseIntensity = 0.3 + Math.sin(currentTime * 0.005 + easedProgress * Math.PI * 4) * 0.2;
                    // Note: emissiveIntensity removed since MeshBasicMaterial doesn't support it
                });
            }
            
            // Function to check for cube connections and spawn particles
            function checkCubeConnections() {
                const currentTime = Date.now();
                
                // Only check every 200ms for performance
                if (currentTime % 200 < 16) {
                    for (let i = 0; i < numCubes; i++) {
                        for (let j = i + 1; j < numCubes; j++) {
                            const pos1 = cubePositions[i];
                            const pos2 = cubePositions[j];
                            const distance = pos1.distanceTo(pos2);
                            
                            if (distance < connectionDistance) {
                                // Check if connection already exists
                                const connectionId = `${i}-${j}`;
                                const existingConnection = activeConnections.find(c => c.id === connectionId);
                                
                                if (!existingConnection) {
                                    // Create new connection
                                    spawnNetworkConnection(i, j);
                                    activeConnections.push({
                                        id: connectionId,
                                        lastSpawn: currentTime
                                    });
                                }
                            }
                        }
                    }
                    
                    // Clean up old connections
                    for (let i = activeConnections.length - 1; i >= 0; i--) {
                        if (currentTime - activeConnections[i].lastSpawn > 1000) {
                            activeConnections.splice(i, 1);
                        }
                    }
                }
            }
            
            // Optimized animation function
            function animateSimpleCubes() {
                const time = Date.now();
                let needsUpdate = false;
                
                for (let i = 0; i < numCubes; i++) {
                    const cube = cubeData[i];
                    const position = cubePositions[i];
                    const rotation = cubeRotations[i];
                    
                    // Update position with 3D velocity
                    position.add(cube.velocity);
                    
                    // Boundary management - keep cubes within reasonable bounds
                    const bounds = 12; // Boundary size
                    let respawned = false;
                    
                    // Check boundaries and handle respawning/bouncing
                    if (position.y > 15) {
                        // Respawn from bottom when too high
                        position.y = 0.5;
                        position.x = (Math.random() - 0.5) * spawnArea;
                        position.z = (Math.random() - 0.5) * spawnArea;
                        // Randomize velocity on respawn
                        cube.velocity.set(
                            (Math.random() - 0.5) * 0.016,
                            Math.random() * 0.008 + 0.002,
                            (Math.random() - 0.5) * 0.016
                        );
                        cube.nextColorChange = time + Math.random() * 10000 + 5000;
                        respawned = true;
                    }
                    
                    if (!respawned) {
                        // Bounce off side boundaries
                        if (Math.abs(position.x) > bounds) {
                            cube.velocity.x *= -0.8; // Reverse and dampen
                            position.x = Math.sign(position.x) * bounds;
                        }
                        if (Math.abs(position.z) > bounds) {
                            cube.velocity.z *= -0.8; // Reverse and dampen
                            position.z = Math.sign(position.z) * bounds;
                        }
                        if (position.y < 0) {
                            cube.velocity.y = Math.abs(cube.velocity.y); // Bounce up
                            position.y = 0;
                        }
                    }
                    
                    // Update rotation
                    rotation.x += cube.rotationSpeed.x;
                    rotation.y += cube.rotationSpeed.y;
                    rotation.z += cube.rotationSpeed.z;
                    
                    // Update transform matrix
                    const matrix = new THREE.Matrix4();
                    const quaternion = new THREE.Quaternion().setFromEuler(rotation);
                    matrix.compose(position, quaternion, new THREE.Vector3(1, 1, 1));
                    instancedCubes.setMatrixAt(i, matrix);
                    needsUpdate = true;
                }
                
                if (needsUpdate) {
                    instancedCubes.instanceMatrix.needsUpdate = true;
                }
                
                // Enhanced color and glow animation
                const colorPhase = time * 0.001;
                const colorIntensity = 0.5 + Math.sin(colorPhase) * 0.3;
                const glowIntensity = 0.2 + Math.sin(colorPhase * 1.5) * 0.15;
                
                // Animate base color
                cubeMaterial.color.setRGB(colorIntensity, colorIntensity * 0.8, 1);
                
                // Animate emissive glow (pulsing effect)
                cubeMaterial.emissiveIntensity = glowIntensity;
                
                // Update network particle system
                checkCubeConnections();
                updateNetworkParticles();
                
                requestAnimationFrame(animateSimpleCubes);
            }
            
            // Start animation
            animateSimpleCubes();
            
            console.log('✓ Optimized instanced cubes created for mobile performance');
        }
        
        function createRobot() {
            console.log('Loading dancing robot model...');
            
            const loader = new THREE.GLTFLoader(loadingManager);
            
            loader.load(
                './Assets/3D/dance.glb',
                function (gltf) {
                    console.log('✓ Dancing robot model loaded');
                    
                    robot = gltf.scene;
                    robot.scale.setScalar(0.6); // Slightly larger for better visibility
                    robot.position.set(3, 0, 1.9); // Right side of the tagline text
                    robot.rotation.y = -Math.PI * 0.25; // Angle towards the logo/text
                    robot.castShadow = true;
                    
                    // Enable shadows for all meshes in the robot
                    let meshCount = 0;
                    robot.traverse((child) => {
                        if (child.isMesh) {
                            child.castShadow = true;
                            child.receiveShadow = true;
                            meshCount++;
                        }
                    });
                    console.log('🤖 Robot loaded with', meshCount, 'meshes');
                    
                    scene.add(robot);
                    
                    // Create a simple, reliable click box at robot's position
                    const clickBoxGeometry = new THREE.BoxGeometry(1.5, 2.5, 1.5); // Larger box for easier clicking
                    const clickBoxMaterial = new THREE.MeshBasicMaterial({ 
                        transparent: true, 
                        opacity: 0,
                        visible: false // Now invisible since clicking works
                    });
                    const robotClickBox = new THREE.Mesh(clickBoxGeometry, clickBoxMaterial);
                    robotClickBox.position.set(0, 1, 0); // Position relative to robot center
                    robotClickBox.userData.isRobotClickBox = true;
                    robot.add(robotClickBox); // Add as child of robot so it moves with robot
                    
                    // Store reference for easier access
                    robot.userData.clickBox = robotClickBox;
                    
                    console.log('🤖 Robot click box created (invisible)');
                    
                    // Setup animation mixer for dancing
                    if (gltf.animations && gltf.animations.length > 0) {
                        robotMixer = new THREE.AnimationMixer(robot);
                        
                        // Find dance animation or use the first available
                        let danceAnimation = gltf.animations.find(clip => 
                            clip.name.toLowerCase().includes('dance') || 
                            clip.name.toLowerCase().includes('dancing') ||
                            clip.name.toLowerCase().includes('move')
                        );
                        
                        if (!danceAnimation) {
                            danceAnimation = gltf.animations[0]; // Use first animation
                        }
                        
                        robotAction = robotMixer.clipAction(danceAnimation);
                        robotAction.play();
                        
                        console.log('✓ Robot dance animation started:', danceAnimation.name);
                    }
                },
                function (progress) {
                    console.log('Dancing robot loading progress:', (progress.loaded / progress.total * 100) + '%');
                },
                function (error) {
                    console.error('❌ Error loading dancing robot:', error);
                }
            );
        }
        
        function updateRobot(deltaTime) {
            if (!robot || !robotMixer) return;
            
            // Simply update the dance animation mixer
            robotMixer.update(deltaTime);
        }
        
        function createFloor() {
            const sections = [
                { name: 'Contact', position: [0, 0, -3], color: '#ffffff', description: 'Get in touch and stay updated on new launches', rotation: Math.PI },
                { name: 'Apps', position: [-5, 0, 0], color: '#ffffff', description: 'Explore Spin2Pick and upcoming AI-powered creations', rotation: -Math.PI / 2 },
                { name: 'About', position: [5, 0, 0], color: '#ffffff', description: 'Learn about our unique approach: Solo developer + AI agents', rotation: Math.PI / 2 }
            ];
            
            sections.forEach(section => {
                // Create text texture for floor section with higher resolution
                const textCanvas = createTextTexture(section.name, section.color, 480, 160); // Double resolution
                const textTexture = new THREE.CanvasTexture(textCanvas);
                textTexture.generateMipmaps = true;
                textTexture.minFilter = THREE.LinearMipmapLinearFilter;
                textTexture.magFilter = THREE.LinearFilter;
                textTexture.anisotropy = renderer.capabilities.getMaxAnisotropy();
                
                // Create the floor section with text - reduced size to match actual text area
                const geometry = new THREE.PlaneGeometry(2.2, 0.8);
                const material = new THREE.MeshLambertMaterial({ 
                    map: textTexture, 
                    transparent: true,
                    alphaTest: 0.1
                });
                const mesh = new THREE.Mesh(geometry, material);
                mesh.position.set(...section.position);
                mesh.position.y = 0.15; // Fixed position above floor
                mesh.rotation.x = -Math.PI / 2; // Rotate to lay flat on ground
                mesh.rotation.z = section.rotation; // Apply text rotation to face inward
                mesh.castShadow = true; // Enable shadow casting
                
                mesh.userData = { 
                    name: section.name, 
                    originalColor: section.color,
                    description: section.description,
                    originalTexture: textTexture
                };
                
                floorSections.push(mesh);
                scene.add(mesh);
            });
            
            // Add tagline below the logo with improved resolution
            const taglineCanvas = createTextTexture('Vibe Code Your Imagination', '#ffffff', 1400, 120);
            const taglineTexture = new THREE.CanvasTexture(taglineCanvas);
            taglineTexture.generateMipmaps = true;
            taglineTexture.minFilter = THREE.LinearMipmapLinearFilter;
            taglineTexture.magFilter = THREE.LinearFilter;
            taglineTexture.anisotropy = renderer.capabilities.getMaxAnisotropy();
            
            const taglineGeometry = new THREE.PlaneGeometry(6, 0.8);
            const taglineMaterial = new THREE.MeshLambertMaterial({ 
                map: taglineTexture, 
                transparent: true,
                alphaTest: 0.1
            });
            taglineMesh = new THREE.Mesh(taglineGeometry, taglineMaterial);
            taglineMesh.position.set(0, 0.15, 3); // Below the logo
            taglineMesh.rotation.x = -Math.PI / 2;
            taglineMesh.castShadow = true;
            
            // Add userData for interaction (similar to navigation sections)
            taglineMesh.userData = {
                name: 'Home',
                originalColor: '#ffffff',
                description: 'VibeCreAI - Where creativity meets AI innovation',
                originalTexture: taglineTexture
            };
            
            // Add tagline to clickable floor sections
            floorSections.push(taglineMesh);
            scene.add(taglineMesh);
            
            // DEBUG MODE: Make clickable geometry boundaries visible
            // Set this to true to see the actual clickable areas
            const DEBUG_GEOMETRY = false; // Change to true for debugging
            
            if (DEBUG_GEOMETRY) {
                console.log(`🐛 DEBUG MODE ACTIVE: Processing ${floorSections.length} floor sections`);
                
                floorSections.forEach((section, index) => {
                    console.log(`🔍 Processing section ${index}: ${section.userData.name} at position:`, section.position);
                    
                    // Create a VERY obvious debug cube above each section
                    const cubeGeometry = new THREE.BoxGeometry(0.5, 0.5, 0.5);
                    const cubeMaterial = new THREE.MeshBasicMaterial({
                        color: 0xff0000,  // Bright red
                        transparent: false
                    });
                    const debugCube = new THREE.Mesh(cubeGeometry, cubeMaterial);
                    debugCube.position.set(section.position.x, 2, section.position.z); // 2 units above ground
                    scene.add(debugCube);
                    console.log(`🔴 Red debug cube added above: ${section.userData.name}`);
                    
                    // Create solid colored outline to show clickable boundaries
                    const debugGeometry = section.geometry.clone();
                    const debugMaterial = new THREE.MeshBasicMaterial({
                        color: 0x00ff00,  // Bright green color
                        transparent: true,
                        opacity: 0.7,
                        side: THREE.DoubleSide,
                        depthTest: false  // Always render on top
                    });
                    const debugMesh = new THREE.Mesh(debugGeometry, debugMaterial);
                    
                    // Copy position and rotation from original mesh
                    debugMesh.position.copy(section.position);
                    debugMesh.rotation.copy(section.rotation);
                    debugMesh.position.y += 0.2; // Much higher above to be clearly visible
                    
                    scene.add(debugMesh);
                    console.log(`🟢 Green debug boundary added for: ${section.userData.name}`);
                    
                    // Also create a wireframe outline for precise boundaries
                    const wireframeGeometry = section.geometry.clone();
                    const wireframeMaterial = new THREE.MeshBasicMaterial({
                        color: 0xffff00,  // Yellow wireframe
                        wireframe: true,
                        transparent: true,
                        opacity: 1.0,
                        depthTest: false
                    });
                    const wireframeMesh = new THREE.Mesh(wireframeGeometry, wireframeMaterial);
                    
                    wireframeMesh.position.copy(section.position);
                    wireframeMesh.rotation.copy(section.rotation);
                    wireframeMesh.position.y += 0.25; // Even higher for wireframe
                    
                    scene.add(wireframeMesh);
                    console.log(`🟡 Yellow wireframe added for: ${section.userData.name}`);
                });
                
                console.log('🐛 DEBUG MODE: All debug elements added - you should see RED CUBES, GREEN boundaries, and YELLOW wireframes');
            }
            
            console.log('✓ Floor navigation sections created with text');
            
            // Create very dark reflective floor
            const floorGeometry = new THREE.PlaneGeometry(100, 100);
            const floorMaterial = new THREE.MeshPhongMaterial({ 
                color: 0x050508,        // Very dark base color
                specular: 0x1a1a2e,     // Dark specular highlights
                shininess: 120,         // Very shiny surface
                transparent: true,
                opacity: 0.95,
                reflectivity: 0.9,      // High reflectivity
                side: THREE.DoubleSide
            });
            const floor = new THREE.Mesh(floorGeometry, floorMaterial);
            floor.rotation.x = -Math.PI / 2;
            floor.position.y = -0.01;
            floor.receiveShadow = true;
            floor.castShadow = false;
            scene.add(floor);
            
            // Add a secondary ultra-dark reflective layer
            const shineGeometry = new THREE.PlaneGeometry(120, 120);
            const shineMaterial = new THREE.MeshPhongMaterial({
                color: 0x020204,        // Ultra dark base
                specular: 0x0a0a0f,     // Very dark specular
                shininess: 200,         // Ultra shiny
                transparent: true,
                opacity: 0.8,
                reflectivity: 0.95
            });
            const shineFloor = new THREE.Mesh(shineGeometry, shineMaterial);
            shineFloor.rotation.x = -Math.PI / 2;
            shineFloor.position.y = -0.02;
            shineFloor.receiveShadow = true;
            scene.add(shineFloor);
        }
        
        function createAboutCards() {
            console.log('Creating About section cards...');
            
            const cardData = [
                {
                    title: 'Who Am I',
                    description: 'I am a vibe coder with zero coding background. I am a drummer, and a father of four daughters. I just want to make things that are fun and interesting.',
                    position: [7, 0.15, 0]
                },
                {
                    title: 'What I Do', 
                    description: 'I build apps, games, and interactive experiments with AI through Vibe Coding.',
                    position: [10, 0.15, 0]
                },
                {
                    title: 'Why I Do It',
                    description: 'This is a hobby. A creative outlet. A playground. VibeCreAI isn\'t about perfection or profit. It\'s about learning, experimenting, and having fun.',
                    position: [13, 0.15, 0]
                }
            ];
            
            cardData.forEach((card, index) => {
                // Create card background
                const cardGeometry = new THREE.PlaneGeometry(2.8, 2.2);
                const cardMaterial = new THREE.MeshBasicMaterial({
                    color: 0x020205,  // Almost black background
                    transparent: true,
                    opacity: 1.0,     // Completely opaque
                    side: THREE.DoubleSide
                });
                const cardMesh = new THREE.Mesh(cardGeometry, cardMaterial);
                cardMesh.position.set(...card.position);
                cardMesh.position.y = 0.25; // Raise cards higher above floor to reduce reflection
                cardMesh.rotation.x = -Math.PI / 2; // Lay flat on ground
                cardMesh.rotation.z = Math.PI / 2; // Face toward center
                
                // Add a dark shadow plane underneath to block reflected light
                const shadowGeometry = new THREE.PlaneGeometry(3.0, 2.4);
                const shadowMaterial = new THREE.MeshBasicMaterial({
                    color: 0x000000,  // Pure black
                    transparent: true,
                    opacity: 0.8,
                    side: THREE.DoubleSide
                });
                const shadowMesh = new THREE.Mesh(shadowGeometry, shadowMaterial);
                shadowMesh.position.set(...card.position);
                shadowMesh.position.y = 0.05; // Just above floor, below card
                shadowMesh.rotation.x = -Math.PI / 2;
                shadowMesh.rotation.z = Math.PI / 2;
                
                // Create border
                const borderGeometry = new THREE.PlaneGeometry(2.9, 2.3);
                const borderMaterial = new THREE.MeshBasicMaterial({
                    color: 0x2cb4dc,
                    transparent: true,
                    opacity: 0.3,
                    side: THREE.DoubleSide
                });
                const borderMesh = new THREE.Mesh(borderGeometry, borderMaterial);
                borderMesh.position.set(...card.position);
                borderMesh.position.y = 0.245; // Slightly below raised card
                borderMesh.rotation.x = -Math.PI / 2;
                borderMesh.rotation.z = Math.PI / 2;
                
                // Create title text with enhanced resolution for mobile
                const titleCanvas = createTextTexture(card.title, '#2cb4dc', 1200, 200, 140); // Double resolution + double font size
                const titleTexture = new THREE.CanvasTexture(titleCanvas);
                titleTexture.generateMipmaps = false; // Disable mipmaps for sharp text
                titleTexture.minFilter = THREE.LinearFilter;
                titleTexture.magFilter = THREE.LinearFilter;
                titleTexture.anisotropy = renderer.capabilities.getMaxAnisotropy();
                titleTexture.flipY = true; // Fix upside down text
                
                const titleGeometry = new THREE.PlaneGeometry(2.4, 0.4);
                const titleMaterial = new THREE.MeshLambertMaterial({
                    map: titleTexture,
                    transparent: true,
                    alphaTest: 0.1
                });
                const titleMesh = new THREE.Mesh(titleGeometry, titleMaterial);
                titleMesh.position.set(card.position[0]-0.75, 0.26, card.position[2]); // Updated Y position for raised card
                titleMesh.rotation.x = -Math.PI / 2;
                titleMesh.rotation.z = Math.PI / 2;
                
                // Create description text with enhanced resolution for mobile
                const descCanvas = createTextTexture(card.description, '#ffffff', 1200, 800, 70); // Double resolution + double font size
                const descTexture = new THREE.CanvasTexture(descCanvas);
                descTexture.generateMipmaps = false; // Disable mipmaps for sharp text
                descTexture.minFilter = THREE.LinearFilter;
                descTexture.magFilter = THREE.LinearFilter;
                descTexture.anisotropy = renderer.capabilities.getMaxAnisotropy();
                descTexture.flipY = true; // Fix upside down text
                
                const descGeometry = new THREE.PlaneGeometry(2.4, 1.6);
                const descMaterial = new THREE.MeshBasicMaterial({
                    map: descTexture,
                    transparent: true,
                    alphaTest: 0.1
                });
                const descMesh = new THREE.Mesh(descGeometry, descMaterial);
                descMesh.position.set(card.position[0]+0.1, 0.26, card.position[2]); // Updated Y position for raised card
                descMesh.rotation.x = -Math.PI / 2;
                descMesh.rotation.z = Math.PI / 2;
                
                // Store references for interaction
                cardMesh.userData = {
                    isAboutCard: true,
                    cardIndex: index,
                    title: card.title,
                    originalMaterial: cardMaterial.clone(),
                    borderMesh: borderMesh,
                    titleMesh: titleMesh,
                    descMesh: descMesh,
                    shadowMesh: shadowMesh,  // Store shadow reference
                    originalBorderOpacity: 0.3
                };
                
                // Add to scene and tracking array
                scene.add(shadowMesh);  // Add shadow first (underneath)
                scene.add(cardMesh);
                scene.add(borderMesh);
                scene.add(titleMesh);
                scene.add(descMesh);
                aboutCards.push(cardMesh);
            });
            
            console.log('✓ About section cards created');
            
            // Create overhead light for About section (initially off)
            aboutSectionLight = new THREE.PointLight(0xffffff, 0.8, 20); // White light, moderate intensity, wide coverage
            aboutSectionLight.position.set(10, 8, 0); // Centered above the About cards area
            aboutSectionLight.castShadow = false;
            aboutSectionLight.visible = false; // Start invisible
            scene.add(aboutSectionLight);
            
            // Initially hide all About cards (only show when About section is selected)
            setAboutCardsVisibility(false);
            
            console.log('✓ About section lighting created (initially off)');
        }
        
        // Function to show/hide About cards
        function setAboutCardsVisibility(visible) {
            aboutCards.forEach(card => {
                // Hide/show main card
                card.visible = visible;
                
                // Hide/show all related elements
                if (card.userData.borderMesh) card.userData.borderMesh.visible = visible;
                if (card.userData.titleMesh) card.userData.titleMesh.visible = visible;
                if (card.userData.descMesh) card.userData.descMesh.visible = visible;
                if (card.userData.shadowMesh) card.userData.shadowMesh.visible = visible;
            });
            
            console.log(`📋 About cards ${visible ? 'shown' : 'hidden'}`);
        }
        
        function createAppsCards() {
            console.log('Creating Apps section cards...');
            
            const cardData = [
                {
                    title: 'SPIN 2 PICK',
                    description: 'Fun activity picker for kids with AI suggestions',
                    position: [-7, 0.15, 0],
                    status: 'Live',
                    statusColor: '#00ff88',
                    icon: 'spin2pick_icon.png',
                    link: 'https://www.vibecreai.com/spin2pick'
                },
                {
                    title: 'Games',
                    description: 'Innovative gaming experiences powered by AI',
                    position: [-10, 0.15, 0],
                    status: 'Coming Soon',
                    statusColor: '#ffaa00',
                    icon: null,
                    link: null
                },
                {
                    title: 'Smart Tools',
                    description: 'AI-powered tools for daily life and work',
                    position: [-13, 0.15, 0],
                    status: 'Planning',
                    statusColor: '#aa00ff',
                    icon: null,
                    link: null
                }
            ];
            
            cardData.forEach((card, index) => {
                // Create card background
                const cardGeometry = new THREE.PlaneGeometry(2.8, 2.2);
                const cardMaterial = new THREE.MeshBasicMaterial({
                    color: 0x020205,  // Almost black background
                    transparent: true,
                    opacity: 1.0,     // Completely opaque
                    side: THREE.DoubleSide
                });
                const cardMesh = new THREE.Mesh(cardGeometry, cardMaterial);
                cardMesh.position.set(...card.position);
                cardMesh.position.y = 0.25; // Raise cards higher above floor to reduce reflection
                cardMesh.rotation.x = -Math.PI / 2; // Lay flat on ground
                cardMesh.rotation.z = -Math.PI / 2; // Face toward center (opposite rotation from About cards)
                
                // Add a dark shadow plane underneath to block reflected light
                const shadowGeometry = new THREE.PlaneGeometry(3.0, 2.4);
                const shadowMaterial = new THREE.MeshBasicMaterial({
                    color: 0x000000,  // Pure black
                    transparent: true,
                    opacity: 0.8,
                    side: THREE.DoubleSide
                });
                const shadowMesh = new THREE.Mesh(shadowGeometry, shadowMaterial);
                shadowMesh.position.set(...card.position);
                shadowMesh.position.y = 0.05; // Just above floor, below card
                shadowMesh.rotation.x = -Math.PI / 2;
                shadowMesh.rotation.z = -Math.PI / 2;
                
                // Create border
                const borderGeometry = new THREE.PlaneGeometry(2.9, 2.3);
                const borderMaterial = new THREE.MeshBasicMaterial({
                    color: 0x2cb4dc,
                    transparent: true,
                    opacity: 0.3,
                    side: THREE.DoubleSide
                });
                const borderMesh = new THREE.Mesh(borderGeometry, borderMaterial);
                borderMesh.position.set(...card.position);
                borderMesh.position.y = 0.245; // Slightly below raised card
                borderMesh.rotation.x = -Math.PI / 2;
                borderMesh.rotation.z = -Math.PI / 2;
                
                // Create status badge with enhanced resolution
                const statusCanvas = createTextTexture(card.status, card.statusColor, 400, 200, 80); // Double resolution + double font size
                const statusTexture = new THREE.CanvasTexture(statusCanvas);
                statusTexture.generateMipmaps = false; // Disable mipmaps for sharp text
                statusTexture.minFilter = THREE.LinearFilter;
                statusTexture.magFilter = THREE.LinearFilter;
                statusTexture.anisotropy = renderer.capabilities.getMaxAnisotropy();
                statusTexture.flipY = true; // Fix upside down text
                
                const statusGeometry = new THREE.PlaneGeometry(0.8, 0.25);
                const statusMaterial = new THREE.MeshBasicMaterial({
                    map: statusTexture,
                    transparent: true,
                    alphaTest: 0.1
                });
                const statusMesh = new THREE.Mesh(statusGeometry, statusMaterial);
                statusMesh.position.set(card.position[0] - 0.8, 0.26, card.position[2] - 0.8); // Top of card
                statusMesh.rotation.x = -Math.PI / 2;
                statusMesh.rotation.z = -Math.PI / 2;
                
                // Create app icon (if available)
                let iconMesh = null;
                if (card.icon) {
                    const iconGeometry = new THREE.PlaneGeometry(0.8, 0.8);
                    const iconLoader = new THREE.TextureLoader(loadingManager);
                    const iconTexture = iconLoader.load(`Assets/Image/${card.icon}`);
                    iconTexture.generateMipmaps = true;
                    iconTexture.minFilter = THREE.LinearMipmapLinearFilter;
                    iconTexture.magFilter = THREE.LinearFilter;
                    iconTexture.anisotropy = renderer.capabilities.getMaxAnisotropy();
                    
                    const iconMaterial = new THREE.MeshBasicMaterial({
                        map: iconTexture,
                        transparent: true,
                        alphaTest: 0.1
                    });
                    iconMesh = new THREE.Mesh(iconGeometry, iconMaterial);
                    iconMesh.position.set(card.position[0] - 0.65, 0.27, card.position[2] + 0); // Center-top of card
                    iconMesh.rotation.x = -Math.PI / 2;
                    iconMesh.rotation.z = -Math.PI / 2;
                    
                    // Set userData for icon click detection
                    iconMesh.userData = {
                        isAppsIcon: true,
                        cardIndex: index,
                        title: card.title,
                        link: card.link
                    };
                    
                    // Add to icons tracking array if it has a link
                    if (card.link) {
                        appsIcons.push(iconMesh);
                    }
                }
                
                // Create title text with enhanced resolution for mobile
                const titleCanvas = createTextTexture(card.title, '#2cb4dc', 1200, 200, 140); // Double resolution + double font size
                const titleTexture = new THREE.CanvasTexture(titleCanvas);
                titleTexture.generateMipmaps = false; // Disable mipmaps for sharp text
                titleTexture.minFilter = THREE.LinearFilter;
                titleTexture.magFilter = THREE.LinearFilter;
                titleTexture.anisotropy = renderer.capabilities.getMaxAnisotropy();
                titleTexture.flipY = true; // Fix upside down text
                
                const titleGeometry = new THREE.PlaneGeometry(2.4, 0.4);
                const titleMaterial = new THREE.MeshBasicMaterial({
                    map: titleTexture,
                    transparent: true,
                    alphaTest: 0.1
                });
                const titleMesh = new THREE.Mesh(titleGeometry, titleMaterial);
                titleMesh.position.set(card.position[0] + 0.7, 0.26, card.position[2] + 0); // Adjusted for Apps card orientation
                titleMesh.rotation.x = -Math.PI / 2;
                titleMesh.rotation.z = -Math.PI / 2;
                
                // Create description text with enhanced resolution for mobile
                const descCanvas = createTextTexture(card.description, '#ffffff', 1200, 800, 70); // Double resolution + double font size
                const descTexture = new THREE.CanvasTexture(descCanvas);
                descTexture.generateMipmaps = false; // Disable mipmaps for sharp text
                descTexture.minFilter = THREE.LinearFilter;
                descTexture.magFilter = THREE.LinearFilter;
                descTexture.anisotropy = renderer.capabilities.getMaxAnisotropy();
                descTexture.flipY = true; // Fix upside down text
                
                const descGeometry = new THREE.PlaneGeometry(2.4, 1.6);
                const descMaterial = new THREE.MeshBasicMaterial({
                    map: descTexture,
                    transparent: true,
                    alphaTest: 0.1
                });
                const descMesh = new THREE.Mesh(descGeometry, descMaterial);
                descMesh.position.set(card.position[0] + 0.1, 0.26, card.position[2] + 0);
                descMesh.rotation.x = -Math.PI / 2;
                descMesh.rotation.z = -Math.PI / 2;
                
                // Store references for interaction
                cardMesh.userData = {
                    isAppsCard: true,
                    cardIndex: index,
                    title: card.title,
                    link: card.link,
                    originalMaterial: cardMaterial.clone(),
                    borderMesh: borderMesh,
                    titleMesh: titleMesh,
                    descMesh: descMesh,
                    shadowMesh: shadowMesh,
                    statusMesh: statusMesh,
                    iconMesh: iconMesh,
                    originalBorderOpacity: 0.3
                };
                
                // Add to scene and tracking array
                scene.add(shadowMesh);  // Add shadow first (underneath)
                scene.add(cardMesh);
                scene.add(borderMesh);
                scene.add(statusMesh);
                if (iconMesh) scene.add(iconMesh);
                scene.add(titleMesh);
                scene.add(descMesh);
                appsCards.push(cardMesh);
            });
            
            console.log('✓ Apps section cards created');
            
            // Create overhead light for Apps section (initially off)
            appsSectionLight = new THREE.PointLight(0xffffff, 0.8, 20); // White light, moderate intensity, wide coverage
            appsSectionLight.position.set(-10, 8, 0); // Centered above the Apps cards area
            appsSectionLight.castShadow = false;
            appsSectionLight.visible = false; // Start invisible
            scene.add(appsSectionLight);
            
            // Initially hide all Apps cards (only show when Apps section is selected)
            setAppsCardsVisibility(false);
            
            console.log('✓ Apps section lighting created (initially off)');
        }
        
        // Function to show/hide Apps cards
        function setAppsCardsVisibility(visible) {
            appsCards.forEach(card => {
                // Hide/show main card
                card.visible = visible;
                
                // Hide/show all related elements
                if (card.userData.borderMesh) card.userData.borderMesh.visible = visible;
                if (card.userData.titleMesh) card.userData.titleMesh.visible = visible;
                if (card.userData.descMesh) card.userData.descMesh.visible = visible;
                if (card.userData.shadowMesh) card.userData.shadowMesh.visible = visible;
                if (card.userData.statusMesh) card.userData.statusMesh.visible = visible;
                if (card.userData.iconMesh) card.userData.iconMesh.visible = visible;
            });
            
            // Also control icon visibility
            appsIcons.forEach(icon => {
                icon.visible = visible;
            });
            
            console.log(`📋 Apps cards ${visible ? 'shown' : 'hidden'}`);
        }
        
        function createContactCards() {
            console.log('Creating Contact section cards...');
            
            const cardData = [
                {
                    title: 'Stay Updated',
                    description: 'Get Notified About My Creations!\nI\'ll only send updates about new launches.',
                    position: [0, 0.15, -5],
                    hasForm: true
                }
            ];
            
            cardData.forEach((card, index) => {
                // Create card background
                const cardGeometry = new THREE.PlaneGeometry(2.8, 2.2); // Match About/Apps card size // Slightly smaller card for better proportions
                const cardMaterial = new THREE.MeshBasicMaterial({
                    color: 0x020205,  // Almost black background
                    transparent: true,
                    opacity: 1.0,     // Completely opaque
                    side: THREE.DoubleSide
                });
                const cardMesh = new THREE.Mesh(cardGeometry, cardMaterial);
                cardMesh.position.set(...card.position);
                cardMesh.position.y = 0.25; // Raise cards higher above floor to reduce reflection
                cardMesh.rotation.x = -Math.PI / 2; // Lay flat on ground
                cardMesh.rotation.z = Math.PI; // Face toward center
                
                // Add a dark shadow plane underneath to block reflected light
                const shadowGeometry = new THREE.PlaneGeometry(3.0, 2.4); // Match About/Apps shadow size
                const shadowMaterial = new THREE.MeshBasicMaterial({
                    color: 0x000000,  // Pure black
                    transparent: true,
                    opacity: 0.8,
                    side: THREE.DoubleSide
                });
                const shadowMesh = new THREE.Mesh(shadowGeometry, shadowMaterial);
                shadowMesh.position.set(...card.position);
                shadowMesh.position.y = 0.05; // Just above floor, below card
                shadowMesh.rotation.x = -Math.PI / 2;
                shadowMesh.rotation.z = Math.PI;
                
                // Create border
                const borderGeometry = new THREE.PlaneGeometry(2.9, 2.3); // Match About/Apps border size
                const borderMaterial = new THREE.MeshBasicMaterial({
                    color: 0x2cb4dc,
                    transparent: true,
                    opacity: 0.3,
                    side: THREE.DoubleSide
                });
                const borderMesh = new THREE.Mesh(borderGeometry, borderMaterial);
                borderMesh.position.set(...card.position);
                borderMesh.position.y = 0.245; // Slightly below raised card
                borderMesh.rotation.x = -Math.PI / 2;
                borderMesh.rotation.z = Math.PI;
                
                // Create title text with enhanced resolution for mobile
                const titleCanvas = createTextTexture(card.title, '#ffffff', 1200, 200, 120); // Double resolution + double font size
                const titleTexture = new THREE.CanvasTexture(titleCanvas);
                titleTexture.generateMipmaps = false; // Disable mipmaps for sharp text
                titleTexture.minFilter = THREE.LinearFilter;
                titleTexture.magFilter = THREE.LinearFilter;
                titleTexture.anisotropy = renderer.capabilities.getMaxAnisotropy();
                titleTexture.flipY = true; // Fix upside down text
                
                const titleGeometry = new THREE.PlaneGeometry(2.4, 0.4); // Match About/Apps title size
                const titleMaterial = new THREE.MeshBasicMaterial({
                    map: titleTexture,
                    transparent: true,
                    alphaTest: 0.1
                });
                const titleMesh = new THREE.Mesh(titleGeometry, titleMaterial);
                titleMesh.position.set(card.position[0], 0.26, card.position[2] + 0.9); // Adjusted for smaller card
                titleMesh.rotation.x = -Math.PI / 2;
                titleMesh.rotation.z = Math.PI;
                
                // Create description text with enhanced resolution for mobile
                const descCanvas = createTextTexture(card.description, '#ffffff', 1600, 500, 65); // Double resolution + double font size
                const descTexture = new THREE.CanvasTexture(descCanvas);
                descTexture.generateMipmaps = false; // Disable mipmaps for sharp text
                descTexture.minFilter = THREE.LinearFilter;
                descTexture.magFilter = THREE.LinearFilter;
                descTexture.anisotropy = renderer.capabilities.getMaxAnisotropy();
                descTexture.flipY = true; // Fix upside down text
                
                const descGeometry = new THREE.PlaneGeometry(2.4, 0.8); // Adjusted for smaller card
                const descMaterial = new THREE.MeshBasicMaterial({
                    map: descTexture,
                    transparent: true,
                    alphaTest: 0.1
                });
                const descMesh = new THREE.Mesh(descGeometry, descMaterial);
                descMesh.position.set(card.position[0], 0.26, card.position[2] + 0.4); // Adjusted for smaller card
                descMesh.rotation.x = -Math.PI / 2;
                descMesh.rotation.z = Math.PI;
                
                // Copyright text with enhanced resolution
                const inputCanvas = createTextTexture('© 2025 VibeCreAI - All rights reserved', '#888888', 1200, 160, 40); // Double resolution + double font size
                const inputTexture = new THREE.CanvasTexture(inputCanvas);
                inputTexture.generateMipmaps = false; // Disable mipmaps for sharp text
                inputTexture.minFilter = THREE.LinearFilter;
                inputTexture.magFilter = THREE.LinearFilter;
                inputTexture.anisotropy = renderer.capabilities.getMaxAnisotropy();
                inputTexture.flipY = true; // Fix upside down text
                
                const inputGeometry = new THREE.PlaneGeometry(2.6, 0.3); // Adjusted copyright for smaller card
                const inputMaterial = new THREE.MeshBasicMaterial({
                    map: inputTexture,
                    transparent: true,
                    alphaTest: 0.1
                });
                const inputMesh = new THREE.Mesh(inputGeometry, inputMaterial);
                inputMesh.position.set(card.position[0], 0.26, card.position[2] - 0.9); // Adjusted for smaller card
                inputMesh.rotation.x = -Math.PI / 2;
                inputMesh.rotation.z = Math.PI;
                
                // Create subscribe button with enhanced resolution
                const buttonCanvas = createTextTexture('Subscribe', '#ffffff', 600, 160, 100); // Double resolution + double font size
                const buttonTexture = new THREE.CanvasTexture(buttonCanvas);
                buttonTexture.generateMipmaps = false; // Disable mipmaps for sharp text
                buttonTexture.minFilter = THREE.LinearFilter;
                buttonTexture.magFilter = THREE.LinearFilter;
                buttonTexture.anisotropy = renderer.capabilities.getMaxAnisotropy();
                buttonTexture.flipY = true; // Fix upside down text
                
                const buttonGeometry = new THREE.PlaneGeometry(2.4, 0.35); // Adjusted button for smaller card
                const buttonMaterial = new THREE.MeshBasicMaterial({
                    map: buttonTexture,
                    transparent: true,
                    alphaTest: 0.1,
                    color: 0x2cb4dc // Blue button background
                });
                const buttonMesh = new THREE.Mesh(buttonGeometry, buttonMaterial);
                buttonMesh.position.set(card.position[0], 0.26, card.position[2]); // Adjusted for smaller card
                buttonMesh.rotation.x = -Math.PI / 2;
                buttonMesh.rotation.z = Math.PI;
                
                // Add button interaction data
                buttonMesh.userData = {
                    isSubscribeButton: true,
                    originalColor: 0x2cb4dc
                };
                
                // Create contact info with enhanced resolution
                const contactCanvas = createTextTexture('📧 contact@vibecreai.com\n🌐 www.vibecreai.com', '#2cb4dc', 1200, 240, 50); // Double resolution + double font size
                const contactTexture = new THREE.CanvasTexture(contactCanvas);
                contactTexture.generateMipmaps = false; // Disable mipmaps for sharp text
                contactTexture.minFilter = THREE.LinearFilter;
                contactTexture.magFilter = THREE.LinearFilter;
                contactTexture.anisotropy = renderer.capabilities.getMaxAnisotropy();
                contactTexture.flipY = true; // Fix upside down text
                
                const contactGeometry = new THREE.PlaneGeometry(2.4, 0.5); // Adjusted contact info for smaller card
                const contactMaterial = new THREE.MeshBasicMaterial({
                    map: contactTexture,
                    transparent: true,
                    alphaTest: 0.1
                });
                const contactMesh = new THREE.Mesh(contactGeometry, contactMaterial);
                contactMesh.position.set(card.position[0], 0.26, card.position[2] - 0.5); // Adjusted for smaller card
                contactMesh.rotation.x = -Math.PI / 2;
                contactMesh.rotation.z = Math.PI;
                
                // Add interaction data for email click
                contactMesh.userData = {
                    isEmailClickable: true,
                    originalColor: 0x2cb4dc
                };
                
                // Store references for interaction
                cardMesh.userData = {
                    isContactCard: true,
                    cardIndex: index,
                    title: card.title,
                    originalMaterial: cardMaterial.clone(),
                    borderMesh: borderMesh,
                    titleMesh: titleMesh,
                    descMesh: descMesh,
                    shadowMesh: shadowMesh,
                    inputMesh: inputMesh,
                    buttonMesh: buttonMesh,
                    contactMesh: contactMesh,
                    originalBorderOpacity: 0.3
                };
                
                // Add to scene and tracking array
                scene.add(shadowMesh);  // Add shadow first (underneath)
                scene.add(cardMesh);
                scene.add(borderMesh);
                scene.add(titleMesh);
                scene.add(descMesh);
                scene.add(inputMesh);
                scene.add(buttonMesh);
                scene.add(contactMesh);
                contactCards.push(cardMesh);
                
                // Also track the button and contact info separately for click detection
                if (buttonMesh.userData.isSubscribeButton) {
                    contactCards.push(buttonMesh);
                }
                if (contactMesh.userData.isEmailClickable) {
                    contactCards.push(contactMesh);
                }
            });
            
            console.log('✓ Contact section cards created');
            
            // Create overhead light for Contact section (initially off)
            contactSectionLight = new THREE.PointLight(0xffffff, 0.8, 20); // White light, moderate intensity, wide coverage
            contactSectionLight.position.set(0, 8, -5); // Centered above the Contact cards area
            contactSectionLight.castShadow = false;
            contactSectionLight.visible = false; // Start invisible
            scene.add(contactSectionLight);
            
            // Initially hide all Contact cards (only show when Contact section is selected)
            setContactCardsVisibility(false);
            
            console.log('✓ Contact section lighting created (initially off)');
        }
        
        // Function to show/hide Contact cards
        function setContactCardsVisibility(visible) {
            contactCards.forEach(card => {
                // Hide/show main card
                card.visible = visible;
                
                // Hide/show all related elements
                if (card.userData.borderMesh) card.userData.borderMesh.visible = visible;
                if (card.userData.titleMesh) card.userData.titleMesh.visible = visible;
                if (card.userData.descMesh) card.userData.descMesh.visible = visible;
                if (card.userData.shadowMesh) card.userData.shadowMesh.visible = visible;
                if (card.userData.inputMesh) card.userData.inputMesh.visible = visible;
                if (card.userData.buttonMesh) card.userData.buttonMesh.visible = visible;
                if (card.userData.contactMesh) card.userData.contactMesh.visible = visible;
            });
            
            console.log(`📋 Contact cards ${visible ? 'shown' : 'hidden'}`);
        }
        
        function createGrid() {
            // Grid removed - using reflective floor instead for smooth surface
            console.log('✓ Reflective floor environment created');
        }
        
        function setupControls() {
            // Mouse down event
            renderer.domElement.addEventListener('mousedown', (event) => {
                if (isTransitioning || rotationControlsDisabled) return; // Prevent rotation control during transitions or when disabled
                
                isDragging = true;
                lastMouseX = event.clientX;
                lastMouseY = event.clientY;
                lastInteractionTime = Date.now(); // Track interaction time
                
                // Reset velocities when starting new drag
                thetaVelocity = 0;
                phiVelocity = 0;
            });
            
            // Mouse move event
            renderer.domElement.addEventListener('mousemove', (event) => {
                if (isDragging && !isTransitioning && !rotationControlsDisabled) {
                    const deltaX = event.clientX - lastMouseX;
                    const deltaY = event.clientY - lastMouseY;
                    
                    // Only allow horizontal rotation (phi) - restrict vertical rotation (theta)
                    // Map both horizontal and vertical movements to horizontal rotation
                    // Fixed: deltaX should be positive so drag right = rotate right
                    phiVelocity = (deltaX - deltaY) * sensitivity; // Horizontal drag in correct direction, vertical drag opposite
                    thetaVelocity = 0; // Disable vertical rotation
                    
                    // Apply immediate movement - only update phi
                    phi += phiVelocity;
                    // Keep theta constant - no vertical rotation allowed
                    
                    lastMouseX = event.clientX;
                    lastMouseY = event.clientY;
                    lastInteractionTime = Date.now(); // Track interaction time
                    
                    updateCameraPosition();
                }
            });
            
            // Mouse up event
            renderer.domElement.addEventListener('mouseup', () => {
                isDragging = false;
                // Don't reset velocities here - let them continue for momentum
            });
            
            // Mouse leave event (stop dragging if mouse leaves canvas)
            renderer.domElement.addEventListener('mouseleave', () => {
                isDragging = false;
                // Don't reset velocities here - let them continue for momentum
            });
            
            // Touch events for mobile support
            renderer.domElement.addEventListener('touchstart', (event) => {
                event.preventDefault();
                if (isTransitioning || rotationControlsDisabled) return; // Prevent rotation control during transitions or when disabled
                
                if (event.touches.length === 1) {
                    isDragging = true;
                    lastMouseX = event.touches[0].clientX;
                    lastMouseY = event.touches[0].clientY;
                    lastInteractionTime = Date.now();
                    
                    // Reset velocities when starting new drag
                    thetaVelocity = 0;
                    phiVelocity = 0;
                }
            });
            
            renderer.domElement.addEventListener('touchmove', (event) => {
                event.preventDefault();
                if (isDragging && event.touches.length === 1 && !isTransitioning && !rotationControlsDisabled) {
                    const deltaX = event.touches[0].clientX - lastMouseX;
                    const deltaY = event.touches[0].clientY - lastMouseY;
                    
                    // Only allow horizontal rotation (phi) - restrict vertical rotation (theta)
                    // Map both horizontal and vertical movements to horizontal rotation
                    // Fixed: deltaX should be positive so drag right = rotate right
                    phiVelocity = (deltaX - deltaY) * sensitivity; // Horizontal drag in correct direction, vertical drag opposite
                    thetaVelocity = 0; // Disable vertical rotation
                    
                    // Apply immediate movement - only update phi
                    phi += phiVelocity;
                    // Keep theta constant - no vertical rotation allowed
                    
                    lastMouseX = event.touches[0].clientX;
                    lastMouseY = event.touches[0].clientY;
                    lastInteractionTime = Date.now();
                    
                    updateCameraPosition();
                }
            });
            
            renderer.domElement.addEventListener('touchend', (event) => {
                event.preventDefault();
                isDragging = false;
                // Don't reset velocities here - let them continue for momentum
            });
            
            // Wheel event - Enhanced with card navigation for desktop users
            renderer.domElement.addEventListener('wheel', (event) => {
                event.preventDefault();
                if (isTransitioning) return; // Only prevent during transitions
                
                const zoomSpeed = 0.1;
                const rotationSpeed = 0.1; // Increased speed for horizontal rotation via wheel (was 0.01)
                const zoomDirection = event.deltaY > 0 ? 1 : -1;
                
                // Card navigation when viewing cards (desktop alternative to mobile swipe)
                if (isViewingCard && (currentSection === 'Apps' || currentSection === 'About')) {
                    // Allow interrupting ongoing card transitions for better UX
                    if (isCardTransitioning) {
                        console.log('🔄 Interrupting ongoing card transition for new wheel navigation');
                        isCardTransitioning = false; // Stop current card transition
                    }
                    
                    // Use wheel scroll to navigate between cards
                    const maxCards = currentSection === 'Apps' ? 3 : currentSection === 'About' ? 3 : 1;
                    
                    if (zoomDirection > 0) {
                        // Scroll down - go to next card
                        const newIndex = Math.min(maxCards - 1, currentCardIndex + 1);
                        if (newIndex !== currentCardIndex) {
                            console.log(`🖱️ Wheel scroll DOWN - Next card: ${newIndex}`);
                            isCardTransitioning = true; // Mark card transition as active
                            
                            if (currentSection === 'Apps') {
                                zoomToAppsCard(newIndex);
                            } else if (currentSection === 'About') {
                                zoomToAboutCard(newIndex);
                            }
                        }
                    } else {
                        // Scroll up - go to previous card
                        const newIndex = Math.max(0, currentCardIndex - 1);
                        if (newIndex !== currentCardIndex) {
                            console.log(`🖱️ Wheel scroll UP - Previous card: ${newIndex}`);
                            isCardTransitioning = true; // Mark card transition as active
                            
                            if (currentSection === 'Apps') {
                                zoomToAppsCard(newIndex);
                            } else if (currentSection === 'About') {
                                zoomToAboutCard(newIndex);
                            }
                        }
                    }
                    return; // Exit early when handling card navigation
                }
                
                // Standard zoom and rotation behavior when not viewing cards
                
                // Add horizontal rotation component (only in Home section when rotation controls are enabled)
                if (!rotationControlsDisabled && currentSection === 'Home') {
                    // Apply horizontal rotation based on wheel direction
                    phi += zoomDirection * rotationSpeed;
                    lastInteractionTime = Date.now();
                    updateCameraPosition();
                }
                
                // Define zoom limits based on current section
                let maxDistance, minDistance;
                if (currentSection === 'Home') {
                    maxDistance = 25; // Can zoom out far in Home
                    minDistance = 3;  // Can zoom in close in Home
                } else {
                    // For About, Apps, Contact sections
                    maxDistance = 11; // Initial section view is maximum zoom out
                    minDistance = 5;  // Allow significant zoom in to read text clearly
                }
                
                // Calculate current distance from look-at point
                const currentDistance = camera.position.distanceTo(new THREE.Vector3(...currentLookAt));
                const newDistance = currentDistance * (1 + zoomDirection * zoomSpeed);
                
                // Check if new distance is within limits
                if (newDistance >= minDistance && newDistance <= maxDistance) {
                    // Move camera along its current direction vector
                    const direction = new THREE.Vector3();
                    camera.getWorldDirection(direction);
                    direction.negate(); // We want to move opposite to viewing direction for zoom out
                    
                    const lookAtPoint = new THREE.Vector3(...currentLookAt);
                    const newPosition = lookAtPoint.clone().add(direction.multiplyScalar(newDistance));
                    
                    camera.position.copy(newPosition);
                    camera.lookAt(...currentLookAt);
                    
                    lastInteractionTime = Date.now();
                }
            });
            
            // Smooth camera animation with momentum
            function smoothCameraUpdate() {
                const currentTime = Date.now();
                const timeSinceInteraction = currentTime - lastInteractionTime;
                
                // Update camera transition if active
                updateCameraTransition();
                
                // Only apply manual rotation controls if not transitioning AND rotation controls are enabled
                if (!isTransitioning && !rotationControlsDisabled) {
                    // Apply momentum when not dragging
                    if (!isDragging) {
                        // Apply velocities - only horizontal rotation allowed
                        phi += phiVelocity;
                        // Keep theta constant - no vertical rotation momentum
                        
                        // Apply damping to slow down movement
                        phiVelocity *= dampingFactor;
                        thetaVelocity = 0; // Always reset theta velocity to prevent vertical movement
                        
                        // Stop very small movements to prevent jitter
                        if (Math.abs(phiVelocity) < 0.0001) phiVelocity = 0;
                        
                        updateCameraPosition();
                    }
                    
                    // Auto rotation with jitter reduction techniques
                    if (timeSinceInteraction > autoRotateDelay && 
                        Math.abs(phiVelocity) < 0.001 && 
                        Math.abs(thetaVelocity) < 0.001 && 
                        !isDragging) {
                        
                        // Use frame-rate independent rotation for smoother movement
                        const deltaTime = 16.67; // Target 60fps = 16.67ms per frame
                        const rotationSpeed = 0.00005; // Even slower rotation speed (half of before)
                        
                        // Apply rotation with frame-rate compensation
                        phi += rotationSpeed * deltaTime;
                        
                        // Only update camera position less frequently to reduce jitter
                        if (Math.floor(currentTime / 100) !== Math.floor((currentTime - deltaTime) / 100)) {
                            updateCameraPosition();
                        }
                    }
                }
                
                requestAnimationFrame(smoothCameraUpdate);
            }
            
            // Start smooth camera animation loop
            smoothCameraUpdate();
            
            // Initial camera position update
            updateCameraPosition();
            
            console.log('✓ Smooth camera controls setup with momentum and inertia');
        }
        
        function setupInteraction() {
            // Mouse hover and click
            renderer.domElement.addEventListener('mousemove', (event) => {
                mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
                mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
                
                raycaster.setFromCamera(mouse, camera);
                const intersects = raycaster.intersectObjects(floorSections);
                
                // Only check visible cards for hover interactions
                const visibleAboutCards = aboutCards.filter(card => card.visible);
                const visibleAppsCards = appsCards.filter(card => card.visible);
                const visibleAppsIcons = appsIcons.filter(icon => icon.visible);
                const visibleContactCards = contactCards.filter(card => card.visible);
                
                const cardIntersects = raycaster.intersectObjects(visibleAboutCards);
                const appsCardIntersects = raycaster.intersectObjects(visibleAppsCards);
                const appsIconIntersects = raycaster.intersectObjects(visibleAppsIcons);
                const contactCardIntersects = raycaster.intersectObjects(visibleContactCards);
                const robotIntersects = robot ? raycaster.intersectObjects([robot], true) : [];
                
                // Reset robot scale
                if (robot) {
                    robot.scale.setScalar(0.6); // Reset to original size
                }
                
                // Reset all sections
                floorSections.forEach(section => {
                    section.material.map = section.userData.originalTexture;
                    section.scale.set(1, 1, 1);
                });
                
                // Reset all about cards
                aboutCards.forEach(card => {
                    card.material.color.setHex(0x020205);
                    card.material.opacity = 1.0;
                    card.userData.borderMesh.material.opacity = card.userData.originalBorderOpacity;
                    card.userData.borderMesh.material.color.setHex(0x2cb4dc);
                    card.scale.set(1, 1, 1);
                });
                
                // Reset all apps cards
                appsCards.forEach(card => {
                    card.material.color.setHex(0x020205);
                    card.material.opacity = 1.0;
                    card.userData.borderMesh.material.opacity = card.userData.originalBorderOpacity;
                    card.userData.borderMesh.material.color.setHex(0x2cb4dc);
                    card.scale.set(1, 1, 1);
                });
                
                // Reset all apps icons
                appsIcons.forEach(icon => {
                    icon.scale.set(1, 1, 1);
                });
                
                // Reset all contact cards
                contactCards.forEach(card => {
                    if (card.userData.isContactCard) {
                        card.material.color.setHex(0x020205);
                        card.material.opacity = 1.0;
                        card.userData.borderMesh.material.opacity = card.userData.originalBorderOpacity;
                        card.userData.borderMesh.material.color.setHex(0x2cb4dc);
                        card.scale.set(1, 1, 1);
                    } else if (card.userData.isSubscribeButton) {
                        card.material.color.setHex(card.userData.originalColor);
                        card.scale.set(1, 1, 1);
                    } else if (card.userData.isEmailClickable) {
                        card.material.color.setHex(0xffffff); // Reset to white
                        card.scale.set(1, 1, 1);
                    }
                });
                
                let isHoveringInteractive = false;
                
                // Handle floor section hover
                if (intersects.length > 0) {
                    const hoveredSection = intersects[0].object;
                    
                    // Use appropriate resolution and display text based on the section
                    let width, height, displayText;
                    if (hoveredSection.userData.name === 'Home') {
                        width = 1400;
                        height = 120;
                        displayText = 'Vibe Code Your Imagination';
                    } else {
                        width = 480;
                        height = 160;
                        displayText= hoveredSection.userData.name;
                    }
                    
                    // Create highlighted version of the text
                    const highlightCanvas = createTextTexture(
                        displayText, 
                        '#2bb4db', 
                        width, 
                        height
                    );
                    const highlightTexture = new THREE.CanvasTexture(highlightCanvas);
                    highlightTexture.generateMipmaps = true;
                    highlightTexture.minFilter = THREE.LinearMipmapLinearFilter;
                    highlightTexture.magFilter = THREE.LinearFilter;
                    highlightTexture.anisotropy = renderer.capabilities.getMaxAnisotropy();
                    
                    hoveredSection.material.map = highlightTexture;
                    hoveredSection.scale.set(1.1, 1.1, 1.1);
                    
                    isHoveringInteractive = true;
                }
                
                // Handle about card hover
                if (cardIntersects.length > 0) {
                    const hoveredCard = cardIntersects[0].object;
                    
                    // Apply subtle blue glow effect (very dark and low opacity)
                    hoveredCard.material.color.setHex(0x0a2530);
                    hoveredCard.material.opacity = 0.4;
                    hoveredCard.userData.borderMesh.material.opacity = 0.5;
                    hoveredCard.scale.set(1.05, 1.05, 1.05);
                    
                    // Add subtle glow to border (very dark)
                    hoveredCard.userData.borderMesh.material.color.setHex(0x125a78);
                    
                    isHoveringInteractive = true;
                }
                
                // Handle apps card hover
                if (appsCardIntersects.length > 0) {
                    const hoveredCard = appsCardIntersects[0].object;
                    
                    // Apply subtle blue glow effect (very dark and low opacity)
                    hoveredCard.material.color.setHex(0x0a2530);
                    hoveredCard.material.opacity = 0.4;
                    hoveredCard.userData.borderMesh.material.opacity = 0.5;
                    hoveredCard.scale.set(1.05, 1.05, 1.05);
                    
                    // Add subtle glow to border (very dark)
                    hoveredCard.userData.borderMesh.material.color.setHex(0x125a78);
                    
                    isHoveringInteractive = true;
                }
                
                // Handle apps icon hover (special effect for clickable icons)
                if (appsIconIntersects.length > 0) {
                    const hoveredIcon = appsIconIntersects[0].object;
                    
                    // Apply special glow effect for icons only
                    hoveredIcon.scale.set(1.2, 1.2, 1.2);
                    
                    isHoveringInteractive = true;
                }
                
                // Handle contact card hover
                if (contactCardIntersects.length > 0) {
                    const hoveredCard = contactCardIntersects[0].object;
                    
                    if (hoveredCard.userData.isContactCard) {
                        // Apply subtle blue glow effect to contact card (very dark and low opacity)
                        hoveredCard.material.color.setHex(0x0a2530);
                        hoveredCard.material.opacity = 0.4;
                        hoveredCard.userData.borderMesh.material.opacity = 0.5;
                        hoveredCard.scale.set(1.05, 1.05, 1.05);
                        
                        // Add subtle glow to border (very dark)
                        hoveredCard.userData.borderMesh.material.color.setHex(0x125a78);
                    } else if (hoveredCard.userData.isSubscribeButton) {
                        // Apply special hover effect for subscribe button
                        hoveredCard.material.color.setHex(0x00ff88); // Green highlight
                        hoveredCard.scale.set(1.1, 1.1, 1.1);
                    } else if (hoveredCard.userData.isEmailClickable) {
                        // Apply hover effect for email contact info
                        hoveredCard.material.color.setHex(0x4dd4ff); // Bright blue for hover
                        hoveredCard.scale.set(1.05, 1.05, 1.05);
                    }
                    
                    isHoveringInteractive = true;
                }
                
                // Handle robot hover
                if (robotIntersects.length > 0) {
                    // Make robot slightly bigger on hover
                    robot.scale.setScalar(0.75); // Slightly larger than normal (0.6)
                    
                    isHoveringInteractive = true;
                }
                
                document.body.style.cursor = isHoveringInteractive ? 'pointer' : 'default';
            });
            
            // Combined click/touch handler function
            function handleInteraction(event) {
                let clientX, clientY;
                
                // Get coordinates from either mouse or touch event
                if (event.type === 'touchend') {
                    if (event.changedTouches.length === 0) return;
                    clientX = event.changedTouches[0].clientX;
                    clientY = event.changedTouches[0].clientY;
                } else {
                    clientX = event.clientX;
                    clientY = event.clientY;
                }
                
                mouse.x = (clientX / window.innerWidth) * 2 - 1;
                mouse.y = -(clientY / window.innerHeight) * 2 + 1;
                
                raycaster.setFromCamera(mouse, camera);
                
                const intersects = raycaster.intersectObjects(floorSections);
                
                // Only check visible cards for interactions
                const visibleAboutCards = aboutCards.filter(card => card.visible);
                const visibleAppsCards = appsCards.filter(card => card.visible);
                const visibleAppsIcons = appsIcons.filter(icon => icon.visible);
                const visibleContactCards = contactCards.filter(card => card.visible);
                
                const cardIntersects = raycaster.intersectObjects(visibleAboutCards);
                const appsCardIntersects = raycaster.intersectObjects(visibleAppsCards);
                const appsIconIntersects = raycaster.intersectObjects(visibleAppsIcons);
                const contactCardIntersects = raycaster.intersectObjects(visibleContactCards);
                const robotIntersects = robot ? raycaster.intersectObjects([robot], true) : [];
                
                // Check for robot clicks first (highest priority)
                if (robotIntersects.length > 0) {
                    console.log('🤖 Clicked on dancing robot!', robotIntersects[0].object);
                    
                    // Create ripple effect on robot
                    robot.scale.setScalar(0.8);
                    setTimeout(() => {
                        robot.scale.setScalar(0.6);
                    }, 200);
                    
                    // Zoom camera to robot
                    zoomToRobot();
                    return; // Exit early to prevent other click handling
                }
                
                // Check for About card clicks first
                if (cardIntersects.length > 0) {
                    const clickedCard = cardIntersects[0].object;
                    const cardIndex = clickedCard.userData.cardIndex;
                    const cardTitle = clickedCard.userData.title;
                    
                    console.log(`🖱️ Clicked on About card: ${cardTitle}`);
                    
                    // Create ripple effect on clicked card
                    clickedCard.scale.set(1.2, 1.2, 1.2);
                    setTimeout(() => {
                        clickedCard.scale.set(1, 1, 1);
                    }, 200);
                    
                    // Zoom to specific card based on its index
                    zoomToAboutCard(cardIndex);
                    return; // Exit early to prevent floor section click handling
                }
                
                // Check for Apps icon clicks first (higher priority than card clicks)
                if (appsIconIntersects.length > 0) {
                    const clickedIcon = appsIconIntersects[0].object;
                    const iconTitle = clickedIcon.userData.title;
                    const iconLink = clickedIcon.userData.link;
                    
                    console.log(`🖱️ Clicked on Apps icon: ${iconTitle}`);
                    
                    // Create ripple effect on clicked icon
                    clickedIcon.scale.set(1.5, 1.5, 1.5);
                    setTimeout(() => {
                        clickedIcon.scale.set(1, 1, 1);
                    }, 200);
                    
                    // Open the link if available
                    if (iconLink) {
                        console.log(`🔗 Opening link: ${iconLink}`);
                        window.open(iconLink, '_blank');
                    } else {
                        console.log(`ℹ️ ${iconTitle} - No link available yet`);
                    }
                    
                    return; // Exit early to prevent card or floor section click handling
                }
                
                // Check for Apps card clicks
                if (appsCardIntersects.length > 0) {
                    const clickedCard = appsCardIntersects[0].object;
                    const cardIndex = clickedCard.userData.cardIndex;
                    const cardTitle = clickedCard.userData.title;
                    const cardLink = clickedCard.userData.link;
                    
                    console.log(`🖱️ Clicked on Apps card: ${cardTitle}`);
                    
                    // Create ripple effect on clicked card
                    clickedCard.scale.set(1.2, 1.2, 1.2);
                    setTimeout(() => {
                        clickedCard.scale.set(1, 1, 1);
                    }, 200);
                    
                    // Zoom to specific card based on its index
                    zoomToAppsCard(cardIndex);
                    
                    // Don't open link automatically - only when icon is clicked
                    if (!cardLink) {
                        console.log(`ℹ️ ${cardTitle} - No link available yet`);
                    }
                    
                    return; // Exit early to prevent floor section click handling
                }
                
                // Check for Contact card clicks
                if (contactCardIntersects.length > 0) {
                    const clickedCard = contactCardIntersects[0].object;
                    
                    if (clickedCard.userData.isSubscribeButton) {
                        console.log('🖱️ Clicked on Subscribe button');
                        
                        // Create ripple effect on clicked button
                        clickedCard.scale.set(1.3, 1.3, 1.3);
                        setTimeout(() => {
                            clickedCard.scale.set(1, 1, 1);
                        }, 200);
                        
                        // Handle subscription
                        handleSubscription();
                        
                        return; // Exit early to prevent other click handling
                    } else if (clickedCard.userData.isEmailClickable) {
                        console.log('📧 Clicked on email contact info');
                        
                        // Create ripple effect on clicked email
                        clickedCard.scale.set(1.2, 1.2, 1.2);
                        setTimeout(() => {
                            clickedCard.scale.set(1, 1, 1);
                        }, 200);
                        
                        // Smart email handling - try mailto first, then fallback
                        handleEmailClick();
                        
                        return; // Exit early to prevent other click handling
                    } else if (clickedCard.userData.isContactCard) {
                        const cardIndex = clickedCard.userData.cardIndex;
                        const cardTitle = clickedCard.userData.title;
                        
                        console.log(`🖱️ Clicked on Contact card: ${cardTitle}`);
                        
                        // Create ripple effect on clicked card
                        clickedCard.scale.set(1.2, 1.2, 1.2);
                        setTimeout(() => {
                            clickedCard.scale.set(1, 1, 1);
                        }, 200);
                        
                        // Zoom to specific card based on its index
                        zoomToContactCard(cardIndex);
                        
                        return; // Exit early to prevent floor section click handling
                    }
                }
                
                // Handle floor section clicks if no card was clicked
                if (intersects.length > 0) {
                    const clickedSection = intersects[0].object;
                    const sectionName = clickedSection.userData.name;
                    
                    console.log(`🖱️ Clicked on: ${sectionName}`);
                    
                    // Create ripple effect
                    clickedSection.scale.set(1.3, 1.3, 1.3);
                    setTimeout(() => {
                        clickedSection.scale.set(1, 1, 1);
                    }, 200);
                    
                    // Transition camera to the clicked section
                    transitionToSection(sectionName);
                    
                    // Update navigation state to match the clicked section
                    if (window.updateNavigationState) {
                        window.updateNavigationState(sectionName);
                    }
                    
                    // Handle different click actions based on section
                    switch(sectionName) {
                        case 'Contact':
                            console.log('📧 Contact section - Camera focusing on contact area');
                            break;
                        case 'Apps':
                            console.log('📱 Apps section - Camera focusing on apps area');
                            break;
                        case 'About':
                            console.log('ℹ️ About section - Camera focusing on about area');
                            break;
                        case 'Home':
                            console.log('🏠 Home section - Camera returning to main view');
                            break;
                    }
                }
            }
            
            // Add both click and touch event listeners
            renderer.domElement.addEventListener('click', handleInteraction);
            renderer.domElement.addEventListener('touchend', (event) => {
                event.preventDefault();
                // Handle single tap (not dragging)
                if (!isDragging) {
                    // If viewing a card, allow Subscribe button interactions and Apps icon clicks
                    if (isViewingCard) {
                        // Check if touch is on Subscribe button or Apps icon
                        let clientX, clientY;
                        if (event.changedTouches.length === 0) return;
                        clientX = event.changedTouches[0].clientX;
                        clientY = event.changedTouches[0].clientY;
                        
                        mouse.x = (clientX / window.innerWidth) * 2 - 1;
                        mouse.y = -(clientY / window.innerHeight) * 2 + 1;
                        
                        raycaster.setFromCamera(mouse, camera);
                        const visibleContactCards = contactCards.filter(card => card.visible);
                        const visibleAppsIcons = appsIcons.filter(icon => icon.visible);
                        const contactCardIntersects = raycaster.intersectObjects(visibleContactCards);
                        const appsIconIntersects = raycaster.intersectObjects(visibleAppsIcons);
                        
                        // Handle Subscribe button and email clicks when viewing cards
                        if (contactCardIntersects.length > 0) {
                            const clickedCard = contactCardIntersects[0].object;
                            if (clickedCard.userData.isSubscribeButton || clickedCard.userData.isEmailClickable) {
                                handleInteraction(event);
                            }
                        }
                        // Also handle Apps icon clicks when viewing cards
                        else if (appsIconIntersects.length > 0) {
                            handleInteraction(event);
                        }
                    } else {
                        // Not viewing a card, handle all touch interactions normally
                        handleTouchInteraction(event);
                    }
                }
            });
            
            // Touch-specific interaction handler that includes visual feedback
            function handleTouchInteraction(event) {
                let clientX, clientY;
                
                // Get coordinates from touch event
                if (event.changedTouches.length === 0) return;
                clientX = event.changedTouches[0].clientX;
                clientY = event.changedTouches[0].clientY;
                
                mouse.x = (clientX / window.innerWidth) * 2 - 1;
                mouse.y = -(clientY / window.innerHeight) * 2 + 1;
                
                raycaster.setFromCamera(mouse, camera);
                const intersects = raycaster.intersectObjects(floorSections);
                
                // For touch events on floor sections, add visual feedback before handling interaction
                if (intersects.length > 0) {
                    const touchedSection = intersects[0].object;
                    const sectionName = touchedSection.userData.name;
                    
                    console.log(`👆 Touch detected on: ${sectionName}`);
                    
                    // Add immediate visual feedback for touch
                    let width, height, displayText;
                    if (sectionName === 'Home') {
                        width = 1400;
                        height = 120;
                        displayText = 'Vibe Code Your Imagination';
                    } else {
                        width = 480;
                        height = 160;
                        displayText = sectionName;
                    }
                    
                    // Create highlighted version for touch feedback
                    const highlightCanvas = createTextTexture(displayText, '#2bb4db', width, height);
                    const highlightTexture = new THREE.CanvasTexture(highlightCanvas);
                    highlightTexture.generateMipmaps = true;
                    highlightTexture.minFilter = THREE.LinearMipmapLinearFilter;
                    highlightTexture.magFilter = THREE.LinearFilter;
                    highlightTexture.anisotropy = renderer.capabilities.getMaxAnisotropy();
                    
                    // Apply highlight effect briefly
                    touchedSection.material.map = highlightTexture;
                    touchedSection.scale.set(1.1, 1.1, 1.1);
                    
                    // Reset after short delay, then proceed with normal interaction
                    setTimeout(() => {
                        touchedSection.material.map = touchedSection.userData.originalTexture;
                        touchedSection.scale.set(1, 1, 1);
                        
                        // Now handle the actual interaction
                        handleInteraction(event);
                    }, 150);
                } else {
                    // No floor section touched, handle normally
                    handleInteraction(event);
                }
            }
            
            console.log('✓ Interaction system setup with mobile touch support');
        }
        
        function animate() {
            requestAnimationFrame(animate);
            
            const deltaTime = clock.getDelta();
            
            // Logo is now static - no rotation or bouncing
            // Removed: logoGroup.position.y = 3 + Math.sin(Date.now() * 0.001) * 0.3;
            // Removed: logoGroup.rotation.y += 0.003;
            
            // Floor sections are now static - no floating animation
            
            // Update robot movement and animation
            updateRobot(deltaTime);
            
            // Static neon glow - no pulsing or color breathing
            
            renderer.render(scene, camera);
        }
        
        // Handle window resize with dynamic near plane optimization
        window.addEventListener('resize', () => {
            const newAspectRatio = window.innerWidth / window.innerHeight;
            const newNear = newAspectRatio < 1 ? 1.0 : 0.1;  // Adjust near plane for narrow viewports
            
            camera.aspect = newAspectRatio;
            camera.near = newNear;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
            
            console.log(`📐 Viewport resized - Aspect: ${newAspectRatio.toFixed(2)}, Near plane: ${newNear}`);
        });
        
        // Function to check if font is loaded
        function isFontLoaded() {
            const canvas = document.createElement('canvas');
            const context = canvas.getContext('2d');
            
            // Test with fallback font
            context.font = '20px Courier New';
            const fallbackWidth = context.measureText('Test').width;
            
            // Test with Born2bSporty font
            context.font = '600 20px Orbitron, sans-serif';
            const customWidth = context.measureText('Test').width;
            
            return fallbackWidth !== customWidth;
        }
        
        // Initialize modal event listeners
        function initModalListeners() {
            // Subscription modal elements
            const modal = document.getElementById('subscriptionModal');
            const modalClose = document.getElementById('modalClose');
            const subscriptionForm = document.getElementById('subscriptionForm');
            const emailInput = document.getElementById('emailInput');
            
            // Email modal elements
            const emailModal = document.getElementById('emailModal');
            const emailModalClose = document.getElementById('emailModalClose');
            const copyEmailBtn = document.getElementById('copyEmailBtn');
            
            // Subscription modal event listeners
            modalClose.addEventListener('click', closeSubscriptionModal);
            modal.addEventListener('click', (e) => {
                if (e.target === modal) {
                    closeSubscriptionModal();
                }
            });
            
            // Email modal event listeners
            emailModalClose.addEventListener('click', closeEmailModal);
            emailModal.addEventListener('click', (e) => {
                if (e.target === emailModal) {
                    closeEmailModal();
                }
            });
            copyEmailBtn.addEventListener('click', copyEmailToClipboard);
            
            // Close modals when pressing Escape key
            document.addEventListener('keydown', (e) => {
                if (e.key === 'Escape') {
                    if (modal.classList.contains('show')) {
                    closeSubscriptionModal();
                    }
                    if (emailModal.classList.contains('show')) {
                        closeEmailModal();
                    }
                }
            });
            
            // Handle form submission
            subscriptionForm.addEventListener('submit', (e) => {
                e.preventDefault();
                
                const email = emailInput.value.trim();
                
                // Validate email format
                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                if (!emailRegex.test(email)) {
                    alert('Please enter a valid email address.');
                    emailInput.focus();
                    return;
                }
                
                // Submit the subscription
                submitSubscription(email);
            });
            
            console.log('✓ Modal event listeners initialized');
        }
        
        // Start when page loads and font is ready
        window.addEventListener('load', () => {
            // Wait for font to load before initializing
            const checkFont = () => {
                if (isFontLoaded()) {
                    console.log('✓ Born2bSporty font loaded');
                    init();
                    // Initialize navigation after Three.js is ready
                    setTimeout(() => {
                        initNavigation();
                        initCardNavigation();
                        initSwipeNavigation(); // Initialize swipe gesture support
                        initAudioSystem();
                        initModalListeners(); // Initialize modal listeners after everything else
                    }, 200);
                } else {
                    console.log('⏳ Waiting for Born2bSporty font...');
                    setTimeout(checkFont, 100);
                }
            };
            
            // Start checking after a short delay
            setTimeout(checkFont, 500);
        });
        
        console.log('Website script loaded, waiting for page load...');
        
        // Newsletter subscription function with modal
        function handleSubscription() {
            // Show the subscription modal
            const modal = document.getElementById('subscriptionModal');
            modal.classList.add('show');
            
            // Focus on the email input after modal animation
            setTimeout(() => {
                const emailInput = document.getElementById('emailInput');
                emailInput.focus();
            }, 400);
            
            console.log('🎯 Subscription modal opened');
        }

        // Smart email handling function
        function handleEmailClick() {
            // Detect if we're on mobile or if mailto might not work well
            const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
            
            if (isMobile) {
                // On mobile, mailto usually works well
                window.open('mailto:contact@vibecreai.com?subject=Hello%20from%20VibeCreAI%20Website&body=Hi%20there!%0A%0AI%20visited%20your%20amazing%203D%20website%20and%20would%20like%20to%20get%20in%20touch.%0A%0A', '_blank');
            } else {
                // On desktop, show the email modal for better UX
                showEmailModal();
            }
            
            console.log('📧 Email interaction handled');
        }

        // Function to show email modal
        function showEmailModal() {
            const modal = document.getElementById('emailModal');
            modal.classList.add('show');
            
            console.log('📧 Email modal opened');
        }

        // Function to close email modal
        function closeEmailModal() {
            const modal = document.getElementById('emailModal');
            modal.classList.remove('show');
            
            // Reset copy button if it was used
            const copyBtn = document.getElementById('copyEmailBtn');
            copyBtn.textContent = '📋 Copy';
            copyBtn.classList.remove('copied');
            
            console.log('❌ Email modal closed');
        }

        // Function to copy email to clipboard
        function copyEmailToClipboard() {
            const email = 'contact@vibecreai.com';
            const copyBtn = document.getElementById('copyEmailBtn');
            
            navigator.clipboard.writeText(email).then(() => {
                // Success feedback
                copyBtn.textContent = '✅ Copied!';
                copyBtn.classList.add('copied');
                
                console.log('📋 Email copied to clipboard');
                
                // Reset button after 2 seconds
                setTimeout(() => {
                    copyBtn.textContent = '📋 Copy';
                    copyBtn.classList.remove('copied');
                }, 2000);
            }).catch(err => {
                console.error('Failed to copy email:', err);
                // Fallback: select the text
                const emailSpan = document.getElementById('emailAddress');
                const range = document.createRange();
                range.selectNode(emailSpan);
                window.getSelection().removeAllRanges();
                window.getSelection().addRange(range);
                
                copyBtn.textContent = '📋 Selected';
                setTimeout(() => {
                    copyBtn.textContent = '📋 Copy';
                }, 2000);
            });
        }
        
        // Function to close subscription modal
        function closeSubscriptionModal() {
            const modal = document.getElementById('subscriptionModal');
            modal.classList.remove('show');
            
            // Clear the form
            const form = document.getElementById('subscriptionForm');
            const emailInput = document.getElementById('emailInput');
            const submitButton = document.getElementById('submitButton');
            
            form.reset();
            submitButton.disabled = false;
            submitButton.textContent = 'Subscribe Now';
            
            console.log('❌ Subscription modal closed');
        }
        
        // Function to handle form submission
        function submitSubscription(email) {
            const submitButton = document.getElementById('submitButton');
            
            // Disable button and show loading state
            submitButton.disabled = true;
            submitButton.textContent = 'Subscribing...';
            
            console.log('📧 Subscribing email:', email);
            
            // Send email to Google Sheets
            const scriptURL = 'https://script.google.com/macros/s/AKfycby4QDWSblbGVgOKrlQYpVf2qKVACh58HJSucqIe2TY9VEwlEpuC7_TprCOdS7QnMPiHOg/exec';
            
            fetch(scriptURL, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `email=${encodeURIComponent(email)}`
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Show success state
                    submitButton.textContent = 'Subscribed! ✓';
                    submitButton.style.background = 'linear-gradient(135deg, #1abc9c 0%, #27ae60 100%)';
                    
                    console.log('✅ Subscription successful');
                    
                    // Close modal after short delay
                    setTimeout(() => {
                        closeSubscriptionModal();
                        
                        // Show success message
                        alert('🎉 Thank you for subscribing! You\'ll be the first to know about our exciting updates.');
                        
                        // Reset button styles
                        submitButton.style.background = 'linear-gradient(135deg, #2cb4dd 0%, #1abc9c 100%)';
                    }, 1500);
                } else {
                    throw new Error(data.message || 'Subscription failed');
                }
            })
            .catch(error => {
                console.error('❌ Subscription error:', error);
                
                // Reset button state
                submitButton.disabled = false;
                submitButton.textContent = 'Subscribe Now';
                
                alert('Sorry, there was an error. Please try again or contact us directly at contact@vibecreai.com');
            });
        }

        // Audio System Functionality
        function initAudioSystem() {
            backgroundMusic = document.getElementById('backgroundMusic');
            transitionSound = document.getElementById('transitionSound');
            const audioToggle = document.getElementById('audioToggle');
            const audioIcon = document.getElementById('audioIcon');

            // Set initial volume levels
            if (backgroundMusic) {
                backgroundMusic.volume = 0.3; // 30% volume for background music
            }
            if (transitionSound) {
                transitionSound.volume = 0.2; // 20% volume for transition sounds (reduced from 50%)
            }

            // Audio toggle button functionality
            audioToggle.addEventListener('click', () => {
                toggleAudio();
            });

            // Initialize audio on first user interaction (required by browsers)
            document.addEventListener('click', initializeAudioOnFirstClick, { once: true });
            document.addEventListener('touchstart', initializeAudioOnFirstClick, { once: true });
            document.addEventListener('keydown', initializeAudioOnFirstClick, { once: true });

            function initializeAudioOnFirstClick() {
                if (!audioInitialized) {
                    audioInitialized = true;
                    console.log('🎵 Audio system initialized on user interaction');
                    
                    // Attempt to start background music if audio is enabled
                    if (audioEnabled && backgroundMusic) {
                        playBackgroundMusic();
                    }
                }
            }

            // Try to autoplay immediately when page loads
            function attemptAutoplay() {
                if (backgroundMusic && audioEnabled) {
                    backgroundMusic.play().then(() => {
                        audioInitialized = true;
                        audioToggle.classList.remove('muted');
                        audioIcon.textContent = '🔊';
                        console.log('🎵 Background music started automatically');
                    }).catch(error => {
                        console.log('🔇 Autoplay blocked by browser, waiting for user interaction');
                        audioEnabled = false;
                        audioToggle.classList.add('muted');
                        audioIcon.textContent = '🔇';
                    });
                }
            }

            function toggleAudio() {
                audioEnabled = !audioEnabled;
                
                if (audioEnabled) {
                    audioToggle.classList.remove('muted');
                    audioIcon.textContent = '🔊';
                    console.log('🎵 Audio enabled');
                    
                    if (audioInitialized && backgroundMusic) {
                        playBackgroundMusic();
                    }
                } else {
                    audioToggle.classList.add('muted');
                    audioIcon.textContent = '🔇';
                    console.log('🔇 Audio disabled');
                    
                    if (backgroundMusic) {
                        backgroundMusic.pause();
                    }
                }
            }

            function playBackgroundMusic() {
                if (!audioEnabled || !backgroundMusic || !audioInitialized) return;
                
                backgroundMusic.play().catch(error => {
                    console.warn('Background music autoplay prevented:', error);
                    // Don't disable audio, just log the warning
                });
            }

            // Expose functions globally
            window.playTransitionSound = function() {
                if (!audioEnabled || !transitionSound || !audioInitialized) return;
                
                // Reset sound to beginning and play
                transitionSound.currentTime = 0;
                transitionSound.play().catch(error => {
                    console.warn('Transition sound play failed:', error);
                });
            };

            window.toggleAudio = toggleAudio;

            // Try autoplay after a short delay (allows page to finish loading)
            setTimeout(attemptAutoplay, 1000);

            // Set initial state (will be updated by attemptAutoplay)
            audioToggle.classList.add('muted');
            audioIcon.textContent = '🔇';

            console.log('✓ Audio system initialized - attempting autoplay');
        }

        // Top Navigation Menu Functionality (moved after init)
        function initNavigation() {
            const hamburger = document.getElementById('hamburger');
            const navMenu = document.getElementById('navMenu');
            const navMenuItems = document.querySelectorAll('.nav-menu-item');
            const backToHomeBtn = document.getElementById('backToHomeBtn');
            
            let isMenuOpen = false;
            // Use global currentSection variable instead of creating a local one
            
            // Toggle hamburger menu (only works on extreme narrow screens)
            hamburger.addEventListener('click', () => {
                isMenuOpen = !isMenuOpen;
                hamburger.classList.toggle('active', isMenuOpen);
                navMenu.classList.toggle('active', isMenuOpen);
                hamburger.setAttribute('aria-expanded', isMenuOpen.toString());
            });
            
            // Close menu when clicking outside (only relevant for hamburger menu)
            document.addEventListener('click', (event) => {
                if (!hamburger.contains(event.target) && !navMenu.contains(event.target)) {
                    isMenuOpen = false;
                    hamburger.classList.remove('active');
                    navMenu.classList.remove('active');
                    hamburger.setAttribute('aria-expanded', 'false');
                }
            });
            
            // Back button click handler (Home, About, or Apps depending on state)
            backToHomeBtn.addEventListener('click', () => {

                if (isViewingCard) {
                    // If viewing a card, determine which section to return to
                    if (currentSection === 'About') {
                        // Return to About section
                        returnToAboutSection();
                        updateActiveMenuItem('About');
                        updateBackToHomeButton('About');
                    } else if (currentSection === 'Apps') {
                        // Return to Apps section
                        returnToAppsSection();
                        updateActiveMenuItem('Apps');
                        updateBackToHomeButton('Apps');
                    } else if (currentSection === 'Contact') {
                        // Return to Home (since Contact goes directly to card)
                        returnToContactSection();
                        updateActiveMenuItem('Home');
                        updateBackToHomeButton('Home');
                    } else if (currentSection === 'Robot') {
                        // Return to Home from robot view

                        
                        // Reset viewing states
                        isViewingCard = false;
                        currentCardIndex = -1;
                        
                        // Transition to Home
                        transitionToSection('Home');
                        updateActiveMenuItem('Home');
                        updateBackToHomeButton('Home');
                    } else if (currentSection === 'Home' && isViewingCard && currentCardIndex === -1) {
                        // This is likely the robot view case where section got reset to Home

                        
                        // Reset viewing states
                        isViewingCard = false;
                        currentCardIndex = -1;
                        
                        // Transition to Home
                        transitionToSection('Home');
                        updateActiveMenuItem('Home');
                        updateBackToHomeButton('Home');
                    }
                    // Update button text back to normal
                    updateBackButtonForCard(false);
                } else {
                    // Normal behavior - go to Home
                    transitionToSection('Home');
                    updateActiveMenuItem('Home');
                    updateBackToHomeButton('Home');
                }
            });
            
            // Menu item click handlers
            navMenuItems.forEach(item => {
                item.addEventListener('click', () => {
                    const section = item.getAttribute('data-section');
                    transitionToSection(section);
                    updateActiveMenuItem(section);
                    updateBackToHomeButton(section);
                    // Close menu
                    isMenuOpen = false;
                    hamburger.classList.remove('active');
                    navMenu.classList.remove('active');
                    hamburger.setAttribute('aria-expanded', 'false');
                });
            });
            
            // Update active menu item
            function updateActiveMenuItem(activeSection) {
                currentSection = activeSection;
                navMenuItems.forEach(item => {
                    item.classList.remove('active');
                    item.removeAttribute('aria-current');
                    if (item.getAttribute('data-section') === activeSection) {
                        item.classList.add('active');
                        item.setAttribute('aria-current', 'page');
                    }
                });
            }
            
            // Show/hide Back to Home button based on current section
            function updateBackToHomeButton(section) {
                if (section === 'Home') {
                    backToHomeBtn.classList.remove('show');
                } else {
                    backToHomeBtn.classList.add('show');
                }
            }
            
            // Function to update back button for card viewing
            function updateBackButtonForCard(viewingCard, overrideSection = null) {
                if (viewingCard) {
                    // Use override section if provided (for Contact -> Home case)
                    if (overrideSection === 'Home') {
                        backToHomeBtn.textContent = 'Back to Home';
                    } else if (currentSection === 'About') {
                        backToHomeBtn.textContent = 'Back to About';
                    } else if (currentSection === 'Apps') {
                        backToHomeBtn.textContent = 'Back to Apps';
                    } else if (currentSection === 'Contact') {
                        backToHomeBtn.textContent = 'Back to Contact';
                    } else {
                        backToHomeBtn.textContent = 'Back to Section';
                    }
                    backToHomeBtn.classList.add('show');
                } else {
                    backToHomeBtn.textContent = 'Back to Home';
                    // Keep current visibility state
                }
            }
            
            // Expose functions globally for 3D floor clicks
            window.updateNavigationState = function(section) {
                updateActiveMenuItem(section);
                updateBackToHomeButton(section);
            };
            
            window.updateBackButtonForCard = updateBackButtonForCard;
            
            // Initialize with Home as active
            updateActiveMenuItem('Home');
            updateBackToHomeButton('Home');
        }

        // Card Navigation Functionality
        function initCardNavigation() {
            const cardNavigation = document.getElementById('cardNavigation');
            const prevCardBtn = document.getElementById('prevCardBtn');
            const nextCardBtn = document.getElementById('nextCardBtn');

            // Function to show/hide card navigation arrows
            function updateCardNavigation() {
                if (isViewingCard && (currentSection === 'About' || currentSection === 'Apps')) {
                    cardNavigation.classList.add('show');
                    updateArrowStates();
                } else {
                    cardNavigation.classList.remove('show');
                }
            }

            // Function to update arrow button states (enable/disable)
            function updateArrowStates() {
                const maxCards = currentSection === 'Apps' ? 3 : currentSection === 'About' ? 3 : 1;
                
                // Update previous button
                prevCardBtn.disabled = currentCardIndex <= 0;
                
                // Update next button
                nextCardBtn.disabled = currentCardIndex >= maxCards - 1;
            }

            // Previous card button click handler
            prevCardBtn.addEventListener('click', () => {
                if (!isViewingCard) return;
                
                // Allow interrupting ongoing transitions for better UX
                if (isTransitioning) {
                    console.log('🔄 Interrupting ongoing transition for previous card navigation');
                    isTransitioning = false; // Stop current transition
                }
                if (isCardTransitioning) {
                    console.log('🔄 Interrupting ongoing card transition for previous card navigation');
                    isCardTransitioning = false; // Stop current card transition
                }
                
                const newIndex = Math.max(0, currentCardIndex - 1);
                if (newIndex !== currentCardIndex) {
                    console.log(`🔼 Navigating to previous card: ${newIndex}`);
                    isCardTransitioning = true; // Mark card transition as active
                    
                    if (currentSection === 'Apps') {
                        zoomToAppsCard(newIndex);
                    } else if (currentSection === 'About') {
                        zoomToAboutCard(newIndex);
                    }
                }
            });

            // Next card button click handler
            nextCardBtn.addEventListener('click', () => {
                if (!isViewingCard) return;
                
                // Allow interrupting ongoing transitions for better UX
                if (isTransitioning) {
                    console.log('🔄 Interrupting ongoing transition for next card navigation');
                    isTransitioning = false; // Stop current transition
                }
                if (isCardTransitioning) {
                    console.log('🔄 Interrupting ongoing card transition for next card navigation');
                    isCardTransitioning = false; // Stop current card transition
                }
                
                const maxCards = currentSection === 'Apps' ? 3 : currentSection === 'About' ? 3 : 1;
                const newIndex = Math.min(maxCards - 1, currentCardIndex + 1);
                
                if (newIndex !== currentCardIndex) {
                    console.log(`🔽 Navigating to next card: ${newIndex}`);
                    isCardTransitioning = true; // Mark card transition as active
                    
                    if (currentSection === 'Apps') {
                        zoomToAppsCard(newIndex);
                    } else if (currentSection === 'About') {
                        zoomToAboutCard(newIndex);
                    }
                }
            });

            // Keyboard navigation (Arrow keys)
            document.addEventListener('keydown', (event) => {
                if (!isViewingCard) return;
                if (currentSection !== 'Apps' && currentSection !== 'About') return;

                // Allow interrupting ongoing transitions for better UX
                if (isTransitioning) {
                    console.log('🔄 Interrupting ongoing transition for keyboard navigation');
                    isTransitioning = false; // Stop current transition
                }
                if (isCardTransitioning) {
                    console.log('🔄 Interrupting ongoing card transition for keyboard navigation');
                    isCardTransitioning = false; // Stop current card transition
                }

                if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {
                    event.preventDefault();
                    prevCardBtn.click();
                } else if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
                    event.preventDefault();
                    nextCardBtn.click();
                }
            });

            // Expose function globally to update navigation when card state changes
            window.updateCardNavigation = updateCardNavigation;

            console.log('✓ Card navigation initialized');
        }

        // Bulletproof Swipe Navigation for Cards
        function initSwipeNavigation() {
            let swipeData = null;
            let lastSwipeTime = 0; // Track last swipe time for debouncing
            
            // Super simple and reliable settings
            const minSwipeDistance = 20; // Slightly more sensitive
            const swipeDebounceTime = 500; // Minimum time between swipes (ms)
            
            // Global touch tracking - works regardless of element boundaries
            function handleGlobalTouchStart(event) {
                // Only handle swipes when viewing cards
                if (!isViewingCard) return;
                if (currentSection !== 'Apps' && currentSection !== 'About') return;
                
                // Don't start new swipe if we're in the middle of a transition
                if (isTransitioning || isCardTransitioning) {
                    console.log('🚫 Swipe ignored - transition in progress');
                    return;
                }
                
                // Store swipe data globally
                swipeData = {
                    startY: event.touches[0].clientY,
                    startX: event.touches[0].clientX,
                    startTime: Date.now(),
                    isActive: true
                };
                
                console.log('👆 Global swipe started at Y:', swipeData.startY);
            }
            
            // Global touch end tracking - works regardless of where touch ends
            function handleGlobalTouchEnd(event) {
                // Check if we have active swipe data
                if (!swipeData || !swipeData.isActive) return;
                
                const endY = event.changedTouches[0].clientY;
                const deltaY = endY - swipeData.startY;
                const deltaTime = Date.now() - swipeData.startTime;
                const currentTime = Date.now();
                
                // Reset swipe data immediately
                swipeData = null;
                
                // Check if we're still transitioning (double check)
                if (isTransitioning || isCardTransitioning) {
                    console.log('🚫 Swipe ignored - transition still in progress');
                    return;
                }
                
                // Check debounce time to prevent rapid swipes
                if (currentTime - lastSwipeTime < swipeDebounceTime) {
                    console.log(`🚫 Swipe ignored - too soon after last swipe (${currentTime - lastSwipeTime}ms < ${swipeDebounceTime}ms)`);
                    return;
                }
                
                // Validate swipe (distance check + reasonable timing)
                if (Math.abs(deltaY) >= minSwipeDistance && deltaTime < 1000) {
                    console.log(`👆 Global swipe detected! deltaY: ${deltaY.toFixed(0)}, time: ${deltaTime}ms`);
                    
                    // Update last swipe time for debouncing
                    lastSwipeTime = currentTime;
                    
                    // Prevent any default behavior
                    event.preventDefault();
                    
                    if (deltaY < 0) {
                        // Swipe up - go to next card
                        console.log('🔼 Swipe UP - Next card');
                        const nextCardBtn = document.getElementById('nextCardBtn');
                        if (nextCardBtn && !nextCardBtn.disabled) {
                            nextCardBtn.click();
                        }
                    } else {
                        // Swipe down - go to previous card
                        console.log('🔽 Swipe DOWN - Previous card');
                        const prevCardBtn = document.getElementById('prevCardBtn');
                        if (prevCardBtn && !prevCardBtn.disabled) {
                            prevCardBtn.click();
                        }
                    }
                } else {
                    console.log(`👆 Swipe invalid: distance=${Math.abs(deltaY).toFixed(0)}px (need ${minSwipeDistance}px), time=${deltaTime}ms`);
                }
            }
            
            // Global touch cancel/move handlers
            function handleGlobalTouchCancel() {
                if (swipeData) {
                    swipeData = null;
                    console.log('👆 Global swipe cancelled');
                }
            }
            
            // Optional: Handle touch move to cancel if horizontal movement is too much
            function handleGlobalTouchMove(event) {
                if (!swipeData || !swipeData.isActive) return;
                
                const currentTouch = event.touches[0];
                const deltaX = Math.abs(currentTouch.clientX - swipeData.startX);
                
                // Cancel if too much horizontal movement (diagonal swipe)
                if (deltaX > 100) {
                    swipeData = null;
                    console.log('👆 Swipe cancelled - too much horizontal movement');
                }
            }
            
            // Attach to document level to capture ALL touch events
            document.addEventListener('touchstart', handleGlobalTouchStart, { 
                passive: true, 
                capture: true  // Use capture phase to catch events before they bubble
            });
            
            document.addEventListener('touchend', handleGlobalTouchEnd, { 
                passive: false, // Need to preventDefault
                capture: true   // Use capture phase
            });
            
            document.addEventListener('touchcancel', handleGlobalTouchCancel, { 
                passive: true, 
                capture: true 
            });
            
            // Optional: Add touchmove for horizontal cancellation
            document.addEventListener('touchmove', handleGlobalTouchMove, { 
                passive: true, 
                capture: true 
            });
            
            console.log('✓ Bulletproof global swipe navigation initialized - works across all element boundaries!');
        }
    </script>
</body>
</html>