/* ============================================================
   bada.systems -- Systems Observability Command Surface
   Dark, near-monochromatic cool gray with single sky-blue accent.
   ============================================================ */

:root {
    --canvas: #0F1114;
    --panel-surface: #1A1D21;
    --separator: #2A2D32;
    --code-bg: #2D3748;
    --muted: #718096;
    --body-text: #A0AEC0;
    --heading: #E2E8F0;
    --network-line: #3A3F47;
    --dormant: #4A5568;
    --accent: #63B3ED;
    --status-active: #48BB78;
    --status-warning: #ECC94B;
    --status-critical: #FC8181;

    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: #0F1114;
}

body {
    background: var(--canvas);
    color: var(--body-text);
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 400;
    font-size: 0.9375rem;
    line-height: 1.7;
    letter-spacing: 0.005em;
    overflow-x: hidden;
    min-height: 100vh;
}

/* ============================================================
   Typography
   ============================================================ */
h1 {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 3.5rem);
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--heading);
}

h2 {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 600;
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--heading);
    margin-bottom: 16px;
}

p {
    color: var(--body-text);
}

.mono-accent {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-weight: 400;
    font-size: 0.8125rem;
    color: var(--accent);
    background: var(--code-bg);
    padding: 2px 6px;
    border-radius: 2px;
    letter-spacing: 0;
}

.panel-label {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 500;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color 150ms ease, transform 150ms ease, text-shadow 150ms ease;
    display: inline-block;
}

a:hover {
    color: var(--heading);
    transform: scale(1.02);
    text-shadow: 0 0 8px rgba(99, 179, 237, 0.3);
}

/* ============================================================
   SECTION 1: Hero / Network Map
   ============================================================ */
.section-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 640px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(ellipse at center, rgba(99, 179, 237, 0.04) 0%, transparent 60%),
        var(--canvas);
}

.network-backbone {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.network-backbone .network-node-circle {
    pointer-events: all;
    cursor: pointer;
}

.hero-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    padding: 24px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--separator);
    background: rgba(15, 17, 20, 0.5);
    backdrop-filter: blur(4px);
}

.hero-brand {
    font-size: 0.875rem;
    background: transparent;
    padding: 0;
    color: var(--heading);
}

.hero-system-id {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.75rem;
    color: var(--muted);
    letter-spacing: 0.05em;
}

.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1400px;
    height: 100%;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-hub-node {
    position: relative;
    text-align: center;
    max-width: 640px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 500ms ease, transform 500ms ease;
    will-change: opacity, transform;
    padding: 32px 40px;
    background: rgba(26, 29, 33, 0.65);
    border: 1px solid var(--separator);
    border-radius: 2px;
    backdrop-filter: blur(2px);
}

.hero-hub-node.visible {
    opacity: 1;
    transform: translateY(0);
}

.hero-eyebrow {
    display: inline-block;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--muted);
    margin-bottom: 18px;
}

.hero-title {
    margin-bottom: 16px;
}

.hero-subtitle {
    color: var(--body-text);
    font-size: 1rem;
    line-height: 1.65;
    margin-bottom: 24px;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

.hero-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.hero-meta-sep {
    color: var(--dormant);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.75rem;
}

/* Satellite nodes positioned absolutely at conceptual node locations */
.satellite-node {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--panel-surface);
    border: 1px solid var(--separator);
    padding: 8px 14px;
    border-radius: 2px;
    opacity: 0;
    transform: translateY(8px);
    transition:
        opacity 300ms ease,
        transform 250ms var(--ease-spring),
        border-color 300ms ease,
        box-shadow 300ms ease;
    will-change: opacity, transform;
    cursor: pointer;
}

.satellite-node.visible {
    opacity: 1;
    transform: translateY(0);
}

.satellite-node:hover {
    transform: scale(1.04);
    border-color: var(--accent);
    box-shadow: 0 0 18px rgba(99, 179, 237, 0.18);
}

.satellite-1 { top: 22%; left: 8%; }
.satellite-2 { top: 18%; right: 8%; }
.satellite-3 { bottom: 22%; left: 8%; }
.satellite-4 { bottom: 22%; right: 8%; }

