/* ============================================
   DIGITAL EXPLORER
   MISSION CONTROL V2
============================================ */

/* ============================================
   BACKGROUND EFFECTS
============================================ */

body {

    background:
        radial-gradient(
            circle at top,
            #112544 0%,
            #08111f 35%,
            #04070d 100%
        );

    min-height: 100vh;
}

body::before {

    content: "";

    position: fixed;

    inset: 0;

    background:
        radial-gradient(
            circle at 20% 30%,
            rgba(0,229,255,.08),
            transparent 30%
        ),
        radial-gradient(
            circle at 80% 60%,
            rgba(255,74,87,.05),
            transparent 35%
        );

    pointer-events: none;

    z-index: -2;
}

/* ============================================
   HERO EFFECTS
============================================ */

.hero {

    position: relative;

    overflow: hidden;
}

.hero::after {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0,229,255,.12),
            transparent 70%
        );

    filter: blur(40px);

    z-index: -1;
}

/* ============================================
   LOGO
============================================ */

.explorer-logo {

    width: 180px;
    height: 180px;

    margin-bottom: 30px;
}

/* ============================================
   DASHBOARD
============================================ */

.dashboard-card {

    position: relative;

    overflow: hidden;
}

.dashboard-card::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            var(--azure),
            var(--cyan)
        );
}

.metric {

    text-shadow:
        0 0 20px
        rgba(
            0,
            229,
            255,
            .35
        );
}

.metric-value {

    font-size: 2rem;
    font-weight: 700;

    color: var(--cyan);
}

/* ============================================
   DASHBOARD CATEGORY CARDS
============================================ */

.dashboard-categories {

    margin-top: 40px;
}

.metric-card {

    padding: 24px;

    border-radius: 18px;

    background:
        rgba(
            255,
            255,
            255,
            .04
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .05
        );

    text-align: center;
}

/* ============================================
   CAREER FILTERS
============================================ */

.career-filters {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 10px;

    margin-bottom: 40px;
}

.career-filter {

    padding: 10px 18px;

    border: none;

    border-radius: 999px;

    cursor: pointer;

    background: var(--panel);

    color: var(--text);

    transition: .3s ease;
}

.career-filter:hover {

    transform: translateY(-2px);
}

.career-filter.active {

    background: var(--azure);

    color: white;
}

/* ============================================
   CAREER GALAXY
============================================ */

.career-galaxy {

    position: relative;

    min-height: 650px;

    overflow-x: auto;

    padding: 100px 0;
}

.galaxy-wrapper {

    display: flex;

    align-items: center;

    gap: 80px;

    position: relative;
}

.galaxy-line {

    position: absolute;

    left: 0;
    right: 0;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--cyan),
            transparent
        );
}

.galaxy-node {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    min-width: 180px;

    cursor: pointer;

    z-index: 2;
}

.galaxy-core {

    width: 20px;
    height: 20px;

    border-radius: 50%;

    background: var(--cyan);

    box-shadow:
        0 0 20px
        var(--cyan);
}

.galaxy-pulse {

    position: absolute;

    width: 40px;
    height: 40px;

    border-radius: 50%;

    border:
        1px solid
        rgba(
            0,
            229,
            255,
            .4
        );

    animation:
        pulseCore 3s infinite;
}

.galaxy-label {

    margin-top: 16px;

    text-align: center;
}

.galaxy-label span {

    color: var(--muted);
}

.galaxy-modal {

    position: fixed;

    inset: 0;

    display: none;

    justify-content: center;

    align-items: center;

    background:
        rgba(
            0,
            0,
            0,
            .8
        );

    z-index: 9999;
}

.galaxy-modal.visible {

    display: flex;
}

.galaxy-modal-content {

    width: min(700px, 92vw);

    padding: 40px;

    border-radius: 24px;

    background:
        rgba(
            10,
            20,
            36,
            .95
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .08
        );

    backdrop-filter:
        blur(24px);
}

.skill-cloud {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 20px;
}

.skill-cloud span {

    padding: 6px 14px;

    border-radius: 999px;

    background:
        rgba(
            0,
            229,
            255,
            .10
        );
}

/* ============================================
   CONSTELLATION
============================================ */

.constellation {

    position: relative;

    min-height: 700px;

    overflow: hidden;
}

.constellation-svg {

    position: absolute;

    inset: 0;

    z-index: 1;
}

.skill-node {

    position: absolute;

    transform:
        translate(-50%, -50%);

    min-width: 140px;

    padding: 12px 16px;

    text-align: center;

    border-radius: 16px;

    background:
        rgba(
            10,
            20,
            36,
            .90
        );

    border:
        1px solid;

    backdrop-filter:
        blur(10px);

    z-index: 2;

    transition:
        all .3s ease;
}

.skill-node strong {

    display: block;

    margin-bottom: 4px;
}

.skill-node span {

    color: var(--cyan);
}

.skill-node.active {

    transform:
        translate(-50%, -50%)
        scale(1.08);

    box-shadow:
        0 0 25px
        rgba(
            0,
            229,
            255,
            .45
        );
}

.skill-node.inactive {

    opacity: .25;
}

/* ============================================
   AI TERMINAL
============================================ */

.ai-terminal {

    padding: 30px;

    border-radius: 24px;

    background:
        rgba(
            0,
            0,
            0,
            .45
        );

    border:
        1px solid
        rgba(
            0,
            229,
            255,
            .15
        );
}

.terminal-header {

    display: flex;

    gap: 10px;

    margin-bottom: 20px;
}

.terminal-dot {

    width: 12px;
    height: 12px;

    border-radius: 50%;
}

.dot-red {
    background: #ff5f56;
}

.dot-yellow {
    background: #ffbd2e;
}

.dot-green {
    background: #27c93f;
}

/* ============================================
   OBSERVATORY
============================================ */

.observatory-card {

    padding: 30px;
}

.observatory-card h3 {

    color: var(--cyan);

    margin-bottom: 12px;
}

.observatory-card p {

    color: var(--muted);
}

/* ============================================
   RESPONSIVE
============================================ */

@media (max-width: 768px) {

    .hero-title {

        font-size: 3rem;
    }

    .constellation {

        min-height: 450px;
    }

    .career-galaxy {

        min-height: 500px;
    }

    .dashboard-grid {

        grid-template-columns: 1fr;
    }
}