/* =====================================================================
   Hero system network.

   Sits absolutely inside the hero, so it changes nothing about the
   existing text layout. The hero is already position:relative and
   overflow:hidden, which is what makes this safe.
   ===================================================================== */

.hero__viz {
    position: absolute;
    /* Sits a little below the top of the hero so the city reads as
       standing under the headline rather than crowding it. */
    top: 24px;
    right: 0;
    bottom: 30px;
    width: min(58%, 980px);
    z-index: 0;
    pointer-events: none;

    /* Fade the left edge so the network dissolves behind the copy
       instead of ending on a hard vertical line. */
    -webkit-mask-image: linear-gradient(to right,
        transparent 0%, rgba(0, 0, 0, 0.35) 18%, #000 46%);
    mask-image: linear-gradient(to right,
        transparent 0%, rgba(0, 0, 0, 0.35) 18%, #000 46%);
}

.hero__canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* Text and status bar must sit above the canvas. */
.hero > .status-bar,
.hero > .wrap {
    position: relative;
    z-index: 2;
}

/* Below this width the copy fills the hero, so there is no space left
   for the network and it would only get in the way. */
@media (max-width: 1180px) {
    .hero__viz { display: none; }
}