/* Base styles and custom utilities */

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    overflow-x: hidden;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: #faf8f7;
}
::-webkit-scrollbar-thumb {
    background: #d9d0c8;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #bfb4a8;
}

/* Selection color */
::selection {
    background: #fce7eb;
    color: #611c2d;
}

/* Header scroll state */
#header {
    background: rgba(250, 248, 247, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

#header.scrolled {
    border-bottom-color: rgba(217, 208, 200, 0.5);
    box-shadow: 0 1px 20px rgba(0, 0, 0, 0.04);
}

/* Mobile menu */
#mobileMenu.open {
    opacity: 1 !important;
    pointer-events: all !important;
}

#mobileMenu.open .mobile-link {
    animation: fadeDown 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

#mobileMenu.open .mobile-link:nth-child(1) { animation-delay: 0.05s; }
#mobileMenu.open .mobile-link:nth-child(2) { animation-delay: 0.1s; }
#mobileMenu.open .mobile-link:nth-child(3) { animation-delay: 0.15s; }
#mobileMenu.open .mobile-link:nth-child(4) { animation-delay: 0.2s; }

@keyframes fadeDown {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Menu button animation */
.menu-btn-active .menu-line:nth-child(1) {
    transform: translateY(4px) rotate(45deg);
}
.menu-btn-active .menu-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.menu-btn-active .menu-line:nth-child(3) {
    transform: translateY(-4px) rotate(-45deg);
    width: 1rem;
}

/* Service card hover */
.service-card {
    transition: background-color 0.4s ease, transform 0.3s ease;
}

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

/* Subtle parallax on hero image */
.hero-image {
    will-change: transform;
}

/* Form focus ring custom */
input:focus,
select:focus,
textarea:focus {
    outline: none;
    box-shadow: 0 0 0 1px rgba(143, 34, 58, 0.15);
}

/* Print styles */
@media print {
    #header, #mobileMenu, footer { display: none; }
    body { color: #000; background: #fff; }
    .reveal-up, .reveal-left { opacity: 1 !important; transform: none !important; }
}
</style>

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

    // ——— Header scroll behavior ———
    const header = document.getElementById('header');
    let lastScroll = 0;

    function updateHeader() {
        const scrollY = window.pageYOffset;
        if (scrollY > 60) {
            header.classList.add('scrolled');
        } else {
            header.classList.remove('scrolled');
        }
        lastScroll = scrollY;
    }

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

    // ——— Mobile menu ———
    const menuBtn = document.getElementById('menuBtn');
    const mobileMenu = document.getElementById('mobileMenu');
    const mobileLinks = mobileMenu.querySelectorAll('a');
    let menuOpen = false;

    function toggleMenu() {
        menuOpen = !menuOpen;
        mobileMenu.classList.toggle('open', menuOpen);
        menuBtn.classList.toggle('menu-btn-active', menuOpen);
        document.body.style.overflow = menuOpen ? 'hidden' : '';
    }

    menuBtn.addEventListener('click', toggleMenu);

    mobileLinks.forEach(function (link) {
        link.addEventListener('click', function () {
            if (menuOpen) toggleMenu();
        });
    });

    // Close on Escape
    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape' && menuOpen) toggleMenu();
    });

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

    if (!prefersReducedMotion && 'IntersectionObserver' in window) {
        const revealElements = document.querySelectorAll('.reveal-up, .reveal-left');

        const revealObserver = new IntersectionObserver(function (entries) {
            entries.forEach(function (entry) {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                    revealObserver.unobserve(entry.target);
                }
            });
        }, {
            threshold: 0.12,
            rootMargin: '0px 0px -40px 0px'
        });

        revealElements.forEach(function (el) {
            revealObserver.observe(el);
        });
    } else {
        // If reduced motion is preferred or no IntersectionObserver, show everything immediately
        document.querySelectorAll('.reveal-up, .reveal-left').forEach(function (el) {
            el.classList.add('visible');
        });
    }

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

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

            // Basic validation
            const firstName = form.querySelector('#firstName').value.trim();
            const lastName = form.querySelector('#lastName').value.trim();
            const email = form.querySelector('#email').value.trim();

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

            // Simulate submission
            form.style.opacity = '0.5';
            form.style.pointerEvents = 'none';

            setTimeout(function () {
                form.classList.add('hidden');
                formSuccess.classList.remove('hidden');
                formSuccess.style.animation = 'fadeDown 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards';
            }, 800);
        });
    }

    // ——— 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 headerHeight = header.offsetHeight;
                const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - headerHeight - 20;

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

    // ——— Subtle hero image parallax on scroll ———
    const heroImage = document.querySelector('.hero-image');
    if (heroImage && !prefersReducedMotion) {
        let ticking = false;
        window.addEventListener('scroll', function () {
            if (!ticking) {
                window.requestAnimationFrame(function () {
                    const scrolled = window.pageYOffset;
                    if (scrolled < window.innerHeight) {
                        heroImage.style.transform = 'translateY(' + (scrolled * 0.08) + 'px)';
                    }
                    ticking = false;
                });
                ticking = true;
            }
        }, { passive: true });
    }
})();
</script>