/* ============================================================
   sim-ai.com — Simulation Terminal
   HUD-overlay layout, tech-mono typography, dark-neon palette
   ============================================================ */

:root {
    --c-bg: #0A0F14;
    --c-grid: #142028;
    --c-accent: #A0E8D0;
    --c-accent-2: #5A9AAA;
    --c-warm: #E8A060;
    --c-body: #8AACB8;
    --c-mute: #5A7A6A;
    --c-wire: #2A5A4A;
    --c-wire-active: #5A7A6A;

    --c-band-init: #2A5A4A;
    --c-band-process: #5A9AAA;
    --c-band-render: #A0E8D0;
    --c-band-output: #E8A060;

    --hud-top: 48px;
    --hud-bottom: 80px;
    --side-panel: 200px;

    --f-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
    --f-body: 'Source Code Pro', 'Menlo', 'Consolas', monospace;
    --f-hud: 'Share Tech Mono', 'Source Code Pro', monospace;
}

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

html, body {
    background: var(--c-bg);
    color: var(--c-body);
    font-family: var(--f-body);
    font-size: 15px;
    line-height: 1.7;
    overflow-x: hidden;
    min-height: 100vh;
}

body {
    position: relative;
    padding-top: var(--hud-top);
    padding-bottom: var(--hud-bottom);
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ============================================================
   GRID SUBSTRATE
   ============================================================ */
.grid-substrate {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-color: var(--c-bg);
    background-image:
        repeating-linear-gradient(0deg, transparent 0, transparent 59px, var(--c-grid) 59px, var(--c-grid) 60px),
        repeating-linear-gradient(90deg, transparent 0, transparent 59px, var(--c-grid) 59px, var(--c-grid) 60px);
    background-size: 60px 60px;
    opacity: 0.85;
}

.grid-substrate::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 70% 50%, rgba(90, 154, 170, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 20% 80%, rgba(160, 232, 208, 0.04) 0%, transparent 60%);
}

/* ============================================================
   CANVAS LAYER (wireframe + particles)
   ============================================================ */
.sim-canvas {
    position: fixed;
    top: var(--hud-top);
    left: 0;
    right: 0;
    bottom: var(--hud-bottom);
    width: 100%;
    height: calc(100vh - var(--hud-top) - var(--hud-bottom));
    pointer-events: none;
    z-index: 1;
}

/* ============================================================
   ZONE ALPHA — CONTROL HEADER
   ============================================================ */
.zone-alpha {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--hud-top);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    background: rgba(10, 15, 20, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(42, 90, 74, 0.4);
    font-family: var(--f-hud);
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--c-mute);
    text-transform: uppercase;
}

.alpha-left, .alpha-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.domain-tag {
    color: var(--c-accent);
    font-weight: 400;
    letter-spacing: 0.1em;
}

.domain-sub {
    color: var(--c-mute);
}

.alpha-sep {
    color: var(--c-wire);
}

.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-accent);
    box-shadow: 0 0 6px rgba(160, 232, 208, 0.6);
    animation: dot-pulse 1.6s ease-in-out infinite;
}

@keyframes dot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.85); }
}

.frame-counter, .time-counter {
    color: var(--c-accent);
    font-variant-numeric: tabular-nums;
    min-width: 64px;
    display: inline-block;
}

/* ============================================================
   PHASE NAV (left margin)
   ============================================================ */
.phase-nav {
    position: fixed;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 18px;
    font-family: var(--f-body);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.phase-link {
    color: var(--c-mute);
    transition: color 0.3s ease, transform 0.3s ease;
    position: relative;
    padding-left: 16px;
}

.phase-link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--c-wire);
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.phase-link:hover {
    color: var(--c-body);
    transform: translateX(2px);
}

.phase-link.active {
    color: var(--c-accent);
}

.phase-link.active::before {
    background: var(--c-accent);
    border-color: var(--c-accent);
    box-shadow: 0 0 6px rgba(160, 232, 208, 0.7);
}

/* ============================================================
   ZONE DELTA — SIDE PANEL
   ============================================================ */
.zone-delta {
    position: fixed;
    top: calc(var(--hud-top) + 24px);
    right: 16px;
    width: var(--side-panel);
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(42, 90, 74, 0.35);
    background: rgba(10, 15, 20, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    font-family: var(--f-hud);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    max-height: calc(100vh - var(--hud-top) - var(--hud-bottom) - 48px);
    overflow: hidden;
}

.zone-delta::before {
    content: "// READOUT";
    display: block;
    color: var(--c-accent);
    font-size: 10px;
    letter-spacing: 0.16em;
    border-bottom: 1px dashed var(--c-wire);
    padding-bottom: 8px;
    margin-bottom: 4px;
}

.delta-readout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px dashed rgba(42, 90, 74, 0.5);
}

.delta-readout:last-of-type {
    border-bottom: none;
}

.delta-label {
    color: var(--c-mute);
}

.delta-value {
    color: var(--c-accent-2);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
}

.phase-indicator {
    color: var(--c-accent);
}

.delta-graph {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--c-wire);
}

