/* Custom styles for Homette Guest House */

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

/* Reveal animations — progressive enhancement only */
@media (prefers-reduced-motion: no-preference) {
  .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);
  }

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

  /* Staggered delays for grid items */
  .reveal:nth-child(1) { transition-delay: 0s; }
  .reveal:nth-child(2) { transition-delay: 0.1s; }
  .reveal:nth-child(3) { transition-delay: 0.2s; }
}

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

/* Hero reveal animations — above fold, always visible */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-reveal {
  animation: fadeInUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-reveal:nth-child(1) { animation-delay: 0.1s; }
.hero-reveal:nth-child(2) { animation-delay: 0.25s; }
.hero-reveal:nth-child(3) { animation-delay: 0.4s; }
.hero-reveal:nth-child(4) { animation-delay: 0.55s; }

/* Subtle image hover */
img {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.rounded-2xl img:hover {
  transform: scale(1.02);
}

/* Focus styles for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid #E8734A;
  outline-offset: 2px;
}

/* Navbar scroll state */
#navbar.scrolled {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
</style>
<sm-file path="script.js">
(function () {
  'use strict';

  // Mobile menu toggle
  const menuToggle = document.getElementById('menu-toggle');
  const mobileMenu = document.getElementById('mobile-menu');
  const mobileLinks = mobileMenu.querySelectorAll('a');

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

  // Close mobile menu on link click
  mobileLinks.forEach(function (link) {
    link.addEventListener('click', function () {
      mobileMenu.classList.add('hidden');
      menuToggle.setAttribute('aria-expanded', 'false');
    });
  });

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

  window.addEventListener('scroll', function () {
    const currentScroll = window.pageYOffset;
    if (currentScroll > 50) {
      navbar.classList.add('scrolled');
    } else {
      navbar.classList.remove('scrolled');
    }
    lastScroll = currentScroll;
  }, { passive: true });

  // Scroll reveal for sections below the fold
  // Uses JS to add .revealed class — content is visible without JS via CSS defaults
  if (window.matchMedia('(prefers-reduced-motion: no-preference)').matches) {
    const revealElements = document.querySelectorAll('.reveal');

    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 {
    // If reduced motion is preferred, reveal everything immediately
    document.querySelectorAll('.reveal').forEach(function (el) {
      el.classList.add('revealed');
    });
  }

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

  if (contactForm) {
    contactForm.addEventListener('submit', function (e) {
      e.preventDefault();

      // Basic validation
      const name = document.getElementById('name').value.trim();
      const email = document.getElementById('email').value.trim();
      const message = document.getElementById('message').value.trim();

      if (!name || !email || !message) {
        return;
      }

      // Show success message
      formSuccess.classList.remove('hidden');
      contactForm.reset();

      // Hide success message after 5 seconds
      setTimeout(function () {
        formSuccess.classList.add('hidden');
      }, 5000);
    });
  }
})();