/* =========================================================
   HAVEN v3 HOMEPAGE v0.1
   Page-specific presentation only.
   ========================================================= */

.homepage-v3 .page-main {
    position: relative;
    overflow: hidden;
}

.homepage-hero {
    min-height: 430px;

    background:
        linear-gradient(
            90deg,
            rgba(5, 8, 10, .96) 0%,
            rgba(5, 8, 10, .86) 39%,
            rgba(5, 8, 10, .55) 67%,
            rgba(5, 8, 10, .74) 100%
        ),
        linear-gradient(
            180deg,
            rgba(5, 8, 10, .22),
            rgba(5, 8, 10, .92)
        ),
        url("../img/haven-v3-industrial-bg.png")
        center 56% / cover no-repeat;
}

.homepage-hero-grid {
    min-height: 350px;

    display: grid;
    grid-template-columns:
        minmax(0, 1.5fr)
        minmax(260px, .7fr);

    align-items: end;
    gap: 44px;
}

.hero-copy-column {
    max-width: 760px;
}

.homepage-actions {
    margin-top: 26px;
}

.facility-record {
    padding: 20px;

    border:
        1px solid rgba(209, 104, 42, .42);

    background:
        rgba(8, 11, 14, .88);

    backdrop-filter:
        blur(8px);
}

.card-code {
    margin-bottom: 13px;

    color: var(--haven-accent);
    font-family: var(--haven-mono);
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.facility-record-list {
    margin: 0;
}

.facility-record-list > div {
    padding: 11px 0;

    display: flex;
    justify-content: space-between;
    gap: 20px;

    border-bottom:
        1px solid var(--haven-line);
}

.facility-record-list > div:last-child {
    border-bottom: 0;
}

.facility-record-list dt {
    color: var(--haven-muted);
    font-size: .78rem;
}

.facility-record-list dd {
    margin: 0;

    color: var(--haven-text);
    font-family: var(--haven-mono);
    font-weight: 700;
}

.two-column-section {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);
    gap: 24px;
}

.leader-player {
    min-width: 220px;

    display: flex;
    align-items: center;
    gap: 12px;
}

.panel-footnote {
    padding: 12px 18px;

    border-top:
        1px solid var(--haven-line);

    color: var(--haven-muted);
    font-size: .72rem;
}

.personnel-grid {
    display: grid;
    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );
    gap: 16px;
}

.personnel-card {
    min-width: 0;
    padding: 18px;

    border:
        1px solid var(--haven-line);

    background:
        linear-gradient(
            180deg,
            rgba(21, 27, 33, .98),
            rgba(12, 16, 20, .98)
        );
}

.personnel-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.personnel-card .player-name {
    display: block;
    overflow-wrap: anywhere;
}

.mini-stats {
    margin: 18px 0;

    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.mini-stats div {
    padding: 9px 8px;

    border:
        1px solid var(--haven-line);

    background:
        rgba(255, 255, 255, .018);
}

.mini-stats dt {
    color: var(--haven-muted);
    font-size: .62rem;
    text-transform: uppercase;
}

.mini-stats dd {
    margin: 5px 0 0;

    font-family: var(--haven-mono);
    font-weight: 700;
}

.text-link {
    color: var(--haven-accent);
    font-family: var(--haven-mono);
    font-size: .72rem;
    letter-spacing: .04em;
    text-decoration: none;
    text-transform: uppercase;
}

.text-link:hover {
    color: var(--haven-accent-hot);
}

.facility-strip {
    min-height: 190px;
    margin: 48px 0;

    position: relative;
    overflow: hidden;

    display: flex;
    align-items: flex-end;

    border:
        1px solid var(--haven-line);

    background:
        linear-gradient(
            180deg,
            rgba(8, 11, 14, .22),
            rgba(8, 11, 14, .88)
        ),
        linear-gradient(
            90deg,
            rgba(8, 11, 14, .75),
            rgba(8, 11, 14, .18),
            rgba(8, 11, 14, .72)
        ),
        url("../img/haven-v3-industrial-bg.png")
        center 78% / cover no-repeat;
}

.facility-strip-caption {
    width: 100%;
    padding: 18px 20px;

    background:
        rgba(8, 11, 14, .72);

    color: var(--haven-text-soft);
    font-family: var(--haven-mono);
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.department-grid {
    display: grid;
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );
    gap: 16px;
}

.maps-grid {
    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );
}

