/*
 * =========================================================
 * i85.net Texture Library
 * =========================================================
 *
 * Atmospheres control color and lighting.
 * Textures add subtle visual personality.
 *
 * Textures should remain decorative, restrained, and reusable.
 */


/* =========================================================
   SHARED TEXTURE BEHAVIOR
   ========================================================= */

.i85-texture-network {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.i85-texture-network > * {
    position: relative;
    z-index: 2;
}


/* =========================================================
   NETWORK TOPOLOGY
   Connected nodes, routing paths, and infrastructure rings.
   ========================================================= */

.i85-texture-network::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 0;

    pointer-events: none;

    background-image:

        /* Glowing network nodes */
        radial-gradient(
            circle at 9% 25%,
            rgba(98, 221, 255, 0.44) 0 2px,
            rgba(98, 221, 255, 0.12) 3px,
            transparent 8px
        ),
        radial-gradient(
            circle at 25% 67%,
            rgba(114, 155, 255, 0.40) 0 2px,
            rgba(114, 155, 255, 0.11) 3px,
            transparent 8px
        ),
        radial-gradient(
            circle at 42% 34%,
            rgba(98, 221, 255, 0.36) 0 2px,
            rgba(98, 221, 255, 0.09) 3px,
            transparent 8px
        ),
        radial-gradient(
            circle at 61% 73%,
            rgba(126, 142, 255, 0.38) 0 2px,
            rgba(126, 142, 255, 0.10) 3px,
            transparent 8px
        ),
        radial-gradient(
            circle at 78% 29%,
            rgba(98, 221, 255, 0.42) 0 2px,
            rgba(98, 221, 255, 0.11) 3px,
            transparent 8px
        ),
        radial-gradient(
            circle at 92% 62%,
            rgba(126, 142, 255, 0.34) 0 2px,
            rgba(126, 142, 255, 0.08) 3px,
            transparent 8px
        ),

        /* Faint topology rings */
        radial-gradient(
            circle at 78% 29%,
            transparent 0 42px,
            rgba(98, 221, 255, 0.045) 43px 44px,
            transparent 45px 78px,
            rgba(98, 221, 255, 0.025) 79px 80px,
            transparent 81px
        ),
        radial-gradient(
            circle at 25% 67%,
            transparent 0 52px,
            rgba(126, 142, 255, 0.035) 53px 54px,
            transparent 55px 94px,
            rgba(126, 142, 255, 0.020) 95px 96px,
            transparent 97px
        ),

        /* Horizontal routing paths */
        linear-gradient(
            12deg,
            transparent 0 18%,
            rgba(93, 153, 225, 0.048) 18.15% 18.35%,
            transparent 18.5% 100%
        ),
        linear-gradient(
            -9deg,
            transparent 0 43%,
            rgba(70, 217, 255, 0.043) 43.15% 43.35%,
            transparent 43.5% 100%
        ),
        linear-gradient(
            7deg,
            transparent 0 68%,
            rgba(126, 142, 255, 0.040) 68.15% 68.35%,
            transparent 68.5% 100%
        ),

        /* Vertical routing paths */
        linear-gradient(
            82deg,
            transparent 0 27%,
            rgba(70, 217, 255, 0.038) 27.15% 27.35%,
            transparent 27.5% 100%
        ),
        linear-gradient(
            96deg,
            transparent 0 59%,
            rgba(102, 145, 226, 0.040) 59.15% 59.35%,
            transparent 59.5% 100%
        );

    opacity: 0.56;

    mask-image:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.92),
            rgba(0, 0, 0, 0.62) 48%,
            rgba(0, 0, 0, 0.84)
        );

    -webkit-mask-image:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.92),
            rgba(0, 0, 0, 0.62) 48%,
            rgba(0, 0, 0, 0.84)
        );
}


/*
 * Soft edge vignette keeps the topology from competing with
 * headings, cards, and normal reading text.
 */
