/* =========================================================
   ENDCORE WINDOWS NEXT
   PREMIUM PRE-LOGIN V1

   Presentation only.
   No profile/server/authentication logic lives here.
   ========================================================= */


/* ---------------------------------------------------------
   CINEMATIC WINDOW SURFACE
   --------------------------------------------------------- */

html.endcore-windows-next
#loginView.client-entry-view {
    width: 100%;
    height:
        calc(
            100vh -
            var(--endcore-windows-titlebar-height)
        );

    min-height:
        calc(
            100vh -
            var(--endcore-windows-titlebar-height)
        );

    padding: 0;

    position: relative;

    overflow: hidden;

    place-items: stretch;

    background:
        #02060e;

    isolation: isolate;
}


/*
 * Integrate our native titlebar into the scene.
 */
html.endcore-windows-next:has(
    #loginView:not([hidden])
)
.endcore-windows-titlebar {
    background:
        linear-gradient(
            180deg,
            rgba(4, 8, 14, .94),
            rgba(3, 7, 13, .82)
        );

    border-bottom-color:
        rgba(105, 164, 226, .08);

    box-shadow:
        0 8px 30px
        rgba(0, 0, 0, .10);

    backdrop-filter:
        blur(18px);
}


/* ---------------------------------------------------------
   BACKDROP
   --------------------------------------------------------- */

html.endcore-windows-next
#loginView
> .client-entry-background {
    position: absolute;

    inset: 0;

    opacity: 1;

    background:
        radial-gradient(
            ellipse at 24% 42%,
            rgba(62, 89, 208, .20),
            transparent 34%
        ),

        radial-gradient(
            ellipse at 74% 48%,
            rgba(30, 131, 223, .16),
            transparent 35%
        ),

        radial-gradient(
            ellipse at 50% 108%,
            rgba(51, 54, 178, .18),
            transparent 50%
        ),

        linear-gradient(
            125deg,
            #020610 0%,
            #050b18 44%,
            #030714 100%
        );
}


html.endcore-windows-next
#loginView
> .client-entry-background::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            115deg,
            transparent 0%,
            rgba(67, 117, 215, .025) 42%,
            rgba(129, 74, 224, .045) 52%,
            transparent 67%
        );

    opacity: .95;

    pointer-events: none;
}


html.endcore-windows-next
#loginView
> .client-entry-background::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            ellipse at center,
            transparent 30%,
            rgba(1, 4, 10, .28) 72%,
            rgba(1, 3, 8, .70) 100%
        ),

        linear-gradient(
            180deg,
            rgba(2, 5, 11, .04),
            rgba(2, 5, 11, .30)
        );

    pointer-events: none;
}


/*
 * Existing decorative layers become atmospheric rather
 * than the dominant artwork.
 */
html.endcore-windows-next
#loginView
.client-entry-aura {
    filter:
        blur(120px);

    opacity: .18;
}


html.endcore-windows-next
#loginView
.client-entry-aura.aura-one {
    width: 54vw;
    height: 54vw;

    left: -23vw;
    top: -28vw;
}


html.endcore-windows-next
#loginView
.client-entry-aura.aura-two {
    width: 48vw;
    height: 48vw;

    right: -20vw;
    bottom: -26vw;
}


html.endcore-windows-next
#loginView
.client-entry-grid-light {
    opacity: .025;

    background-size:
        96px 96px;
}


/* ---------------------------------------------------------
   PROFILE SELECTION — DESKTOP CINEMATIC COMPOSITION
   --------------------------------------------------------- */

html.endcore-windows-next
#loginView.client-entry-view:has(
    #profileStage:not([hidden])
)
> .client-entry-shell {
    width:
        min(
            1320px,
            calc(100vw - 96px)
        );

    min-height:
        calc(
            100vh -
            var(--endcore-windows-titlebar-height)
        );

    margin: 0 auto;

    padding:
        clamp(48px, 5vw, 78px);

    display: grid;

    grid-template-columns:
        minmax(340px, .88fr)
        minmax(500px, 1.12fr);

    align-items: center;

    gap:
        clamp(
            58px,
            7vw,
            116px
        );

    border: 0;

    border-radius: 0;

    background:
        transparent;

    box-shadow:
        none;

    backdrop-filter:
        none;

    overflow: visible;
}


/*
 * Kill the old giant panel edge/reflection only on
 * profile selection. Other entry stages remain untouched.
 */
html.endcore-windows-next
#loginView.client-entry-view:has(
    #profileStage:not([hidden])
)
> .client-entry-shell::before,

html.endcore-windows-next
#loginView.client-entry-view:has(
    #profileStage:not([hidden])
)
> .client-entry-shell::after {
    display: none;
}


/* ---------------------------------------------------------
   BRAND
   --------------------------------------------------------- */

html.endcore-windows-next
#loginView.client-entry-view:has(
    #profileStage:not([hidden])
)
.client-entry-brand {
    margin: 0;

    align-items: flex-start;

    text-align: left;

    justify-self: stretch;

    animation:
        endcoreWindowsBrandIn
        620ms
        cubic-bezier(.18,.78,.22,1)
        both;
}


