/* ── Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 300;
    line-height: 1.7;
    color: #1a1a1a;
    background-color: #fafaf8;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background: #ff6b4a;
    color: #ffffff;
}

/* ── Typography ───────────────────────────────────────── */
h1, h2, h3, h4 {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

/* ── Scroll Reveal (progressive enhancement) ─────────── */
@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                    transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    .reveal.revealed {
        opacity: 1;
        transform: translateY(0);
    }
    .reveal-delay-1 { transition-delay: 0.1s; }
    .reveal-delay-2 { transition-delay: 0.2s; }
    .reveal-delay-3 { transition-delay: 0.3s; }
    .reveal-delay-4 { transition-delay: 0.4s; }
}

/* ── Navbar transition ────────────────────────────────── */
.nav-scrolled {
    background: rgba(250, 250, 248, 0.92) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}

/* ── Service Card hover ──────────────────────────────── */
.service-card {
    position: relative;
}
.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 0;
    background: #ff6b4a;
    transition: height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.service-card:hover::before {
    height: 100%;
}

/* ── Mobile menu transitions ─────────────────────────── */
#mobile-menu.open {
    opacity: 1;
    pointer-events: all;
}
#mobile-menu.close {
    opacity: 0;
    pointer-events: none;
}

/* ── Custom scrollbar ─────────────────────────────────── */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: #fafaf8;
}
::-webkit-scrollbar-thumb {
    background: #d1d1d1;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}
</style>
<sm-file path="script.js">
(function () {
    'use strict';

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

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

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

    // ── Mobile menu ─────────────────────────────────────
    const menuToggle = document.getElementById('menu-toggle');
    const mobileMenu = document.getElementById('mobile-menu');
    const mobileLinks = document.querySelectorAll('.mobile-link');
    const bar1 = document.getElementById('bar1');
    const bar2 = document.getElementById('bar2');
    const bar3 = document.getElementById('bar3');
    let menuOpen = false;

    menuToggle.addEventListener('click', function () {
        menuOpen = !menuOpen;
        if (menuOpen) {
            mobileMenu.classList.remove('close');
            mobileMenu.classList.add('open');
            document.body.style.overflow = 'hidden';
            bar1.style.transform = 'rotate(45deg) translate(3px, 3px)';
            bar2.style.opacity = '0';
            bar3.style.transform = 'rotate(-45deg) translate(3px, -3px)';
            bar3.style.width = '24px';
        } else {
            mobileMenu.classList.remove('open');
            mobileMenu.classList.add('close');
            document.body.style.overflow = '';
            bar1.style.transform = '';
            bar2.style.opacity = '1';
            bar3.style.transform = '';
            bar3.style.width = '16px';
        }
    });

    mobileLinks.forEach(function (link) {
        link.addEventListener('click', function () {
            menuOpen = false;
            mobileMenu.classList.remove('open');
            mobileMenu.classList.add('close');
            document.body.style.overflow = '';
            bar1.style.transform = '';
            bar2.style.opacity = '1';
            bar3.style.transform = '';
            bar3.style.width = '16px';
        });
    });

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

    if (!prefersReducedMotion) {
        const revealElements = document.querySelectorAll('.reveal');

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

        revealElements.forEach(function (el) {
            observer.observe(el);
        });
    } else {
        document.querySelectorAll('.reveal').forEach(function (el) {
            el.classList.add('revealed');
        });
    }

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

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

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

            setTimeout(function () {
                form.reset();
                formSuccess.classList.remove('hidden');
                formSuccess.classList.add('flex');
                submitBtn.textContent = originalText;
                submitBtn.disabled = false;

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

    // ── Smooth anchor scrolling (fallback for older browsers) ──
    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;
                window.scrollTo({
                    top: targetPosition,
                    behavior: 'smooth'
                });
            }
        });
    });
})();