please check my codes
there is a hover tilt on Our specialities that doesnt wotk

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hero Section with Portfolio</title>
    <style>
        /* Resets */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            overflow-x: hidden;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            background: #000;
            color: #fff;
        }

        /* Hero Section (Video) */
        .video-hero {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            position: relative;
        }

        .video-hero video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 0;
        }

        /* Text Section */
        .text-section {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 20vh;
            background: #000;
            text-align: center;
            padding: 20px 0;
            position: relative;
            overflow: hidden;
            z-index: 1;
        }

        .hero-text {
            max-width: 800px;
            padding: 20px;
            position: relative;
            z-index: 2;
        }

        .hero-text::before {
            content: '';
            position: absolute;
            top: -100px;
            left: -100px;
            right: -100px;
            bottom: -100px;
            background: rgb(0, 0, 0);
            border: 1px solid rgba(255, 255, 255, 0.5);
            box-shadow: 
                inset 0 0 40px rgba(255, 255, 255, 0.098),
                0 0 300px rgba(255, 255, 255, 0.408),
                5px 5px 15px rgba(0, 0, 0, 0.5);
            z-index: -1;
            border-radius: 70px;
        }

        .hero-text h1 {
            font-size: 3.5rem;
            font-weight: 700;
            line-height: 1.2;
            letter-spacing: -0.02em;
        }

        .hero-text span {
            display: inline-block;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInWord 0.3s ease-out forwards;
            animation-play-state: paused;
        }

        .hero-text span:nth-child(1) { animation-delay: 0.1s; }
        .hero-text span:nth-child(2) { animation-delay: 0.3s; }
        .hero-text span:nth-child(3) { animation-delay: 0.5s; }
        .hero-text span:nth-child(4) { animation-delay: 0.7s; }

        @keyframes fadeInWord {
            0% { opacity: 0; transform: translateY(20px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        /* Specialities Section */
        .specialities-section {
            background: #000;
            color: #fff;
            padding: 200px 20px 100px 20px;
            text-align: center;
            z-index: 1;
            position: relative;
        }

        .specialities-section h2 {
            font-size: 3rem;
            font-weight: 700;
            margin-bottom: 80px;
        }

        .specialities-section ul {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 20px;
            list-style: none;
            max-width: 900px;
            margin: 0 auto;
            text-align: center;
        }

        .specialities-section li {
            background: #000;
            border: 1px solid rgba(255, 255, 255, 0.2);
            padding: 15px 20px;
            border-radius: 10px;
            font-size: 1rem;
            position: relative;
            text-align: center;
            min-width: 120px;
            box-shadow: 
                -5px -5px 10px rgba(255, 255, 255, 0.1),
                5px 5px 10px rgba(0, 0, 0, 0.5),
                inset 0 0 5px rgba(255, 255, 255, 0.05);
            pointer-events: auto !important;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            transform-origin: center center;
            z-index: 2;
        }

        .specialities-section li:hover,
        .specialities-section li.touched {
            transform: perspective(500px) rotateX(7deg) rotateY(7deg) scale(1.05);
            -webkit-transform: perspective(500px) rotateX(7deg) rotateY(7deg) scale(1.05);
            -moz-transform: perspective(500px) rotateX(7deg) rotateY(7deg) scale(1.05);
            box-shadow: 
                -5px -5px 15px rgba(255, 255, 255, 0.2),
                5px 5px 15px rgba(0, 0, 0, 0.7),
                inset 0 0 10px rgba(255, 255, 255, 0.1);
        }

        .specialities-section li h3 {
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 10px;
        }

        .specialities-section li p {
            font-size: 0.9rem;
            line-height: 1.4;
            color: rgba(255, 255, 255, 0.8);
        }

        /* What We Do Section */
        .what-we-do-section {
            position: relative;
            background: #000;
            padding: 80px 50px;
            z-index: 1;
            min-height: 600px;
            overflow-y: auto;
            max-height: 100vh;
        }

        /* Portfolio Section */
        #portfolio {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            background: #000;
            color: #fff;
            padding: 50px 20px;
            z-index: 1;
        }

        .image-container {
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            width: 100%;
            height: 400px;
            z-index: 1;
        }

        .portfolio-image {
            width: 150px;
            height: 250px;
            object-fit: cover;
            border-radius: 10px;
            position: absolute;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            z-index: 5;
            pointer-events: auto;
            cursor: pointer !important;
        }

        .portfolio-title {
            font-size: 2.5em;
            font-weight: bold;
            color: #fff;
            text-align: center;
            margin: 20px 0;
            opacity: 0;
            z-index: 1;
        }

        .portfolio-description {
            font-size: 1.2em;
            color: rgba(255, 255, 255, 0.8);
            text-align: center;
            max-width: 600px;
            margin: 0 auto;
            opacity: 0;
            z-index: 1;
        }

        .showcase {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, 0.9);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            z-index: 10;
        }

        .showcase-image {
            width: 35vw;
            height: 55vh;
            object-fit: cover;
            border-radius: 10px;
            position: absolute;
            left: 10%;
            max-width: 450px;
            max-height: 550px;
        }

        .showcase-description {
            width: 35%;
            font-size: 1.2em;
            color: #fff;
            position: absolute;
            right: 5%;
            opacity: 0;
            padding-left: 40px;
        }

        /* Footer Section with Contact Form */
        #footer {
            background: #000;
            color: #fff;
            padding: 50px 20px;
            text-align: center;
            z-index: 1;
        }

        .contact-form {
            background: #111;
            padding: 30px;
            border-radius: 10px;
            width: 90%;
            max-width: 500px;
            margin: 0 auto;
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
        }

        .contact-form h2 {
            font-size: 2em;
            margin-bottom: 20px;
            text-align: center;
        }

        .contact-form label {
            display: block;
            font-size: 1em;
            margin-bottom: 5px;
            color: rgba(255, 255, 255, 0.8);
            text-align: left;
        }

        .contact-form label span.required {
            color: #ff4d4d;
        }

        .contact-form input,
        .contact-form textarea,
        .contact-form select {
            width: 100%;
            padding: 12px;
            margin-bottom: 15px;
            background: #222;
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 5px;
            color: #fff;
            font-size: 1em;
            pointer-events: auto;
            transition: border-color 0.3s ease;
        }

        .contact-form input:focus,
        .contact-form textarea:focus,
        .contact-form select:focus {
            outline: none;
            border-color: #fff;
        }

        .contact-form textarea {
            height: 120px;
            resize: vertical;
        }

        .contact-form button {
            width: 100%;
            padding: 12px 20px;
            font-size: 1em;
            background: #000;
            color: #fff;
            border: 1px solid rgba(255, 255, 255, 0.5);
            border-radius: 5px;
            pointer-events: auto;
            transition: background 0.3s ease, transform 0.3s ease;
        }

        .contact-form button:hover {
            background: #333;
            transform: scale(1.02);
        }

        .error-message {
            color: #ff4d4d;
            font-size: 0.9em;
            margin-bottom: 15px;
            display: none;
            text-align: center;
        }

        /* AEI Core Elements */
        .aei-insight-tracker {
            display: none;
        }

        .aei-heatmap-pointer {
            position: fixed;
            width: 6px;
            height: 6px;
            background-color: rgba(0, 255, 255, 0.5);
            border-radius: 50%;
            z-index: 9999;
            pointer-events: none;
            transition: transform 0.1s linear;
        }

        .aei-scroll-velocity {
            position: fixed;
            bottom: 10px;
            right: 10px;
            font-size: 12px;
            color: #0ff;
            font-family: monospace;
            background-color: rgba(0, 0, 0, 0.6);
            padding: 4px 8px;
            border-radius: 5px;
            z-index: 9999;
        }

        .aei-user-path-logger {
            display: none;
        }

        .glowing-cursor {
            position: fixed;
            left: 0;
            top: 0;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: radial-gradient(circle at 60% 40%, #caf0f8 60%, #00b4d8 100%);
            box-shadow:
                0 0 24px 8px #caf0f8,
                0 0 60px 0 #00b4d8,
                0 0 0 8px rgba(202,240,248,0.15);
            pointer-events: none;
            z-index: 99999;
            transition: transform 0.08s cubic-bezier(.4,2,.6,1), opacity 0.2s;
            opacity: 0.5;
            filter: blur(0.2px);
        }

        /* Ensure interactive elements are not blocked by custom cursor */
        .specialities-section li,
        .contact-form input,
        .contact-form textarea,
        .contact-form select,
        .contact-form button,
        .portfolio-image {
            cursor: pointer !important;
            pointer-events: auto !important;
            z-index: 5;
        }

        /* Responsive Adjustments */
        @media (max-width: 768px) {
            .hero-text h1 {
                font-size: 2rem;
            }
            .specialities-section h2 {
                font-size: 2rem;
            }
            .specialities-section ul {
                grid-template-columns: 1fr;
                max-width: 600px;
            }
            .specialities-section li {
                font-size: 0.9rem;
                min-width: 0;
                width: 100%;
            }
            .specialities-section li h3 {
                font-size: 1rem;
            }
            .specialities-section li p {
                font-size: 0.8rem;
            }
            .what-we-do-section {
                padding: 60px 20px;
                max-height: none;
                overflow-y: visible;
            }
            .portfolio-image {
                width: 120px;
                height: 200px;
            }
            .showcase-image {
                width: 50vw;
                height: 45vh;
                max-width: 350px;
                max-height: 450px;
                left: 5%;
            }
            .showcase-description {
                width: 40%;
                font-size: 1em;
                right: 5%;
                padding-left: 20px;
            }
            .contact-form {
                width: 95%;
                padding: 20px;
            }
            .contact-form h2 {
                font-size: 1.8em;
            }
            .contact-form input,
            .contact-form textarea,
            .contact-form select {
                padding: 10px;
                font-size: 0.9em;
            }
            .contact-form textarea {
                height: 100px;
            }
            .contact-form button {
                padding: 10px;
                font-size: 0.9em;
            }
            .error-message {
                font-size: 0.8em;
            }
        }

        @media (max-width: 480px) {
            .hero-text h1 {
                font-size: 1.5rem;
            }
            .specialities-section h2 {
                font-size: 1.5rem;
            }
            .portfolio-title {
                font-size: 2em;
            }
            .portfolio-description {
                font-size: 1em;
            }
            .contact-form {
                width: 100%;
                padding: 15px;
            }
            .contact-form h2 {
                font-size: 1.5em;
            }
            .contact-form label {
                font-size: 0.9em;
            }
            .contact-form input,
            .contact-form textarea,
            .contact-form select {
                padding: 8px;
                font-size: 0.85em;
            }
            .contact-form textarea {
                height: 80px;
            }
            .contact-form button {
                padding: 8px;
                font-size: 0.85em;
            }
            .error-message {
                font-size: 0.75em;
            }
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.134.0/examples/js/loaders/GLTFLoader.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
</head>
<body>
    <div class="glowing-cursor"></div>
    <section class="video-hero" aria-label="Hero video background">
        <video muted playsinline>
            <source src="https://oceaview.storage.iran.liara.space/arghavan/XENZ.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
    </section>

    <section class="text-section" aria-label="Text section">
        <div class="hero-text">
            <h1>
                <span>Turning</span> <span>Ideas</span> <span>into</span> <span>Software.</span>
            </h1>
        </div>
    </section>

    <section class="specialities-section" aria-label="Our Specialities">
        <h2>Our Specialities</h2>
        <ul>
            <li>
                <h3>Full-Stack Web Development</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </li>
            <li>
                <h3>Frontend Development (Vue.js, React, Nuxt)</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </li>
            <li>
                <h3>Backend Development (Laravel, Node.js, Python)</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </li>
            <li>
                <h3>Database Management (PostgreSQL, MongoDB, MySQL)</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </li>
            <li>
                <h3>Real-Time Applications (WebSockets, RabbitMQ)</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </li>
            <li>
                <h3>Cloud Infrastructure & DevOps (Docker, CI/CD, Nginx, Ubuntu)</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </li>
            <li>
                <h3>Scalable SaaS Architecture</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </li>
            <li>
                <h3>AI & Automation (ChatGPT, Telegram Bots, OpenAI)</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </li>
            <li>
                <h3>Prompt Engineering</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </li>
            <li>
                <h3>API Development</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </li>
            <li>
                <h3>Rapid MVP</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </li>
            <li>
                <h3>Custom Solutions</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </li>
        </ul>
    </section>

    <section class="what-we-do-section">
        <div id="three-container" style="width: 100%; height: 600px;"></div>
    </section>

    <section id="portfolio">
        <div class="portfolio-title">Our Portfolio</div>
        <div class="portfolio-description">
            Explore our collection of stunning works, showcasing creativity and innovation across various projects.
        </div>
        <div class="image-container" id="image-container">
            <img src="https://via.placeholder.com/150x250?text=Image+1" class="portfolio-image" alt="Portfolio Image 1" data-index="0">
            <img src="https://via.placeholder.com/150x250?text=Image+2" class="portfolio-image" alt="Portfolio Image 2" data-index="1">
            <img src="https://via.placeholder.com/150x250?text=Image+3" class="portfolio-image" alt="Portfolio Image 3" data-index="2">
            <img src="https://via.placeholder.com/150x250?text=Image+4" class="portfolio-image" alt="Portfolio Image 4" data-index="3">
            <img src="https://via.placeholder.com/150x250?text=Image+5" class="portfolio-image" alt="Portfolio Image 5" data-index="4">
        </div>
        <div class="showcase" id="showcase">
            <img class="showcase-image" src="" alt="Showcase Image">
            <div class="showcase-description"></div>
        </div>
    </section>

    <section id="footer">
        <div class="contact-form">
            <h2>Contact Us</h2>
            <div class="error-message" id="error-message">Please fill out all required fields correctly.</div>
            <label for="name">Name</label>
            <input type="text" id="name" name="name" placeholder="Enter your name">
            <label for="company-name">Company Name</label>
            <input type="text" id="company-name" name="company-name" placeholder="Enter your company name">
            <label for="company-number">Company Number</label>
            <input type="text" id="company-number" name="company-number" placeholder="Enter your company number" pattern="[0-9]*" inputmode="numeric">
            <label for="mobile-number">Mobile Number <span class="required">*</span></label>
            <input type="tel" id="mobile-number" name="mobile-number" required placeholder="Enter your mobile number" pattern="[0-9]{10,15}">
            <label for="project-idea">Startup/Project Idea <span class="required">*</span></label>
            <textarea id="project-idea" name="project-idea" required placeholder="Describe your project idea"></textarea>
            <label for="time-limit">Time Limit <span class="required">*</span></label>
            <input type="text" id="time-limit" name="time-limit" required placeholder="E.g., 3 months">
            <label for="budget">Budget <span class="required">*</span></label>
            <select id="budget" name="budget" required>
                <option value="" disabled selected>Select Budget</option>
                <option value="under-5k">$0 - $5,000</option>
                <option value="5k-10k">$5,000 - $10,000</option>
                <option value="10k-20k">$10,000 - $20,000</option>
                <option value="20k-plus">$20,000+</option>
            </select>
            <label for="source">How Did You Find Us?</label>
            <select id="source" name="source">
                <option value="" disabled selected>Select Source</option>
                <option value="search">Search Engine</option>
                <option value="social">Social Media</option>
                <option value="referral">Referral</option>
                <option value="other">Other</option>
            </select>
            <button type="button" id="register-form">Register</button>
        </div>
    </section>

    <!-- AEI Tracking Elements -->
    <div class="aei-insight-tracker" data-mode="observe"></div>
    <div class="aei-scroll-velocity"></div>
    <div class="aei-user-path-logger"></div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            try {
                // Video Section
                const video = document.querySelector('.video-hero video');
                const videoSection = document.querySelector('.video-hero');
                const textSection = document.querySelector('.text-section');
                const specialitiesSection = document.querySelector('.specialities-section');
                const textSpans = document.querySelectorAll('.hero-text span');
                let videoStarted = false;
                let lastScrollPosition = window.scrollY || 0;
                let animationReset = false;
                let videoDuration = 0;
                let videoEnded = false;
                let allowPageScroll = false;
                let touchStartY = 0;

                if (!video || !videoSection || !textSection || !specialitiesSection) {
                    console.error('Missing critical DOM elements:', { video, videoSection, textSection, specialitiesSection });
                    return;
                }

                // Get video duration
                video.addEventListener('loadedmetadata', () => {
                    videoDuration = video.duration;
                    console.log('Video duration:', videoDuration);
                });

                // Check when video ends
                video.addEventListener('timeupdate', () => {
                    if (video.currentTime >= videoDuration - 0.1) {
                        videoEnded = true;
                        allowPageScroll = true;
                        document.body.style.overflow = 'auto';
                        console.log('Video has ended');
                    } else {
                        videoEnded = false;
                    }
                });

                function updateVideoTime(change) {
                    if (!videoDuration) return;
                    let newTime = video.currentTime + change;
                    newTime = Math.max(0, Math.min(videoDuration, newTime));
                    video.currentTime = newTime;
                }

                // Consolidated Scroll Handler
                function handleScroll(event) {
                    const scrollPosition = window.scrollY;
                    const windowHeight = window.innerHeight;
                    const videoSectionTop = videoSection.offsetTop;
                    const videoSectionHeight = videoSection.offsetHeight;
                    const textSectionTop = textSection.offsetTop;
                    const textSectionHeight = textSection.offsetHeight;
                    const specialitiesSectionTop = specialitiesSection.offsetTop;
                    const freezePoint = specialitiesSectionTop + (specialitiesSection.offsetHeight / 2);

                    // Video Scroll Sync
                    const isVideoVisible = scrollPosition < videoSectionTop + videoSectionHeight &&
                                          scrollPosition + windowHeight > videoSectionTop;

                    if (scrollPosition > 0 && !videoStarted && isVideoVisible) {
                        videoStarted = true;
                    }

                    if (videoStarted && isVideoVisible && !allowPageScroll) {
                        const scrollWithinSection = Math.max(0, Math.min(scrollPosition - videoSectionTop, videoSectionHeight));
                        const scrollProgress = scrollWithinSection / videoSectionHeight;
                        const videoTime = scrollProgress * videoDuration;
                        video.currentTime = Math.max(0, Math.min(videoTime, videoDuration));
                        console.log('Video:', { scrollProgress, videoTime });
                    } else {
                        video.pause();
                    }

                    // Freeze scroll until video ends
                    if (!videoEnded && scrollPosition >= freezePoint) {
                        event.preventDefault();
                        window.scrollTo(0, freezePoint);
                        console.log('Scroll frozen at:', freezePoint);
                    }

                    // Text Animation
                    const isTextVisible = scrollPosition + windowHeight > textSectionTop + (windowHeight * 0.25) &&
                                         scrollPosition < textSectionTop + textSectionHeight;

                    if (isTextVisible && !animationReset) {
                        textSpans.forEach(span => {
                            span.style.animation = 'none';
                            span.offsetHeight;
                            span.style.opacity = '0';
                            span.style.transform = 'translateY(20px)';
                            span.style.animation = '';
                            span.style.animationPlayState = 'running';
                        });
                        animationReset = true;
                        console.log('Text animation running');
                    } else if (!isTextVisible) {
                        textSpans.forEach(span => {
                            span.style.animationPlayState = 'paused';
                        });
                        animationReset = false;
                    }

                    lastScrollPosition = scrollPosition;
                }

                // Video scroll control
                window.addEventListener('wheel', function (e) {
                    if (!allowPageScroll) {
                        e.preventDefault();
                        const delta = e.deltaY;
                        updateVideoTime(delta * 0.02);
                    }
                }, { passive: false });

                window.addEventListener('touchstart', (e) => {
                    touchStartY = e.touches[0].clientY;
                }, { passive: false });

                window.addEventListener('touchmove', (e) => {
                    if (!allowPageScroll) {
                        const touchY = e.touches[0].clientY;
                        const delta = touchStartY - touchY;
                        touchStartY = touchY;
                        e.preventDefault();
                        updateVideoTime(delta * 0.06);
                    }
                }, { passive: false });

                // Initial scroll call
                window.addEventListener('scroll', handleScroll, { passive: false });
                window.addEventListener('resize', handleScroll);
                handleScroll(new Event('scroll'));

                // Portfolio Animation
                const portfolioSection = document.querySelector('#portfolio');
                if (!portfolioSection) {
                    console.error('Portfolio section not found!');
                    return;
                }

                const images = [
                    { src: "https://via.placeholder.com/150x250?text=Image+1", desc: "Project 1: A masterpiece of design and functionality." },
                    { src: "https://via.placeholder.com/150x250?text=Image+2", desc: "Project 2: Innovative solutions for modern challenges." },
                    { src: "https://via.placeholder.com/150x250?text=Image+3", desc: "Project 3: Blending creativity with technology." },
                    { src: "https://via.placeholder.com/150x250?text=Image+4", desc: "Project 4: Timeless elegance in every detail." },
                    { src: "https://via.placeholder.com/150x250?text=Image+5", desc: "Project 5: Pushing boundaries with bold ideas." }
                ];

                if (typeof gsap === 'undefined' || typeof ScrollTrigger === 'undefined') {
                    console.error('GSAP or ScrollTrigger not loaded!');
                    return;
                }

                gsap.registerPlugin(ScrollTrigger);

                // Initial image positions
                gsap.set(".portfolio-image", {
                    y: 300,
                    opacity: 0,
                    rotation: () => gsap.utils.random(-5, 5),
                    x: 0,
                    transformOrigin: "center center",
                    zIndex: (i) => 5 - i
                });

                // Animation timeline
                const tl = gsap.timeline({
                    scrollTrigger: {
                        trigger: "#portfolio",
                        start: "top 80%",
                        end: "bottom top",
                        toggleActions: "play none none none"
                    }
                });

                tl.to(".portfolio-image", {
                    y: 0,
                    opacity: 1,
                    duration: 1,
                    stagger: 0.1,
                    ease: "power2.out"
                })
                .to(".portfolio-image", {
                    x: (index) => index * 180 - 360,
                    rotation: () => gsap.utils.random(-3, 3),
                    duration: 1,
                    delay: 0.5,
                    ease: "power2.out"
                }, "+=0.5")
                .to(".portfolio-title", {
                    y: -20,
                    opacity: 1,
                    duration: 1,
                    ease: "power2.out"
                }, "-=1")
                .to(".portfolio-image", {
                    x: (index) => index * 200 - 400,
                    rotation: 0,
                    duration: 1,
                    ease: "power2.out"
                }, "+=0.5")
                .to(".portfolio-description", {
                    y: -20,
                    opacity: 1,
                    duration: 1,
                    ease: "power2.out"
                }, "-=1")
                .to(".image-container", {
                    x: -200,
                    duration: 1,
                    ease: "power2.out",
                    onComplete: () => startShowcase(0)
                }, "+=0.5");

                let showcaseTimeout = null;
                let isShowcaseActive = false;

                function startShowcase(startIndex) {
                    const showcase = document.querySelector("#showcase");
                    if (!showcase) {
                        console.error('Showcase element not found!');
                        return;
                    }

                    console.log('Starting showcase at index:', startIndex);
                    isShowcaseActive = true;
                    gsap.set("#showcase", { opacity: 1 });
                    document.body.style.overflow = "hidden";
                    let currentIndex = startIndex;

                    function showImage() {
                        const showcaseImg = document.querySelector(".showcase-image");
                        const showcaseDesc = document.querySelector(".showcase-description");

                        if (!showcaseImg || !showcaseDesc) {
                            console.error('Showcase image or description not found!');
                            return;
                        }

                        showcaseImg.src = images[currentIndex].src;
                        showcaseDesc.textContent = images[currentIndex].desc;

                        gsap.fromTo(showcaseImg, 
                            { x: "20%", scale: 1, opacity: 0 },
                            { x: "10%", scale: 1, opacity: 1, duration: 1, ease: "power2.out" }
                        );
                        gsap.fromTo(showcaseDesc, 
                            { x: "30%", opacity: 0 },
                            { x: "5%", opacity: 1, duration: 1, ease: "power2.out" }
                        );

                        currentIndex++;
                        const delay = currentIndex === images.length ? 5000 : 3000;
                        if (currentIndex < images.length) {
                            showcaseTimeout = setTimeout(showImage, delay);
                        } else {
                            showcaseTimeout = setTimeout(closeShowcase, delay);
                        }
                    }

                    function closeShowcase() {
                        isShowcaseActive = false;
                        gsap.to("#showcase", { opacity: 0, duration: 1 });
                        gsap.to(".image-container", { x: 0, duration: 1, ease: "power2.out" });
                        gsap.to(".portfolio-image", { scale: 1, duration: 1, ease: "power2.out" });
                        document.body.style.overflow = "auto";
                        clearTimeout(showcaseTimeout);
                        showcaseTimeout = null;
                        console.log('Showcase closed');

                        // Re-attach click listeners to ensure images remain clickable
                        attachImageClickListeners();
                    }

                    // Handle scroll during showcase
                    function handleShowcaseScroll(e) {
                        if (isShowcaseActive) {
                            e.preventDefault();
                            const delta = e.deltaY || (e.touches && e.touches[0] ? touchStartY - e.touches[0].clientY : 0);
                            if (delta > 50) { // Scroll down
                                closeShowcase();
                                window.removeEventListener('wheel', handleShowcaseScroll, { passive: false });
                                window.removeEventListener('touchmove', handleShowcaseScroll, { passive: false });
                                console.log('Showcase closed due to downward scroll');
                            }
                        }
                    }

                    window.addEventListener('wheel', handleShowcaseScroll, { passive: false });
                    window.addEventListener('touchmove', handleShowcaseScroll, { passive: false });

                    showImage();
                }

                // Function to attach click listeners to portfolio images
                function attachImageClickListeners() {
                    const portfolioImages = document.querySelectorAll('.portfolio-image');
                    portfolioImages.forEach(img => {
                        // Remove existing listeners to prevent duplicates
                        img.removeEventListener('click', img.clickHandler);
                        img.clickHandler = () => {
                            if (!isShowcaseActive) {
                                const index = parseInt(img.getAttribute('data-index'), 10);
                                console.log('Portfolio image clicked:', index);
                                if (!isNaN(index) && index >= 0 && index < images.length) {
                                    startShowcase(index);
                                } else {
                                    console.error('Invalid data-index:', img.getAttribute('data-index'));
                                }
                            }
                        };
                        img.addEventListener('click', img.clickHandler);
                    });
                    console.log('Image click listeners attached:', portfolioImages.length);
                }

                // Initial attachment of click listeners
                attachImageClickListeners();

                // Contact Form Logic
                function initializeContactForm() {
                    const registerFormButton = document.querySelector('#register-form');
                    const errorMessage = document.querySelector('#error-message');
                    const companyNumberInput = document.querySelector('#company-number');
                    const mobileNumberInput = document.querySelector('#mobile-number');

                    if (!registerFormButton) {
                        console.error('Register form button not found!');
                        return;
                    }
                    if (!errorMessage) {
                        console.error('Error message element not found!');
                        return;
                    }

                    // Numeric input validation for Company Number and Mobile Number
                    [companyNumberInput, mobileNumberInput].forEach(input => {
                        if (input) {
                            input.addEventListener('input', () => {
                                // Remove non-numeric characters
                                input.value = input.value.replace(/[^0-9]/g, '');
                            });
                            input.addEventListener('keypress', (e) => {
                                // Prevent non-numeric key presses
                                if (!/[0-9]/.test(e.key)) {
                                    e.preventDefault();
                                }
                            });
                        }
                    });

                    registerFormButton.addEventListener('click', () => {
                        console.log('Register button clicked');
                        const mobileNumber = mobileNumberInput.value.trim();
                        const projectIdea = document.querySelector('#project-idea').value.trim();
                        const timeLimit = document.querySelector('#time-limit').value.trim();
                        const budget = document.querySelector('#budget').value;

                        // Validate required fields and mobile number format
                        if (!mobileNumber || !projectIdea || !timeLimit || !budget) {
                            errorMessage.textContent = 'Please fill out all required fields.';
                            errorMessage.style.display = 'block';
                            console.log('Validation failed: Required fields missing');
                            return;
                        }

                        if (!/^[0-9]{10,15}$/.test(mobileNumber)) {
                            errorMessage.textContent = 'Mobile Number must be 10-15 digits.';
                            errorMessage.style.display = 'block';
                            console.log('Validation failed: Invalid mobile number');
                            return;
                        }

                        errorMessage.style.display = 'none';
                        const formData = {
                            name: document.querySelector('#name').value.trim(),
                            companyName: document.querySelector('#company-name').value.trim(),
                            companyNumber: companyNumberInput.value.trim(),
                            mobileNumber,
                            projectIdea,
                            timeLimit,
                            budget,
                            source: document.querySelector('#source').value
                        };

                        console.log('Form registered:', formData);
                        alert('Form submitted successfully! Check console for data.');
                        document.querySelector('.contact-form').reset();
                    });

                    registerFormButton.addEventListener('mousedown', () => {
                        console.log('Register button mousedown');
                    });
                }

                // Ensure contact form initializes after DOM is ready
                initializeContactForm();

                // Debug hover and touch for specialities
                const specialityItems = document.querySelectorAll('.specialities-section li');
                specialityItems.forEach(item => {
                    item.addEventListener('mouseenter', () => {
                        console.log('Hover on speciality item:', item.querySelector('h3').textContent);
                    });
                    item.addEventListener('mouseleave', () => {
                        console.log('Hover off speciality item:', item.querySelector('h3').textContent);
                    });
                    // Add touch support for mobile devices
                    item.addEventListener('touchstart', (e) => {
                        e.preventDefault();
                        item.classList.add('touched');
                        console.log('Touch on speciality item:', item.querySelector('h3').textContent);
                    });
                    item.addEventListener('touchend', () => {
                        item.classList.remove('touched');
                        console.log('Touch off speciality item:', item.querySelector('h3').textContent);
                    });
                });

                // AEI Tracking
                const insightTracker = document.querySelector('.aei-insight-tracker');
                const heatmapPointer = document.querySelector('.aei-heatmap-pointer');
                const scrollVelocityEl = document.querySelector('.aei-scroll-velocity');
                const userPathLogger = document.querySelector('.aei-user-path-logger');

                if (heatmapPointer && userPathLogger) {
                    document.addEventListener('mousemove', e => {
                        heatmapPointer.style.left = `${e.clientX}px`;
                        heatmapPointer.style.top = `${e.clientY}px`;
                        heatmapPointer.classList.add('active');
                    });

                    let lastScrollTop = window.scrollY;
                    let lastTime = Date.now();
                    window.addEventListener('scroll', () => {
                        const now = Date.now();
                        const deltaT = (now - lastTime) / 1000;
                        const deltaY = window.scrollY - lastScrollTop;
                        const velocity = Math.abs(deltaY / deltaT);
                        lastScrollTop = window.scrollY;
                        lastTime = now;
                        userPathLogger.dataset.lastScroll = window.scrollY;
                    });
                }

                // Glowing Cursor
                const glowingCursor = document.querySelector('.glowing-cursor');
                if (glowingCursor) {
                    document.addEventListener('mousemove', e => {
                        glowingCursor.style.transform = `translate(${e.clientX - 18}px, ${e.clientY - 18}px)`;
                        glowingCursor.style.opacity = 0.85;
                    });
                    document.addEventListener('mouseleave', () => {
                        glowingCursor.style.opacity = 0;
                    });
                    document.addEventListener('mouseenter', () => {
                        glowingCursor.style.opacity = 0.5;
                    });
                }

                // Three.js 3D Model
                const container = document.getElementById('three-container');
                if (!container) {
                    console.error('Three.js container not found!');
                    return;
                }

                const scene = new THREE.Scene();
                const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
                camera.position.z = 1.5;

                const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
                renderer.setPixelRatio(window.devicePixelRatio);
                renderer.setSize(container.clientWidth, container.clientHeight);
                container.appendChild(renderer.domElement);

                const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
                scene.add(ambientLight);
                const light = new THREE.DirectionalLight(0xffffff, 1);
                light.position.set(0, 1, 1).normalize();
                scene.add(light);

                let model;
                const loader = new THREE.GLTFLoader();
                loader.load('https://oceaview.storage.iran.liara.space/arghavan/what%20we%20do%20sphear1.glb', function(gltf) {
                    model = gltf.scene;
                    gltf.scene.traverse(function(child) {
                        if (child.isMesh && child.material.map) {
                            child.material.map.anisotropy = renderer.capabilities.getMaxAnisotropy();
                            child.material.map.magFilter = THREE.LinearFilter;
                            child.material.map.minFilter = THREE.LinearMipmapLinearFilter;
                            child.material.map.needsUpdate = true;
                        }
                    });
                    model.scale.set(0.9, 0.9, 0.9);
                    model.position.y = -0.001;
                    scene.add(model);
                    console.log('Model loaded successfully');
                    animate();
                }, undefined, function(error) {
                    console.error('Error loading model:', error);
                });

                let mouseX = 0;
                let mouseY = 0;
                document.addEventListener('mousemove', (event) => {
                    const centerX = window.innerWidth / 2;
                    const centerY = window.innerHeight / 2;
                    mouseX = (event.clientX - centerX) * 0.00003;
                    mouseY = (event.clientY - centerY) * 0.00003;
                });

                function animate() {
                    requestAnimationFrame(animate);
                    if (model) {
                        const newRotationY = model.rotation.y + mouseX;
                        model.rotation.y = THREE.MathUtils.clamp(newRotationY, -Math.PI / 1.6, Math.PI / -3);
                        const newRotationX = model.rotation.x + mouseY;
                        model.rotation.x = THREE.MathUtils.clamp(newRotationX, -Math.PI / 15, Math.PI / 15);
                    }
                    renderer.render(scene, camera);
                }

                window.addEventListener('resize', () => {
                    camera.aspect = container.clientWidth / container.clientHeight;
                    camera.updateProjectionMatrix();
                    renderer.setSize(container.clientWidth, container.clientHeight);
                });

            } catch (error) {
                console.error('Runtime error in main script:', error);
            }
        });
    </script>
</body>
</html>