/* Custom styles for Driving School Fredericksburg */

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

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #F5F5F0;
}
::-webkit-scrollbar-thumb {
    background: #FF6B5E;
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
    background: #e55a4e;
}

/* Floating card animations */
.floating-card {
    animation: float 6s ease-in-out infinite;
}
.floating-card:nth-child(2) {
    animation-delay: -1.5s;
}
.floating-card:nth-child(3) {
    animation-delay: -3s;
}
.floating-card:nth-child(4) {
    animation-delay: -4.5s;
}

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    33% { transform: translateY(-8px) rotate(0.5deg); }
    66% { transform: translateY(4px) rotate(-0.5deg); }
}

/* Scroll reveal animations */
.reveal {
    opacity: 1;
    transform: translateY(0);
    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);
}

@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 0;
        transform: translateY(30px);
    }
    .reveal.revealed {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Service card hover effects */
.service-card {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}
.service-card:hover {
    transform: translateY(-8px);
}

/* Navbar scroll effect */
.nav-scrolled {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
}

/* Geometric decorative shapes */
.geo-shape {
    position: absolute;
    pointer-events: none;
}

/* Button focus styles */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid #FF6B5E;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Mobile menu transitions */
#mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
#mobile-menu.open {
    max-height: 400px;
}

/* Hero stat cards - ensure visibility on load */
.floating-card {
    opacity: 1;
    transform: translateY(0);
}

/* Selection color */
::selection {
    background: #FF6B5E;
    color: white;
}

/* Form input focus transitions */
input:focus, select:focus, textarea:focus {
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Counter animation for stats */
.stat-number {
    display: inline-block;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
</style>
<sm-file path="script.js">
/**
 * Driving School Fredericksburg - Interactive Scripts
 */

(function () {
    'use strict';

    // ── Mobile Menu ──────────────────────────────────────────
    const mobileMenuBtn = document.getElementById('mobile-menu-btn');
    const mobileMenu = document.getElementById('mobile-menu');
    const menuIcon = document.getElementById('menu-icon');
    let menuOpen = false;

    if (mobileMenuBtn && mobileMenu) {
        mobileMenuBtn.addEventListener('click', function () {
            menuOpen = !menuOpen;
            mobileMenu.classList.toggle('open', menuOpen);
            // Toggle icon
            if (menuOpen) {
                menuIcon.innerHTML = '<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>';
            } else {
                menuIcon.innerHTML = '<line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/>';
            }
        });

        // Close menu on link click
        mobileMenu.querySelectorAll('a').forEach(function (link) {
            link.addEventListener('click', function () {
                menuOpen = false;
                mobileMenu.classList.remove('open');
                menuIcon.innerHTML = '<line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/>';
            });
        });
    }

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

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

    // Run once on load to set initial state
    handleNavbarScroll();
    window.addEventListener('scroll', handleNavbarScroll, { passive: true });

    // ── Scroll Reveal ─────────────────────────────────────────
    // 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');

        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 -50px 0px'
        });

        revealElements.forEach(function (el) {
            revealObserver.observe(el);
        });
    } else {
        // If reduced motion or no IntersectionObserver, show all 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 && formSuccess) {
        contactForm.addEventListener('submit', function (e) {
            e.preventDefault();

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

            if (!firstName || !email) {
                return;
            }

            // Simulate form submission
            const submitBtn = contactForm.querySelector('button[type="submit"]');
            const originalText = submitBtn.textContent;
            submitBtn.textContent = 'Sending...';
            submitBtn.disabled = true;

            setTimeout(function () {
                contactForm.style.display = 'none';
                formSuccess.classList.remove('hidden');
                submitBtn.textContent = originalText;
                submitBtn.disabled = false;
            }, 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 === '#top') {
                e.preventDefault();
                window.scrollTo({ top: 0, behavior: 'smooth' });
                return;
            }

            const target = document.querySelector(targetId);
            if (target) {
                e.preventDefault();
                const navHeight = navbar ? navbar.offsetHeight : 80;
                const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - navHeight - 20;
                window.scrollTo({ top: targetPosition, behavior: 'smooth' });
            }
        });
    });

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

    if (sections.length > 0 && navLinks.length > 0) {
        function highlightNav() {
            const scrollPos = window.pageYOffset + 150;

            sections.forEach(function (section) {
                const sectionTop = section.offsetTop;
                const sectionHeight = section.offsetHeight;
                const sectionId = section.getAttribute('id');

                if (scrollPos >= sectionTop && scrollPos < sectionTop + sectionHeight) {
                    navLinks.forEach(function (link) {
                        link.classList.remove('text-coral-500');
                        if (link.getAttribute('href') === '#' + sectionId) {
                            link.classList.add('text-coral-500');
                        }
                    });
                }
            });
        }

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

})();