/* Custom styles — complementary to Tailwind */

  html {
    scroll-behavior: smooth;
  }

  @media (prefers-reduced-motion: no-preference) {
    @keyframes float {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-12px); }
    }

    @keyframes float-slow {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-8px); }
    }

    .animate-float {
      animation: float 4s ease-in-out infinite;
    }

    .animate-float-slow {
      animation: float-slow 5.5s ease-in-out infinite;
    }
  }

  /* Scroll reveal — progressive enhancement, only when JS is available */
  .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);
  }

  /* Staggered delays */
  .reveal-delay-1 { transition-delay: 0.1s; }
  .reveal-delay-2 { transition-delay: 0.2s; }
  .reveal-delay-3 { transition-delay: 0.3s; }
  .reveal-delay-4 { transition-delay: 0.4s; }
  .reveal-delay-5 { transition-delay: 0.5s; }
  .reveal-delay-6 { transition-delay: 0.6s; }

  /* Navbar scroll state */
  nav.scrolled {
    background: rgba(253, 248, 240, 0.92);
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(11, 29, 58, 0.08);
  }

  /* Subtle image hover */
  img {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  /* Selection color */
  ::selection {
    background: #5EEAD4;
    color: #0B1D3A;
  }

  /* Custom scrollbar */
  ::-webkit-scrollbar {
    width: 8px;
  }
  ::-webkit-scrollbar-track {
    background: #FDF8F0;
  }
  ::-webkit-scrollbar-thumb {
    background: #dce5ff;
    border-radius: 4px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #bcccff;
  }

  /* Focus visible */
  :focus-visible {
    outline: 2px solid #5EEAD4;
    outline-offset: 2px;
  }
</styles.css>
<sm-file path="script.js">
  // Mobile menu toggle
  const menuToggle = document.getElementById('menu-toggle');
  const mobileMenu = document.getElementById('mobile-menu');
  const menuIcon = document.getElementById('menu-icon');
  let menuOpen = false;

  menuToggle.addEventListener('click', () => {
    menuOpen = !menuOpen;
    mobileMenu.classList.toggle('hidden', !menuOpen);
    if (menuOpen) {
      menuIcon.innerHTML = '<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>';
    } else {
      menuIcon.innerHTML = '<line x1="4" y1="7" x2="20" y2="7"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="17" x2="20" y2="17"/>';
    }
  });

  // Close mobile menu on link click
  document.querySelectorAll('.mobile-link').forEach(link => {
    link.addEventListener('click', () => {
      menuOpen = false;
      mobileMenu.classList.add('hidden');
      menuIcon.innerHTML = '<line x1="4" y1="7" x2="20" y2="7"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="17" x2="20" y2="17"/>';
    });
  });

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

  window.addEventListener('scroll', () => {
    const currentScroll = window.pageYOffset;
    if (currentScroll > 50) {
      nav.classList.add('scrolled');
    } else {
      nav.classList.remove('scrolled');
    }
    lastScroll = currentScroll;
  }, { passive: true });

  // Scroll reveal — progressive enhancement
  if (!window.matchMedia('(prefers-reduced-motion: no-preference)').matches) {
    const revealElements = document.querySelectorAll('.reveal');

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

    revealElements.forEach(el => revealObserver.observe(el));
  }

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

  contactForm.addEventListener('submit', (e) => {
    e.preventDefault();

    // Simulate submission
    const btn = contactForm.querySelector('button[type="submit"]');
    const originalText = btn.innerHTML;
    btn.innerHTML = '<svg class="animate-spin w-5 h-5" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg> Sending...';
    btn.disabled = true;

    setTimeout(() => {
      contactForm.reset();
      formSuccess.classList.remove('hidden');
      btn.innerHTML = originalText;
      btn.disabled = false;

      setTimeout(() => {
        formSuccess.classList.add('hidden');
      }, 4000);
    }, 1200);
  });

  // Smooth scroll for anchor links (fallback for older browsers)
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
      e.preventDefault();
      const target = document.querySelector(this.getAttribute('href'));
      if (target) {
        target.scrollIntoView({
          behavior: 'smooth',
          block: 'start'
        });
      }
    });
  });
</script>