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

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

  body {
    overflow-x: hidden;
  }

  ::selection {
    background-color: rgba(201, 162, 39, 0.3);
    color: #f1f5f9;
  }

  /* Custom scrollbar */
  ::-webkit-scrollbar {
    width: 8px;
  }
  ::-webkit-scrollbar-track {
    background: #061f1f;
  }
  ::-webkit-scrollbar-thumb {
    background: #1a3a3a;
    border-radius: 4px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #d4a84b;
  }

  /* Service card subtle float on hover */
  .service-card {
    transform: translateY(0);
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease, background-color 0.4s ease;
  }
  .service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  }

  /* Mobile menu animation */
  #mobile-menu.open {
    opacity: 1 !important;
    pointer-events: all !important;
  }

  #mobile-menu-btn.open span:nth-child(1) {
    transform: rotate(45deg) translate(3px, 3px);
  }
  #mobile-menu-btn.open span:nth-child(2) {
    opacity: 0;
  }
  #mobile-menu-btn.open span:nth-child(3) {
    transform: rotate(-45deg) translate(3px, -3px);
    width: 1.5rem;
  }

  /* Header scrolled state */
  #main-header.scrolled {
    background: rgba(6, 31, 31, 0.95);
    backdrop-filter: blur(20px);
    box-shadow: 0 1px 0 rgba(212, 168, 75, 0.1);
  }

  /* Fade-in on scroll (progressive enhancement) */
  @media (prefers-reduced-motion: no-preference) {
    .fade-in-section {
      opacity: 1;
      transform: none;
    }
  }

  /* Gallery image hover overlay */
  .group:hover .group-hover\:scale-110 {
    transform: scale(1.1);
  }

  /* Gold shimmer animation for hero */
  @keyframes shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
  }

  /* Subtle pulse for decorative elements */
  @keyframes subtle-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.7; }
  }

  .animate-subtle-pulse {
    animation: subtle-pulse 4s ease-in-out infinite;
  }
</style>

<sm-file path="script.js">
  // Header scroll effect
  const header = document.getElementById('main-header');
  let lastScroll = 0;

  function handleScroll() {
    const currentScroll = window.pageYOffset;

    if (currentScroll > 60) {
      header.classList.add('scrolled');
    } else {
      header.classList.remove('scrolled');
    }

    lastScroll = currentScroll;
  }

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

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

  menuBtn.addEventListener('click', () => {
    menuOpen = !menuOpen;
    menuBtn.classList.toggle('open', menuOpen);
    mobileMenu.classList.toggle('open', menuOpen);
    document.body.style.overflow = menuOpen ? 'hidden' : '';
  });

  mobileLinks.forEach(link => {
    link.addEventListener('click', () => {
      menuOpen = false;
      menuBtn.classList.remove('open');
      mobileMenu.classList.remove('open');
      document.body.style.overflow = '';
    });
  });

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

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

    // Simulate form submission
    const submitBtn = form.querySelector('button[type="submit"]');
    const originalText = submitBtn.textContent;
    submitBtn.textContent = 'Sending...';
    submitBtn.disabled = true;

    setTimeout(() => {
      form.reset();
      formSuccess.classList.remove('hidden');
      submitBtn.textContent = originalText;
      submitBtn.disabled = false;

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

  // Scroll reveal for sections below the fold (progressive enhancement)
  if (window.matchMedia('(prefers-reduced-motion: no-preference)').matches) {
    const sections = document.querySelectorAll('section[id]');

    const observerOptions = {
      root: null,
      rootMargin: '0px 0px -80px 0px',
      threshold: 0.1
    };

    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.style.opacity = '1';
          entry.target.style.transform = 'translateY(0)';
          observer.unobserve(entry.target);
        }
      });
    }, observerOptions);

    sections.forEach(section => {
      // Only animate sections below the fold
      const rect = section.getBoundingClientRect();
      if (rect.top > window.innerHeight) {
        section.style.opacity = '0';
        section.style.transform = 'translateY(30px)';
        section.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
        observer.observe(section);
      }
    });
  }

  // Smooth scroll for anchor links (fallback for older browsers)
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
      const targetId = this.getAttribute('href');
      if (targetId === '#') return;

      const target = document.querySelector(targetId);
      if (target) {
        e.preventDefault();
        const headerHeight = header.offsetHeight;
        const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - headerHeight;

        window.scrollTo({
          top: targetPosition,
          behavior: 'smooth'
        });
      }
    });
  });