/* Custom styles for The Hudson Team website */

/* Smooth scroll */
html {
    scroll-behavior: smooth;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #040B18;
}
::-webkit-scrollbar-thumb {
    background: #1a3a5c;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #D4AF37;
}

/* Selection color */
::selection {
    background: rgba(212, 175, 55, 0.3);
    color: #fff;
}

/* Service card hover effects */
.service-card {
    transform: translateY(0);
}
.service-card:hover {
    transform: translateY(-4px);
}

/* Testimonial card hover */
.testimonial-card {
    transform: translateY(0);
}
.testimonial-card:hover {
    transform: translateY(-4px);
}

/* Gold shimmer animation for hero */
@keyframes goldShimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

/* Fade-in animations for scroll reveal */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger children */
.stagger-children .fade-in:nth-child(1) { transition-delay: 0.1s; }
.stagger-children .fade-in:nth-child(2) { transition-delay: 0.2s; }
.stagger-children .fade-in:nth-child(3) { transition-delay: 0.3s; }
.stagger-children .fade-in:nth-child(4) { transition-delay: 0.4s; }
.stagger-children .fade-in:nth-child(5) { transition-delay: 0.5s; }
.stagger-children .fade-in:nth-child(6) { transition-delay: 0.6s; }

/* Mobile menu transitions */
#mobileMenu {
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
#mobileMenu.open {
    opacity: 1;
    pointer-events: all;
}
#mobileMenu.closed {
    opacity: 0;
    pointer-events: none;
}

/* Hamburger animation */
#menuToggle.active #line1 {
    transform: translateY(6px) rotate(45deg);
}
#menuToggle.active #line2 {
    opacity: 0;
}
#menuToggle.active #line3 {
    transform: translateY(-6px) rotate(-45deg);
}

/* Navbar background on scroll */
.navbar-scrolled {
    background: rgba(4, 11, 24, 0.95) !important;
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(212, 175, 55, 0.1);
}

/* Mobile link transitions */
.mobile-link {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease;
}
#mobileMenu.open .mobile-link {
    opacity: 1;
    transform: translateY(0);
}
#mobileMenu.open .mobile-link:nth-child(1) { transition-delay: 0.1s; }
#mobileMenu.open .mobile-link:nth-child(2) { transition-delay: 0.15s; }
#mobileMenu.open .mobile-link:nth-child(3) { transition-delay: 0.2s; }
#mobileMenu.open .mobile-link:nth-child(4) { transition-delay: 0.25s; }
#mobileMenu.open .mobile-link:nth-child(5) { transition-delay: 0.3s; }

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    .fade-in {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .service-card:hover,
    .testimonial-card:hover {
        transform: none;
    }
    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* Input autofill styling */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px #0A1C36 inset !important;
    -webkit-text-fill-color: #fff !important;
}
</style>

<sm-file path="script.js">
(function () {
    'use strict';

    // --- Navbar scroll behavior ---
    const navbar = document.getElementById('navbar');
    let lastScroll = 0;

    function handleNavbarScroll() {
        const currentScroll = window.pageYOffset;
        if (currentScroll > 80) {
            navbar.classList.add('navbar-scrolled');
        } else {
            navbar.classList.remove('navbar-scrolled');
        }
        lastScroll = currentScroll;
    }

    window.addEventListener('scroll', handleNavbarScroll, { passive: true });

    // --- Mobile menu ---
    const menuToggle = document.getElementById('menuToggle');
    const mobileMenu = document.getElementById('mobileMenu');
    const mobileLinks = document.querySelectorAll('.mobile-link');
    let menuOpen = false;

    menuToggle.addEventListener('click', function () {
        menuOpen = !menuOpen;
        menuToggle.classList.toggle('active', menuOpen);
        mobileMenu.classList.toggle('open', menuOpen);
        mobileMenu.classList.toggle('closed', !menuOpen);
        document.body.style.overflow = menuOpen ? 'hidden' : '';
    });

    mobileLinks.forEach(function (link) {
        link.addEventListener('click', function () {
            menuOpen = false;
            menuToggle.classList.remove('active');
            mobileMenu.classList.remove('open');
            mobileMenu.classList.add('closed');
            document.body.style.overflow = '';
        });
    });

    // --- Scroll reveal (progressive enhancement) ---
    // Only enable if user hasn't requested reduced motion
    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

    if (!prefersReducedMotion) {
        const fadeElements = document.querySelectorAll('.fade-in');

        if ('IntersectionObserver' in window) {
            const observer = new IntersectionObserver(
                function (entries) {
                    entries.forEach(function (entry) {
                        if (entry.isIntersecting) {
                            entry.target.classList.add('visible');
                            observer.unobserve(entry.target);
                        }
                    });
                },
                { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }
            );

            fadeElements.forEach(function (el) {
                observer.observe(el);
            });
        } else {
            // Fallback: show everything
            fadeElements.forEach(function (el) {
                el.classList.add('visible');
            });
        }
    } else {
        // If reduced motion is preferred, show all immediately
        document.querySelectorAll('.fade-in').forEach(function (el) {
            el.classList.add('visible');
        });
    }

    // --- Contact form ---
    const contactForm = document.getElementById('contactForm');
    const formSuccess = document.getElementById('formSuccess');

    if (contactForm) {
        contactForm.addEventListener('submit', function (e) {
            e.preventDefault();

            // Basic validation
            const firstName = document.getElementById('firstName').value.trim();
            const lastName = document.getElementById('lastName').value.trim();
            const email = document.getElementById('email').value.trim();

            if (!firstName || !lastName || !email) {
                return;
            }

            // Simulate form submission
            const submitBtn = contactForm.querySelector('button[type="submit"]');
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<span>Sending...</span>';

            setTimeout(function () {
                contactForm.reset();
                formSuccess.classList.remove('hidden');
                submitBtn.disabled = false;
                submitBtn.innerHTML = '<span>Send Message</span><svg class="w-5 h-5 group-hover:translate-x-1 transition-transform duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>';

                // Hide success message after 6 seconds
                setTimeout(function () {
                    formSuccess.classList.add('hidden');
                }, 6000);
            }, 1200);
        });
    }

    // --- Active nav link highlighting ---
    const sections = document.querySelectorAll('section[id]');
    const navLinks = document.querySelectorAll('nav a[href^="#"]');

    function highlightNav() {
        const scrollY = window.pageYOffset;

        sections.forEach(function (section) {
            const sectionTop = section.offsetTop - 200;
            const sectionHeight = section.offsetHeight;
            const sectionId = section.getAttribute('id');

            if (scrollY >= sectionTop && scrollY < sectionTop + sectionHeight) {
                navLinks.forEach(function (link) {
                    link.classList.remove('text-gold-400');
                    if (link.getAttribute('href') === '#' + sectionId) {
                        link.classList.add('text-gold-400');
                    }
                });
            }
        });
    }

    window.addEventListener('scroll', highlightNav, { passive: true });

    // --- Smooth scroll for anchor links ---
    document.querySelectorAll('a[href^="#"]').forEach(function (anchor) {
        anchor.addEventListener('click', function (e) {
            const targetId = this.getAttribute('href');
            if (targetId === '#') return;

            const target = document.querySelector(targetId);
            if (target) {
                e.preventDefault();
                const offsetTop = target.offsetTop - 80;
                window.scrollTo({
                    top: offsetTop,
                    behavior: 'smooth'
                });
            }
        });
    });
})();
</style>