.department-card {
    min-width: 0;
    padding: 20px;

    position: relative;
    overflow: hidden;

    border:
        1px solid var(--haven-line);

    background:
        linear-gradient(
            145deg,
            rgba(21, 27, 33, .98),
            rgba(10, 14, 17, .98)
        );
}

.department-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        var(--haven-accent);
}

.department-card h3 {
    margin:
        0 0 14px;

    overflow-wrap: anywhere;
}

.department-number {
    color: var(--haven-text);
    font-family: var(--haven-mono);
    font-size: clamp(
        1.75rem,
        4vw,
        2.65rem
    );
    font-weight: 800;
}

.department-detail {
    margin-top: 8px;

    color: var(--haven-muted);
    font-size: .74rem;
}

.telemetry-notice {
    padding: 24px 26px;

    border:
        1px solid rgba(209, 104, 42, .42);

    background:
        linear-gradient(
            90deg,
            rgba(209, 104, 42, .08),
            rgba(16, 21, 26, .96) 32%
        );
}

.telemetry-notice h2 {
    margin:
        0 0 12px;
}

.telemetry-notice p {
    max-width: 900px;
    margin: 0;

    color: var(--haven-text-soft);
    line-height: 1.7;
}

.explore-grid {
    display: grid;
    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );
    gap: 12px;
}

.explore-card {
    min-height: 118px;
    padding: 18px;

    display: flex;
    flex-direction: column;
    gap: 10px;

    border:
        1px solid var(--haven-line);

    color: var(--haven-muted);
    background:
        var(--haven-panel);
    text-decoration: none;
}

.explore-card span {
    color: var(--haven-text);
    font-family: var(--haven-mono);
    font-size: .75rem;
    letter-spacing: .06em;
}

.explore-card:hover {
    border-color:
        var(--haven-accent);

    color:
        var(--haven-text-soft);
}

.departmental-remark {
    margin-top: 42px;
    padding: 16px 18px;

    border-top:
        1px solid var(--haven-line);

    border-bottom:
        1px solid var(--haven-line);

    color: var(--haven-muted);
    font-size: .76rem;
    text-align: center;
}

.departmental-remark strong {
    color: var(--haven-text-soft);
}

@media (max-width: 1180px) {

    .personnel-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

    .maps-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .explore-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }
}

@media (max-width: 900px) {

    .homepage-hero-grid,
    .two-column-section {
        grid-template-columns: 1fr;
    }

    .homepage-hero {
        background-position:
            62% center;
    }

    .facility-record {
        max-width: 520px;
    }

    .department-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}

@media (max-width: 650px) {

    .homepage-hero {
        min-height: auto;

        background-position:
            66% center;
    }

    .homepage-hero-grid {
        min-height: auto;
        gap: 28px;
    }

    .personnel-grid,
    .department-grid,
    .maps-grid,
    .explore-grid {
        grid-template-columns: 1fr;
    }

    .facility-strip {
        min-height: 145px;
    }

    .leader-player {
        min-width: 180px;
    }
}


/* =========================================================
   HAVEN v3 BACKGROUND DEPTH PASS v0.2A

   Deliberately restrained:
   - deep charcoal / blue-black gradient
   - faint technical grid
   - diffuse industrial glows
   - very low-opacity facility atmosphere

   Foreground cards and content remain dominant.
   ========================================================= */


/* ---------------------------------------------------------
   GLOBAL HOMEPAGE DEPTH
   --------------------------------------------------------- */

