/* ===== v2026 · base · design tokens, reset, body bg, boot overlay, canvas ===== */
:root {
    --bg: #03060f;
    --bg-soft: #070b18;
    --fg: #f1f4ff;
    --fg-dim: #8e96b3;
    --fg-mute: #3e4663;
    --accent: #6fd6ff;
    --accent-soft: #a0e8ff;
    --accent-deep: #2a5cff;
    --accent2: #b08bff;
    --layer-edge:    #7adcff;
    --layer-net:     #9b8bff;
    --layer-orch:    #38bdf8;
    --layer-compute: #fb923c;
    --layer-obs:     #34d399;
    --border:    rgba(255, 255, 255, 0.08);
    --border-2:  rgba(111, 214, 255, 0.28);
    --hud-bg:    rgba(7, 11, 24, 0.62);
    --hud-bg-2:  rgba(7, 11, 24, 0.82);
    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "Menlo", monospace;
    --pad: clamp(16px, 1.8vw, 28px);
    /* Live HUD slot heights — set by JS on load/resize so siblings
       can stack without overlap on any viewport. Fallbacks here.   */
    --hud-top-h:    44px;
    --hud-bottom-h: 38px;
    --hud-menu-h:   0px;     /* > 900 menu is vertical (off the stack) */
    --hud-layers-h: 0px;     /* > 900 layers is vertical */
    --hud-hero-h:   0px;
}

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

html, body {
    background: var(--bg);
    color: var(--fg);
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    overflow: hidden;       /* no scroll: gaming UI */
}
body {
    font-family: var(--font-sans);
    font-weight: 400;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(42, 92, 255, 0.18), transparent 60%),
        radial-gradient(ellipse at 80% 110%, rgba(111, 214, 255, 0.10), transparent 55%),
        radial-gradient(ellipse at 20% -10%, rgba(176, 139, 255, 0.08), transparent 50%),
        var(--bg);
}
a    { color: inherit; text-decoration: none; }
kbd  {
    font-family: var(--font-mono);
    font-size: 10px;
    padding: 2px 6px;
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: 3px;
    color: var(--accent);
    background: rgba(7, 11, 24, 0.65);
    margin: 0 2px;
}
code {
    font-family: var(--font-mono);
    font-size: 0.85em;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(111, 214, 255, 0.08);
    color: var(--accent);
}

/* ===== Scanline + vignette overlay (subtle CRT) ===== */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 80;
    background:
        repeating-linear-gradient(0deg,
            rgba(255, 255, 255, 0.012) 0px,
            rgba(255, 255, 255, 0.012) 1px,
            transparent 1px,
            transparent 3px),
        radial-gradient(ellipse at center,
            transparent 55%,
            rgba(0, 0, 0, 0.45) 100%);
    mix-blend-mode: overlay;
}

/* ===== Boot overlay — minimal: just a centered progress bar. ===== */
.boot {
    position: fixed; inset: 0; z-index: 200;
    background:
        radial-gradient(ellipse at center, rgba(8, 14, 34, 0.96) 0%, rgba(2, 4, 10, 0.995) 55%, #02040a 100%);
    display: flex; align-items: center; justify-content: center;
    transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
                filter   1.1s cubic-bezier(0.22, 1, 0.36, 1);
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    will-change: opacity, filter;
}
.boot.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

/* Card + animations use ONLY transform/opacity (compositor thread) so the loader stays perfectly
   fluid even while the heavy Three.js init blocks the main thread. */
.boot-card {
    display: flex; flex-direction: column; align-items: center; gap: 17px;
    transform: translateZ(0);
}
.boot-mark {
    font-size: 38px; line-height: 1; color: var(--accent);
    text-shadow: 0 0 22px rgba(111, 214, 255, 0.55);
    animation: boot-pulse 1.9s ease-in-out infinite;
    will-change: transform, opacity;
}
.boot-name {
    font: 600 12.5px/1 ui-monospace, "SF Mono", Menlo, monospace;
    letter-spacing: 0.42em; text-indent: 0.42em;
    color: #9cc0f0; opacity: 0.9;
    animation: boot-fade 1.9s ease-in-out infinite;
}
.boot-bar {
    width: min(210px, 50vw); height: 2px; margin-top: 2px;
    border-radius: 2px; overflow: hidden;
    background: rgba(111, 214, 255, 0.12);
}
.boot-bar > i {
    display: block; width: 42%; height: 100%; border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--accent) 50%, transparent);
    box-shadow: 0 0 12px rgba(111, 214, 255, 0.6);
    transform: translateX(-130%);
    animation: boot-slide 1.25s cubic-bezier(0.45, 0, 0.25, 1) infinite;
    will-change: transform;
}
@keyframes boot-pulse { 0%, 100% { transform: scale(0.94); opacity: 0.7; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes boot-fade  { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.95; } }
@keyframes boot-slide { 0% { transform: translateX(-130%); } 100% { transform: translateX(335%); } }

/* ===== OSI packet overlay — transparent, above the DOM bands, click-through =====
   The bands live in #osi-stage (z-index 1); this canvas paints only the moving
   packets on top of them (z-index 2) and never intercepts pointer events so the
   chips/bands beneath stay clickable. */
#osi {
    position: fixed; inset: 0;
    width: 100%; height: 100%;
    z-index: 2;
    pointer-events: none;
    background: transparent;
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
    body::after { display: none; }
}