/*
 * i85.net Reusable Atmosphere System
 *
 * Extracted from Behind the Network.
 * Keep shared section lighting, atmosphere, border, timeline,
 * eyebrow, and chapter-divider treatments in this file.
 */

/* BEGIN I85 FINAL ATMOSPHERE PASS */

/* =========================================================
   SECTION EYEBROWS / SUBHEADINGS
   ========================================================= */

.behind-network-page .bn-eyebrow,
.behind-network-page .bn-kicker {
    font-size: clamp(0.9rem, 0.85vw, 1rem) !important;
    font-weight: 900 !important;
    letter-spacing: 0.175em !important;
    line-height: 1.35 !important;
}


/* =========================================================
   STRONGER GLOBAL PANEL BORDERS
   Match the more confident homepage treatment.
   ========================================================= */

.behind-network-page .bn-section,
.behind-network-page .bn-foundation-card,
.behind-network-page .bn-gallery-photo,
.behind-network-page .bn-closing {
    border-width: 2px !important;
}

.behind-network-page .bn-section {
    border-color: rgba(127, 140, 255, 0.27) !important;

    box-shadow:
        0 22px 58px rgba(0, 0, 0, 0.30),
        0 0 28px rgba(88, 104, 255, 0.055),
        inset 0 0 0 1px rgba(255, 255, 255, 0.012) !important;
}

.behind-network-page .bn-foundation-card {
    border-color: rgba(127, 140, 255, 0.25) !important;
}

.behind-network-page .bn-gallery-photo {
    border-color: rgba(151, 170, 255, 0.27) !important;
}


/* =========================================================
   BUILT FOR THE LONG HAUL
   Add subtle technical depth without introducing another image.
   ========================================================= */

.behind-network-page .bn-philosophy {
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            rgba(17, 23, 40, 0.97),
            rgba(7, 11, 23, 0.985)
        ) !important;
}

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

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            rgba(111, 136, 205, 0.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(111, 136, 205, 0.045) 1px,
            transparent 1px
        ),
        radial-gradient(
            circle at 12% 22%,
            rgba(70, 217, 255, 0.12),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 72%,
            rgba(127, 140, 255, 0.09),
            transparent 32%
        );

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

    opacity: 0.76;
}

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

    position: absolute;
    top: -80px;
    right: -120px;

    width: 420px;
    height: 420px;

    pointer-events: none;

    border:
        1px solid rgba(70, 217, 255, 0.075);
    border-radius: 50%;

    box-shadow:
        0 0 0 44px rgba(70, 217, 255, 0.018),
        0 0 0 88px rgba(127, 140, 255, 0.012);
}

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


/* =========================================================
   SECTION ATMOSPHERES
   Small shifts in temperature rather than obvious color changes.
   ========================================================= */

/* Foundation — cool blue. */
.behind-network-page .bn-foundation-section,
.behind-network-page .bn-foundation-grid {
    --bn-section-atmosphere: rgba(72, 105, 196, 0.055);
}

.behind-network-page .bn-foundation-card {
    background:
        radial-gradient(
            circle at 25% 0%,
            var(--bn-section-atmosphere),
            transparent 52%
        ),
        linear-gradient(
            145deg,
            rgba(17, 23, 43, 0.96),
            rgba(7, 10, 21, 0.985)
        ) !important;
}

/* Paired rack/storage area — steel and resilient emerald. */
.behind-network-page
.bn-dual-story-grid
> .bn-section:first-child {
    background:
        radial-gradient(
            circle at 85% 18%,
            rgba(93, 132, 190, 0.10),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            rgba(17, 23, 39, 0.97),
            rgba(7, 10, 21, 0.99)
        ) !important;
}

.behind-network-page
.bn-dual-story-grid
> .bn-section:last-child {
    background:
        radial-gradient(
            circle at 86% 18%,
            rgba(65, 190, 132, 0.085),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            rgba(14, 25, 34, 0.97),
            rgba(6, 12, 20, 0.99)
        ) !important;

    border-color:
        rgba(93, 190, 148, 0.24) !important;
}

/* Workshop — slightly warmer graphite. */
.behind-network-page .bn-gallery-grid {
    position: relative;
}

.behind-network-page
.bn-section:has(.bn-gallery-grid) {
    background:
        radial-gradient(
            circle at 16% 12%,
            rgba(201, 139, 72, 0.075),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            rgba(25, 22, 27, 0.97),
            rgba(9, 9, 17, 0.99)
        ) !important;

    border-color:
        rgba(191, 145, 104, 0.22) !important;
}

