/* ─── Base ─── */
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; font-size: 16px; }
  body { margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

  /* ─── Selection ─── */
  ::selection { background: rgba(77, 171, 136, 0.2); color: #102a43; }

  /* ─── Scrollbar ─── */
  ::-webkit-scrollbar { width: 6px; }
  ::-webkit-scrollbar-track { background: #102a43; }
  ::-webkit-scrollbar-thumb { background: #4dab88; border-radius: 3px; }

  /* ─── Reveal on scroll (progressive enhancement) ─── */
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      opacity: 0;
      transform: translateY(32px);
      transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .reveal.revealed {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .reveal {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }

  /* ─── Form focus styles ─── */
  input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: #4dab88 !important;
  }

  /* ─── Smooth transitions for all interactive elements ─── */
  a, button { transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
</style>
<sm-file path="script.js">
  (function () {
    'use strict';

    // ─── Mobile menu ───
    const menuBtn = document.getElementById('menu-btn');
    const mobileMenu = document.getElementById('mobile-menu');
    const mobileLinks = mobileMenu.querySelectorAll('.mobile-link');

    menuBtn.addEventListener('click', function () {
      const isOpen = !mobileMenu.classList.contains('hidden');
      mobileMenu.classList.toggle('hidden');
      menuBtn.setAttribute('aria-expanded', !isOpen);
    });

    mobileLinks.forEach(function (link) {
      link.addEventListener('click', function () {
        mobileMenu.classList.add('hidden');
        menuBtn.setAttribute('aria-expanded', 'false');
      });
    });

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

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

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

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

      function checkReveal() {
        const windowHeight = window.innerHeight;
        reveals.forEach(function (el) {
          const top = el.getBoundingClientRect().top;
          if (top < windowHeight - 80) {
            el.classList.add('revealed');
          }
        });
      }

      window.addEventListener('scroll', checkReveal, { passive: true });
      checkReveal();
    } else {
      document.querySelectorAll('.reveal').forEach(function (el) {
        el.classList.add('revealed');
      });
    }

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

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

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

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

    // ─── Active nav link highlighting ───
    const sections = document.querySelectorAll('section[id]');
    const navLinks = document.querySelectorAll('nav a[href^="#"]');

    function highlightNav() {
      const scrollY = window.scrollY + 200;
      sections.forEach(function (section) {
        const top = section.offsetTop;
        const height = section.offsetHeight;
        const id = section.getAttribute('id');
        navLinks.forEach(function (link) {
          if (link.getAttribute('href') === '#' + id) {
            if (scrollY >= top && scrollY < top + height) {
              link.classList.add('text-white');
              link.classList.remove('text-white/80');
            } else {
              link.classList.remove('text-white');
              link.classList.add('text-white/80');
            }
          }
        });
      });
    }

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