*, *::before, *::after {
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
  }

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

  /* Scroll reveal animations — progressive enhancement */
  @media (prefers-reduced-motion: no-preference) {
    .scroll-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);
    }
    .scroll-reveal.revealed {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .scroll-reveal {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }

  /* Navbar scroll state */
  #nav.scrolled {
    background: rgba(80, 7, 36, 0.95);
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  }

  /* Mobile menu */
  #mobile-menu {
    animation: slideDown 0.3s ease;
  }

  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Custom scrollbar */
  ::-webkit-scrollbar {
    width: 8px;
  }
  ::-webkit-scrollbar-track {
    background: #fdf4f8;
  }
  ::-webkit-scrollbar-thumb {
    background: #be185d;
    border-radius: 4px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #9d174d;
  }

  /* Selection color */
  ::selection {
    background: #fbbf24;
    color: #500724;
  }
</script-file>

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

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

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

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

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

    menuBtn.addEventListener('click', function () {
      const isOpen = !mobileMenu.classList.contains('hidden');
      if (isOpen) {
        mobileMenu.classList.add('hidden');
        menuBtn.setAttribute('aria-expanded', 'false');
      } else {
        mobileMenu.classList.remove('hidden');
        menuBtn.setAttribute('aria-expanded', 'true');
      }
    });

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

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

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

        revealElements.forEach(function (el) {
          revealObserver.observe(el);
        });
      } else {
        revealElements.forEach(function (el) {
          el.classList.add('revealed');
        });
      }
    } else {
      document.querySelectorAll('.scroll-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();
        form.style.display = 'none';
        successMsg.classList.remove('hidden');
        successMsg.classList.add('block');
      });
    }

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

<sm-file path="styles.css">
  *, *::before, *::after {
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
  }

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

  /* Scroll reveal animations — progressive enhancement */
  @media (prefers-reduced-motion: no-preference) {
    .scroll-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);
    }
    .scroll-reveal.revealed {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .scroll-reveal {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }

  /* Navbar scroll state */
  #nav.scrolled {
    background: rgba(80, 7, 36, 0.95);
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  }

  /* Mobile menu */
  #mobile-menu {
    animation: slideDown 0.3s ease;
  }

  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Custom scrollbar */
  ::-webkit-scrollbar {
    width: 8px;
  }
  ::-webkit-scrollbar-track {
    background: #fdf4f8;
  }
  ::-webkit-scrollbar-thumb {
    background: #be185d;
    border-radius: 4px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #9d174d;
  }

  /* Selection color */
  ::selection {
    background: #fbbf24;
    color: #500724;
  }