/* Base & utility */
html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Reveal animations — progressive enhancement, hidden by default via JS */
@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);
  }
}

/* Nav scroll state */
#nav.scrolled {
  background: rgba(253, 252, 250, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(27, 67, 50, 0.08);
}

/* Mobile menu */
#mobile-menu.open {
  opacity: 1;
  pointer-events: auto;
}

/* Floating card animations */
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(2deg); }
  50% { transform: translateY(-10px) rotate(2deg); }
}
@keyframes float-slow {
  0%, 100% { transform: translateY(0px) translateX(0px); }
  50% { transform: translateY(-8px) translateX(4px); }
}
@keyframes float-reverse {
  0%, 100% { transform: translateY(0px) translateX(0px); }
  50% { transform: translateY(-6px) translateX(-3px); }
}

.floating-main { animation: float 6s ease-in-out infinite; }
.floating-slow { animation: float-slow 8s ease-in-out infinite; }
.floating-reverse { animation: float-reverse 7s ease-in-out infinite; }

/* Subtle gradient shift for hero */
@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
</style>
<sm-file path="script.js">
(function () {
  'use strict';

  // --- Mobile menu ---
  const menuBtn = document.getElementById('menu-btn');
  const menuClose = document.getElementById('menu-close');
  const mobileMenu = document.getElementById('mobile-menu');
  const mobileLinks = mobileMenu.querySelectorAll('a');

  function openMenu() {
    mobileMenu.classList.remove('opacity-0', 'pointer-events-none');
    mobileMenu.classList.add('open');
    document.body.style.overflow = 'hidden';
  }
  function closeMenu() {
    mobileMenu.classList.add('opacity-0', 'pointer-events-none');
    mobileMenu.classList.remove('open');
    document.body.style.overflow = '';
  }

  menuBtn.addEventListener('click', openMenu);
  menuClose.addEventListener('click', closeMenu);
  mobileLinks.forEach(function (link) {
    link.addEventListener('click', closeMenu);
  });

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

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

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

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

  if (!prefersReducedMotion && 'IntersectionObserver' in window) {
    const reveals = document.querySelectorAll('.reveal');

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

    reveals.forEach(function (el) {
      observer.observe(el);
    });
  } else {
    // If JS is disabled or reduced motion preferred, ensure all content is visible
    document.querySelectorAll('.reveal').forEach(function (el) {
      el.classList.add('revealed');
    });
  }

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

  if (form) {
    form.addEventListener('submit', function (e) {
      e.preventDefault();
      // Simulate submission
      const btn = form.querySelector('button[type="submit"]');
      btn.disabled = true;
      btn.innerHTML = '<svg class="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg> Sending...';

      setTimeout(function () {
        form.reset();
        btn.disabled = false;
        btn.innerHTML = 'Send Message <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/></svg>';
        successMsg.classList.remove('hidden');
        setTimeout(function () {
          successMsg.classList.add('hidden');
        }, 5000);
      }, 1200);
    });
  }

  // --- Floating cards parallax on mouse move (desktop only) ---
  if (!prefersReducedMotion && window.innerWidth > 1024) {
    const hero = document.querySelector('section:first-of-type');
    if (hero) {
      const cards = hero.querySelectorAll('[class*="absolute"]');
      document.addEventListener('mousemove', function (e) {
        const x = (e.clientX / window.innerWidth - 0.5) * 2;
        const y = (e.clientY / window.innerHeight - 0.5) * 2;
        cards.forEach(function (card, i) {
          const speed = (i + 1) * 4;
          card.style.transform = card.style.transform
            ? card.style.transform.replace(/translateX\([^)]*\)/, 'translateX(' + (x * speed) + 'px)')
            : 'translateX(' + (x * speed) + 'px)';
        });
      });
    }
  }
})();