html.endcore-windows-next
#loginView.client-entry-view:has(
    #profileStage:not([hidden])
)
.client-entry-logo-orbit {
    width:
        clamp(
            172px,
            14vw,
            224px
        );

    margin:
        0 0 10px -18px;
}


html.endcore-windows-next
#loginView.client-entry-view:has(
    #profileStage:not([hidden])
)
.client-entry-logo {
    width: 90%;
    height: 90%;

    filter:
        drop-shadow(
            0 24px 44px
            rgba(0,0,0,.46)
        )

        drop-shadow(
            0 0 34px
            rgba(73,145,255,.28)
        );
}


html.endcore-windows-next
#loginView.client-entry-view:has(
    #profileStage:not([hidden])
)
.client-entry-wordmark {
    margin-top: 0;

    font-size:
        clamp(
            58px,
            5vw,
            82px
        );

    line-height: .92;

    letter-spacing:
        -.07em;
}


html.endcore-windows-next
#loginView.client-entry-view:has(
    #profileStage:not([hidden])
)
.client-entry-submark {
    margin-top: 13px;

    font-size:
        clamp(
            10px,
            .8vw,
            13px
        );

    letter-spacing:
        .48em;
}


/*
 * Approved concept tagline.
 */
html.endcore-windows-next
#loginView.client-entry-view:has(
    #profileStage:not([hidden])
)
.client-entry-brand::after {
    content:
        "YOUR LIBRARIES. EVERYWHERE.";

    display: block;

    margin-top:
        clamp(
            26px,
            4vh,
            38px
        );

    color:
        rgba(
            183,
            207,
            235,
            .62
        );

    font-size:
        clamp(
            11px,
            .8vw,
            13px
        );

    font-weight: 720;

    letter-spacing:
        .20em;

    text-shadow:
        0 0 24px
        rgba(67,145,255,.12);
}


/* ---------------------------------------------------------
   PROFILE STAGE
   --------------------------------------------------------- */

html.endcore-windows-next
#loginView
#profileStage.client-entry-stage {
    min-width: 0;

    position: relative;

    align-items: flex-start;

    justify-self: stretch;

    isolation: isolate;

    animation:
        endcoreWindowsProfilesIn
        700ms
        100ms
        cubic-bezier(.18,.78,.22,1)
        both;
}


/*
 * Not a card: just atmospheric light behind the users.
 */
html.endcore-windows-next
#loginView
#profileStage.client-entry-stage::before {
    content: "";

    position: absolute;

    z-index: -1;

    inset:
        -110px
        -120px
        -120px
        -100px;

    background:
        radial-gradient(
            ellipse at 38% 45%,
            rgba(45,126,226,.10),
            transparent 60%
        );

    filter:
        blur(14px);

    pointer-events: none;
}


html.endcore-windows-next
#loginView
#profileStage
.client-entry-heading {
    width: 100%;

    max-width: 650px;

    text-align: left;
}


html.endcore-windows-next
#loginView
#profileStage
.client-entry-heading > span {
    color:
        rgba(
            103,
            176,
            255,
            .82
        );

    font-size: 11px;

    letter-spacing:
        .25em;
}


html.endcore-windows-next
#loginView
#profileStage
.client-entry-heading h1 {
    margin:
        14px 0 12px;

    font-size:
        clamp(
            46px,
            4.4vw,
            64px
        );

    font-weight: 770;

    line-height: .98;

    letter-spacing:
        -.06em;

    text-shadow:
        0 14px 36px
        rgba(0,0,0,.32);
}


html.endcore-windows-next
#loginView
#profileStage
.client-entry-heading p {
    color:
        rgba(
            194,
            211,
            230,
            .66
        );

    font-size:
        clamp(
            14px,
            1.1vw,
            17px
        );
}


/* ---------------------------------------------------------
   PROFILES
   --------------------------------------------------------- */

html.endcore-windows-next
#loginView
#profileStage
.client-profile-grid {
    width: auto;

    max-width: 100%;

    margin-top:
        clamp(
            36px,
            5vh,
            52px
        );

    justify-content:
        flex-start;

    gap:
        clamp(
            24px,
            2.7vw,
            38px
        );
}


html.endcore-windows-next
#loginView
#profileStage
.client-profile-shell {
    position: relative;
}


html.endcore-windows-next
#loginView
#profileStage
.client-profile-card {
    width: 154px;

    gap: 16px;

    padding: 5px;
}


html.endcore-windows-next
#loginView
#profileStage
.client-profile-avatar {
    width: 124px;
    height: 124px;

    border:
        1px solid
        rgba(112,181,255,.44);

    box-shadow:
        0 22px 52px
        rgba(0,0,0,.42),

        0 0 0 1px
        rgba(72,144,231,.07),

        0 0 30px
        rgba(58,142,247,.08);
}


html.endcore-windows-next
#loginView
#profileStage
.client-profile-card:hover
.client-profile-avatar,

html.endcore-windows-next
#loginView
#profileStage
.client-profile-card:focus-visible
.client-profile-avatar {
    transform:
        translateY(-8px)
        scale(1.06);

    border-color:
        rgba(93,181,255,.95);

    box-shadow:
        0 28px 58px
        rgba(0,0,0,.48),

        0 0 0 4px
        rgba(57,143,239,.11),

        0 0 38px
        rgba(67,151,255,.27);
}


