/* ── 10 · PEOPLE — MLP DIAGRAM ──
   The lab roster drawn as a neural network: layers, nodes and the keyword
   ring that opens on hover.

   Part of the numbered set in css/ — the sheets are one stylesheet cut into
   pieces and index.html links them in this order. Order is the cascade: a
   rule here loses to the same-specificity rule in any later file. */

/* ── MLP container ── */
#people-grid {
    position: relative;
    width: var(--content-inline-size);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-left: 0;
}

/* ── Layers ── */
.mlp-layer {
    /* Ink for the vertical role label and the member names. */
    --layer-ink: rgba(17, 17, 17, 0.42);
    --layer-ink-strong: #111;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 2.5rem 0;
    border-radius: 0;
    background: none;
    opacity: 0;
    transform: translateY(24px);
    will-change: opacity, transform;
    transition:
        opacity 0.6s ease,
        transform 0.6s ease;
    transition-delay: calc(var(--layer-index, 0) * 0.15s + 0.15s);
}

.mlp-network.is-visible .mlp-layer {
    opacity: 1;
    transform: translateY(0);
}

/* category label — vertical text at the left edge of the band */
.mlp-layer__label {
    position: absolute;
    left: clamp(0.75rem, 3vw, 2.5rem);
    top: 50%;
    transform: translateY(-50%) rotate(180deg);
    writing-mode: vertical-lr;
    pointer-events: none;
    z-index: 1;
}

.mlp-layer__role {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--layer-ink);
    text-shadow: none;
    white-space: nowrap;
}

.mlp-layer__nodes {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    flex: 1;
    width: 100%;
    padding: 0 clamp(0.75rem, 3vw, 2.5rem);
    gap: 2rem clamp(1.2rem, 5vw, 4rem);
}

/* ── Nodes ── */
.mlp-node {
    /* The keyword ring's SVG geometry is authored against a 190/110 ratio to
       the avatar, so the two sizes move together. */
    --mlp-avatar-size: 156px;
    --mlp-keyword-size: 270px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: clamp(11rem, 17vw, 14rem);
    transition:
        transform 0.3s ease,
        opacity 0.35s ease;
}

.mlp-node:hover,
.mlp-node.is-active {
    transform: scale(1.05);
    z-index: 10;
}

.mlp-node__ring {
    position: relative;
    z-index: 2;
    width: var(--mlp-avatar-size);
    height: var(--mlp-avatar-size);
    border-radius: 50%;
    padding: 0;
    background: transparent;
    box-shadow: none;
    transition:
        padding 0.35s ease,
        box-shadow 0.35s ease,
        background 0.35s ease;
}

.mlp-node:hover .mlp-node__ring,
.mlp-node.is-active .mlp-node__ring {
    padding: 4px;
    background: var(--node-color, rgba(170, 85, 255, 0.7));
    box-shadow:
        0 0 20px color-mix(in srgb, var(--node-color, rgba(170, 85, 255, 0.7)) 50%, transparent),
        0 0 40px color-mix(in srgb, var(--node-color, rgba(170, 85, 255, 0.7)) 15%, transparent);
}

.mlp-node__avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: #e8e7e2;
    display: block;
}

/* ripple pulse behind node — GPU-composited */
.mlp-node__pulse {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 0;
    width: var(--mlp-avatar-size);
    height: var(--mlp-avatar-size);
    translate: -50% 0;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--node-color, rgba(170, 85, 255, 0.94)) 25%, transparent);
    animation: mlp-node-pulse 5s ease-out infinite;
    pointer-events: none;
    will-change: transform, opacity;
}

@keyframes mlp-node-pulse {
    0% {
        scale: 1;
        opacity: 0.3;
    }
    100% {
        scale: 2;
        opacity: 0;
    }
}

.mlp-node__name {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.84rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--layer-ink);
    text-align: center;
    max-width: 13rem;
    white-space: normal;
    transition: color 0.3s ease;
}

.mlp-node:hover .mlp-node__name,
.mlp-node.is-active .mlp-node__name {
    color: var(--layer-ink-strong);
}

/* ── The open seat ──
   An empty level renders as one node that is nobody — the section's own
   no-avatar silhouette and "You?" — leading to that level's step of the Join
   rail. people.js builds it, join.js catches the click.

   **This rule is deliberately the whole of its styling.** It is a `.mlp-node`
   in every other respect: same box, same ring, same pulse, same name, same
   hover. An earlier pass gave the seat an italic accent-coloured name, a faded
   avatar that came up on hover, and a focus ring of its own, and all of it was
   the seat insisting it was a special kind of node when the empty row already
   says so. Anything added here should have to justify not being a member node.

   What is left is the one real difference: it is an `<a>` where every other
   node is a `<div>`, which is what buys middle-click, "copy link address" and
   a keyboard tab stop — and the anchor's own underline and colour are what
   have to be undone for it to look like the rest. Focus is the browser's
   default ring, as it is everywhere else on this site. */
.mlp-node--seat {
    text-decoration: none;
    color: inherit;
}

/* ── Keyword ring (3 curved slots, shown on hover) ── */
.mlp-node__keyword-ring {
    position: absolute;
    top: calc((var(--mlp-avatar-size) - var(--mlp-keyword-size)) / 2);
    left: 50%;
    width: var(--mlp-keyword-size);
    height: var(--mlp-keyword-size);
    overflow: visible;
    transform: translateX(-50%) scale(0.82);
    transform-origin: center center;
    pointer-events: none;
    opacity: 0;
    transition:
        opacity 0.28s ease,
        transform 0.28s ease;
    z-index: 1;
}

.mlp-node:hover .mlp-node__keyword-ring,
.mlp-node.is-active .mlp-node__keyword-ring {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

.mlp-keyword-disc {
    fill: var(--node-color, rgba(170, 85, 255, 0.94));
    filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.15));
}

.mlp-keyword-separator {
    fill: rgba(255, 255, 255, 0.98);
}

.mlp-keyword-text {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 600;
    letter-spacing: 0.08em;
    fill: rgba(255, 255, 255, 0.98);
}

/* hide the old info card entirely — replaced by disc */
.mlp-node__info {
    display: none;
}