/* Custom styles for David Turk Commercial Broker website */

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

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #FAF7F2;
}
::-webkit-scrollbar-thumb {
    background: #d1ccc5;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #a8a198;
}

/* Navbar scroll state */
nav.scrolled {
    background: rgba(250, 247, 242, 0.97);
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}

/* Mobile menu animation */
.menu-line {
    display: block;
}

#mobileMenu.open {
    transform: translateX(0);
}

#mobileMenu.closed {
    transform: translateX(100%);
}

/* Service card hover effect */
.service-card {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.service-card:hover {
    transform: translateY(-4px);
}

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

.fade-in-hidden {
    opacity: 0;
    transform: translateY(30px);
}

/* Stagger children animations */
.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; }

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    .fade-in, .fade-in-hidden {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .service-card:hover {
        transform: none;
    }
    img {
        transition: none;
    }
}

/* Mobile menu link hover */
.mobile-link {
    transition: color 0.3s ease;
}

/* Hero image subtle parallax */
#hero img {
    transition: transform 0.6s ease;
}

/* Counter animation */
.counter {
    display: inline-block;
}
</style>
<sm-file path="script.js">
// David Turk Commercial Broker - Interactive Script

document.addEventListener('DOMContentLoaded', function() {

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

    function handleScroll() {
        const currentScroll = window.pageYOffset;

        if (currentScroll > 80) {
            navbar.classList.add('scrolled');
        } else {
            navbar.classList.remove('scrolled');
        }

        lastScroll = currentScroll;
    }

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

    // ===== Mobile menu =====
    const menuBtn = document.getElementById('menuBtn');
    const mobileMenu = document.getElementById('mobileMenu');
    const menuLines = document.querySelectorAll('.menu-line');
    let menuOpen = false;

    menuBtn.addEventListener('click', function() {
        menuOpen = !menuOpen;

        if (menuOpen) {
            mobileMenu.classList.remove('closed');
            mobileMenu.classList.add('open');
            document.body.style.overflow = 'hidden';

            // Animate hamburger to X
            menuLines[0].style.transform = 'rotate(45deg) translate(4px, 4px)';
            menuLines[1].style.opacity = '0';
            menuLines[2].style.transform = 'rotate(-45deg) translate(4px, -4px)';
            menuLines[2].style.width = '24px';
        } else {
            mobileMenu.classList.remove('open');
            mobileMenu.classList.add('closed');
            document.body.style.overflow = '';

            // Reset hamburger
            menuLines[0].style.transform = '';
            menuLines[1].style.opacity = '';
            menuLines[2].style.transform = '';
            menuLines[2].style.width = '';
        }
    });

    // Close mobile menu on link click
    document.querySelectorAll('.mobile-link').forEach(function(link) {
        link.addEventListener('click', function() {
            menuOpen = false;
            mobileMenu.classList.remove('open');
            mobileMenu.classList.add('closed');
            document.body.style.overflow = '';

            menuLines[0].style.transform = '';
            menuLines[1].style.opacity = '';
            menuLines[2].style.transform = '';
            menuLines[2].style.width = '';
        });
    });

    // ===== Scroll reveal animations =====
    // Only apply if user prefers motion
    const prefersMotion = window.matchMedia('(prefers-reduced-motion: no-preference)').matches;

    if (prefersMotion) {
        const fadeElements = document.querySelectorAll('.service-card, #about > div > div, #market > div > div > div:first-child, #testimonials .bg-white');

        const observerOptions = {
            root: null,
            rootMargin: '0px 0px -80px 0px',
            threshold: 0.1
        };

        const observer = new IntersectionObserver(function(entries) {
            entries.forEach(function(entry) {
                if (entry.isIntersecting) {
                    entry.target.classList.add('fade-in');
                    entry.target.classList.remove('fade-in-hidden');
                    observer.unobserve(entry.target);
                }
            });
        }, observerOptions);

        fadeElements.forEach(function(el) {
            el.classList.add('fade-in-hidden');
            observer.observe(el);
        });
    }

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

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

            // Simple 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.textContent = 'Sending...';

            setTimeout(function() {
                contactForm.style.display = 'none';
                successMessage.classList.remove('hidden');
            }, 1200);
        });
    }

    // ===== Smooth scroll for anchor links =====
    document.querySelectorAll('a[href^="#"]').forEach(function(anchor) {
        anchor.addEventListener('click', function(e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                const navHeight = navbar.offsetHeight;
                const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - navHeight - 20;

                window.scrollTo({
                    top: targetPosition,
                    behavior: 'smooth'
                });
            }
        });
    });

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

    function highlightNav() {
        const scrollPos = window.pageYOffset + 200;

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

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

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

});