html.endcore-windows-next
#loginView
#profileStage
.client-profile-card strong {
    max-width: 154px;

    color:
        rgba(244,248,255,.95);

    font-size: 15px;

    font-weight: 680;
}


/* ---------------------------------------------------------
   ADD PROFILE
   --------------------------------------------------------- */

html.endcore-windows-next
#loginView
#profileStage
.client-entry-secondary {
    margin-top:
        clamp(
            34px,
            4.5vh,
            46px
        );

    min-height: 48px;

    align-self: flex-start;

    padding:
        0 23px;

    border-color:
        rgba(96,166,239,.28);

    border-radius: 14px;

    background:
        rgba(9,25,44,.54);

    color:
        rgba(202,220,240,.80);

    backdrop-filter:
        blur(16px);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.035),

        0 14px 34px
        rgba(0,0,0,.16);
}


html.endcore-windows-next
#loginView
#profileStage
.client-entry-secondary:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(105,181,255,.52);

    background:
        rgba(15,39,67,.72);

    color:
        #f3f8ff;
}


/* ---------------------------------------------------------
   ENTRY MOTION
   --------------------------------------------------------- */

@keyframes endcoreWindowsBrandIn {
    from {
        opacity: 0;

        transform:
            translate3d(
                -22px,
                0,
                0
            );
    }

    to {
        opacity: 1;

        transform:
            translate3d(
                0,
                0,
                0
            );
    }
}


@keyframes endcoreWindowsProfilesIn {
    from {
        opacity: 0;

        transform:
            translate3d(
                24px,
                0,
                0
            );
    }

    to {
        opacity: 1;

        transform:
            translate3d(
                0,
                0,
                0
            );
    }
}


/* ---------------------------------------------------------
   RESPONSIVE DESKTOP FALLBACK
   --------------------------------------------------------- */

@media (max-width: 1120px) {

    html.endcore-windows-next
    #loginView.client-entry-view:has(
        #profileStage:not([hidden])
    )
    > .client-entry-shell {
        width:
            min(
                820px,
                calc(100vw - 60px)
            );

        grid-template-columns:
            1fr;

        gap: 32px;

        padding:
            34px 42px 48px;
    }


    html.endcore-windows-next
    #loginView.client-entry-view:has(
        #profileStage:not([hidden])
    )
    .client-entry-brand {
        align-items: center;

        text-align: center;
    }


    html.endcore-windows-next
    #loginView.client-entry-view:has(
        #profileStage:not([hidden])
    )
    .client-entry-logo-orbit {
        width: 132px;

        margin:
            0 auto -2px;
    }


    html.endcore-windows-next
    #loginView.client-entry-view:has(
        #profileStage:not([hidden])
    )
    .client-entry-wordmark {
        font-size: 52px;
    }


    html.endcore-windows-next
    #loginView
    #profileStage {
        align-items: center;
    }


    html.endcore-windows-next
    #loginView
    #profileStage
    .client-entry-heading {
        text-align: center;
    }


    html.endcore-windows-next
    #loginView
    #profileStage
    .client-profile-grid {
        justify-content: center;
    }


    html.endcore-windows-next
    #loginView
    #profileStage
    .client-entry-secondary {
        align-self: center;
    }

}


@media (max-height: 760px) and (min-width: 1121px) {

    html.endcore-windows-next
    #loginView.client-entry-view:has(
        #profileStage:not([hidden])
    )
    > .client-entry-shell {
        padding-top: 28px;
        padding-bottom: 28px;
    }


    html.endcore-windows-next
    #loginView.client-entry-view:has(
        #profileStage:not([hidden])
    )
    .client-entry-logo-orbit {
        width: 150px;
    }


    html.endcore-windows-next
    #loginView.client-entry-view:has(
        #profileStage:not([hidden])
    )
    .client-entry-wordmark {
        font-size: 58px;
    }

}


@media (prefers-reduced-motion: reduce) {

    html.endcore-windows-next
    #loginView
    .client-entry-brand,

    html.endcore-windows-next
    #loginView
    #profileStage {
        animation: none;
    }

}


/* =========================================================
   ENDCORE WINDOWS NEXT
   CINEMATIC ARTWORK V2
   ========================================================= */


/* ---------------------------------------------------------
   REAL HOME-THEATER ARTWORK
   --------------------------------------------------------- */

html.endcore-windows-next
#loginView
> .client-entry-background {
    inset: 0;

    background:
        url(
            "/web/assets/branding/prelogin-background.png"
        )
        center center
        / cover
        no-repeat;

    transform:
        scale(1.018);

    transform-origin:
        center center;

    animation:
        endcoreWindowsSceneReveal
        1200ms
        cubic-bezier(.17,.74,.22,1)
        both;
}


/*
 * Readability veil.
 *
 * We deliberately keep the room visible.
 * The left and right sides become slightly darker
 * because that is where the UI lives.
 */
