/* ============================================================================
   world-agents.css — WORLD 02 · AI AUTOMATION & AGENTS
   ----------------------------------------------------------------------------
   Two roots: .wa-entity (the slot figure + agent loop) and .wa-fleet (the
   project topology). Every local colour / size / motion value is a custom
   property declared on those roots. Core tokens are read, never redefined.

   Accent discipline: cyan -> electric blue appears ONLY on the optical core,
   the chest core, the node glow and the connection lines. Everything else is
   black ground and white hairlines.
   ========================================================================== */

.wa-entity,
.wa-fleet {
    /* ---- colour ---------------------------------------------------- */
    --wa-accent:      var(--u-accent-agents);
    --wa-accent-2:    var(--u-accent-agents-2);
    --wa-body:        #070b11;          /* panel fill — still reads as void */
    --wa-line:        var(--u-line-3);  /* primary 1.5px hairline */
    --wa-line-soft:   var(--u-line-2);
    --wa-line-faint:  var(--u-line-1);

    /* ---- stroke ----------------------------------------------------- */
    --wa-stroke:      1.5;
    --wa-stroke-hair: 1;

    /* ---- motion ------------------------------------------------------ */
    --wa-ease:        var(--u-ease-enter);
    --wa-ease-out:    var(--u-ease-exit);
    --wa-step:        150ms;   /* node-to-node wake interval */
    --wa-step-out:    110ms;   /* reverse power-down interval */
    --wa-draw:        300ms;   /* stroke-dashoffset draw duration */
    --wa-breath:      4s;      /* mechanical breathing cycle */
    --wa-pulse-a:     2.6s;    /* optical core */
    --wa-pulse-b:     3.4s;    /* chest core — deliberately out of phase */
    --wa-travel:      8s;      /* data pulse along a completed path */

    /* ---- parallax (written by JS, read by every depth layer) --------- */
    --wa-px: 0;
    --wa-py: 0;
}

/* ============================================================================
   1. THE ENTITY
   ========================================================================== */
.wa-entity {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;          /* the legs are cropped on purpose */
}

/* ---- mechanical shell ---------------------------------------------- */
.wa-plate {
    fill: var(--wa-body);
    stroke: var(--wa-line);
    stroke-width: var(--wa-stroke);
    stroke-linejoin: miter;
}

.wa-digit {
    fill: var(--wa-body);
    stroke: var(--wa-line-soft);
    stroke-width: var(--wa-stroke-hair);
}

.wa-hair {
    fill: none;
    stroke: var(--wa-line-soft);
    stroke-width: var(--wa-stroke-hair);
}

.wa-joint {
    fill: var(--wa-body);
    stroke: var(--wa-line);
    stroke-width: var(--wa-stroke);
}

.wa-joint-pin {
    fill: var(--wa-line);
}

/* the far arm sits behind the torso and reads one step back */
.wa-recede { stroke: var(--wa-line-soft); }

.wa-beacon {
    fill: var(--wa-accent);
    opacity: 0.35;
}

/* ---- optical core ---------------------------------------------------- */
.wa-eye-ring {
    fill: none;
    stroke: var(--wa-accent);
    stroke-width: var(--wa-stroke-hair);
    opacity: 0.35;
}
.wa-eye-mid {
    fill: none;
    stroke: var(--wa-accent);
    stroke-width: var(--wa-stroke);
    opacity: 0.55;
}
.wa-eye-hot {
    fill: var(--wa-accent);
    opacity: 0.8;
}

/* ---- chest power core ------------------------------------------------ */
.wa-core-ring {
    fill: none;
    stroke: var(--wa-accent-2);
    stroke-width: var(--wa-stroke-hair);
    opacity: 0.3;
}
.wa-core-tick {
    fill: none;
    stroke: var(--wa-accent-2);
    stroke-width: var(--wa-stroke-hair);
    opacity: 0.35;
}
.wa-core-mid {
    fill: none;
    stroke: var(--wa-accent-2);
    stroke-width: var(--wa-stroke);
    opacity: 0.5;
}
.wa-core-hot {
    fill: var(--wa-accent);
    opacity: 0.75;
}

