/* A cartographic field connects the intelligence story to local places. */
#intelligence {
    --intelligence-ink: var(--brand-neutral);
    --intelligence-muted: color-mix(in srgb, var(--brand-neutral) 74%, var(--brand-navy));
    --intelligence-rule: color-mix(in srgb, var(--brand-neutral) 18%, transparent);
    --rule: 1px solid var(--intelligence-rule);
    background: var(--brand-navy);
    color: var(--intelligence-ink);
    overflow: hidden;
    isolation: isolate;
}
#intelligence > .shell { position: relative; z-index: 1; }
#intelligence .sec-head { max-width: 940px; }
#intelligence .sec-no { color: color-mix(in srgb, var(--brand-slate) 80%, var(--brand-neutral)); }
#intelligence h2,
#intelligence h3 { color: var(--intelligence-ink); }
#intelligence .sec-sub,
#intelligence .sec-tag,
#intelligence .ledger-cell p { color: var(--intelligence-muted); }
#intelligence .sec-sub { max-width: 650px; }
#intelligence .ledger-grid {
    background: color-mix(in srgb, var(--brand-navy) 84%, transparent);
    border-color: var(--intelligence-rule);
}
#intelligence .ledger-cell:hover {
    background: color-mix(in srgb, var(--brand-neutral) 3%, transparent);
}
#intelligence .ledger-grid::after {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 7px var(--brand-navy), 0 0 24px color-mix(in srgb, var(--brand-slate) 38%, transparent);
}
#intelligence .intelligence-terrain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
    mask-image: linear-gradient(180deg, transparent, var(--brand-navy) 12%, var(--brand-navy) 85%, transparent);
}
.intelligence-terrain svg { width: 100%; height: 100%; }
.intelligence-contours {
    fill: none;
    stroke: var(--brand-neutral);
    stroke-width: .8;
    opacity: .14;
}
.intelligence-contours use:nth-child(5n) { stroke-width: 1.3; opacity: .8; }
.intelligence-route {
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.5;
    stroke-linecap: round;
    opacity: .72;
}
.intelligence-beacon { fill: var(--accent); }
.intelligence-beacon-halo { fill: var(--accent); opacity: .1; }
.intelligence-beacon-ring { fill: none; stroke: var(--accent); stroke-width: 1; opacity: .45; }
.intelligence-terrain-veil { fill: url(#intelligence-quiet-center); }
.intelligence-quiet-stop { stop-color: var(--brand-navy); }
.intelligence-warm-stop { stop-color: var(--accent); }
.intelligence-warmth { fill: url(#intelligence-warmth); opacity: .13; }
@media (prefers-reduced-motion: no-preference) {
    .intelligence-terrain.revealed .intelligence-route {
        animation: intelligence-trace 5s cubic-bezier(.2,.65,.25,1) both;
    }
    .intelligence-terrain.revealed .intelligence-beacons {
        animation: intelligence-resolve 3s ease-out both;
    }
}
@keyframes intelligence-trace {
    from { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
    to { stroke-dasharray: 1; stroke-dashoffset: 0; opacity: .72; }
}
@keyframes intelligence-resolve {
    from { opacity: 0; }
    to { opacity: 1; }
}
@media (max-width: 900px) {
    #intelligence .intelligence-terrain { inset-inline: -35%; }
    .intelligence-contours { opacity: .1; }
    #intelligence .ledger-grid { background: color-mix(in srgb, var(--brand-navy) 92%, transparent); }
}