/* SkyTerra auth ground — photographic sky-meets-earth behind login/signup.
   Decorative only. The form is a sibling, never a child, so clipping the
   oversized media (needed for parallax / settle-zoom) cannot hide controls.
   Light theme: pale sky, navy ranges, white card. No dark scrim. */

.login-ground {
    --lg-mx: 50%;
    --lg-my: 42%;
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden; /* clips decorative bleed only */
}

.login-ground__media {
    position: absolute;
    inset: -5%;
    will-change: transform;
}

.login-ground__still,
.login-ground__video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 60%;
    max-width: none;
}

@media (max-width: 480px) {
    /* The 16:9 clip would fill a tall phone with sky and hide the
       ridgeline behind the sheet. Phones use the portrait still,
       framed into the hero band so the ranges sit above the card. */
    .login-ground__video {
        display: none;
    }
    .login-ground__media {
        inset: auto -5% auto -5%;
        top: 0;
        height: clamp(180px, 40vh, 340px);
    }
    .login-ground__still {
        object-position: center 70%;
    }
}

.login-ground__video {
    opacity: 0;
    transition: opacity 0.9s cubic-bezier(.22, 1, .36, 1);
}

.login-ground.is-live .login-ground__video {
    opacity: 1;
}

.login-ground.is-live .login-ground__still {
    animation: none;
}

/* Soft cool bloom that follows the pointer (JS writes --lg-mx / --lg-my).
   White / sky only — never a dark veil over the land. */
.login-ground__bloom {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            ellipse 68% 48% at var(--lg-mx) var(--lg-my),
            rgba(255, 255, 255, 0.46) 0%,
            rgba(232, 240, 250, 0.16) 44%,
            rgba(232, 240, 250, 0) 72%
        ),
        linear-gradient(
            180deg,
            rgba(251, 252, 254, 0.22) 0%,
            rgba(251, 252, 254, 0) 38%,
            rgba(226, 236, 248, 0.10) 100%
        );
}

/* CSS settle-zoom on the still: a single one-directional arrival — the image
   starts at a gentle zoom (1.06×) and eases to rest at 1.0× over 14 s.
   animation-fill-mode: both holds the from-state before play and the
   to-state after it ends; no loop, no reverse, no seam. */
@keyframes lg-settle {
    from { transform: scale(1.06) translate3d(0.5%, 0.3%, 0); }
    to   { transform: scale(1.0) translate3d(0, 0, 0); }
}

.login-ground:not([data-ground="reduced"]) .login-ground__still {
    animation-name: lg-settle;
    animation-duration: 14s;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
    animation-iteration-count: 1;
}

@media (prefers-reduced-motion: reduce) {
    .login-ground__media,
    .login-ground__still,
    .login-ground__video {
        animation: none !important;
        transform: none !important;
        transition: none !important;
    }
    .login-ground__video {
        display: none;
    }
}