/* Custom styles — progressive enhancement */
  @media (prefers-reduced-motion: no-preference) {
    .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);
    }
    .reveal.revealed {
      opacity: 1;
      transform: translateY(0);
    }
    .reveal:nth-child(2) { transition-delay: 0.1s; }
    .reveal:nth-child(3) { transition-delay: 0.2s; }
    .reveal:nth-child(4) { transition-delay: 0.3s; }
  }

  /* Ensure above-the-fold content is always visible */
  .reveal:not(.revealed) {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Reveal only below-fold content via JS */
  @media (prefers-reduced-motion: no-preference) {
    .reveal.above-fold {
      opacity: 1 !important;
      transform: none !important;
    }
    .reveal:not(.above-fold) {
      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);
    }
    .reveal.above-fold.revealed,
    .reveal.revealed {
      opacity: 1;
      transform: translateY(0);
    }
  }

  html {
    scroll-behavior: smooth;
  }

  /* Custom scrollbar */
  ::-webkit-scrollbar {
    width: 8px;
  }
  ::-webkit-scrollbar-track {
    background: #f5f3ed;
  }
  ::-webkit-scrollbar-thumb {
    background: #8dbc7e;
    border-radius: 4px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #64a156;
  }

  /* Selection color */
  ::selection {
    background: #b8d4af;
    color: #1f3f1e;
  }
</styles.css>

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

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

    function updateNavbar() {
      const scrollY = window.scrollY;
      if (scrollY > 80) {
        navbar.classList.add('bg-forest-900/95', 'backdrop-blur-lg', 'shadow-lg', 'shadow-forest-950/20');
        navbar.classList.remove('bg-transparent');
      } else {
        navbar.classList.remove('bg-forest-900/95', 'backdrop-blur-lg', 'shadow-lg', 'shadow-forest-950/20');
        navbar.classList.add('bg-transparent');
      }
      lastScroll = scrollY;
    }

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

    // --- Mobile menu ---
    const mobileMenuBtn = document.getElementById('mobile-menu-btn');
    const mobileMenu = document.getElementById('mobile-menu');
    const menuIconOpen = document.getElementById('menu-icon-open');
    const menuIconClose = document.getElementById('menu-icon-close');
    const mobileLinks = mobileMenu.querySelectorAll('.mobile-link');

    function toggleMenu() {
      const isOpen = !mobileMenu.classList.contains('hidden');
      mobileMenu.classList.toggle('hidden');
      menuIconOpen.classList.toggle('hidden', isOpen);
      menuIconClose.classList.toggle('hidden', !isOpen);
      document.body.classList.toggle('overflow-hidden', !isOpen);
    }

    mobileMenuBtn.addEventListener('click', toggleMenu);
    mobileLinks.forEach(function (link) {
      link.addEventListener('click', function () {
        mobileMenu.classList.add('hidden');
        menuIconOpen.classList.remove('hidden');
        menuIconClose.classList.add('hidden');
        document.body.classList.remove('overflow-hidden');
      });
    });

    // --- Scroll reveal (progressive enhancement) ---
    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

    function revealOnScroll() {
      const reveals = document.querySelectorAll('.reveal');
      const windowHeight = window.innerHeight;

      reveals.forEach(function (el) {
        const rect = el.getBoundingClientRect();
        const revealPoint = windowHeight * 0.88;

        if (rect.top < revealPoint) {
          el.classList.add('revealed');
        }
      });
    }

    if (!prefersReducedMotion) {
      // Mark above-the-fold elements
      document.querySelectorAll('.reveal').forEach(function (el) {
        const rect = el.getBoundingClientRect();
        if (rect.top < window.innerHeight) {
          el.classList.add('above-fold');
        }
      });

      window.addEventListener('scroll', revealOnScroll, { passive: true });
      // Initial check
      revealOnScroll();
    } else {
      // If reduced motion is preferred, show everything immediately
      document.querySelectorAll('.reveal').forEach(function (el) {
        el.classList.add('revealed');
      });
    }

    // --- Contact form ---
    const contactForm = document.getElementById('contact-form');
    const formSuccess = document.getElementById('form-success');

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

        // Simple validation
        const name = document.getElementById('name').value.trim();
        const email = document.getElementById('email').value.trim();
        const message = document.getElementById('message').value.trim();

        if (!name || !email || !message) {
          return;
        }

        // Show success
        contactForm.style.display = 'none';
        formSuccess.classList.remove('hidden');
      });
    }

    // --- Smooth scroll for anchor links ---
    document.querySelectorAll('a[href^="#"]').forEach(function (anchor) {
      anchor.addEventListener('click', function (e) {
        const targetId = this.getAttribute('href');
        if (targetId === '#top') return;

        const target = document.querySelector(targetId);
        if (target) {
          e.preventDefault();
          const navHeight = navbar.offsetHeight;
          const targetPosition = target.getBoundingClientRect().top + window.scrollY - navHeight - 20;
          window.scrollTo({
            top: targetPosition,
            behavior: prefersReducedMotion ? 'auto' : 'smooth'
          });
        }
      });
    });
  })();
</script>