/* Inclawbate — Ecosystem Hub Page */

/* ══════════════════════════════════════
   Hero
   ══════════════════════════════════════ */

.eco-hero {
    margin-top: var(--nav-height);
    position: relative;
    overflow: hidden;
    padding: var(--space-3xl) var(--space-xl) var(--space-xl);
    text-align: center;
}

.eco-hero-bg {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 70% 55% at 30% 20%, hsla(9, 60%, 54%, 0.07) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 70% 70%, hsla(172, 40%, 48%, 0.05) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 50% 50%, hsla(32, 40%, 60%, 0.03) 0%, transparent 50%),
        var(--bg-surface);
    pointer-events: none;
}

.eco-hero-content {
    position: relative;
    max-width: var(--max-width);
    margin: 0 auto;
    animation: eco-fadeUp 0.6s var(--ease-smooth) both;
}

.eco-hero-title {
    font-family: var(--font-display);
    font-size: 2.4rem;
    font-weight: 900;
    letter-spacing: -0.04em;
    margin-bottom: var(--space-sm);
}
.eco-hero-title span {
    background: var(--title-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.eco-hero-sub {
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    letter-spacing: 0.01em;
    max-width: 520px;
    margin: 0 auto;
}

/* ══════════════════════════════════════
   Sticky Tab Bar
   ══════════════════════════════════════ */

.eco-tabs {
    position: sticky;
    top: var(--nav-height);
    z-index: 90;
    background: var(--bg-deepest);
    border-bottom: 1px solid var(--border-subtle);
    padding: 0 var(--space-xl);
    animation: eco-fadeUp 0.5s 0.1s var(--ease-smooth) both;
}

.eco-tabs-inner {
    display: flex;
    gap: var(--space-xl);
    max-width: var(--max-width);
    margin: 0 auto;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.eco-tabs-inner::-webkit-scrollbar { display: none; }

.eco-tab {
    display: inline-flex;
    align-items: center;
    padding: var(--space-md) 0;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-dim);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.25s, border-color 0.25s;
}
.eco-tab:hover {
    color: var(--text-secondary);
}
.eco-tab.active {
    color: var(--lobster-400);
    border-bottom-color: var(--lobster-400);
}

/* ══════════════════════════════════════
   Section Transitions
   ══════════════════════════════════════ */

.eco-section {
    display: none;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.35s var(--ease-smooth), transform 0.35s var(--ease-smooth);
}
.eco-section.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* ══════════════════════════════════════
   Section-specific overrides
   ══════════════════════════════════════ */

/* Humans: remove margin-top since hero is above */
.eco-section .dash-hero {
    margin-top: 0;
}

/* Docs: remove margin-top */
.eco-section .docs-page {
    margin-top: 0;
    padding-top: var(--space-2xl);
}

/* Leaderboard: remove margin-top from hero */
.eco-section .hero {
    margin-top: 0;
}

/* Overview: adjust spacing */
.eco-section .ov-container {
    margin-top: var(--space-2xl);
}

/* ══════════════════════════════════════
   Animations
   ══════════════════════════════════════ */

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

/* ══════════════════════════════════════
   Responsive
   ══════════════════════════════════════ */

@media (max-width: 768px) {
    .eco-hero {
        padding: var(--space-2xl) var(--space-lg) var(--space-lg);
    }
    .eco-hero-title {
        font-size: 1.8rem;
    }
    .eco-tabs {
        padding: 0 var(--space-md);
    }
    .eco-tabs-inner {
        gap: var(--space-lg);
    }
}

@media (max-width: 480px) {
    .eco-hero-title {
        font-size: 1.5rem;
    }
    .eco-hero-sub {
        font-size: 0.78rem;
    }
}