/* Timeline — return to neutral blue-black. */
.behind-network-page .bn-timeline-section {
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(127, 140, 255, 0.065),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            rgba(15, 20, 37, 0.97),
            rgba(6, 9, 19, 0.99)
        ) !important;
}


/* =========================================================
   TIMELINE CONNECTOR
   Make the line physically meet the first and last markers.
   ========================================================= */

.behind-network-page .bn-timeline::before {
    top: 13px !important;
    left: 8px !important;
    right: 8px !important;

    height: 2px !important;

    background:
        linear-gradient(
            90deg,
            var(--bn-cyan) 0%,
            rgba(70, 217, 255, 0.72) 12%,
            rgba(127, 140, 255, 0.58) 50%,
            rgba(70, 217, 255, 0.72) 88%,
            var(--bn-cyan) 100%
        ) !important;
}

.behind-network-page .bn-timeline-marker {
    top: 6px !important;
}


/* =========================================================
   SUBTLE CHAPTER DIVIDERS
   ========================================================= */

.behind-network-page
> .bn-section:not(:last-of-type) {
    position: relative;
}

.behind-network-page
> .bn-section:not(:last-of-type):not(.bn-philosophy)::after {
    content: "";

    position: absolute;
    left: 50%;
    bottom: -28px;

    width: min(260px, 34%);
    height: 15px;

    transform: translateX(-50%);

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(127, 140, 255, 0.20) 38%,
            transparent 38%
        ),
        radial-gradient(
            circle,
            rgba(70, 217, 255, 0.72) 0 2px,
            rgba(70, 217, 255, 0.16) 3px,
            transparent 7px
        ),
        linear-gradient(
            90deg,
            transparent 62%,
            rgba(127, 140, 255, 0.20) 62%,
            transparent
        );

    background-position:
        left center,
        center center,
        right center;

    background-repeat: no-repeat;

    background-size:
        46% 1px,
        15px 15px,
        46% 1px;

    filter:
        drop-shadow(0 0 6px rgba(70, 217, 255, 0.16));
}


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

@media (max-width: 900px) {
    /*
     * :has() atmosphere enhancement is optional; the section
     * still retains its existing background where unsupported.
     */
    .behind-network-page
    > .bn-section:not(:last-of-type):not(.bn-philosophy)::after {
        bottom: -24px;
        width: min(220px, 48%);
    }
}

@media (max-width: 760px) {
    .behind-network-page .bn-eyebrow,
    .behind-network-page .bn-kicker {
        font-size: 0.84rem !important;
    }

    .behind-network-page .bn-section,
    .behind-network-page .bn-foundation-card,
    .behind-network-page .bn-gallery-photo,
    .behind-network-page .bn-closing {
        border-width: 1px !important;
    }

    .behind-network-page
    > .bn-section:not(:last-of-type):not(.bn-philosophy)::after {
        display: none;
    }
}

/* END I85 FINAL ATMOSPHERE PASS */

/* BEGIN I85 EXACT INSIDE-RACK ATMOSPHERE */
.behind-network-page .bn-photo-story {
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            rgba(17, 23, 40, 0.97),
            rgba(7, 11, 23, 0.985)
        ) !important;
}

.behind-network-page .bn-photo-story::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            rgba(111, 136, 205, 0.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(111, 136, 205, 0.045) 1px,
            transparent 1px
        ),
        radial-gradient(
            circle at 12% 22%,
            rgba(70, 217, 255, 0.12),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 72%,
            rgba(127, 140, 255, 0.09),
            transparent 32%
        );

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

    opacity: 0.76;
}

.behind-network-page .bn-photo-story::after {
    content: "";

    position: absolute;
    top: -80px;
    right: -120px;

    width: 420px;
    height: 420px;

    pointer-events: none;

    border:
        1px solid rgba(70, 217, 255, 0.075);
    border-radius: 50%;

    box-shadow:
        0 0 0 44px rgba(70, 217, 255, 0.018),
        0 0 0 88px rgba(127, 140, 255, 0.012);
}

/* Keep the actual panel contents above both decorative overlays. */
.behind-network-page .bn-photo-story > * {
    position: relative;
    z-index: 2;
}
/* END I85 EXACT INSIDE-RACK ATMOSPHERE */

/* BEGIN I85 COMMUNITY CLOSING ATMOSPHERE */