html.endcore-windows-next
#loginView
> .client-entry-background::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,

            rgba(1, 5, 13, .66)
            0%,

            rgba(2, 7, 17, .43)
            22%,

            rgba(3, 9, 21, .19)
            43%,

            rgba(3, 9, 20, .16)
            54%,

            rgba(3, 8, 19, .37)
            72%,

            rgba(1, 4, 11, .70)
            100%
        ),

        radial-gradient(
            ellipse
            at 52% 46%,

            rgba(21, 77, 155, .10),
            transparent 46%
        ),

        linear-gradient(
            180deg,

            rgba(2, 5, 12, .17)
            0%,

            transparent
            22%,

            transparent
            66%,

            rgba(1, 4, 10, .45)
            100%
        );

    opacity: 1;

    pointer-events: none;
}


/*
 * Cinematic vignette and EndCore blue grading.
 */
html.endcore-windows-next
#loginView
> .client-entry-background::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            ellipse
            at center,

            transparent
            31%,

            rgba(2, 7, 16, .09)
            58%,

            rgba(1, 4, 10, .38)
            88%,

            rgba(0, 2, 7, .68)
            100%
        ),

        radial-gradient(
            circle
            at 31% 36%,

            rgba(60, 121, 255, .11),
            transparent 30%
        ),

        radial-gradient(
            circle
            at 76% 42%,

            rgba(96, 62, 221, .07),
            transparent 30%
        );

    pointer-events: none;
}


/* ---------------------------------------------------------
   REMOVE OLD SYNTHETIC BACKGROUND ELEMENTS
   --------------------------------------------------------- */

html.endcore-windows-next
#loginView
.client-entry-aura,

html.endcore-windows-next
#loginView
.client-entry-grid-light {
    opacity: 0;
}


/* ---------------------------------------------------------
   TITLEBAR MERGES INTO THE ROOM
   --------------------------------------------------------- */

html.endcore-windows-next:has(
    #loginView:not([hidden])
)
.endcore-windows-titlebar {
    background:
        linear-gradient(
            180deg,
            rgba(2, 6, 12, .97),
            rgba(2, 6, 12, .90)
        );

    border-bottom-color:
        rgba(111, 171, 235, .055);

    box-shadow:
        0 12px 34px
        rgba(0, 0, 0, .12);

    backdrop-filter:
        blur(22px);
}


/* ---------------------------------------------------------
   BRAND — LIGHT FROM THE ROOM
   --------------------------------------------------------- */

html.endcore-windows-next
#loginView.client-entry-view:has(
    #profileStage:not([hidden])
)
.client-entry-brand {
    position: relative;

    z-index: 2;
}


html.endcore-windows-next
#loginView.client-entry-view:has(
    #profileStage:not([hidden])
)
.client-entry-brand::before {
    content: "";

    position: absolute;

    z-index: -1;

    width: 430px;
    height: 430px;

    left: -150px;
    top: -120px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,

            rgba(38, 119, 255, .14),
            rgba(39, 80, 181, .045)
            46%,

            transparent
            72%
        );

    filter:
        blur(30px);

    pointer-events: none;
}


html.endcore-windows-next
#loginView.client-entry-view:has(
    #profileStage:not([hidden])
)
.client-entry-logo-glow {
    inset: -15%;

    background:
        radial-gradient(
            circle,

            rgba(70, 157, 255, .40),
            rgba(93, 72, 235, .15)
            36%,

            transparent
            69%
        );

    filter:
        blur(24px);
}


html.endcore-windows-next
#loginView.client-entry-view:has(
    #profileStage:not([hidden])
)
.client-entry-logo {
    filter:
        drop-shadow(
            0 26px 42px
            rgba(0,0,0,.54)
        )

        drop-shadow(
            0 0 38px
            rgba(68,148,255,.38)
        );
}


html.endcore-windows-next
#loginView.client-entry-view:has(
    #profileStage:not([hidden])
)
.client-entry-wordmark {
    color:
        #f6f9ff;

    text-shadow:
        0 12px 34px
        rgba(0,0,0,.72),

        0 0 24px
        rgba(64,140,255,.10);
}


html.endcore-windows-next
#loginView.client-entry-view:has(
    #profileStage:not([hidden])
)
.client-entry-brand::after {
    color:
        rgba(194, 216, 242, .72);

    text-shadow:
        0 3px 14px
        rgba(0,0,0,.75),

        0 0 28px
        rgba(61,142,255,.20);
}


/* ---------------------------------------------------------
   PROFILE SIDE
   --------------------------------------------------------- */

html.endcore-windows-next
#loginView
#profileStage.client-entry-stage::before {
    inset:
        -125px
        -150px
        -130px
        -110px;

    background:
        radial-gradient(
            ellipse
            at 38% 42%,

            rgba(4, 15, 33, .46)
            0%,

            rgba(6, 19, 40, .27)
            32%,

            rgba(44, 104, 192, .07)
            58%,

            transparent
            76%
        );

    filter:
        blur(15px);
}


html.endcore-windows-next
#loginView
#profileStage
.client-entry-heading > span {
    color:
        #78b8ff;

    text-shadow:
        0 2px 10px
        rgba(0,0,0,.70),

        0 0 18px
        rgba(62,150,255,.20);
}


