/* ============================================
   DAKAO SANDWICHES II — Custom Styles
   ============================================ */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: hidden;
}

/* Selection */
::selection {
  background-color: #16a34a;
  color: #fefce8;
}

/* ============================================
   FLOATING ANIMATIONS
   ============================================ */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}

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

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

.animate-float-delayed {
  animation: float-delayed 5s ease-in-out infinite;
  animation-delay: 1s;
}

/* ============================================
   MARQUEE ANIMATION
   ============================================ */
@keyframes marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

.animate-marquee {
  animation: marquee 30s linear infinite;
}

/* ============================================
   SCROLL REVEAL (progressive enhancement)
   ============================================ */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
  }

  .reveal.revealed {
    opacity: 1;
    transform: translateY(0);
  }

  .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; }
}

/* Reduced motion: ensure everything is visible */
@media (prefers-reduced-motion: reduce) {
  .animate-float,
  .animate-float-delayed,
  .animate-marquee {
    animation: none;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ============================================
   MOBILE NAV
   ============================================ */
#mobileMenu.open {
  max-height: 320px;
}

.menu-line {
  display: block;
}

#menuBtn[aria-expanded="true"] .menu-line:nth-child(1) {
  transform: rotate(45deg) translate(4px, 4px);
}

#menuBtn[aria-expanded="true"] .menu-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

#menuBtn[aria-expanded="true"] .menu-line:nth-child(3) {
  transform: rotate(-45deg) translate(4px, -4px);
  width: 6px;
}

/* ============================================
   NAVBAR SCROLL STATE
   ============================================ */
.navbar-scrolled {
  box-shadow: 0 1px 20px rgba(5, 46, 22, 0.08);
}

/* ============================================
   SCROLLBAR
   ============================================ */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #fefdf8;
}

::-webkit-scrollbar-thumb {
  background: #166534;
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #15803d;
}

/* ============================================
   FORM STYLES (for future contact form)
   ============================================ */
input, textarea {
  font-family: inherit;
}

/* ============================================
   ACCESSIBILITY FOCUS
   ============================================ */
a:focus-visible,
button:focus-visible {
  outline: 2px solid #16a34a;
  outline-offset: 2px;
  border-radius: 4px;
}
</style>
<sm-file path="script.js">
/**
 * Dakao Sandwiches II — Interactive Scripts
 */

(function () {
  'use strict';

  // ─── Mobile Menu ──────────────────────────────
  const menuBtn = document.getElementById('menuBtn');
  const mobileMenu = document.getElementById('mobileMenu');
  const mobileLinks = mobileMenu.querySelectorAll('a');

  function toggleMenu() {
    const isOpen = mobileMenu.classList.contains('open');
    mobileMenu.classList.toggle('open');
    menuBtn.setAttribute('aria-expanded', String(!isOpen));
    document.body.style.overflow = !isOpen ? 'hidden' : '';
  }

  function closeMenu() {
    mobileMenu.classList.remove('open');
    menuBtn.setAttribute('aria-expanded', 'false');
    document.body.style.overflow = '';
  }

  menuBtn.addEventListener('click', toggleMenu);
  mobileLinks.forEach(function (link) {
    link.addEventListener('click', closeMenu);
  });

  // Close on Escape
  document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape' && mobileMenu.classList.contains('open')) {
      closeMenu();
      menuBtn.focus();
    }
  });

  // ─── Navbar Scroll Effect ─────────────────────
  const navbar = document.getElementById('navbar');
  let lastScroll = 0;

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

  // Throttle scroll handler
  let ticking = false;
  window.addEventListener('scroll', function () {
    if (!ticking) {
      window.requestAnimationFrame(function () {
        handleScroll();
        ticking = false;
      });
      ticking = true;
    }
  }, { passive: true });

  // ─── Scroll Reveal (Progressive Enhancement) ──
  // Only activate if user hasn't requested reduced motion
  const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  if (!prefersReducedMotion && 'IntersectionObserver' in window) {
    const revealElements = document.querySelectorAll('.reveal');

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

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

  // ─── 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();
        const navHeight = navbar.offsetHeight;
        const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - navHeight - 20;

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

})();
</script>