:root {
  --forest-50: #f6f7f4;
  --forest-100: #e8ebe3;
  --forest-200: #d1d7c8;
  --forest-300: #a8b59a;
  --forest-400: #7d946e;
  --forest-500: #5c7a4e;
  --forest-600: #4a6340;
  --forest-700: #3d5235;
  --forest-800: #32432c;
  --forest-900: #2a3825;
  --cream-50: #faf9f6;
  --cream-100: #f5f3ed;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  overflow-x: hidden;
}

/* Scroll reveal base — content is visible by default, JS adds the animated state */
@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-active {
    opacity: 1;
    transform: translateY(0);
  }
}

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

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

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--cream-100);
}
::-webkit-scrollbar-thumb {
  background: var(--forest-300);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--forest-400);
}

/* Selection color */
::selection {
  background: var(--forest-200);
  color: var(--forest-900);
}

/* Smooth focus styles */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--forest-500);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Navbar glass effect */
.nav-scrolled {
  background: rgba(250, 249, 246, 0.92) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(92, 122, 78, 0.08);
}

/* Floating card animation */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
}

.reveal-active .bg-white\/80 {
  animation: float 4s ease-in-out infinite;
}

.reveal-active .bg-white\/80:nth-child(2) {
  animation-delay: 0.5s;
}

.reveal-active .bg-white\/80:nth-child(3) {
  animation-delay: 1s;
}
</style>

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

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

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

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

  // Mobile menu
  const menuBtn = document.getElementById('menuBtn');
  const mobileMenu = document.getElementById('mobileMenu');
  const mobileLinks = document.querySelectorAll('.mobile-link');
  let menuOpen = false;

  function toggleMenu() {
    menuOpen = !menuOpen;
    if (menuOpen) {
      mobileMenu.classList.remove('closed', 'pointer-events-none');
      mobileMenu.classList.add('open');
      menuBtn.innerHTML = '<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>';
      document.body.style.overflow = 'hidden';
    } else {
      mobileMenu.classList.remove('open');
      mobileMenu.classList.add('closed', 'pointer-events-none');
      menuBtn.innerHTML = '<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/></svg>';
      document.body.style.overflow = '';
    }
  }

  menuBtn.addEventListener('click', toggleMenu);

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

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

  if (form) {
    form.addEventListener('submit', function (e) {
      e.preventDefault();
      // Simulate form submission
      const btn = form.querySelector('button[type="submit"]');
      btn.disabled = true;
      btn.textContent = 'Sending...';

      setTimeout(function () {
        form.reset();
        successMsg.classList.remove('hidden');
        btn.disabled = false;
        btn.textContent = 'Send Message';

        setTimeout(function () {
          successMsg.classList.add('hidden');
        }, 5000);
      }, 800);
    });
  }

  // Smooth scroll for anchor links
  document.querySelectorAll('a[href^="#"]').forEach(function (anchor) {
    anchor.addEventListener('click', function (e) {
      const target = document.querySelector(this.getAttribute('href'));
      if (target) {
        e.preventDefault();
        const offset = 80;
        const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - offset;
        window.scrollTo({
          top: targetPosition,
          behavior: 'smooth'
        });
      }
    });
  });
})();