html.endcore-windows-next
#loginView
#profileStage
.client-entry-heading h1 {
    color:
        #f7f9ff;

    text-shadow:
        0 12px 34px
        rgba(0,0,0,.72),

        0 0 28px
        rgba(55,130,225,.11);
}


html.endcore-windows-next
#loginView
#profileStage
.client-entry-heading p {
    color:
        rgba(211, 223, 237, .72);

    text-shadow:
        0 2px 12px
        rgba(0,0,0,.72);
}


/* ---------------------------------------------------------
   PROFILE AVATAR — PREMIUM HALO
   --------------------------------------------------------- */

html.endcore-windows-next
#loginView
#profileStage
.client-profile-card::before {
    width: 142px;
    height: 142px;

    top: -9px;

    background:
        radial-gradient(
            circle,

            rgba(65, 160, 255, .25),
            rgba(75, 75, 227, .10)
            42%,

            transparent
            70%
        );

    filter:
        blur(13px);
}


html.endcore-windows-next
#loginView
#profileStage
.client-profile-avatar {
    border:
        1px solid
        rgba(102, 185, 255, .62);

    background:
        rgba(3, 11, 25, .80);

    box-shadow:
        0 24px 54px
        rgba(0, 0, 0, .57),

        0 0 0 1px
        rgba(64, 145, 239, .12),

        inset 0 0 18px
        rgba(80, 153, 240, .045),

        0 0 26px
        rgba(54, 145, 247, .13);

    backdrop-filter:
        blur(10px);
}


html.endcore-windows-next
#loginView
#profileStage
.client-profile-card:hover
.client-profile-avatar,

html.endcore-windows-next
#loginView
#profileStage
.client-profile-card:focus-visible
.client-profile-avatar {
    border-color:
        rgba(113, 199, 255, .98);

    box-shadow:
        0 30px 64px
        rgba(0, 0, 0, .62),

        0 0 0 4px
        rgba(65, 151, 244, .13),

        inset 0 0 22px
        rgba(85, 168, 255, .07),

        0 0 44px
        rgba(69, 156, 255, .36);
}


html.endcore-windows-next
#loginView
#profileStage
.client-profile-card strong {
    text-shadow:
        0 3px 12px
        rgba(0,0,0,.90);
}


/* ---------------------------------------------------------
   EDIT PROFILE BUTTON
   --------------------------------------------------------- */

html.endcore-windows-next
#loginView
#profileStage
.client-profile-edit {
    background:
        rgba(5, 20, 40, .78);

    border-color:
        rgba(94, 174, 255, .35);

    color:
        rgba(208, 230, 251, .83);

    box-shadow:
        0 10px 26px
        rgba(0,0,0,.40),

        inset 0 1px 0
        rgba(255,255,255,.05);

    backdrop-filter:
        blur(12px);
}


/* ---------------------------------------------------------
   ADD PROFILE — GLASS CONTROL
   --------------------------------------------------------- */

html.endcore-windows-next
#loginView
#profileStage
.client-entry-secondary {
    border:
        1px solid
        rgba(101, 177, 246, .38);

    background:
        linear-gradient(
            180deg,
            rgba(16, 43, 74, .68),
            rgba(7, 24, 47, .70)
        );

    color:
        rgba(220, 234, 249, .88);

    box-shadow:
        0 18px 40px
        rgba(0,0,0,.32),

        inset 0 1px 0
        rgba(255,255,255,.055),

        0 0 20px
        rgba(57,141,235,.06);

    backdrop-filter:
        blur(18px);
}


html.endcore-windows-next
#loginView
#profileStage
.client-entry-secondary:hover {
    border-color:
        rgba(112, 194, 255, .68);

    background:
        linear-gradient(
            180deg,
            rgba(24, 62, 102, .82),
            rgba(10, 34, 62, .80)
        );

    box-shadow:
        0 22px 46px
        rgba(0,0,0,.36),

        inset 0 1px 0
        rgba(255,255,255,.07),

        0 0 28px
        rgba(58,151,250,.14);
}


/* ---------------------------------------------------------
   CINEMATIC REVEAL
   --------------------------------------------------------- */

@keyframes endcoreWindowsSceneReveal {

    from {
        opacity: 0;

        transform:
            scale(1.05);
    }

    to {
        opacity: 1;

        transform:
            scale(1.018);
    }

}


@media (prefers-reduced-motion: reduce) {

    html.endcore-windows-next
    #loginView
    > .client-entry-background {
        animation: none;
    }

}


/* =========================================================
   ENDCORE WINDOWS NEXT
   BACKGROUND FIX V3

   The legacy pre-login has several full-view pseudo layers.
   Windows Next owns the complete scene here.
   ========================================================= */


/* ---------------------------------------------------------
   REAL SCENE LIVES ON LOGIN VIEW ITSELF
   --------------------------------------------------------- */

html.endcore-windows-next
#loginView.client-entry-view {
    background-color:
        #02060d;

    background-image:
        url(
            "/web/assets/branding/prelogin-background.png"
        );

    background-size:
        cover;

    background-position:
        center center;

    background-repeat:
        no-repeat;
}


/* ---------------------------------------------------------
   REMOVE LEGACY FULL-VIEW OVERLAYS
   --------------------------------------------------------- */

