/* ─── Reset & Base ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { background-color: #030705; color: #ecfdf5; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul { list-style: none; }

/* ─── Utility ─── */
.container { width: 100%; max-width: 1280px; margin: 0 auto; }

/* ─── Header ─── */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: background-color 0.4s ease, box-shadow 0.4s ease, padding 0.3s ease;
    padding: 0;
}
.site-header.scrolled {
    background-color: rgba(3, 7, 5, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 1px 0 rgba(212, 168, 83, 0.08);
}
.nav-link {
    position: relative;
}
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background: #d4a853;
    transition: width 0.3s ease;
}
.nav-link:hover::after { width: 100%; }

/* ─── Buttons ─── */
.btn-gold {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #d4a853 0%, #b8922e 100%);
    color: #030705;
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.875rem 2rem;
    border-radius: 2px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.btn-gold::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #e2be6a 0%, #d4a853 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.btn-gold:hover::before { opacity: 1; }
.btn-gold span, .btn-gold svg { position: relative; z-index: 1; }
.btn-gold:hover { transform: translateY(-1px); box-shadow: 0 8px 30px rgba(212, 168, 83, 0.25); }

.btn-outline {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(212, 168, 83, 0.4);
    color: #d4a853;
    font-weight: 500;
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.875rem 2rem;
    border-radius: 2px;
    transition: all 0.3s ease;
}
.btn-outline:hover {
    border-color: #d4a853;
    background: rgba(212, 168, 83, 0.08);
    transform: translateY(-1px);
}

/* ─── Hero ─── */
.hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.hero-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 0%, rgba(3, 7, 5, 0.4) 100%);
}
.hero-gold-line {
    position: absolute;
    background: linear-gradient(90deg, transparent, rgba(212, 168, 83, 0.15), transparent);
}
.hero-gold-line-1 {
    top: 25%;
    left: -10%;
    right: -10%;
    height: 1px;
    transform: rotate(-3deg);
}
.hero-gold-line-2 {
    top: 50%;
    left: -5%;
    right: -5%;
    height: 1px;
    transform: rotate(1deg);
}
.hero-gold-line-3 {
    top: 72%;
    left: -8%;
    right: -8%;
    height: 1px;
    transform: rotate(-2deg);
}

.hero-anim {
    opacity: 0;
    transform: translateY(20px);
    animation: heroFadeIn 0.8s ease forwards;
}
.hero-anim:nth-child(1) { animation-delay: 0.2s; }
.hero-anim:nth-child(2) { animation-delay: 0.4s; }
.hero-anim:nth-child(3) { animation-delay: 0.6s; }
.hero-anim:nth-child(4) { animation-delay: 0.8s; }

@keyframes heroFadeIn {
    to { opacity: 1; transform: translateY(0); }
}

/* ─── Sections ─── */
.section-dark {
    background-color: #030705;
    border-top: 1px solid rgba(6, 78, 59, 0.2);
}
.section-emerald {
    background: linear-gradient(160deg, #047857 0%, #064e3b 40%, #022c22 100%);
    border-top: 1px solid rgba(212, 168, 83, 0.1);
}
.cta-section {
    border-top: 1px solid rgba(6, 78, 59, 0.3);
    border-bottom: 1px solid rgba(6, 78, 59, 0.3);
}

.section-label {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #d4a853;
    margin-bottom: 1rem;
}
.section-label-emerald {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #6ee7b7;
    margin-bottom: 1rem;
}
.section-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 400;
    color: #fdfcf8;
    line-height: 1.15;
}
.section-title-emerald {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 400;
    color: #ecfdf5;
    line-height: 1.15;
}