.node-label {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    transition: color 150ms ease;
}

.satellite-node:hover .node-label {
    color: var(--heading);
}

.hero-footnote {
    position: absolute;
    bottom: 24px;
    left: 0;
    right: 0;
    z-index: 3;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ============================================================
   Status indicators
   ============================================================ */
.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-active   { background: #48BB78; box-shadow: 0 0 8px rgba(72, 187, 120, 0.4); }
.status-warning  { background: #ECC94B; box-shadow: 0 0 8px rgba(236, 201, 75, 0.4); }
.status-critical { background: #FC8181; box-shadow: 0 0 8px rgba(252, 129, 129, 0.4); }
.status-neutral  { background: #4A5568; }

/* ============================================================
   Section heading (shared)
   ============================================================ */
.section-heading {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    margin: 0 auto 48px;
    padding: 0 16px;
}

.section-heading .panel-label {
    display: block;
    margin-bottom: 12px;
    color: var(--accent);
}

.section-title {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 600;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    letter-spacing: -0.02em;
    color: var(--heading);
    margin-bottom: 12px;
}

.section-desc {
    color: var(--body-text);
    max-width: 640px;
    font-size: 0.9375rem;
}

/* ============================================================
   SECTION 2: Capability Panels
   ============================================================ */
.section-capabilities {
    position: relative;
    min-height: 80vh;
    padding: 100px 40px 120px;
    overflow: hidden;
    border-top: 1px solid var(--separator);
}

.network-backbone-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.55;
}

.dashboard-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(180px, auto);
    gap: 1px;
    max-width: 1400px;
    margin: 0 auto;
    background: var(--separator);
    grid-template-areas:
        "core core core core core edge1 edge1 edge1 edge1 api api api"
        "core core core core core edge1 edge1 edge1 edge1 api api api"
        "edge2 edge2 edge2 monitor monitor monitor monitor sec sec sec sec sec"
        "edge2 edge2 edge2 monitor monitor monitor monitor sec sec sec sec sec";
}

.panel {
    position: relative;
    background: var(--panel-surface);
    border: 1px solid var(--separator);
    border-radius: 2px;
    padding: 28px 30px 56px;
    opacity: 0;
    transform: translateY(12px);
    transition:
        opacity 350ms ease,
        transform 250ms var(--ease-spring),
        border-color 300ms ease,
        box-shadow 300ms ease;
    will-change: transform, opacity;
    overflow: hidden;
}

.panel.visible {
    opacity: 1;
    transform: translateY(0);
}

.panel:hover {
    transform: scale(1.015);
    border-color: var(--network-line);
    box-shadow: 0 0 0 1px var(--network-line), 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: 10;
}

.panel:hover .status-dot.status-active {
    box-shadow: 0 0 14px rgba(72, 187, 120, 0.7);
}
.panel:hover .status-dot.status-warning {
    box-shadow: 0 0 14px rgba(236, 201, 75, 0.7);
}

.panel-core    { grid-area: core; }
.panel-edge1   { grid-area: edge1; }
.panel-edge2   { grid-area: edge2; }
.panel-monitor { grid-area: monitor; }
.panel-security{ grid-area: sec; }
.panel-api     { grid-area: api; }

.panel-status {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.panel p {
    margin-top: 8px;
    color: var(--body-text);
}

.panel-list {
    list-style: none;
    margin-top: 14px;
    border-top: 1px solid var(--separator);
    padding-top: 12px;
}

.panel-list li {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.75rem;
    color: var(--muted);
    padding: 4px 0;
    position: relative;
    padding-left: 18px;
    transition: color 200ms ease;
}

.panel-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 8px;
    height: 1px;
    background: var(--network-line);
}

.panel:hover .panel-list li {
    color: var(--body-text);
}

.panel-icon {
    position: absolute;
    top: 24px;
    right: 28px;
    width: 24px;
    height: 24px;
    color: var(--muted);
    transition: color 150ms ease, transform 150ms ease;
}

.panel:hover .panel-icon {
    color: var(--accent);
    transform: scale(1.12);
}

.panel-id {
    position: absolute;
    bottom: 16px;
    left: 30px;
    font-size: 0.6875rem;
    background: transparent;
    padding: 0;
    color: var(--dormant);
    transition: color 200ms ease;
}

.panel:hover .panel-id {
    color: var(--accent);
}

/* ============================================================
   SECTION 3: Topology Detail
   ============================================================ */
.section-topology {
    position: relative;
    min-height: 100vh;
    padding: 100px 40px 120px;
    overflow: hidden;
    border-top: 1px solid var(--separator);
}

.topology-bg {
    opacity: 0.4;
}

.topology-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 8fr 4fr;
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto;
    align-items: start;
}

.topology-main-panel {
    background: var(--panel-surface);
    border: 1px solid var(--separator);
    border-radius: 2px;
    padding: 40px 44px;
    opacity: 0;
    transform: translateY(12px);
    transition:
        opacity 350ms ease,
        transform 250ms var(--ease-spring),
        border-color 300ms ease;
    will-change: transform, opacity;
}

.topology-main-panel.visible {
    opacity: 1;
    transform: translateY(0);
}

.topology-main-panel:hover {
    transform: scale(1.015);
    border-color: var(--network-line);
}

.topology-main-panel .panel-status {
    margin-bottom: 20px;
}

.topology-main-panel p {
    color: var(--body-text);
    margin-bottom: 20px;
}

.topology-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--separator);
    margin: 24px 0;
    border: 1px solid var(--separator);
    border-radius: 2px;
    overflow: hidden;
}