.i85-texture-network::after {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 1;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at center,
            transparent 25%,
            rgba(5, 8, 18, 0.07) 68%,
            rgba(5, 8, 18, 0.25) 100%
        );
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 760px) {
    .i85-texture-network::before {
        opacity: 0.42;
        background-position: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .i85-texture-network::before,
    .i85-texture-network::after {
        transition: none !important;
    }
}


/* BEGIN I85 STORY MOTIFS */


/* =========================================================
   SHARED STORY-TEXTURE BEHAVIOR
   ========================================================= */

.i85-texture-storage,
.i85-texture-workshop,
.i85-texture-history {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.i85-texture-storage > *,
.i85-texture-workshop > *,
.i85-texture-history > * {
    position: relative;
    z-index: 2;
}


/* =========================================================
   STORAGE / BACKUP REPLICATION
   Concentric replication rings, data waves, and RAID-like
   parallel paths.
   ========================================================= */

.i85-texture-storage::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 0;

    pointer-events: none;

    background-image:

        /* Main replication rings */
        radial-gradient(
            circle at 88% 24%,
            transparent 0 52px,
            rgba(79, 211, 151, 0.105) 53px 54px,
            transparent 55px 92px,
            rgba(79, 211, 151, 0.065) 93px 94px,
            transparent 95px 134px,
            rgba(79, 211, 151, 0.035) 135px 136px,
            transparent 137px
        ),

        /* Secondary backup target */
        radial-gradient(
            circle at 14% 82%,
            transparent 0 38px,
            rgba(70, 217, 255, 0.065) 39px 40px,
            transparent 41px 72px,
            rgba(70, 217, 255, 0.032) 73px 74px,
            transparent 75px
        ),

        /* Replication nodes */
        radial-gradient(
            circle at 88% 24%,
            rgba(185, 255, 218, 0.72) 0 2px,
            rgba(79, 211, 151, 0.18) 3px,
            transparent 9px
        ),
        radial-gradient(
            circle at 61% 62%,
            rgba(98, 230, 174, 0.45) 0 2px,
            rgba(79, 211, 151, 0.10) 3px,
            transparent 8px
        ),
        radial-gradient(
            circle at 14% 82%,
            rgba(111, 224, 255, 0.42) 0 2px,
            rgba(70, 217, 255, 0.09) 3px,
            transparent 8px
        ),

        /* Parallel storage/data paths */
        repeating-linear-gradient(
            11deg,
            transparent 0 25px,
            rgba(78, 190, 145, 0.022) 26px,
            rgba(78, 190, 145, 0.022) 27px,
            transparent 28px 52px
        ),

        /* Directional replication trails */
        linear-gradient(
            23deg,
            transparent 0 47%,
            rgba(79, 211, 151, 0.052) 47.15% 47.35%,
            transparent 47.5% 100%
        ),
        linear-gradient(
            -17deg,
            transparent 0 67%,
            rgba(70, 217, 255, 0.035) 67.15% 67.35%,
            transparent 67.5% 100%
        );

    opacity: 0.78;

    -webkit-mask-image:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.56),
            rgba(0, 0, 0, 0.80) 54%,
            rgba(0, 0, 0, 0.98)
        );

    mask-image:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.56),
            rgba(0, 0, 0, 0.80) 54%,
            rgba(0, 0, 0, 0.98)
        );
}


/* =========================================================
   WORKSHOP / TECHNICAL DRAFTING
   CAD-style guides, measurement ticks, drafting circles, and
   diagonal construction lines.
   ========================================================= */

.i85-texture-workshop::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 0;

    pointer-events: none;

    background-image:

        /* Drafting circles */
        radial-gradient(
            circle at 12% 18%,
            transparent 0 46px,
            rgba(232, 168, 96, 0.075) 47px 48px,
            transparent 49px 84px,
            rgba(232, 168, 96, 0.035) 85px 86px,
            transparent 87px
        ),
        radial-gradient(
            circle at 91% 76%,
            transparent 0 62px,
            rgba(204, 139, 72, 0.060) 63px 64px,
            transparent 65px 112px,
            rgba(204, 139, 72, 0.028) 113px 114px,
            transparent 115px
        ),

        /* Horizontal measurement guides */
        repeating-linear-gradient(
            0deg,
            transparent 0 43px,
            rgba(218, 157, 91, 0.027) 44px,
            transparent 45px 88px
        ),

        /* Vertical measurement guides */
        repeating-linear-gradient(
            90deg,
            transparent 0 43px,
            rgba(218, 157, 91, 0.023) 44px,
            transparent 45px 88px
        ),

        /* Fine diagonal hatch */
        repeating-linear-gradient(
            135deg,
            transparent 0 31px,
            rgba(222, 157, 87, 0.020) 32px,
            rgba(222, 157, 87, 0.020) 33px,
            transparent 34px 65px
        ),

        /* Construction axes */
        linear-gradient(
            8deg,
            transparent 0 23%,
            rgba(238, 175, 103, 0.050) 23.1% 23.25%,
            transparent 23.4% 100%
        ),
        linear-gradient(
            -6deg,
            transparent 0 72%,
            rgba(204, 139, 72, 0.045) 72.1% 72.25%,
            transparent 72.4% 100%
        ),

        /* Reference points */
        radial-gradient(
            circle at 12% 18%,
            rgba(255, 207, 148, 0.42) 0 2px,
            transparent 7px
        ),
        radial-gradient(
            circle at 91% 76%,
            rgba(237, 171, 98, 0.34) 0 2px,
            transparent 7px
        );

    opacity: 0.69;

    -webkit-mask-image:
        radial-gradient(
            ellipse at center,
            rgba(0, 0, 0, 0.90),
            rgba(0, 0, 0, 0.58) 76%,
            rgba(0, 0, 0, 0.28)
        );

    mask-image:
        radial-gradient(
            ellipse at center,
            rgba(0, 0, 0, 0.90),
            rgba(0, 0, 0, 0.58) 76%,
            rgba(0, 0, 0, 0.28)
        );
}