body.homepage-v3 {
    background:
        radial-gradient(
            ellipse at 84% 13%,
            rgba(177, 83, 31, .075) 0%,
            rgba(177, 83, 31, .025) 24%,
            transparent 52%
        ),
        radial-gradient(
            ellipse at 12% 58%,
            rgba(62, 84, 101, .10) 0%,
            rgba(32, 47, 58, .035) 31%,
            transparent 61%
        ),
        linear-gradient(
            180deg,
            #070b0e 0%,
            #0a0f13 28%,
            #0c1217 55%,
            #090e12 78%,
            #06090c 100%
        );
}


/* ---------------------------------------------------------
   PAGE ATMOSPHERE
   --------------------------------------------------------- */

.homepage-v3 .page-main {
    isolation: isolate;

    background:
        radial-gradient(
            circle at 73% 24%,
            rgba(211, 110, 47, .035),
            transparent 32%
        ),
        radial-gradient(
            circle at 21% 68%,
            rgba(88, 112, 130, .045),
            transparent 38%
        );
}


/*
   Faint industrial scenery.

   This is intentionally weak. It should be sensed before
   it is consciously noticed.
*/

.homepage-v3 .page-main::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(7, 11, 14, .98) 0%,
            rgba(7, 11, 14, .86) 11%,
            rgba(7, 11, 14, .94) 38%,
            rgba(7, 11, 14, .91) 66%,
            rgba(7, 11, 14, .98) 100%
        ),
        url("../img/haven-v3-industrial-bg.png")
        center 18% / 1650px auto no-repeat;

    opacity: .16;

    filter:
        saturate(.68)
        contrast(.94);
}


/* ---------------------------------------------------------
   TECHNICAL GRID
   --------------------------------------------------------- */

.homepage-v3 .page-main::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(137, 159, 174, .026) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(137, 159, 174, .026) 1px,
            transparent 1px
        );

    background-size:
        64px 64px;

    mask-image:
        linear-gradient(
            180deg,
            transparent 0%,
            black 9%,
            black 88%,
            transparent 100%
        );
}


/*
   Keep all real homepage content above atmospheric layers.
*/

.homepage-v3 .page-shell {
    position: relative;
    z-index: 1;
}


/* ---------------------------------------------------------
   SECTION SEPARATION
   --------------------------------------------------------- */

.homepage-v3 .section {
    position: relative;
}


/*
   A very soft pool of light behind alternating content
   areas gives depth without creating visible boxes.
*/

.homepage-v3 .section:nth-of-type(4n + 2)::before {
    content: "";

    position: absolute;

    top: -34px;
    right: 4%;
    bottom: -34px;
    left: 4%;

    z-index: -1;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at center,
            rgba(92, 111, 124, .035),
            transparent 70%
        );
}


/* ---------------------------------------------------------
   PANEL SEPARATION
   --------------------------------------------------------- */

.homepage-v3 .panel,
.homepage-v3 .stat-card,
.homepage-v3 .personnel-card,
.homepage-v3 .department-card,
.homepage-v3 .explore-card {
    box-shadow:
        0 12px 30px rgba(0, 0, 0, .14);
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 650px) {

    .homepage-v3 .page-main::before {
        background-position:
            61% 16%;

        background-size:
            auto 980px;

        opacity: .12;
    }

    .homepage-v3 .page-main::after {
        background-size:
            48px 48px;
    }
}


/* =========================================================
   HAVEN v3 BACKGROUND DEPTH PASS v0.2B

   Cinematic pass:
   - stronger but restrained industrial scenery
   - second scenery layer lower on the page
   - richer steel-blue depth
   - warmer industrial highlights
   - slightly clearer technical grid
   ========================================================= */


/* ---------------------------------------------------------
   RICHER GLOBAL BASE
   --------------------------------------------------------- */

