/* Custom styles — progressive enhancement only */

/* Reduced motion: ensure content is always visible */
@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Focus styles for accessibility */
a:focus-visible, button:focus-visible {
    outline: 2px solid #14b8a6;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Selection color */
::selection {
    background-color: #14b8a6;
    color: white;
}
</styles.css>
<sm-file path="script.js">
(function () {
    'use strict';

    // Mobile menu toggle
    const menuToggle = document.getElementById('menu-toggle');
    const mobileMenu = document.getElementById('mobile-menu');
    const mobileNavLinks = mobileMenu.querySelectorAll('a');

    if (menuToggle && mobileMenu) {
        menuToggle.addEventListener('click', function () {
            menuToggle.classList.toggle('active');
            mobileMenu.classList.toggle('open');
        });

        // Close menu when a link is clicked
        mobileNavLinks.forEach(function (link) {
            link.addEventListener('click', function () {
                menuToggle.classList.remove('active');
                mobileMenu.classList.remove('open');
            });
        });
    }

    // Scroll reveal — progressive enhancement, only when JS is available
    // and prefers-reduced-motion is not set to reduce
    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

    if (!prefersReducedMotion) {
        const revealElements = document.querySelectorAll('.reveal');

        function checkReveal() {
            const windowHeight = window.innerHeight;
            const revealPoint = 120;

            revealElements.forEach(function (el) {
                const elementTop = el.getBoundingClientRect().top;
                if (elementTop < windowHeight - revealPoint) {
                    el.classList.add('active');
                }
            });
        }

        // Run on load and scroll
        window.addEventListener('scroll', checkReveal, { passive: true });
        // Initial check on load
        checkReveal();
    }

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

    window.addEventListener('scroll', function () {
        const currentScroll = window.pageYOffset;
        if (currentScroll > 50) {
            navbar.classList.add('shadow-sm');
        } else {
            navbar.classList.remove('shadow-sm');
        }
        lastScroll = currentScroll;
    }, { passive: true });
})();
</script>