/* Custom styles for T&A Tavern */

/* Smooth scroll offset for fixed nav */
section[id] {
    scroll-margin-top: 80px;
}

/* Scroll reveal animations - progressive enhancement */
@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }

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

    .reveal:nth-child(2) { transition-delay: 0.1s; }
    .reveal:nth-child(3) { transition-delay: 0.2s; }
    .reveal:nth-child(4) { transition-delay: 0.3s; }
}

/* Ensure reduced motion still sees content */
@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Input autofill styling */
input:-webkit-autofill,
textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px #1c1917 inset !important;
    -webkit-text-fill-color: #f5f5f0 !important;
    caret-color: #f5f5f0;
}

/* Selection color */
::selection {
    background-color: rgba(217, 90, 46, 0.3);
    color: #f5f5f0;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #0d0c0a;
}
::-webkit-scrollbar-thumb {
    background: #2e2a27;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #44403c;
}

/* Navbar transition */
#navbar.scrolled {
    background: rgba(13, 12, 10, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(212, 162, 106, 0.08);
}

/* Image hover zoom container */
.group:hover img {
    transform: scale(1.05);
}

img {
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Active nav link */
nav a.active {
    color: #e5744a;
}

/* Mobile menu animation */
#mobile-menu {
    animation: slideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Button focus visible */
button:focus-visible,
a:focus-visible {
    outline: 2px solid #e09a3e;
    outline-offset: 2px;
    border-radius: 4px;
}
</style>
<sm-file path="script.js">
(function () {
    'use strict';

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

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

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

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

    menuToggle.addEventListener('click', function () {
        const isOpen = !mobileMenu.classList.contains('hidden');
        if (isOpen) {
            mobileMenu.classList.add('hidden');
            menuIconOpen.classList.remove('hidden');
            menuIconClose.classList.add('hidden');
        } else {
            mobileMenu.classList.remove('hidden');
            menuIconOpen.classList.add('hidden');
            menuIconClose.classList.remove('hidden');
        }
    });

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

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

    if (!prefersReducedMotion) {
        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 -60px 0px'
        });

        revealElements.forEach(function (el) {
            revealObserver.observe(el);
        });
    } else {
        // If reduced motion is preferred, show 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();
            // Simulate form submission
            const submitBtn = contactForm.querySelector('button[type="submit"]');
            const originalText = submitBtn.innerHTML;
            submitBtn.innerHTML = '<svg class="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>';
            submitBtn.disabled = true;

            setTimeout(function () {
                contactForm.reset();
                formSuccess.classList.remove('hidden');
                submitBtn.innerHTML = originalText;
                submitBtn.disabled = false;

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

    // ── 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'
                });
            }
        });
    });
})();