/* ─── Site Cards ─── */
.site-card {
    background: rgba(6, 78, 59, 0.12);
    border: 1px solid rgba(6, 78, 59, 0.3);
    border-radius: 4px;
    overflow: hidden;
    transition: all 0.4s ease;
}
.site-card:hover {
    border-color: rgba(212, 168, 83, 0.3);
    transform: translateY(-4px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(212, 168, 83, 0.1);
}
.site-card-img {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3/2;
}
.site-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.site-card:hover .site-card-img img {
    transform: scale(1.05);
}
.site-card-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: linear-gradient(135deg, #d4a853, #b8922e);
    color: #030705;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.375rem 0.75rem;
    border-radius: 2px;
}
.site-card-body {
    padding: 1.75rem;
}
.link-gold {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #d4a853;
    transition: all 0.3s ease;
}
.link-gold:hover {
    color: #e2be6a;
    gap: 0.75rem;
}
.link-gold svg {
    transition: transform 0.3s ease;
}
.link-gold:hover svg {
    transform: translateX(4px);
}

/* ─── Experience Cards ─── */
.exp-card {
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.03);
    transition: all 0.4s ease;
}
.exp-card:hover {
    border-color: rgba(110, 231, 183, 0.25);
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-4px);
}
.exp-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(212, 168, 83, 0.1);
    border: 1px solid rgba(212, 168, 83, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d4a853;
    transition: all 0.3s ease;
}
.exp-card:hover .exp-card-icon {
    background: rgba(212, 168, 83, 0.18);
    border-color: rgba(212, 168, 83, 0.4);
}

/* ─── Footer ─── */
.footer {
    background-color: #020503;
    border-top: 1px solid rgba(6, 78, 59, 0.2);
}

/* ─── Scroll to Top ─── */
.scroll-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d4a853, #b8922e);
    color: #030705;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(212, 168, 83, 0.3);
}
.scroll-top:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(212, 168, 83, 0.4);
}

/* ─── Mobile Menu ─── */
.mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(3, 7, 5, 0.6);
    z-index: 998;
    backdrop-filter: blur(4px);
}
.mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: min(320px, 85vw);
    height: 100vh;
    background: linear-gradient(180deg, #0a1f15 0%, #030705 100%);
    z-index: 999;
    padding-top: 5rem;
    border-left: 1px solid rgba(6, 78, 59, 0.3);
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-menu.open {
    transform: translateX(0);
}
.mobile-link {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.75rem;
    font-weight: 400;
}

/* ─── Scroll Reveal ─── */
.reveal {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ─── Responsive ─── */
@media (max-width: 767px) {
    .site-header { padding: 0; }
    .site-header.scrolled { padding: 0; }
}

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

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

    // ─── Header scroll effect ───
    const header = document.getElementById('site-header');
    let lastScroll = 0;

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

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

    // ─── Mobile menu ───
    const mobileToggle = document.getElementById('mobile-toggle');
    const mobileMenu = document.getElementById('mobile-menu');
    const mobileOverlay = document.getElementById('mobile-overlay');
    const menuOpen = document.getElementById('menu-open');
    const menuClose = document.getElementById('menu-close');
    const mobileLinks = document.querySelectorAll('.mobile-link, #mobile-menu a');

    function openMenu() {
        mobileMenu.classList.add('open');
        mobileMenu.classList.remove('hidden');
        mobileOverlay.classList.remove('hidden');
        menuOpen.classList.add('hidden');
        menuClose.classList.remove('hidden');
        document.body.style.overflow = 'hidden';
    }

    function closeMenu() {
        mobileMenu.classList.remove('open');
        mobileOverlay.classList.add('hidden');
        menuOpen.classList.remove('hidden');
        menuClose.classList.add('hidden');
        document.body.style.overflow = '';
    }

    mobileToggle.addEventListener('click', function () {
        if (mobileMenu.classList.contains('open')) {
            closeMenu();
        } else {
            openMenu();
        }
    });

    mobileOverlay.addEventListener('click', closeMenu);

    mobileLinks.forEach(function (link) {
        link.addEventListener('click', closeMenu);
    });

    // ─── Scroll reveal ───
    const reveals = document.querySelectorAll('.reveal');

    if (window.matchMedia('(prefers-reduced-motion: no-preference)').matches) {
        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);

        reveals.forEach(function (el) {
            observer.observe(el);
        });
    } else {
        reveals.forEach(function (el) {
            el.classList.add('revealed');
        });
    }

    // ─── Scroll to top button ───
    const scrollTopBtn = document.getElementById('scroll-top');

    window.addEventListener('scroll', function () {
        if (window.pageYOffset > 600) {
            scrollTopBtn.classList.remove('hidden');
        } else {
            scrollTopBtn.classList.add('hidden');
        }
    }, { passive: true });

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

    // ─── 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 headerHeight = header.offsetHeight;
                const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - headerHeight - 20;
                window.scrollTo({ top: targetPosition, behavior: 'smooth' });
            }
        });
    });
})();