/* ---- service panel --------------------------------------------------- */
.wa-panel-lead {
    fill: none;
    stroke: var(--wa-accent);
    stroke-width: var(--wa-stroke-hair);
    opacity: 0.4;
}
.wa-panel-cover {
    fill: var(--wa-body);
    stroke: var(--wa-line-soft);
    stroke-width: var(--wa-stroke-hair);
    transform-box: view-box;
    transform-origin: 86px 135px;
    transition: transform 320ms var(--wa-ease);
}
.wa-panel.is-open .wa-panel-cover { transform: scaleX(0.1); }

/* ---- idle animation -------------------------------------------------- */
@keyframes wa-breathe {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-1.6px); }
}
@keyframes wa-breathe-head {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-0.9px); }
}
@keyframes wa-pulse-core {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 0.95; }
}
@keyframes wa-pulse-ring {
    0%, 100% { opacity: 0.22; }
    50%      { opacity: 0.5; }
}
@keyframes wa-finger {
    0%, 62%, 100% { transform: rotate(0deg); }
    70%, 78%      { transform: rotate(-16deg); }
}
@keyframes wa-drift {
    0%   { transform: translateY(8px);   opacity: 0; }
    22%  {                               opacity: 0.45; }
    76%  {                               opacity: 0.35; }
    100% { transform: translateY(-26px); opacity: 0; }
}

.wa-chest    { animation: wa-breathe var(--wa-breath) ease-in-out infinite; }
.wa-head-bob { animation: wa-breathe-head var(--wa-breath) ease-in-out infinite; }

.wa-eye-hot  { animation: wa-pulse-core var(--wa-pulse-a) ease-in-out infinite; }
.wa-eye-ring { animation: wa-pulse-ring var(--wa-pulse-a) ease-in-out infinite; }
.wa-core-hot { animation: wa-pulse-core var(--wa-pulse-b) ease-in-out infinite; }
.wa-core-ring{ animation: wa-pulse-ring var(--wa-pulse-b) ease-in-out infinite; }

.wa-finger {
    transform-box: view-box;
    transform-origin: 136px 175px;
    animation: wa-finger 6.5s var(--wa-ease) infinite;
}

/* head servo tic — driven by a long random interval in JS */
.wa-head {
    transform-box: view-box;
    transform-origin: 86px 80px;
    transition: transform 260ms var(--wa-ease);
}
.wa-head.is-tic { transform: rotate(-2.4deg); }

/* ---- drifting data glyphs ------------------------------------------- */
.wa-glyph {
    font-family: var(--u-font-mono);
    font-size: 7px;
    letter-spacing: 0.1em;
    fill: var(--u-silver);
    opacity: 0;
    animation: wa-drift 11s linear infinite;
    animation-delay: calc(var(--i) * -1.9s);
}

/* ============================================================================
   2. THE FIVE-NODE AGENT LOOP
   Idle: rings barely present. Wake: one node at a time, then the paths draw
   themselves in dependency order, then the pulses start travelling.
   ========================================================================== */
.wa-node {
    opacity: 0.16;
    transition: opacity 240ms var(--wa-ease-out);
    transition-delay: calc((4 - var(--i)) * var(--wa-step-out));
}
.wa-entity.is-awake .wa-node,
.wa-entity.is-static .wa-node {
    opacity: 1;
    transition-timing-function: var(--wa-ease);
    transition-delay: calc(var(--i) * var(--wa-step) + 40ms);
}

.wa-node-ring {
    fill: var(--u-void);
    stroke: var(--wa-accent);
    stroke-width: var(--wa-stroke-hair);
    opacity: 0.45;
}
.wa-node-dot { fill: var(--wa-accent); }

.wa-node-label {
    font-family: var(--u-font-mono);
    font-size: 7px;
    font-weight: 500;
    letter-spacing: 0.12em;
    fill: var(--u-muted);
}

.wa-node-token {
    font-family: var(--u-font-mono);
    font-size: 6.5px;
    font-weight: 500;
    letter-spacing: 0.08em;
    fill: var(--wa-accent);
    opacity: 0;
}