/* =========================================================
   HISTORY / JOURNEY
   Constellation points, orbital paths, and faint historical
   trails.
   ========================================================= */

.i85-texture-history::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 0;

    pointer-events: none;

    background-image:

        /* Constellation points */
        radial-gradient(
            circle at 7% 24%,
            rgba(211, 238, 255, 0.50) 0 1px,
            transparent 4px
        ),
        radial-gradient(
            circle at 18% 72%,
            rgba(170, 211, 255, 0.35) 0 1px,
            transparent 4px
        ),
        radial-gradient(
            circle at 34% 35%,
            rgba(218, 239, 255, 0.42) 0 1px,
            transparent 4px
        ),
        radial-gradient(
            circle at 53% 79%,
            rgba(169, 187, 255, 0.38) 0 1px,
            transparent 4px
        ),
        radial-gradient(
            circle at 69% 28%,
            rgba(201, 233, 255, 0.44) 0 1px,
            transparent 4px
        ),
        radial-gradient(
            circle at 86% 66%,
            rgba(176, 200, 255, 0.38) 0 1px,
            transparent 4px
        ),
        radial-gradient(
            circle at 95% 18%,
            rgba(221, 243, 255, 0.40) 0 1px,
            transparent 4px
        ),

        /* Orbital paths */
        radial-gradient(
            ellipse at 70% 38%,
            transparent 0 76px,
            rgba(155, 205, 255, 0.050) 77px 78px,
            transparent 79px 128px,
            rgba(127, 140, 255, 0.026) 129px 130px,
            transparent 131px
        ),
        radial-gradient(
            ellipse at 20% 72%,
            transparent 0 54px,
            rgba(155, 205, 255, 0.036) 55px 56px,
            transparent 57px 96px,
            rgba(127, 140, 255, 0.020) 97px 98px,
            transparent 99px
        ),

        /* Historical trails */
        linear-gradient(
            5deg,
            transparent 0 24%,
            rgba(155, 205, 255, 0.042) 24.1% 24.25%,
            transparent 24.4% 100%
        ),
        linear-gradient(
            -7deg,
            transparent 0 58%,
            rgba(127, 140, 255, 0.038) 58.1% 58.25%,
            transparent 58.4% 100%
        ),
        linear-gradient(
            3deg,
            transparent 0 82%,
            rgba(182, 221, 255, 0.030) 82.1% 82.25%,
            transparent 82.4% 100%
        );

    opacity: 0.76;

    -webkit-mask-image:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.93),
            rgba(0, 0, 0, 0.50)
        );

    mask-image:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.93),
            rgba(0, 0, 0, 0.50)
        );
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 760px) {
    .i85-texture-storage::before,
    .i85-texture-workshop::before,
    .i85-texture-history::before {
        opacity: 0.43;
    }
}

/* END I85 STORY MOTIFS */


/* BEGIN I85 LONG HAUL WATERMARK */

/*
 * Motherboard / PCB trace watermark for Built for the Long Haul.
 * Decorative only; normal layout dimensions remain untouched.
 */

.behind-network-page .bn-philosophy-grid {
    position: relative;
    isolation: isolate;
}