.behind-network-page .bn-closing {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;

    background:
        radial-gradient(
            circle at 17% 18%,
            rgba(255, 205, 126, 0.11) 0%,
            rgba(192, 137, 74, 0.042) 30%,
            transparent 56%
        ),
        radial-gradient(
            circle at 87% 78%,
            rgba(103, 125, 218, 0.085) 0%,
            rgba(70, 217, 255, 0.028) 34%,
            transparent 59%
        ),
        linear-gradient(
            145deg,
            rgba(20, 22, 34, 0.98) 0%,
            rgba(10, 12, 23, 0.99) 52%,
            rgba(6, 9, 18, 1) 100%
        ) !important;

    border-color: rgba(198, 169, 121, 0.22) !important;

    box-shadow:
        0 22px 52px rgba(0, 0, 0, 0.42),
        0 0 32px rgba(203, 156, 87, 0.05),
        inset 0 1px 0 rgba(255, 231, 187, 0.055),
        inset 0 0 48px rgba(112, 105, 170, 0.025) !important;
}

/*
 * Faint structural texture:
 * two diagonal line fields, plus a soft central illumination.
 */
.behind-network-page .bn-closing::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            135deg,
            rgba(255, 224, 170, 0.026) 0,
            rgba(255, 224, 170, 0.026) 1px,
            transparent 1px,
            transparent 38px
        ),
        repeating-linear-gradient(
            45deg,
            rgba(127, 140, 255, 0.018) 0,
            rgba(127, 140, 255, 0.018) 1px,
            transparent 1px,
            transparent 52px
        ),
        radial-gradient(
            ellipse at 50% 15%,
            rgba(255, 230, 184, 0.045),
            transparent 55%
        );

    mask-image:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.90),
            rgba(0, 0, 0, 0.45) 68%,
            transparent
        );

    opacity: 0.78;
    z-index: 0;
}

/* Restrained decorative ring, suggesting continuity and community. */
.behind-network-page .bn-closing::after {
    content: "";

    position: absolute;
    top: -165px;
    right: -115px;

    width: 390px;
    height: 390px;

    pointer-events: none;

    border: 1px solid rgba(255, 216, 151, 0.075);
    border-radius: 50%;

    box-shadow:
        0 0 0 42px rgba(255, 213, 143, 0.014),
        0 0 0 84px rgba(127, 140, 255, 0.012),
        0 0 48px rgba(255, 205, 126, 0.035);

    z-index: 0;
}

.behind-network-page .bn-closing .bn-closing-glow {
    position: absolute !important;
    top: -135px !important;
    left: 50% !important;

    width: min(720px, 86vw) !important;
    height: 320px !important;

    transform: translateX(-50%) !important;
    pointer-events: none !important;

    border-radius: 50% !important;

    background:
        radial-gradient(
            ellipse at center,
            rgba(255, 213, 143, 0.075) 0%,
            rgba(127, 140, 255, 0.022) 43%,
            transparent 72%
        ) !important;

    filter: blur(14px) !important;
    opacity: 0.82 !important;
    z-index: 0 !important;
}

.behind-network-page .bn-closing .bn-closing-content {
    position: relative !important;
    z-index: 2 !important;
}

/* END I85 COMMUNITY CLOSING ATMOSPHERE */

/* BEGIN I85 REMOVE FOUNDATION TOP DIVIDER */

/*
 * This divider belongs to the preceding Long Haul panel,
 * but its negative positioning makes it appear inside Foundation.
 */
.behind-network-page .bn-philosophy::after {
    display: none !important;
    content: none !important;
}

/* END I85 REMOVE FOUNDATION TOP DIVIDER */

/* BEGIN I85 REMOVE FOUNDATION TOP DIVIDER */

/*
 * Remove only the chapter divider between
 * Built for the Long Haul and The Foundation.
 */
.behind-network-page > .bn-section.bn-philosophy:not(:last-of-type)::after {
    content: none !important;
    display: none !important;
}

/* END I85 REMOVE FOUNDATION TOP DIVIDER */

/* BEGIN I85 REMOVE FOUNDATION INTERNAL DIVIDER */

/*
 * Remove only the decorative line and center dot rendered
 * by The Foundation panel's own ::after pseudo-element.
 */
.behind-network-page #foundation::after {
    content: none !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    background: none !important;
    filter: none !important;
}

/* END I85 REMOVE FOUNDATION INTERNAL DIVIDER */