/* Custom styles — overrides and enhancements beyond Tailwind */

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

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #FDF8F5;
}
::-webkit-scrollbar-thumb {
    background: #E5E5E8;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #C8C8CC;
}

/* Selection color */
::selection {
    background: #FFC8BA;
    color: #18181D;
}

/* Prevent flash of unstyled content */
html {
    opacity: 1;
}

/* Focus visible styles */
*:focus-visible {
    outline: 2px solid #F06040;
    outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    html {
        scroll-behavior: auto;
    }
}

/* Scroll reveal base — content is always visible by default */
.scroll-reveal {
    /* Default: visible, no animation needed */
}

/* Scroll reveal animation — only applied via JS for progressive enhancement */
@media (prefers-reduced-motion: no-preference) {
    .scroll-reveal.animate-in {
        animation: scrollReveal 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
}

@keyframes scrollReveal {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stagger delays for grid items */
.scroll-reveal.delay-100 { animation-delay: 100ms; }
.scroll-reveal.delay-200 { animation-delay: 200ms; }
.scroll-reveal.delay-300 { animation-delay: 300ms; }
.scroll-reveal.delay-400 { animation-delay: 400ms; }
.scroll-reveal.delay-500 { animation-delay: 500ms; }
.scroll-reveal.delay-600 { animation-delay: 600ms; }

/* Navbar solid state */
.navbar-scrolled {
    background: rgba(253, 248, 245, 0.92) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

/* Hero image subtle parallax on scroll */
@media (prefers-reduced-motion: no-preference) {
    #hero img {
        transition: transform 0.3s ease;
    }
}

/* Floating card animation */
@media (prefers-reduced-motion: no-preference) {
    .float-slow {
        animation: floatSlow 6s ease-in-out infinite;
    }
}

@keyframes floatSlow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* Mobile menu transition */
#mobileMenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
    opacity: 0;
}

#mobileMenu.open {
    max-height: 500px;
    opacity: 1;
}

/* Subtle gradient text for hero accent */
.gradient-text {
    background: linear-gradient(135deg, #F06040 0%, #FFA38A 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Card hover lift */
.hover-lift {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.hover-lift:hover {
    transform: translateY(-4px);
}
</style>
<sm-file path="script.js">
(function () {
    'use strict';

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

    function handleNavbarScroll() {
        const currentScroll = window.pageYOffset;

        if (currentScroll > 60) {
            navbar.classList.add('navbar-scrolled');
        } else {
            navbar.classList.remove('navbar-scrolled');
        }

        lastScroll = currentScroll;
    }

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

    // ─── Mobile menu ──────────────────────────────────────────────────────────
    const menuBtn = document.getElementById('menuBtn');
    const mobileMenu = document.getElementById('mobileMenu');
    const menuIconOpen = document.getElementById('menuIconOpen');
    const menuIconClose = document.getElementById('menuIconClose');
    const mobileLinks = document.querySelectorAll('.mobile-link');
    let menuOpen = false;

    function toggleMenu() {
        menuOpen = !menuOpen;

        if (menuOpen) {
            mobileMenu.classList.add('open');
            menuIconOpen.classList.add('hidden');
            menuIconClose.classList.remove('hidden');
            document.body.style.overflow = 'hidden';
        } else {
            mobileMenu.classList.remove('open');
            menuIconOpen.classList.remove('hidden');
            menuIconClose.classList.add('hidden');
            document.body.style.overflow = '';
        }
    }

    menuBtn.addEventListener('click', toggleMenu);

    mobileLinks.forEach(function (link) {
        link.addEventListener('click', function () {
            menuOpen = false;
            mobileMenu.classList.remove('open');
            menuIconOpen.classList.remove('hidden');
            menuIconClose.classList.add('hidden');
            document.body.style.overflow = '';
        });
    });

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

    if (!prefersReducedMotion && 'IntersectionObserver' in window) {
        const revealElements = document.querySelectorAll('.scroll-reveal');

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

        revealElements.forEach(function (el) {
            revealObserver.observe(el);
        });
    }

    // ─── Back to top button ───────────────────────────────────────────────────
    const backToTop = document.getElementById('backToTop');

    function handleBackToTop() {
        if (window.pageYOffset > 600) {
            backToTop.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
            backToTop.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
        } else {
            backToTop.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
            backToTop.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
        }
    }

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

    backToTop.addEventListener('click', function () {
        window.scrollTo({ top: 0, behavior: 'smooth' });
    });

    // ─── Contact form ─────────────────────────────────────────────────────────
    const contactForm = document.getElementById('contactForm');
    const formSuccess = document.getElementById('formSuccess');

    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 w-5 h-5" 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.style.display = 'none';
                formSuccess.classList.remove('hidden');
            }, 1200);
        });
    }

    // ─── Smooth scroll for anchor links ───────────────────────────────────────
    document.querySelectorAll('a[href^="#"]').forEach(function (anchor) {
        anchor.addEventListener('click', function (e) {
            const targetId = anchor.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: 'smooth',
                });
            }
        });
    });
})();