.signal-svg {
    display: block;
    width: 100%;
    height: 48px;
    margin-top: 6px;
}

.signal-svg polyline {
    fill: none;
    stroke: var(--c-accent);
    stroke-width: 1.2;
    stroke-linejoin: miter;
    filter: drop-shadow(0 0 2px rgba(160, 232, 208, 0.5));
}

/* ============================================================
   ZONE BETA — PRIMARY DATA SECTIONS
   ============================================================ */
.zone-beta {
    position: relative;
    z-index: 10;
    margin-left: 160px;
    margin-right: calc(var(--side-panel) + 48px);
    padding: 0 24px;
}

.phase {
    min-height: 100vh;
    padding: 80px 0 40px 0;
    position: relative;
    display: flex;
    align-items: center;
}

.phase-content {
    width: 100%;
    max-width: 640px;
    position: relative;
}

.phase-content-centered {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

/* Pulse line (sweeps left -> right when section is in view) */
.pulse-line {
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--c-accent);
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
    box-shadow: 0 0 8px rgba(160, 232, 208, 0.6);
    pointer-events: none;
}

.phase.in-view .pulse-line {
    animation: pulse-sweep 3s ease-out forwards;
}

@keyframes pulse-sweep {
    0% { opacity: 0; transform: scaleX(0); }
    10% { opacity: 0.4; }
    100% { opacity: 0; transform: scaleX(1); }
}

/* Phase tag */
.phase-tag {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    font-family: var(--f-body);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-mute);
}

.phase-tag.centered {
    justify-content: center;
}

.phase-tag-label {
    color: var(--c-accent);
}

/* Processing node motif */
.processing-node {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid var(--c-accent);
    position: relative;
    flex: 0 0 8px;
    transition: transform 0.3s ease;
}

.processing-node::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--c-accent);
}

.processing-node.small {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
}

.processing-node.small::after {
    width: 2px;
    height: 2px;
}

.processing-node:hover {
    transform: scale(1.15);
}

.processing-node:hover::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px solid var(--c-accent);
    animation: node-pulse 0.9s ease-out;
    pointer-events: none;
}

@keyframes node-pulse {
    0% { opacity: 0.8; transform: scale(0.6); }
    100% { opacity: 0; transform: scale(2.2); }
}

/* Phase title */
.phase-title {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--c-accent);
    margin-bottom: 18px;
}

.phase-process .phase-title,
.phase-render .phase-title {
    font-weight: 500;
    font-size: clamp(32px, 4vw, 48px);
}

.phase-subtitle {
    font-family: var(--f-hud);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-mute);
    margin-bottom: 28px;
}

.phase-body {
    font-family: var(--f-body);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.7;
    color: var(--c-body);
    margin-bottom: 18px;
    max-width: 56ch;
}

.phase-list {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: var(--f-hud);
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--c-accent-2);
    text-transform: uppercase;
}

.phase-list li {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Metric grid (PROCESS phase) */
.metric-grid {
    margin-top: 36px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    border: 1px solid rgba(42, 90, 74, 0.5);
    background: rgba(20, 32, 40, 0.4);
}

.metric {
    padding: 14px 18px;
    border-right: 1px dashed rgba(42, 90, 74, 0.5);
    border-bottom: 1px dashed rgba(42, 90, 74, 0.5);
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-family: var(--f-hud);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.metric:nth-child(2n) { border-right: none; }
.metric:nth-last-child(-n+2) { border-bottom: none; }

.metric-label {
    font-size: 11px;
    color: var(--c-mute);
}

.metric-value {
    font-size: 18px;
    color: var(--c-warm);
    font-variant-numeric: tabular-nums;
}

/* OUTPUT phase */
.phase-output .phase-content-centered {
    text-align: center;
}

.output-statement {
    font-family: var(--f-display);
    font-weight: 500;
    font-size: clamp(28px, 4vw, 48px);
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--c-accent);
    margin: 32px 0 24px;
    max-width: 22ch;
    margin-left: auto;
    margin-right: auto;
}

.output-statement-sub {
    font-family: var(--f-display);
    font-weight: 500;
    font-size: clamp(20px, 2.4vw, 28px);
    line-height: 1.4;
    color: var(--c-warm);
    margin-bottom: 64px;
    max-width: 32ch;
    margin-left: auto;
    margin-right: auto;
}

.output-coda {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-family: var(--f-hud);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--c-mute);
    text-transform: uppercase;
}

.coda-line {
    flex: 1;
    max-width: 80px;
    height: 1px;
    background: var(--c-wire);
}

/* ============================================================
   ZONE GAMMA — TELEMETRY STRIP (footer)
   ============================================================ */
.zone-gamma {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--hud-bottom);
    z-index: 50;
    display: flex;
    align-items: center;
    background: rgba(10, 15, 20, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-top: 1px solid rgba(42, 90, 74, 0.45);
    font-family: var(--f-hud);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--c-mute);
    text-transform: uppercase;
}

.gamma-left, .gamma-right {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 18px;
    height: 100%;
    border-right: 1px solid rgba(42, 90, 74, 0.4);
}

.gamma-right {
    border-right: none;
    border-left: 1px solid rgba(42, 90, 74, 0.4);
    margin-left: auto;
}

