/* ========== SCROLL REVEAL (progressive enhancement) ========== */
@media (prefers-reduced-motion: no-preference) {
    .scroll-reveal {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .scroll-reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========== NAV SCROLL STATE ========== */
#nav.scrolled {
    background: rgba(253, 252, 250, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 1px 0 rgba(26, 92, 42, 0.08);
}

/* ========== SMOOTH SCROLL ========== */
html {
    scroll-behavior: smooth;
}

/* ========== MOBILE LINK HOVER ========== */
.mobile-link:active {
    background: rgba(26, 92, 42, 0.05);
}
</styles.css>
<sm-file path="script.js">
(function () {
    'use strict';

    // ---- Mobile menu ----
    const menuBtn = document.getElementById('menu-btn');
    const mobileMenu = document.getElementById('mobile-menu');
    const iconOpen = document.getElementById('menu-icon-open');
    const iconClose = document.getElementById('menu-icon-close');

    menuBtn.addEventListener('click', function () {
        const isOpen = !mobileMenu.classList.contains('hidden');
        mobileMenu.classList.toggle('hidden');
        iconOpen.classList.toggle('hidden');
        iconClose.classList.toggle('hidden');
        menuBtn.setAttribute('aria-expanded', !isOpen);
    });

    // Close menu when a link is clicked
    mobileMenu.querySelectorAll('a').forEach(function (link) {
        link.addEventListener('click', function () {
            mobileMenu.classList.add('hidden');
            iconOpen.classList.remove('hidden');
            iconClose.classList.add('hidden');
        });
    });

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

    function onScroll() {
        const currentScroll = window.pageYOffset;
        if (currentScroll > 60) {
            nav.classList.add('scrolled');
        } else {
            nav.classList.remove('scrolled');
        }
        lastScroll = currentScroll;
    }

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

    // ---- Scroll reveal (progressive enhancement) ----
    if (window.matchMedia('(prefers-reduced-motion: no-preference)').matches) {
        const revealElements = document.querySelectorAll('.scroll-reveal');

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

            revealElements.forEach(function (el) {
                observer.observe(el);
            });
        } else {
            // Fallback: show everything
            revealElements.forEach(function (el) {
                el.classList.add('is-visible');
            });
        }
    } else {
        // Respect reduced motion preference
        document.querySelectorAll('.scroll-reveal').forEach(function (el) {
            el.classList.add('is-visible');
        });
    }
})();
</script>