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

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    background-color: #050d1a;
    color: #f0fdf9;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #0a1628;
}
::-webkit-scrollbar-thumb {
    background: #1a3a6b;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #234e8f;
}

/* Selection */
::selection {
    background: rgba(45, 212, 191, 0.3);
    color: #f0fdf9;
}

/* Service cards */
.service-card {
    transform: translateY(0);
}

.service-card:hover {
    transform: translateY(-4px);
}

/* Review cards */
.review-card {
    transform: translateY(0);
}

.review-card:hover {
    transform: translateY(-4px);
}

/* Mobile menu animation */
#mobileMenu {
    animation: slideDown 0.3s ease-out;
}

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

/* Navbar scrolled state */
.nav-scrolled {
    background: rgba(5, 13, 26, 0.92) !important;
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(45, 212, 191, 0.08);
}

/* Scroll reveal base — always visible by default */
.scroll-reveal {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

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

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    .scroll-reveal {
        transition: none;
    }
    .service-card:hover,
    .review-card:hover {
        transform: none;
    }
    img:hover {
        transform: none;
    }
}
</style>

<sm-file path="script.js">
(function () {
    'use strict';

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

    function updateNavbar() {
        if (window.scrollY > 50) {
            navbar.classList.add('nav-scrolled');
        } else {
            navbar.classList.remove('nav-scrolled');
        }
    }

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

    // ─── Mobile menu ────────────────────────────────────────────────
    const menuBtn = document.getElementById('menuBtn');
    const mobileMenu = document.getElementById('mobileMenu');
    const menuIcon = document.getElementById('menuIcon');
    let menuOpen = false;

    menuBtn.addEventListener('click', function () {
        menuOpen = !menuOpen;
        mobileMenu.classList.toggle('hidden', !menuOpen);
        // Switch 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="4" y1="7" x2="20" y2="7"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="17" x2="20" y2="17"/>';
        }
    });

    // Close mobile menu on link click
    document.querySelectorAll('.mobile-link').forEach(function (link) {
        link.addEventListener('click', function () {
            menuOpen = false;
            mobileMenu.classList.add('hidden');
            menuIcon.innerHTML = '<line x1="4" y1="7" x2="20" y2="7"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="17" x2="20" y2="17"/>';
        });
    });

    // ─── Scroll reveal (progressive enhancement) ────────────────────
    // Only apply if user hasn't requested reduced motion
    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

    if (!prefersReducedMotion) {
        const revealElements = document.querySelectorAll('.service-card, .review-card');

        const observerOptions = {
            root: null,
            rootMargin: '0px 0px -60px 0px',
            threshold: 0.1
        };

        const observer = new IntersectionObserver(function (entries) {
            entries.forEach(function (entry) {
                if (entry.isIntersecting) {
                    entry.target.classList.add('revealed');
                    observer.unobserve(entry.target);
                }
            });
        }, observerOptions);

        revealElements.forEach(function (el) {
            // Start slightly offset for the animation
            el.style.opacity = '0';
            el.style.transform = 'translateY(24px)';
            el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
            observer.observe(el);
        });
    }

    // ─── Contact form ───────────────────────────────────────────────
    const contactForm = document.getElementById('contactForm');
    const successMessage = document.getElementById('successMessage');
    const submitText = document.getElementById('submitText');
    const submitArrow = document.getElementById('submitArrow');
    const submitSpinner = document.getElementById('submitSpinner');

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

        // Show loading state
        submitText.textContent = 'Sending...';
        submitArrow.classList.add('hidden');
        submitSpinner.classList.remove('hidden');

        // Simulate submission
        setTimeout(function () {
            contactForm.classList.add('hidden');
            successMessage.classList.remove('hidden');
            // Reset button state
            submitText.textContent = 'Send Message';
            submitArrow.classList.remove('hidden');
            submitSpinner.classList.add('hidden');
        }, 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();
                const navHeight = navbar.offsetHeight;
                const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - navHeight - 20;

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