/* process indicators blink in and out once the network is up */
@keyframes wa-token {
    0%, 4%      { opacity: 0; transform: translateY(2px); }
    12%, 34%    { opacity: 0.85; transform: translateY(0); }
    44%, 100%   { opacity: 0; transform: translateY(0); }
}
.wa-entity.is-awake .wa-node-token {
    animation: wa-token 5.4s var(--wa-ease) infinite;
    animation-delay: calc(var(--i) * 0.72s + 1s);
}

/* ---- connections: they draw themselves ------------------------------ */
.wa-edge {
    fill: none;
    stroke: var(--wa-accent);
    stroke-width: 1.25;
    stroke-linecap: round;
    opacity: 0.5;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset var(--wa-draw) var(--wa-ease-out);
    transition-delay: calc((5 - var(--i)) * var(--wa-step-out));
}
.wa-entity.is-awake .wa-edge,
.wa-entity.is-static .wa-edge {
    stroke-dashoffset: 0;
    transition-timing-function: var(--wa-ease);
    transition-delay: calc(var(--i) * var(--wa-step) + 120ms);
}

/* travelling data pulse — one short dash running the full path, slowly */
@keyframes wa-travel {
    from { stroke-dashoffset: 100; }
    to   { stroke-dashoffset: 0; }
}
.wa-edge-pulse {
    fill: none;
    stroke: var(--u-white);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-dasharray: 2 98;
    stroke-dashoffset: 100;
    opacity: 0;
    transition: opacity 300ms var(--wa-ease);
}
.wa-entity.is-awake .wa-edge-pulse {
    opacity: 0.85;
    transition-delay: calc(var(--i) * var(--wa-step) + 420ms);
    animation: wa-travel var(--wa-travel) linear infinite;
    animation-delay: calc(var(--i) * 1.3s);
}

/* full-network surge on activation — under 180ms, core does not await it */
.wa-net {
    transform-box: view-box;
    transform-origin: center;
    transition: filter 90ms linear, transform 90ms linear;
}
.wa-entity.is-surge .wa-net {
    filter: drop-shadow(0 0 5px rgba(34, 211, 238, 0.55));
    transform: scale(1.015);
}
.wa-entity.is-surge .wa-eye-hot,
.wa-entity.is-surge .wa-core-hot { opacity: 1; }

/* hovered: both cores hold at full illumination */
.wa-entity.is-awake .wa-eye-hot,
.wa-entity.is-awake .wa-core-hot,
.wa-entity.is-static .wa-eye-hot,
.wa-entity.is-static .wa-core-hot { animation: none; opacity: 1; }

.wa-entity.is-awake .wa-eye-mid,
.wa-entity.is-awake .wa-core-mid { opacity: 0.85; }

.wa-entity.is-awake .wa-eye-ring,
.wa-entity.is-awake .wa-core-ring { animation: none; opacity: 0.55; }

/* ---- static frame (reduced motion): everything drawn, nothing moves -- */
.wa-entity.is-static *,
.wa-entity.is-static *::before {
    animation: none !important;
    transition: none !important;
}
.wa-entity.is-static .wa-glyphs { display: none; }
.wa-entity.is-static .wa-edge-pulse { display: none; }
.wa-entity.is-static .wa-node-token { opacity: 0.7; }

/* ============================================================================
   3. THE FLEET — command topology, 11 objects, no cards and no grid
   ========================================================================== */
.wa-fleet {
    --wa-map-h: 940px;
    position: relative;
    max-width: 1440px;
    margin: 0 auto;
}

.wa-fleet__head { max-width: 58ch; }

.wa-fleet__eyebrow {
    margin: 0 0 var(--u-s2);
    font-family: var(--u-font-mono);
    font-size: var(--u-t-micro);
    font-weight: 500;
    letter-spacing: var(--u-track-mono);
    text-transform: uppercase;
    color: var(--u-muted);
}