.gamma-label {
    color: var(--c-mute);
}

.gamma-value {
    color: var(--c-accent);
    font-variant-numeric: tabular-nums;
}

.status-dot.pulse {
    background: var(--c-warm);
    box-shadow: 0 0 6px rgba(232, 160, 96, 0.6);
}

.ticker-window {
    flex: 1;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.ticker-window::before,
.ticker-window::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    z-index: 2;
    pointer-events: none;
}

.ticker-window::before {
    left: 0;
    background: linear-gradient(to right, rgba(10, 15, 20, 1), rgba(10, 15, 20, 0));
}

.ticker-window::after {
    right: 0;
    background: linear-gradient(to left, rgba(10, 15, 20, 1), rgba(10, 15, 20, 0));
}

.ticker-track {
    display: flex;
    align-items: center;
    gap: 36px;
    height: 100%;
    white-space: nowrap;
    will-change: transform;
    animation: ticker-scroll 60s linear infinite;
}

@keyframes ticker-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--c-mute);
}

.ticker-item .tk-label { color: var(--c-mute); }
.ticker-item .tk-value { color: var(--c-accent-2); font-variant-numeric: tabular-nums; }
.ticker-item .tk-warn { color: var(--c-warm); }
.ticker-item .tk-good { color: var(--c-accent); }
.ticker-item .tk-sep { color: var(--c-wire); }

.ticker-bar {
    display: inline-block;
    width: 60px;
    height: 6px;
    background: rgba(42, 90, 74, 0.5);
    position: relative;
    vertical-align: middle;
}

.ticker-bar::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: var(--c-accent);
    width: var(--bar, 50%);
}

/* ============================================================
   PHASE-SPECIFIC TONAL SHIFTS
   ============================================================ */
.phase-process .processing-node,
.phase-process .processing-node::after {
    border-color: var(--c-accent-2);
}
.phase-process .processing-node::after { background: var(--c-accent-2); }
.phase-process .phase-tag-label { color: var(--c-accent-2); }

.phase-render .processing-node { border-color: var(--c-warm); }
.phase-render .processing-node::after { background: var(--c-warm); }
.phase-render .phase-tag-label { color: var(--c-warm); }

.phase-output .processing-node { border-color: var(--c-accent); }
.phase-output .processing-node::after { background: var(--c-accent); }

/* ============================================================
   ENTRY ANIMATIONS
   ============================================================ */
.phase .phase-content > * {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.phase.in-view .phase-content > * {
    opacity: 1;
    transform: translateY(0);
}

.phase.in-view .phase-content > *:nth-child(1) { transition-delay: 0.05s; }
.phase.in-view .phase-content > *:nth-child(2) { transition-delay: 0.18s; }
.phase.in-view .phase-content > *:nth-child(3) { transition-delay: 0.30s; }
.phase.in-view .phase-content > *:nth-child(4) { transition-delay: 0.42s; }
.phase.in-view .phase-content > *:nth-child(5) { transition-delay: 0.54s; }
.phase.in-view .phase-content > *:nth-child(6) { transition-delay: 0.66s; }
.phase.in-view .phase-content > *:nth-child(7) { transition-delay: 0.78s; }

/* Phase 01 boot fade-in */
body.boot .phase-init .phase-content > * {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1200px) {
    .zone-delta { display: none; }
    .zone-beta {
        margin-right: 24px;
    }
}

@media (max-width: 900px) {
    .zone-beta {
        margin-left: 100px;
        margin-right: 16px;
    }
    .phase-nav {
        left: 8px;
        gap: 12px;
        font-size: 10px;
    }
    .phase-link { padding-left: 12px; }
    .alpha-left .domain-sub { display: none; }
    .alpha-right .status-label:first-of-type ~ .alpha-sep:first-of-type { display: none; }
}

@media (max-width: 640px) {
    .zone-alpha { padding: 0 12px; font-size: 10px; }
    .alpha-left .alpha-sep { display: none; }
    .alpha-left .domain-sub { display: none; }
    .alpha-right .status-label,
    .alpha-right .alpha-sep { display: none; }
    .alpha-right .frame-counter { display: inline-block; }
    .alpha-right .time-counter { display: none; }

    .zone-beta {
        margin-left: 16px;
        margin-right: 16px;
    }
    .phase-nav {
        flex-direction: row;
        gap: 8px;
        top: var(--hud-top);
        left: 0;
        right: 0;
        transform: none;
        background: rgba(10, 15, 20, 0.7);
        padding: 6px 12px;
        border-bottom: 1px solid rgba(42, 90, 74, 0.3);
        overflow-x: auto;
        font-size: 9px;
    }
    .phase-link::before { display: none; }
    .phase-link { padding-left: 0; }

    .metric-grid {
        grid-template-columns: 1fr;
    }
    .metric { border-right: none; }
    .metric:nth-last-child(-n+2) { border-bottom: 1px dashed rgba(42, 90, 74, 0.5); }
    .metric:last-child { border-bottom: none; }

    .phase {
        padding: 60px 0 30px 0;
    }
}