html.endcore-windows-next
#loginView.client-entry-view::before,

html.endcore-windows-next
#loginView.client-entry-view::after {
    content: none;

    display: none;
}


/*
 * The old background node remains useful as our grading
 * layer, but must no longer paint its own synthetic scene.
 */
html.endcore-windows-next
#loginView
> .client-entry-background {
    z-index: 0;

    inset: 0;

    background:
        transparent;

    transform: none;

    animation: none;

    opacity: 1;
}


/* ---------------------------------------------------------
   CINEMATIC GRADING OVER THE REAL PNG
   --------------------------------------------------------- */

html.endcore-windows-next
#loginView
> .client-entry-background::before {
    content: "";

    display: block;

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,

            rgba(1, 4, 11, .70)
            0%,

            rgba(2, 6, 15, .48)
            20%,

            rgba(3, 8, 18, .19)
            43%,

            rgba(3, 8, 18, .15)
            55%,

            rgba(3, 7, 17, .38)
            73%,

            rgba(1, 4, 10, .72)
            100%
        ),

        linear-gradient(
            180deg,

            rgba(1, 4, 10, .12)
            0%,

            transparent
            27%,

            transparent
            65%,

            rgba(1, 3, 9, .40)
            100%
        );

    opacity: 1;

    pointer-events: none;
}


html.endcore-windows-next
#loginView
> .client-entry-background::after {
    content: "";

    display: block;

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            ellipse
            at center,

            transparent
            28%,

            rgba(1, 5, 13, .08)
            58%,

            rgba(0, 3, 9, .33)
            85%,

            rgba(0, 2, 7, .60)
            100%
        ),

        radial-gradient(
            circle
            at 27% 39%,

            rgba(47, 123, 255, .10),
            transparent
            30%
        ),

        radial-gradient(
            circle
            at 75% 42%,

            rgba(91, 67, 225, .06),
            transparent
            31%
        );

    opacity: 1;

    pointer-events: none;
}


/* ---------------------------------------------------------
   KEEP REAL CONTENT ABOVE THE GRADING
   --------------------------------------------------------- */

html.endcore-windows-next
#loginView
> .client-entry-shell {
    position: relative;

    z-index: 2;
}


/* ---------------------------------------------------------
   KILL OLD SYNTHETIC DECORATION COMPLETELY
   --------------------------------------------------------- */

html.endcore-windows-next
#loginView
.client-entry-aura,

html.endcore-windows-next
#loginView
.client-entry-grid-light {
    display: none;
}


/* =========================================================
   ENDCORE WINDOWS NEXT
   BACKGROUND OWNER V4

   Definitive Windows ownership of the pre-login artwork.
   ========================================================= */

html.endcore-windows-next
body
#loginView.client-entry-view {
    background-color:
        #02060d !important;

    background-image:
        linear-gradient(
            90deg,
            rgba(1, 4, 11, .58) 0%,
            rgba(2, 7, 16, .31) 22%,
            rgba(2, 7, 16, .08) 48%,
            rgba(2, 6, 15, .16) 65%,
            rgba(1, 5, 12, .42) 100%
        ),

        linear-gradient(
            180deg,
            rgba(1, 4, 10, .10) 0%,
            rgba(1, 4, 10, .02) 46%,
            rgba(1, 3, 9, .34) 100%
        ),

        url(
            "/web/assets/branding/prelogin-background.png"
        ) !important;

    background-size:
        100% 100%,
        100% 100%,
        cover !important;

    background-position:
        center center,
        center center,
        center center !important;

    background-repeat:
        no-repeat,
        no-repeat,
        no-repeat !important;
}


/*
 * Windows Next no longer uses the legacy synthetic
 * background container at all.
 */
html.endcore-windows-next
body
#loginView
> .client-entry-background {
    display:
        none !important;
}


/*
 * Final titlebar integration with the room.
 */
html.endcore-windows-next:has(
    #loginView:not([hidden])
)
.endcore-windows-titlebar {
    background:
        rgba(2, 6, 12, .94);

    border-bottom-color:
        rgba(106, 169, 235, .055);

    box-shadow:
        0 8px 26px
        rgba(0, 0, 0, .12);

    backdrop-filter:
        blur(20px);
}


/* =========================================================
   ENDCORE WINDOWS NEXT
   PRELOGIN POLISH V5
   ========================================================= */


/* ---------------------------------------------------------
   TITLEBAR — QUIETER, MORE PREMIUM
   --------------------------------------------------------- */

html.endcore-windows-next:has(
    #loginView:not([hidden])
)
.endcore-windows-titlebar {
    background:
        linear-gradient(
            180deg,
            rgba(2, 6, 12, .88),
            rgba(2, 6, 12, .78)
        ) !important;

    border-bottom-color:
        rgba(115, 175, 241, .04) !important;

    box-shadow:
        0 8px 22px rgba(0, 0, 0, .10) !important;

    backdrop-filter:
        blur(16px) !important;
}

html.endcore-windows-next
.endcore-windows-titlebar__mark {
    background:
        rgba(255,255,255,.06);

    border-color:
        rgba(255,255,255,.08);

    color:
        rgba(255,255,255,.92);
}

