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

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

body {
    margin: 0;
    overflow-x: hidden;
}

img {
    display: block;
    max-width: 100%;
}

::selection {
    background: rgba(232, 115, 74, 0.3);
    color: #f5f5f5;
}

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #141414;
}
::-webkit-scrollbar-thumb {
    background: #2d2d2d;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #404040;
}

/* ── Navbar ──────────────────────────────────────────────── */
#navbar {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: transparent;
    transition: background 0.5s ease, box-shadow 0.5s ease;
}

#navbar.scrolled {
    background: rgba(10, 10, 10, 0.92);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* ── Hero ────────────────────────────────────────────────── */
#hero {
    position: relative;
}

/* ── Menu Tabs ───────────────────────────────────────────── */
.menu-tab {
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: 'Inter', system-ui, sans-serif;
}

.menu-tab.active {
    background: #e8734a;
    color: #141414;
}

/* ── Reveal Animations ───────────────────────────────────── */
/* Content is visible by default; JS adds the animated state
   only for users who prefer motion (progressive enhancement). */
@media (prefers-reduced-motion: no-preference) {
    .reveal-up {
        opacity: 0;
        transform: translateY(32px);
        transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .reveal-up.revealed {
        opacity: 1;
        transform: translateY(0);
    }

    .reveal-left {
        opacity: 0;
        transform: translateX(-32px);
        transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .reveal-left.revealed {
        opacity: 1;
        transform: translateX(0);
    }

    .reveal-right {
        opacity: 0;
        transform: translateX(32px);
        transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .reveal-right.revealed {
        opacity: 1;
        transform: translateX(0);
    }

    /* Hero entrance animations — these run once on load */
    .hero-subtitle {
        animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
    }
    .hero-title {
        animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
    }
    .hero-desc {
        animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both;
    }
    .hero-ctas {
        animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.8s both;
    }
    #scroll-indicator {
        animation: fadeIn 0.8s ease 1.4s both;
    }

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

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
}

/* ── Mobile Menu ─────────────────────────────────────────── */
.mobile-link {
    display: block;
}

/* ── Utility ─────────────────────────────────────────────── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}