.detail-item {
    background: var(--canvas);
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: background 200ms ease;
}

.detail-item:hover {
    background: #14171B;
}

.detail-label {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 500;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
}

.detail-value {
    font-size: 0.875rem;
    align-self: flex-start;
}

.topology-trace {
    margin-top: 28px;
    border-top: 1px solid var(--separator);
    padding-top: 18px;
}

.trace-label {
    display: block;
    margin-bottom: 10px;
    color: var(--accent);
}

.trace-block {
    background: var(--canvas);
    border: 1px solid var(--separator);
    border-radius: 2px;
    padding: 14px 18px;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.75rem;
    line-height: 1.8;
    color: var(--body-text);
    white-space: pre;
    overflow-x: auto;
}

.trace-line {
    display: block;
}

.trace-time, .trace-tag {
    background: transparent;
    padding: 0;
    font-size: 0.75rem;
}

.trace-tag {
    color: var(--status-active);
}

/* Orbiting nodes (right column) */
.topology-orbiting-nodes {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 0;
}

.orbit-node {
    background: var(--panel-surface);
    border: 1px solid var(--separator);
    border-radius: 2px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: 0;
    transform: translateY(12px);
    transition:
        opacity 350ms ease,
        transform 250ms var(--ease-spring),
        border-color 300ms ease;
    will-change: transform, opacity;
    cursor: pointer;
}

.orbit-node.visible {
    opacity: 1;
    transform: translateY(0);
}

.orbit-node:hover {
    transform: scale(1.02);
    border-color: var(--network-line);
    box-shadow: 0 0 0 1px var(--network-line);
}

.orbit-label {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-weight: 400;
    font-size: 0.8125rem;
    color: var(--body-text);
    transition: color 150ms ease;
}

.orbit-node:hover .orbit-label {
    color: var(--accent);
}

/* ============================================================
   SECTION 4: Status Footer
   ============================================================ */
.section-footer {
    background: var(--panel-surface);
    border-top: 1px solid var(--separator);
    padding: 22px 40px;
}

.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1400px;
    margin: 0 auto;
    gap: 24px;
    flex-wrap: wrap;
}

.footer-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.footer-brand {
    font-size: 0.875rem;
    background: transparent;
    padding: 0;
    color: var(--heading);
}

.footer-version {
    font-size: 0.75rem;
    color: var(--muted);
    background: transparent;
    padding: 0;
}

.uptime-bar {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 32px;
    flex-shrink: 0;
}

.uptime-rect {
    width: 12px;
    height: 32px;
    border-radius: 1px;
    transition: opacity 200ms ease, transform 200ms ease;
}