body.homepage-v3 {
    background:
        radial-gradient(
            ellipse at 86% 12%,
            rgba(190, 88, 31, .115) 0%,
            rgba(126, 57, 24, .045) 27%,
            transparent 54%
        ),
        radial-gradient(
            ellipse at 10% 54%,
            rgba(70, 102, 124, .14) 0%,
            rgba(39, 61, 76, .055) 34%,
            transparent 63%
        ),
        radial-gradient(
            ellipse at 77% 82%,
            rgba(82, 104, 119, .075) 0%,
            transparent 46%
        ),
        linear-gradient(
            180deg,
            #070b0f 0%,
            #0b1116 25%,
            #0d151b 51%,
            #0a1116 77%,
            #06090c 100%
        );
}


/* ---------------------------------------------------------
   STRONGER PAGE ATMOSPHERE
   --------------------------------------------------------- */

.homepage-v3 .page-main {
    background:
        radial-gradient(
            circle at 78% 19%,
            rgba(218, 111, 43, .075),
            transparent 29%
        ),
        radial-gradient(
            circle at 16% 61%,
            rgba(88, 120, 143, .085),
            transparent 36%
        ),
        radial-gradient(
            circle at 82% 82%,
            rgba(102, 125, 140, .055),
            transparent 31%
        );
}


/*
   Two appearances of the facility image:
   one behind the upper page, one much lower down.

   Both remain behind all real content.
*/

.homepage-v3 .page-main::before {
    background-image:
        linear-gradient(
            180deg,
            rgba(7, 11, 14, .82) 0%,
            rgba(7, 11, 14, .55) 15%,
            rgba(7, 11, 14, .79) 36%,
            rgba(7, 11, 14, .70) 66%,
            rgba(7, 11, 14, .88) 100%
        ),
        url("../img/haven-v3-industrial-bg.png"),
        url("../img/haven-v3-industrial-bg.png");

    background-position:
        center,
        center 9%,
        center 77%;

    background-size:
        auto,
        1700px auto,
        1520px auto;

    background-repeat:
        no-repeat,
        no-repeat,
        no-repeat;

    opacity: .30;

    filter:
        saturate(.74)
        contrast(1.01)
        brightness(.86);
}


/* ---------------------------------------------------------
   TECHNICAL GRID
   --------------------------------------------------------- */

.homepage-v3 .page-main::after {
    background-image:
        linear-gradient(
            rgba(142, 166, 182, .038) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(142, 166, 182, .038) 1px,
            transparent 1px
        );

    background-size:
        64px 64px;

    opacity: .9;
}


/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

/*
   Let slightly more of the existing hero artwork through.
*/

.homepage-hero {
    background:
        linear-gradient(
            90deg,
            rgba(5, 8, 10, .93) 0%,
            rgba(5, 8, 10, .79) 39%,
            rgba(5, 8, 10, .43) 67%,
            rgba(5, 8, 10, .65) 100%
        ),
        linear-gradient(
            180deg,
            rgba(5, 8, 10, .14),
            rgba(5, 8, 10, .82)
        ),
        url("../img/haven-v3-industrial-bg.png")
        center 56% / cover no-repeat;
}


/* ---------------------------------------------------------
   INDUSTRIAL WINDOW
   --------------------------------------------------------- */

/*
   The middle scenery strip becomes a clearer window into
   the facility while remaining dark enough for its caption.
*/

.facility-strip {
    min-height: 220px;

    background:
        linear-gradient(
            180deg,
            rgba(8, 11, 14, .08),
            rgba(8, 11, 14, .64)
        ),
        linear-gradient(
            90deg,
            rgba(8, 11, 14, .52),
            rgba(8, 11, 14, .06),
            rgba(8, 11, 14, .49)
        ),
        url("../img/haven-v3-industrial-bg.png")
        center 76% / cover no-repeat;

    box-shadow:
        0 20px 55px rgba(0, 0, 0, .24);
}


/* ---------------------------------------------------------
   SECTION DEPTH
   --------------------------------------------------------- */

.homepage-v3 .section:nth-of-type(4n + 2)::before {
    background:
        radial-gradient(
            ellipse at center,
            rgba(105, 129, 145, .065),
            transparent 72%
        );
}


