/* Sign-in / landing panels — hero background + vertically centered card */

.login-page-root {
    min-height: 100vh;
    min-height: 100dvh;
    background-color: #111;
    /* Vertical anchor lower on the artwork (higher % = image shifted down in frame) */
    background-position: center 72%;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: scroll;
}

/* Landing with intro: video first on black; hero JPG appears only with panel */
.home-entry--has-intro:not(.home-entry--signin-visible) {
    background-image: none !important;
    background-color: #000 !important;
}

.home-entry--signin-only,
.home-entry--signin-visible {
    background-image: var(--hero-image);
}

/* Stack intro + panel on `/` */
.login-page-root.home-entry {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

/* Intro layer is position:fixed (out of flow); keep panel area full viewport for centering */
.login-page-root.home-entry #home-signin {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
}

/* `/login/` — single wrapper fills viewport height */
.login-page-root:not(.home-entry) > .auth-page-wrapper {
    min-height: 100vh;
    min-height: 100dvh;
}

.login-page-root .auth-page-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: clamp(1rem, 5vmin, 2.5rem);
    box-sizing: border-box;
    background: transparent;
}

.login-page-root .auth-page-content {
    width: 100%;
}

.login-page-root .auth-page-wrapper .card {
    margin-top: 0;
}

.login-page-root .card-bg-fill {
    background-color: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(6px);
}

/* Safety: public auth pages must not stay hidden if x-cloak remains on a node */
.login-page-root [x-cloak] {
    display: revert !important;
}