/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { min-height: 100vh; }
img { display: block; max-width: 100%; }
button { cursor: pointer; background: none; border: none; }
a { text-decoration: none; color: inherit; }

/* ── Reveal Animations (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; }
}

/* ── Hero Animations (above the fold — always visible) ── */
.hero-subtitle { animation: fadeSlideUp 0.8s 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }
.hero-title { animation: fadeSlideUp 0.8s 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }
.hero-desc { animation: fadeSlideUp 0.8s 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }
.hero-cta { animation: fadeSlideUp 0.8s 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }

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

/* ── Navigation ── */
.nav-link { position: relative; }
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background: currentColor;
    transition: width 0.3s ease;
}
.nav-link:hover::after { width: 100%; }

/* Light nav text on transparent (hero) */
.nav-light .nav-link,
.nav-light .nav-text,
.nav-light .mobile-link { color: #faf8f5; }
.nav-light .nav-link::after { background: #faf8f5; }
.nav-light .mobile-link { color: #292524; }

/* Dark nav text on solid background */
.nav-dark .nav-link,
.nav-dark .nav-text,
.nav-dark .mobile-link { color: #292524; }
.nav-dark .nav-link::after { background: #292524; }
.nav-dark .mobile-link { color: #292524; }

/* ── Tag Label ── */
.tag-label {
    display: inline-block;
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #d95a30;
    font-weight: 400;
}

/* ── Section Title ── */
.section-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
    line-height: 1.15;
    color: #1c1917;
    letter-spacing: -0.01em;
}

/* ── Mobile Menu ── */
#mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s ease;
    opacity: 0;
}
#mobile-menu.open {
    max-height: 400px;
    opacity: 1;
}

/* ── Utility ── */
@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; }
    .reveal { opacity: 1; transform: none; }
}
</style>
<sm-file path="script.js">
(function () {
    'use strict';

    // ── Navigation scroll behavior ──
    const navbar = document.getElementById('navbar');
    const hero = document.getElementById('hero');

    function updateNav() {
        if (!hero) return;
        const heroBottom = hero.getBoundingClientRect().bottom;
        if (heroBottom <= 0) {
            navbar.classList.remove('nav-light');
            navbar.classList.add('nav-dark');
        } else {
            navbar.classList.remove('nav-dark');
            navbar.classList.add('nav-light');
        }
    }

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

    // ── Mobile menu toggle ──
    const menuToggle = document.getElementById('menu-toggle');
    const mobileMenu = document.getElementById('mobile-menu');
    const iconOpen = document.getElementById('menu-icon-open');
    const iconClose = document.getElementById('menu-icon-close');

    menuToggle.addEventListener('click', function () {
        const isOpen = mobileMenu.classList.toggle('open');
        iconOpen.classList.toggle('hidden', isOpen);
        iconClose.classList.toggle('hidden', !isOpen);
        menuToggle.setAttribute('aria-expanded', isOpen);
    });

    // Close mobile menu on link click
    mobileMenu.querySelectorAll('a').forEach(function (link) {
        link.addEventListener('click', function () {
            mobileMenu.classList.remove('open');
            iconOpen.classList.remove('hidden');
            iconClose.classList.add('hidden');
            menuToggle.setAttribute('aria-expanded', 'false');
        });
    });

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

    if (!prefersReducedMotion && 'IntersectionObserver' in window) {
        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.12,
            rootMargin: '0px 0px -40px 0px'
        });

        revealElements.forEach(function (el) {
            observer.observe(el);
        });
    } else {
        // No JS or reduced motion: show everything
        document.querySelectorAll('.reveal').forEach(function (el) {
            el.classList.add('revealed');
        });
    }
})();