.behind-network-page .bn-philosophy-grid > * {
    position: relative;
    z-index: 2;
}

.behind-network-page .bn-philosophy-grid::after {
    content: "";

    position: absolute;
    top: 50%;
    right: clamp(0px, 2vw, 28px);
    z-index: 1;

    width: clamp(260px, 31vw, 470px);
    height: clamp(210px, 24vw, 330px);

    transform: translateY(-50%);

    pointer-events: none;
    user-select: none;

    /*
     * Large processor socket, solder pads, circuit traces,
     * board grid, and secondary component rings.
     */
    background-image:

        /* Main processor/socket rings */
        radial-gradient(
            circle at 70% 48%,
            transparent 0 42px,
            rgba(99, 211, 255, 0.105) 43px 45px,
            transparent 46px 64px,
            rgba(127, 140, 255, 0.075) 65px 67px,
            transparent 68px
        ),

        /* Processor core */
        radial-gradient(
            circle at 70% 48%,
            rgba(193, 244, 255, 0.15) 0 4px,
            rgba(70, 217, 255, 0.075) 5px 17px,
            transparent 18px
        ),

        /* Secondary board components */
        radial-gradient(
            circle at 24% 25%,
            rgba(188, 237, 255, 0.26) 0 2px,
            rgba(70, 217, 255, 0.07) 3px,
            transparent 8px
        ),
        radial-gradient(
            circle at 38% 76%,
            rgba(171, 186, 255, 0.23) 0 2px,
            rgba(127, 140, 255, 0.065) 3px,
            transparent 8px
        ),
        radial-gradient(
            circle at 91% 18%,
            rgba(195, 241, 255, 0.22) 0 2px,
            rgba(70, 217, 255, 0.06) 3px,
            transparent 8px
        ),
        radial-gradient(
            circle at 93% 82%,
            rgba(176, 189, 255, 0.20) 0 2px,
            rgba(127, 140, 255, 0.055) 3px,
            transparent 8px
        ),

        /* Routed PCB traces */
        linear-gradient(
            18deg,
            transparent 0 25%,
            rgba(70, 217, 255, 0.078) 25.1% 25.45%,
            transparent 25.55% 100%
        ),
        linear-gradient(
            -14deg,
            transparent 0 41%,
            rgba(127, 140, 255, 0.068) 41.1% 41.45%,
            transparent 41.55% 100%
        ),
        linear-gradient(
            8deg,
            transparent 0 63%,
            rgba(70, 217, 255, 0.08) 63.1% 63.4%,
            transparent 63.5% 100%
        ),
        linear-gradient(
            84deg,
            transparent 0 29%,
            rgba(104, 177, 231, 0.085) 29.1% 29.4%,
            transparent 29.5% 100%
        ),
        linear-gradient(
            96deg,
            transparent 0 76%,
            rgba(127, 140, 255, 0.075) 76.1% 76.4%,
            transparent 76.5% 100%
        ),

        /* Fine motherboard grid */
        linear-gradient(
            rgba(103, 157, 218, 0.034) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(103, 157, 218, 0.034) 1px,
            transparent 1px
        );

    background-size:
        auto,
        auto,
        auto,
        auto,
        auto,
        auto,
        auto,
        auto,
        auto,
        auto,
        auto,
        26px 26px,
        26px 26px;

    background-position: center;
    background-repeat:
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        repeat,
        repeat;

    opacity: 0.72;

    filter:
        drop-shadow(0 0 14px rgba(70, 217, 255, 0.045));

    /*
     * Fade the design near the paragraph copy and toward the
     * outer panel edges.
     */
    -webkit-mask-image:
        radial-gradient(
            ellipse at 70% 48%,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 0.86) 46%,
            rgba(0, 0, 0, 0.28) 78%,
            transparent 100%
        );

    mask-image:
        radial-gradient(
            ellipse at 70% 48%,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 0.86) 46%,
            rgba(0, 0, 0, 0.28) 78%,
            transparent 100%
        );
}

@media (max-width: 900px) {
    .behind-network-page .bn-philosophy-grid::after {
        right: -20px;
        width: 300px;
        height: 230px;
        opacity: 0.62;
    }
}

@media (max-width: 680px) {
    .behind-network-page .bn-philosophy-grid::after {
        display: none;
    }
}

/* END I85 LONG HAUL WATERMARK */