/* Custom styles for StudioFerrara */
    :root {
        --teal-700: #115e59;
        --teal-800: #0f766e;
        --stone-50: #fafaf9;
        --slate-900: #0f172a;
    }

    html {
        scroll-behavior: smooth;
        scroll-padding-top: 80px;
    }

    body {
        overflow-x: hidden;
    }

    /* Scroll reveal base - always visible by default for progressive enhancement */
    .scroll-reveal {
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.7s ease, transform 0.7s ease;
    }

    @media (prefers-reduced-motion: no-preference) {
        .scroll-reveal {
            opacity: 0;
            transform: translateY(30px);
        }
        .scroll-reveal.revealed {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Staggered delays for grid items */
    .scroll-reveal:nth-child(1) { transition-delay: 0.05s; }
    .scroll-reveal:nth-child(2) { transition-delay: 0.1s; }
    .scroll-reveal:nth-child(3) { transition-delay: 0.15s; }
    .scroll-reveal:nth-child(4) { transition-delay: 0.2s; }
    .scroll-reveal:nth-child(5) { transition-delay: 0.25s; }
    .scroll-reveal:nth-child(6) { transition-delay: 0.3s; }

    /* Navbar transitions */
    #navbar.scrolled {
        background-color: rgba(255, 255, 255, 0.97);
        backdrop-filter: blur(12px);
        box-shadow: 0 1px 20px rgba(0, 0, 0, 0.06);
    }

    #navbar.scrolled .navbar-link {
        color: #334155;
    }

    #navbar.scrolled .navbar-link:hover {
        color: #115e59;
    }

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

    #mobileMenu.closed {
        opacity: 0;
        pointer-events: none;
    }

    /* Custom scrollbar */
    ::-webkit-scrollbar {
        width: 8px;
    }
    ::-webkit-scrollbar-track {
        background: #f5f5f4;
    }
    ::-webkit-scrollbar-thumb {
        background: #115e59;
        border-radius: 4px;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: #0f766e;
    }

    /* Selection color */
    ::selection {
        background-color: #115e59;
        color: #f0fdfa;
    }

    /* Focus styles */
    a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
        outline: 2px solid #115e59;
        outline-offset: 2px;
    }

    /* Image loading placeholder */
    img {
        background-color: #e7e5e4;
    }

    /* Subtle animation for decorative elements */
    @keyframes float {
        0%, 100% { transform: translateY(0px) rotate(2deg); }
        50% { transform: translateY(-10px) rotate(2deg); }
    }

    /* Button hover lift effect */
    .bg-teal-700:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 30px rgba(17, 94, 89, 0.3);
    }

    /* Input autofill styling */
    input:-webkit-autofill,
    textarea:-webkit-autofill,
    select:-webkit-autofill {
        -webkit-box-shadow: 0 0 0 30px white inset !important;
    }
</style>
<sm-file path="script.js">
    (function () {
        'use strict';

        // ── Mobile Menu ──────────────────────────────────────────────
        const mobileMenuBtn = document.getElementById('mobileMenuBtn');
        const mobileMenu = document.getElementById('mobileMenu');
        const menuIcon = document.getElementById('menuIcon');
        const closeIcon = document.getElementById('closeIcon');
        const mobileLinks = document.querySelectorAll('.mobile-link');
        let menuOpen = false;

        function toggleMenu() {
            menuOpen = !menuOpen;
            if (menuOpen) {
                mobileMenu.classList.remove('closed');
                mobileMenu.classList.add('open');
                menuIcon.classList.add('hidden');
                closeIcon.classList.remove('hidden');
                document.body.style.overflow = 'hidden';
            } else {
                closeMenu();
            }
        }

        function closeMenu() {
            menuOpen = false;
            mobileMenu.classList.remove('open');
            mobileMenu.classList.add('closed');
            menuIcon.classList.remove('hidden');
            closeIcon.classList.add('hidden');
            document.body.style.overflow = '';
        }

        mobileMenuBtn.addEventListener('click', toggleMenu);
        mobileLinks.forEach(function (link) {
            link.addEventListener('click', closeMenu);
        });

        // ── Navbar Scroll Effect ─────────────────────────────────────
        const navbar = document.getElementById('navbar');
        let lastScroll = 0;

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

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

        // ── Scroll Reveal (Progressive Enhancement) ──────────────────
        const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

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

            function revealOnScroll() {
                const windowHeight = window.innerHeight;
                revealElements.forEach(function (el) {
                    const elementTop = el.getBoundingClientRect().top;
                    const revealPoint = 100;
                    if (elementTop < windowHeight - revealPoint) {
                        el.classList.add('revealed');
                    }
                });
            }

            // Run on load in case elements are already in view
            revealOnScroll();
            window.addEventListener('scroll', revealOnScroll, { passive: true });
        } else {
            // If reduced motion is preferred, ensure all elements are visible
            document.querySelectorAll('.scroll-reveal').forEach(function (el) {
                el.classList.add('revealed');
            });
        }

        // ── 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 submission
                const submitBtn = contactForm.querySelector('button[type="submit"]');
                const originalText = submitBtn.textContent;
                submitBtn.textContent = 'Sending...';
                submitBtn.disabled = true;

                setTimeout(function () {
                    contactForm.reset();
                    formSuccess.classList.remove('hidden');
                    submitBtn.textContent = originalText;
                    submitBtn.disabled = false;

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

        // ── 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 - 120;
                const sectionHeight = section.offsetHeight;
                const sectionId = section.getAttribute('id');

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

        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 targetElement = document.querySelector(targetId);
                if (targetElement) {
                    e.preventDefault();
                    const offsetTop = targetElement.offsetTop - 80;
                    window.scrollTo({
                        top: offsetTop,
                        behavior: 'smooth'
                    });
                }
            });
        });

    })();