html.endcore-windows-next
.endcore-windows-titlebar__name {
    color:
        rgba(255,255,255,.90);
}

html.endcore-windows-next
.endcore-windows-titlebar__edition {
    color:
        rgba(255,255,255,.34);
    letter-spacing: .16em;
}


/* ---------------------------------------------------------
   LEFT BRAND BLOCK
   --------------------------------------------------------- */

html.endcore-windows-next
#loginView.client-entry-view:has(
    #profileStage:not([hidden])
)
.client-entry-brand {
    padding-top: 16px;
    max-width: 420px;
}

html.endcore-windows-next
#loginView.client-entry-view:has(
    #profileStage:not([hidden])
)
.client-entry-logo-orbit {
    width: clamp(148px, 12vw, 188px) !important;
    margin: 0 0 16px -10px !important;
    opacity: .90;
}

html.endcore-windows-next
#loginView.client-entry-view:has(
    #profileStage:not([hidden])
)
.client-entry-logo-glow {
    inset: -18%;
    opacity: .78;
    filter: blur(28px);
}

html.endcore-windows-next
#loginView.client-entry-view:has(
    #profileStage:not([hidden])
)
.client-entry-logo {
    opacity: .92;
    filter:
        drop-shadow(0 24px 40px rgba(0,0,0,.58))
        drop-shadow(0 0 32px rgba(70,148,255,.24)) !important;
}

html.endcore-windows-next
#loginView.client-entry-view:has(
    #profileStage:not([hidden])
)
.client-entry-wordmark {
    margin-top: 4px;
    font-size: clamp(62px, 5.2vw, 88px) !important;
    line-height: .90;
    letter-spacing: -.075em;
}

html.endcore-windows-next
#loginView.client-entry-view:has(
    #profileStage:not([hidden])
)
.client-entry-submark {
    margin-top: 10px;
    font-size: clamp(10px, .85vw, 13px);
    letter-spacing: .42em;
    color: rgba(176, 206, 245, .92);
}

html.endcore-windows-next
#loginView.client-entry-view:has(
    #profileStage:not([hidden])
)
.client-entry-brand::after {
    margin-top: 28px !important;
    font-size: 12px !important;
    letter-spacing: .18em !important;
    color: rgba(205, 223, 245, .70) !important;
}


/* ---------------------------------------------------------
   RIGHT STAGE — BETTER HIERARCHY
   --------------------------------------------------------- */

html.endcore-windows-next
#loginView
#profileStage.client-entry-stage {
    padding-top: 8px;
}

html.endcore-windows-next
#loginView
#profileStage
.client-entry-heading {
    max-width: 560px;
}

html.endcore-windows-next
#loginView
#profileStage
.client-entry-heading > span {
    margin-bottom: 8px;
}

html.endcore-windows-next
#loginView
#profileStage
.client-entry-heading h1 {
    margin: 10px 0 18px !important;
    font-size: clamp(42px, 4vw, 58px) !important;
    line-height: .96 !important;
    letter-spacing: -.055em !important;
}

html.endcore-windows-next
#loginView
#profileStage
.client-entry-heading p {
    font-size: clamp(15px, 1.05vw, 17px) !important;
    color: rgba(221, 231, 242, .72) !important;
}


/* ---------------------------------------------------------
   PROFILE AVATAR — MORE HERO / MORE BREATHING ROOM
   --------------------------------------------------------- */

html.endcore-windows-next
#loginView
#profileStage
.client-profile-grid {
    margin-top: clamp(42px, 5vh, 58px) !important;
    gap: clamp(28px, 3vw, 42px) !important;
}

html.endcore-windows-next
#loginView
#profileStage
.client-profile-shell {
    transform: translateY(2px);
}

html.endcore-windows-next
#loginView
#profileStage
.client-profile-card {
    width: 164px !important;
    gap: 18px !important;
    padding: 6px !important;
}

html.endcore-windows-next
#loginView
#profileStage
.client-profile-card::before {
    width: 154px !important;
    height: 154px !important;
    top: -10px !important;
    opacity: .95;
    filter: blur(16px) !important;
}

html.endcore-windows-next
#loginView
#profileStage
.client-profile-avatar {
    width: 132px !important;
    height: 132px !important;

    border: 1px solid rgba(114, 195, 255, .72) !important;

    box-shadow:
        0 28px 62px rgba(0,0,0,.62),
        0 0 0 1px rgba(72,150,241,.14),
        inset 0 0 20px rgba(86,163,247,.05),
        0 0 28px rgba(60,151,255,.16) !important;
}

html.endcore-windows-next
#loginView
#profileStage
.client-profile-card:hover
.client-profile-avatar,

html.endcore-windows-next
#loginView
#profileStage
.client-profile-card:focus-visible
.client-profile-avatar {
    transform:
        translateY(-8px)
        scale(1.05) !important;

    box-shadow:
        0 32px 68px rgba(0,0,0,.66),
        0 0 0 4px rgba(73,156,248,.14),
        inset 0 0 24px rgba(93,172,255,.08),
        0 0 48px rgba(70,159,255,.34) !important;
}