/* ---------------------------------------------------------
   FOREGROUND SEPARATION
   --------------------------------------------------------- */

.homepage-v3 .panel,
.homepage-v3 .stat-card,
.homepage-v3 .personnel-card,
.homepage-v3 .department-card,
.homepage-v3 .explore-card {
    box-shadow:
        0 16px 38px rgba(0, 0, 0, .22),
        0 1px 0 rgba(255, 255, 255, .012);
}


/*
   Slightly deepen the large panels without changing their
   basic design language.
*/

.homepage-v3 .panel {
    backdrop-filter:
        blur(2px);
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 650px) {

    .homepage-v3 .page-main::before {
        background-position:
            center,
            62% 10%,
            57% 79%;

        background-size:
            auto,
            auto 930px,
            auto 820px;

        opacity: .22;
    }

    .homepage-v3 .page-main::after {
        background-size:
            48px 48px;

        opacity: .72;
    }

    .facility-strip {
        min-height: 170px;
    }
}


/* =========================================================
   HAVEN v3 BACKGROUND DEPTH PASS v0.2C

   Clean depth pass:
   - remove page-wide ghosted industrial photography
   - retain hero industrial artwork
   - retain dedicated facility-strip artwork
   - retain technical grid
   - retain controlled steel-blue / warm ambient glows
   ========================================================= */


/* ---------------------------------------------------------
   CLEAN MAIN PAGE ATMOSPHERE
   --------------------------------------------------------- */

.homepage-v3 .page-main {
    background:
        radial-gradient(
            ellipse at 91% 16%,
            rgba(192, 88, 34, .090) 0%,
            rgba(128, 58, 28, .030) 29%,
            transparent 57%
        ),
        radial-gradient(
            ellipse at 8% 48%,
            rgba(70, 105, 129, .105) 0%,
            rgba(42, 65, 81, .035) 35%,
            transparent 63%
        ),
        radial-gradient(
            ellipse at 78% 79%,
            rgba(82, 107, 124, .060) 0%,
            transparent 48%
        ),
        linear-gradient(
            180deg,
            rgba(6, 10, 13, .12) 0%,
            rgba(12, 18, 23, .18) 45%,
            rgba(6, 10, 13, .34) 100%
        );
}


/* ---------------------------------------------------------
   REMOVE GHOSTED PAGE-WIDE FACILITY IMAGE
   --------------------------------------------------------- */

/*
   The facility photograph belongs in deliberate visual
   windows, not as a translucent wallpaper behind statistics.
*/

.homepage-v3 .page-main::before {
    display: none;
    background: none;
    opacity: 0;
    filter: none;
}


/* ---------------------------------------------------------
   KEEP GRID QUIET AND CLEAN
   --------------------------------------------------------- */

.homepage-v3 .page-main::after {
    background-image:
        linear-gradient(
            rgba(142, 166, 182, .031) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(142, 166, 182, .031) 1px,
            transparent 1px
        );

    background-size:
        64px 64px;

    opacity: .82;
}


/* ---------------------------------------------------------
   SOFT SECTION DEPTH
   --------------------------------------------------------- */

.homepage-v3 .section:nth-of-type(4n + 2)::before {
    background:
        radial-gradient(
            ellipse at center,
            rgba(103, 128, 145, .042),
            transparent 72%
        );
}


/* ---------------------------------------------------------
   FOREGROUND DEFINITION
   --------------------------------------------------------- */

.homepage-v3 .panel,
.homepage-v3 .stat-card,
.homepage-v3 .personnel-card,
.homepage-v3 .department-card,
.homepage-v3 .explore-card {
    box-shadow:
        0 16px 38px rgba(0, 0, 0, .21),
        0 1px 0 rgba(255, 255, 255, .012);
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 650px) {

    .homepage-v3 .page-main::after {
        background-size:
            48px 48px;

        opacity: .68;
    }
}