/* Custom styles for M&T Bank ATM site */

html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Scroll reveal animations */
.reveal {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.hidden-reveal {
    opacity: 0;
    transform: translateY(24px);
}

@media (prefers-reduced-motion: no-preference) {
    .reveal {
        /* JS will add hidden-reveal for animation */
    }
}

/* Navbar scroll effect */
.nav-scrolled {
    box-shadow: 0 2px 16px rgba(29, 71, 29, 0.12);
}

/* Button focus states */
a:focus-visible,
button:focus-visible {
    outline: 2px solid #2d702d;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Smooth image loading */
img {
    opacity: 1;
    transition: opacity 0.3s ease;
}
</style>
<sm-file path="script.js">
// Mobile menu toggle
const menuBtn = document.getElementById('menuBtn');
const mobileMenu = document.getElementById('mobileMenu');

menuBtn.addEventListener('click', () => {
    mobileMenu.classList.toggle('hidden');
});

// Close mobile menu on link click
mobileMenu.querySelectorAll('a').forEach(link => {
    link.addEventListener('click', () => {
        mobileMenu.classList.add('hidden');
    });
});

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

window.addEventListener('scroll', () => {
    const currentScroll = window.pageYOffset;
    if (currentScroll > 10) {
        navbar.classList.add('nav-scrolled');
    } else {
        navbar.classList.remove('nav-scrolled');
    }
    lastScroll = currentScroll;
});

// Scroll reveal using Intersection Observer
// Content is visible by default — JS enhances with animation
if (window.matchMedia('(prefers-reduced-motion: no-preference)').matches) {
    const revealElements = document.querySelectorAll('section > div > div, .bg-white.rounded-3xl, .bg-white.rounded-2xl');

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('reveal');
                entry.target.classList.remove('hidden-reveal');
                observer.unobserve(entry.target);
            }
        });
    }, {
        threshold: 0.1,
        rootMargin: '0px 0px -40px 0px'
    });

    // Add hidden state first, then observe
    requestAnimationFrame(() => {
        revealElements.forEach(el => {
            el.classList.add('hidden-reveal');
            observer.observe(el);
        });
    });
}