html.endcore-windows-next
#loginView
#profileStage
.client-profile-card strong {
    max-width: 164px !important;
    font-size: 15px !important;
    letter-spacing: -.01em;
    color: rgba(248,250,255,.96);
}

html.endcore-windows-next
#loginView
#profileStage
.client-profile-edit {
    top: 4px;
    right: 2px;
}


/* ---------------------------------------------------------
   ADD PROFILE — MORE GLASS / BETTER PLACEMENT
   --------------------------------------------------------- */

html.endcore-windows-next
#loginView
#profileStage
.client-entry-secondary {
    margin-top: clamp(38px, 4.8vh, 54px) !important;
    min-height: 52px !important;
    padding: 0 26px !important;

    border-radius: 16px !important;

    background:
        linear-gradient(
            180deg,
            rgba(20, 49, 82, .66),
            rgba(8, 26, 48, .74)
        ) !important;

    border: 1px solid rgba(113, 188, 255, .42) !important;

    color: rgba(232, 240, 252, .90) !important;

    box-shadow:
        0 18px 40px rgba(0,0,0,.34),
        inset 0 1px 0 rgba(255,255,255,.06),
        0 0 24px rgba(63,150,247,.08) !important;

    backdrop-filter:
        blur(18px) saturate(115%);
}

html.endcore-windows-next
#loginView
#profileStage
.client-entry-secondary:hover {
    transform:
        translateY(-3px) scale(1.01) !important;

    background:
        linear-gradient(
            180deg,
            rgba(28, 65, 106, .82),
            rgba(10, 34, 61, .84)
        ) !important;

    border-color:
        rgba(124, 202, 255, .70) !important;

    box-shadow:
        0 22px 48px rgba(0,0,0,.38),
        inset 0 1px 0 rgba(255,255,255,.08),
        0 0 28px rgba(67,155,250,.14) !important;
}


/* ---------------------------------------------------------
   SMALL RESPONSIVE POLISH
   --------------------------------------------------------- */

@media (max-width: 1280px) and (min-width: 1121px) {

    html.endcore-windows-next
    #loginView.client-entry-view:has(
        #profileStage:not([hidden])
    )
    > .client-entry-shell {
        gap: 46px;
    }

    html.endcore-windows-next
    #loginView
    #profileStage
    .client-entry-heading h1 {
        font-size: 48px !important;
    }

}


/* =========================================================
   ENDCORE WINDOWS NEXT
   BRAND UPDATE V6
   ========================================================= */


/* ---------------------------------------------------------
   PRELOGIN SYMBOL
   --------------------------------------------------------- */

html.endcore-windows-next
#loginView.client-entry-view:has(
    #profileStage:not([hidden])
)
.client-entry-logo-orbit {
    width: clamp(156px, 12vw, 196px) !important;
    margin: 0 0 18px -8px !important;
    opacity: 1 !important;
}

html.endcore-windows-next
#loginView.client-entry-view:has(
    #profileStage:not([hidden])
)
.client-entry-logo {
    opacity: 1 !important;
    filter:
        drop-shadow(0 24px 44px rgba(0,0,0,.56))
        drop-shadow(0 0 36px rgba(71,162,255,.34))
        drop-shadow(0 0 18px rgba(92,212,255,.18)) !important;
}


/* Tone down the giant floating symbol slightly so the
   wordmark becomes the true primary brand read. */
html.endcore-windows-next
#loginView.client-entry-view:has(
    #profileStage:not([hidden])
)
.client-entry-brand::before {
    opacity: .74 !important;
}


/* ---------------------------------------------------------
   ENDCORE WORDMARK / MEDIA SUBMARK
   --------------------------------------------------------- */

html.endcore-windows-next
#loginView.client-entry-view:has(
    #profileStage:not([hidden])
)
.client-entry-wordmark {
    color: #ffffff !important;
    font-size: clamp(64px, 5.3vw, 90px) !important;
    line-height: .90 !important;
    letter-spacing: -.078em !important;

    text-shadow:
        0 14px 34px rgba(0,0,0,.72),
        0 0 22px rgba(64,140,255,.08) !important;
}

html.endcore-windows-next
#loginView.client-entry-view:has(
    #profileStage:not([hidden])
)
.client-entry-submark {
    display: block !important;
    align-self: flex-start !important;

    margin-top: 10px !important;
    margin-left: 2px !important;

    color: #55b7ff !important;

    font-size: clamp(11px, .9vw, 14px) !important;
    font-weight: 780 !important;
    letter-spacing: .42em !important;
    text-transform: uppercase !important;

    text-shadow:
        0 2px 12px rgba(0,0,0,.82),
        0 0 22px rgba(63,163,255,.22) !important;
}


/* ---------------------------------------------------------
   LEFT BRAND BLOCK BREATHING ROOM
   --------------------------------------------------------- */

html.endcore-windows-next
#loginView.client-entry-view:has(
    #profileStage:not([hidden])
)
.client-entry-brand {
    max-width: 430px !important;
    padding-top: 20px !important;
}

html.endcore-windows-next
#loginView.client-entry-view:has(
    #profileStage:not([hidden])
)
.client-entry-brand::after {
    margin-top: 30px !important;
    color: rgba(203, 223, 244, .72) !important;
}