mobile-script.js

/**
 * Mobile-specific enhancements for the Bird's Nest Landing Page
 */

document.addEventListener('DOMContentLoaded', function() {
    initMobileMenu();
    initAboutSectionInteractions();
    initSwipeEvents();
    checkOrientation();
    
    // Add iPhone SE optimizations
    applyIPhoneSEOptimizations();
});

// Mobile menu handling
function initMobileMenu() {
    const hamburger = document.querySelector('.hamburger');
    const navMenu = document.querySelector('.nav-menu');
    
    if (hamburger && navMenu) {
        hamburger.addEventListener('click', function() {
            hamburger.classList.toggle('active');
            navMenu.classList.toggle('active');
            
            if (navMenu.classList.contains('active')) {
                // Prevent scroll on menu open
                document.body.style.overflow = 'hidden';
                // Animate menu items
                animateMenuItems();
            } else {
                document.body.style.overflow = '';
            }
        });
        
        // Close menu when clicking on a link
        const navLinks = document.querySelectorAll('.nav-menu a');
        navLinks.forEach(link => {
            link.addEventListener('click', function() {
                hamburger.classList.remove('active');
                navMenu.classList.remove('active');
                document.body.style.overflow = '';
            });
        });
    }
}

// Animate menu items when menu opens
function animateMenuItems() {
    const navLinks = document.querySelectorAll('.nav-menu li');
    navLinks.forEach((link, index) => {
        link.style.animation = `fadeInRight 0.5s ease forwards ${index * 0.1 + 0.2}s`;
        link.style.opacity = '0';
    });
}

// About section mobile interactions
function initAboutSectionInteractions() {
    // Feature items touch effects
    const featureItems = document.querySelectorAll('.feature-item');
    featureItems.forEach((item, index) => {
        // Add tap ripple effect
        item.addEventListener('touchstart', function(e) {
            this.classList.add('touch-active');
            
            // Get touch position for ripple
            const touch = e.touches[0];
            const rect = this.getBoundingClientRect();
            const x = touch.clientX - rect.left;
            const y = touch.clientY - rect.top;
            
            // Create and animate ripple
            const ripple = document.createElement('span');
            ripple.classList.add('touch-ripple');
            ripple.style.left = x + 'px';
            ripple.style.top = y + 'px';
            this.appendChild(ripple);
            
            setTimeout(() => {
                ripple.remove();
                this.classList.remove('touch-active');
            }, 600);
        });
        
        // Add staggered animation delay for feature items
        item.style.opacity = '0';
        item.style.transform = 'translateY(20px)';
        item.style.transition = 'opacity 0.4s ease, transform 0.4s ease';
        item.style.transitionDelay = `${index * 0.1 + 0.2}s`;
    });
    
    // About image animation on scroll
    const aboutImage = document.querySelector('.about-image');
    const aboutText = document.querySelector('.about-text');
    const aboutSection = document.getElementById('about');
    
    if (aboutImage && aboutSection) {
        // Create an intersection observer for the whole section
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    // Animate the image
                    aboutImage.classList.add('animated');
                    
                    // Animate the feature items with a staggered delay
                    featureItems.forEach(item => {
                        item.style.opacity = '1';
                        item.style.transform = 'translateY(0)';
                    });
                    
                    // Add active class to the section
                    aboutSection.classList.add('section-active');
                    
                    observer.unobserve(entry.target);
                }
            });
        }, {
            threshold: 0.2
        });
        
        observer.observe(aboutSection);
    }
    
    // Add image placeholder interaction
    const imagePlaceholder = document.querySelector('.image-placeholder');
    if (imagePlaceholder) {
        imagePlaceholder.addEventListener('touchstart', function() {
            this.style.transform = 'scale(0.95)';
        });
        
        imagePlaceholder.addEventListener('touchend', function() {
            this.style.transform = 'scale(1)';
        });
    }
}

// Add swipe events for mobile
function initSwipeEvents() {
    let touchStartX = 0;
    let touchEndX = 0;
    
    const aboutSection = document.getElementById('about');
    if (aboutSection) {
        aboutSection.addEventListener('touchstart', e => {
            touchStartX = e.changedTouches[0].screenX;
        }, false);
        
        aboutSection.addEventListener('touchend', e => {
            touchEndX = e.changedTouches[0].screenX;
            handleSwipe();
        }, false);
    }
    
    function handleSwipe() {
        const swipeThreshold = 50;
        
        // Left swipe
        if (touchEndX + swipeThreshold < touchStartX) {
            // Navigate to next section (benefits)
            const benefitsSection = document.getElementById('benefits');
            if (benefitsSection) {
                benefitsSection.scrollIntoView({ behavior: 'smooth' });
            }
        }
        
        // Right swipe
        if (touchEndX > touchStartX + swipeThreshold) {
            // Navigate to previous section (hero)
            const heroSection = document.getElementById('home');
            if (heroSection) {
                heroSection.scrollIntoView({ behavior: 'smooth' });
            }
        }
    }
}

// Check and handle orientation changes
function checkOrientation() {
    const handleOrientationChange = () => {
        if (window.matchMedia("(orientation: landscape)").matches) {
            document.body.classList.add('landscape');
            document.body.classList.remove('portrait');
        } else {
            document.body.classList.add('portrait');
            document.body.classList.remove('landscape');
        }
    };
    
    // Initial check
    handleOrientationChange();
    
    // Listen for changes
    window.addEventListener('orientationchange', handleOrientationChange);
    // Also listen for resize events as some devices don't trigger orientationchange properly
    window.addEventListener('resize', handleOrientationChange);
}

// Device-specific optimizations for iPhone SE (375x667)
function applyIPhoneSEOptimizations() {
    // Check if the device is iPhone SE size
    if (window.innerWidth === 375 && window.innerHeight === 667 ||
        window.innerWidth === 667 && window.innerHeight === 375) {
        
        // Apply performance optimizations
        document.body.classList.add('iphone-se');
        
        // Optimize feature items to be more touch-friendly
        const featureItems = document.querySelectorAll('.feature-item');
        featureItems.forEach(item => {
            // Ensure proper touch area size
            item.style.minHeight = '60px';
            
            // Optimize any heavy animations for this device
            const icon = item.querySelector('.feature-icon');
            if (icon) {
                icon.style.transition = 'transform 0.2s ease, background 0.2s ease, color 0.2s ease';
            }
        });
        
        // Adjust scroll behavior for smoother performance
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                
                if (targetElement) {
                    // Use a more performant scroll method for this device
                    window.scrollTo({
                        top: targetElement.offsetTop - 60,
                        behavior: 'smooth'
                    });
                }
            });
        });
        
        // Optimize image loading for better performance
        const images = document.querySelectorAll('img');
        if ('loading' in HTMLImageElement.prototype) {
            images.forEach(img => {
                img.loading = 'lazy';
            });
        }
    }
}

// Make the body visible once everything is loaded
window.onload = function() {
    document.body.classList.add('loaded');
};