.uptime-rect:hover {
    opacity: 0.6;
    transform: scaleY(1.08);
}

.footer-right {
    display: flex;
    align-items: center;
    gap: 18px;
}

.footer-status-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-status-text {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 500;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--status-active);
}

.footer-timestamp {
    font-size: 0.75rem;
    color: var(--muted);
    background: transparent;
    padding: 0;
}

/* ============================================================
   Network SVG layer styling
   ============================================================ */
.network-edge {
    stroke: #3A3F47;
    stroke-width: 0.5px;
    fill: none;
    transition: stroke 300ms ease, stroke-width 300ms ease;
}

.network-edge.highlighted {
    stroke: var(--accent);
    stroke-width: 1.2px;
}

.network-node-circle {
    fill: #4A5568;
    transition: fill 300ms ease, transform 300ms var(--ease-spring), filter 300ms ease;
    transform-box: fill-box;
    transform-origin: center;
}

.network-node-circle.hub {
    fill: var(--muted);
}

.network-node-circle.highlighted {
    fill: var(--accent);
    filter: drop-shadow(0 0 6px rgba(99, 179, 237, 0.6));
}

.network-node-circle:hover {
    transform: scale(1.5);
    fill: var(--accent);
    filter: drop-shadow(0 0 8px rgba(99, 179, 237, 0.7));
}

/* SVG line draw animation -- stroke-dashoffset based */
.draw-line {
    stroke-dasharray: var(--line-length, 1000);
    stroke-dashoffset: var(--line-length, 1000);
    transition: stroke-dashoffset 400ms ease-out;
}

.draw-line.drawn {
    stroke-dashoffset: 0;
}

/* Node fade-in */
.fade-node {
    opacity: 0;
    transition: opacity 200ms ease;
}

.fade-node.visible {
    opacity: 1;
}

/* Hub pulse animation */
@keyframes node-pulse {
    0%, 100% {
        filter: drop-shadow(0 0 4px rgba(99, 179, 237, 0.15));
    }
    50% {
        filter: drop-shadow(0 0 14px rgba(99, 179, 237, 0.45));
    }
}

.network-node-circle.hub.pulsing {
    animation: node-pulse 2.5s ease-in-out infinite;
}

/* ============================================================
   Node tooltip
   ============================================================ */
.node-tooltip {
    position: fixed;
    pointer-events: none;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 500;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--heading);
    background: var(--panel-surface);
    border: 1px solid var(--network-line);
    padding: 6px 10px;
    border-radius: 2px;
    opacity: 0;
    transition: opacity 150ms ease;
    z-index: 1000;
    white-space: nowrap;
    transform: translate(-50%, calc(-100% - 12px));
}

.node-tooltip.active {
    opacity: 1;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
    .dashboard-grid {
        grid-template-columns: repeat(6, 1fr);
        grid-template-areas:
            "core core core core core core"
            "edge1 edge1 edge1 api api api"
            "edge2 edge2 edge2 monitor monitor monitor"
            "sec sec sec sec sec sec";
    }

    .topology-layout {
        grid-template-columns: 1fr;
    }

    .topology-orbiting-nodes {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .orbit-node {
        flex: 1 1 calc(50% - 6px);
        min-width: 200px;
    }

    .hero-header {
        padding: 16px 20px;
    }

    .satellite-1 { left: 4%; }
    .satellite-2 { right: 4%; }
    .satellite-3 { left: 4%; }
    .satellite-4 { right: 4%; }
}

@media (max-width: 768px) {
    .section-capabilities,
    .section-topology {
        padding: 60px 16px;
    }

    .section-footer {
        padding: 16px;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "core"
            "edge1"
            "edge2"
            "monitor"
            "sec"
            "api";
    }

    .satellite-node {
        display: none;
    }

    .topology-detail-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .topology-main-panel {
        padding: 28px 22px;
    }

    .footer-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .orbit-node {
        flex: 1 1 100%;
    }

    .hero-system-id {
        display: none;
    }

    .hero-content {
        padding: 0 20px;
    }

    .hero-hub-node {
        padding: 24px 20px;
    }
}