.wa-fleet__title {
    margin: 0 0 var(--u-s2);
    font-size: var(--u-t-title);
    font-weight: 300;
    letter-spacing: var(--u-track-title);
    line-height: var(--u-lh-display);
    color: var(--u-white);
}

.wa-fleet__lead {
    margin: 0;
    max-width: 52ch;
    font-size: var(--u-t-lead);
    line-height: 1.6;
    color: var(--u-light);
}

/* ---- the map box: percentage anchors resolve against this ------------ */
.wa-map {
    position: relative;
    min-height: var(--wa-map-h);
    margin-top: var(--u-s6);
    border-top: 1px solid var(--u-line-1);
    padding-top: var(--u-s5);
}

/* ---- hairline command paths ------------------------------------------ */
.wa-map__links {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.wa-link {
    fill: none;
    stroke: var(--u-line-2);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    opacity: 0.55;
    transition: opacity var(--u-d-micro) var(--wa-ease),
                stroke var(--u-d-micro) var(--wa-ease);
}
/* GENESIS cluster edges read one step stronger */
.wa-link--hub { stroke: var(--u-line-3); opacity: 0.7; }

.wa-link.is-lit {
    stroke: var(--wa-accent);
    opacity: 0.9;
}

.wa-link-pulse {
    fill: none;
    stroke: var(--wa-accent);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 1.6 98.4;
    vector-effect: non-scaling-stroke;
    opacity: 0.7;
    animation: wa-travel 14s linear infinite;
    animation-delay: calc(var(--i) * -1.4s);
}

/* ---- a project object: a real button on the void, never a card ------- */
.wa-obj {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--w);
    min-width: 168px;
    min-height: var(--u-tap);
    z-index: 1;
    display: block;
    margin: 0;
    padding: 0 var(--u-s2) 0 var(--u-s3);
    background: none;
    border: 0;
    text-align: left;
    font-family: inherit;
    color: var(--u-light);
    cursor: pointer;
    opacity: calc(0.62 + var(--d) * 0.38);
    transform: translate3d(calc(var(--wa-px) * var(--d) * 1px),
                           calc(var(--wa-py) * var(--d) * 1px), 0)
               scale(var(--s, 1));
    transition: transform var(--u-d-micro-lg) var(--wa-ease),
                opacity var(--u-d-micro-lg) var(--wa-ease);
}

/* the node marker — the exact point the command paths connect to */
.wa-obj::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--u-silver);
    transition: background var(--u-d-micro) var(--wa-ease),
                box-shadow var(--u-d-micro) var(--wa-ease);
}

.wa-obj--hub::before { background: var(--wa-accent); }

.wa-obj:focus-visible {
    outline: 1px solid var(--u-pure);
    outline-offset: 10px;
}

.wa-obj__name {
    display: block;
    font-weight: 400;
    letter-spacing: var(--u-track-title);
    line-height: 1.22;
    color: var(--u-white);
    /* authored copy — wraps, never truncates */
    overflow-wrap: break-word;
}

.wa-obj--hub  .wa-obj__name { font-size: 24px; }
.wa-obj--lead .wa-obj__name { font-size: 19px; }
.wa-obj--sub  .wa-obj__name { font-size: 17px; }

.wa-obj__meta {
    display: flex;
    align-items: center;
    gap: var(--u-s2);
    margin-top: var(--u-s1);
    font-family: var(--u-font-mono);
    font-size: var(--u-t-micro);
    font-weight: 500;
    letter-spacing: var(--u-track-mono);
}

/* status: always the WORD plus the colour, never colour alone */
.wa-chip { color: var(--u-muted); }
.wa-chip--live         { color: var(--u-status-live); }
.wa-chip--private      { color: var(--u-status-private); }
.wa-chip--open         { color: var(--u-status-open); }
.wa-chip--experimental { color: var(--u-status-experimental); }

.wa-obj__idx {
    margin-left: auto;
    color: var(--u-silver);
    font-variant-numeric: tabular-nums;
}

