/* Custom styles for Mack & Rita's */

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Navbar scroll state */
#navbar.scrolled {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 20px rgba(19, 31, 71, 0.08);
}

/* Reveal animations — progressive enhancement via JS */
.reveal {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-left {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-right {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* These are enhanced by JS when prefers-reduced-motion is off */
@media (prefers-reduced-motion: no-preference) {
  .reveal-hidden {
    opacity: 0;
    transform: translateY(24px);
  }
  .reveal-left-hidden {
    opacity: 0;
    transform: translateX(-32px);
  }
  .reveal-right-hidden {
    opacity: 0;
    transform: translateX(32px);
  }
}

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

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

/* Subtle hover on gallery images */
.reveal img {
  transition: transform 0.5s ease;
}

/* Focus styles for accessibility */
a:focus-visible,
button:focus-visible {
  outline: 2px solid #14b8a6;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f0fdf9;
}
::-webkit-scrollbar-thumb {
  background: #99f6e0;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #5eead4;
}

/* Selection color */
::selection {
  background: #99f6e0;
  color: #042f2e;
}
</style>

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

  // ── Navbar scroll effect ──────────────────────────────────────────
  const navbar = document.getElementById('navbar');

  function handleScroll() {
    if (window.scrollY > 50) {
      navbar.classList.add('scrolled');
    } else {
      navbar.classList.remove('scrolled');
    }
  }

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

  // ── Mobile menu toggle ────────────────────────────────────────────
  const menuToggle = document.getElementById('menu-toggle');
  const mobileMenu = document.getElementById('mobile-menu');
  const iconOpen = document.getElementById('menu-icon-open');
  const iconClose = document.getElementById('menu-icon-close');
  const mobileLinks = document.querySelectorAll('.mobile-link');

  menuToggle.addEventListener('click', function () {
    const isOpen = !mobileMenu.classList.contains('hidden');
    mobileMenu.classList.toggle('hidden');
    iconOpen.classList.toggle('hidden');
    iconClose.classList.toggle('hidden');
  });

  mobileLinks.forEach(function (link) {
    link.addEventListener('click', function () {
      mobileMenu.classList.add('hidden');
      iconOpen.classList.remove('hidden');
      iconClose.classList.add('hidden');
    });
  });

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

  if (!prefersReducedMotion) {
    const revealElements = document.querySelectorAll('.reveal, .reveal-left, .reveal-right');

    // Add hidden state classes
    revealElements.forEach(function (el) {
      if (el.classList.contains('reveal')) {
        el.classList.add('reveal-hidden');
      } else if (el.classList.contains('reveal-left')) {
        el.classList.add('reveal-left-hidden');
      } else if (el.classList.contains('reveal-right')) {
        el.classList.add('reveal-right-hidden');
      }
    });

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

    const observer = new IntersectionObserver(function (entries) {
      entries.forEach(function (entry) {
        if (entry.isIntersecting) {
          const el = entry.target;
          el.classList.remove('reveal-hidden', 'reveal-left-hidden', 'reveal-right-hidden');
          observer.unobserve(el);
        }
      });
    }, observerOptions);

    revealElements.forEach(function (el) {
      observer.observe(el);
    });
  }

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

  function updateActiveLink() {
    let current = '';
    sections.forEach(function (section) {
      const sectionTop = section.offsetTop - 120;
      if (window.scrollY >= sectionTop) {
        current = section.getAttribute('id');
      }
    });

    navLinks.forEach(function (link) {
      link.classList.remove('text-mint-600');
      if (link.getAttribute('href') === '#' + current) {
        link.classList.add('text-mint-600');
      }
    });
  }

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