.wa-obj__blurb {
    position: absolute;            /* out of flow: hover never reflows the map */
    left: var(--u-s3);
    right: var(--u-s2);
    top: 100%;
    margin-top: var(--u-s1);
    font-size: 16px;
    line-height: 1.5;
    color: var(--u-light);
    opacity: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: opacity var(--u-d-micro) var(--wa-ease);
    pointer-events: none;
}

/* ---- pointer-only affordances ---------------------------------------- */
@media (hover: hover) and (pointer: fine) {
    .wa-obj:hover { --s: 1.035; opacity: 1; }
    .wa-obj:hover::before {
        background: var(--wa-accent);
        box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.12);
    }
    .wa-obj:hover .wa-obj__blurb { opacity: 1; }
}

.wa-obj:focus-visible { --s: 1.035; opacity: 1; }
.wa-obj:focus-visible::before {
    background: var(--wa-accent);
    box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.12);
}
.wa-obj:focus-visible .wa-obj__blurb { opacity: 1; }

/* ============================================================================
   4. RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
    /* less spatial complexity: tighter objects, quieter pulses.
       The entity and the five-node network are untouched. */
    .wa-fleet { --wa-map-h: 1000px; }
    .wa-obj { min-width: 150px; padding-left: var(--u-s2); }
    .wa-obj::before { width: 6px; height: 6px; }
    .wa-obj--hub  .wa-obj__name { font-size: 21px; }
    .wa-obj--lead .wa-obj__name { font-size: 17px; }
    .wa-obj--sub  .wa-obj__name { font-size: 16px; }
    .wa-obj__blurb { left: var(--u-s2); }
    .wa-link-pulse { display: none; }
}

@media (max-width: 768px) {
    /* the map becomes full-width rows on hairlines — still not cards.
       DOM order already equals reading order, so tab order is unchanged. */
    .wa-map {
        min-height: 0;
        margin-top: var(--u-s5);
        padding-top: 0;
        border-top: 0;
    }

    .wa-map__links { display: none; }

    .wa-obj {
        position: static;
        width: 100%;
        min-width: 0;
        padding: var(--u-s3) 0 var(--u-s3) var(--u-s3);
        border-top: 1px solid var(--u-line-1);
        opacity: 1;
        transform: none;
    }

    .wa-obj::before { top: calc(var(--u-s3) + 5px); }

    .wa-obj__name,
    .wa-obj--hub .wa-obj__name,
    .wa-obj--lead .wa-obj__name,
    .wa-obj--sub .wa-obj__name { font-size: 18px; }

    /* no hover on touch: the blurb is simply always readable */
    .wa-obj__blurb {
        position: static;
        opacity: 1;
        left: auto;
        right: auto;
        margin-top: var(--u-s1);
        padding-right: var(--u-s2);
    }

    .wa-fleet__lead { font-size: var(--u-t-body); }
}

@media (max-width: 420px) {
    .wa-fleet__title { font-size: clamp(28px, 9vw, 36px); }
    .wa-obj { padding-left: var(--u-s3); }
}

/* ============================================================================
   5. REDUCED MOTION — one static composed frame. The network is already
   drawn and labelled; the fleet is a static layout. Everything stays
   reachable and readable.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .wa-chest,
    .wa-head-bob,
    .wa-finger,
    .wa-glyph,
    .wa-eye-hot,
    .wa-eye-ring,
    .wa-core-hot,
    .wa-core-ring,
    .wa-node-token,
    .wa-edge-pulse,
    .wa-link-pulse { animation: none !important; }

    .wa-glyphs,
    .wa-edge-pulse,
    .wa-link-pulse { display: none; }

    .wa-eye-hot,
    .wa-core-hot { opacity: 1; }
    .wa-eye-ring { opacity: 0.5; }
    .wa-core-ring { opacity: 0.45; }

    /* the five-node loop is composed, drawn and labelled up front */
    .wa-edge { stroke-dashoffset: 0; opacity: 0.55; }
    .wa-node { opacity: 1; }
    .wa-node-token { opacity: 0.7; }

    .wa-obj {
        transform: none !important;
        opacity: 1;
    }
    .wa-obj__blurb { opacity: 1; }
}