/*
 * Login page night flight (companion to /js/login-night.js).
 *
 * From the first frame the page is the night sky colour and the card is
 * frosted glass. body#login_page.night, added by the script after a minute
 * without a login, fades the night sky's stars and moon in over that colour;
 * the script then flies the cloud deck in over the horizon and runs the day.
 * The sky, cloud deck, sun, moon and stars are rendered on one WebGL canvas
 * by /js/login-flight.js; this file owns the page colours, the stage, the
 * fade, the shooting star and the glass card, which the script darkens
 * through --ns-day as the sky behind it brightens.
 */

/* ---------- stage ---------- */

/* The sky itself: the scene's canvas is transparent wherever there is no
   cloud, and sinks its puffs into this colour (SKY_RGB in the script). Dark
   color-scheme keeps the browser's own pieces dark too: autofilled fields,
   the checkbox, scrollbars. */
#login_page {
    background-color: #0F1116;
    color-scheme: dark;
}

#login_body {
    position: relative;
    z-index: 1;
}

#night_scene {
    position: fixed;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
    visibility: hidden;
}

#login_page.night #night_scene {
    visibility: visible;
}

/* ---------- layer wrapper: owns the fade-in ---------- */

/* The night sky adds nothing to the page colour and the deck is still
   transparent, so this fades in only the stars and the moon. The script
   fades the deck in once it is done (STARS_IN_S). */
.ns-layer {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 6s ease;
}

.night .ns-layer {
    opacity: 1;
}

.ns-canvas {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
}

/* ---------- shooting star ---------- */

/* Same band the stars occupy (STAR_BAND in the script); clips the meteor so
   it can never cross the cloud deck below. */
.ns-sky-band {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 46vh;
    overflow: hidden;
}

.ns-meteor {
    position: absolute;
    top: 10vh;
    left: 70vw;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: #F3F7FF;
    box-shadow: 0 0 6px 1px rgba(243, 247, 255, 0.8);
    opacity: 0;
    transform: rotate(-32deg);
}

.ns-meteor::after {
    content: '';
    position: absolute;
    left: 2px;
    top: 0;
    width: 150px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(243, 247, 255, 0.85), transparent);
}

.ns-meteor.go {
    animation: ns-meteor 1.2s cubic-bezier(0.2, 0.6, 0.4, 1) forwards;
}

@keyframes ns-meteor {
    0%   { opacity: 0; transform: rotate(-32deg) translate3d(0, 0, 0); }
    12%  { opacity: 1; }
    100% { opacity: 0; transform: rotate(-32deg) translate3d(-26vw, 0, 0); }
}

/* ---------- glass card ---------- */

/* Clear frosted glass at night; smoked by day (--ns-day, 0..1, set by the
   script) so the light text stays readable over a bright sky and deck. */
#login_page .login-box {
    background: linear-gradient(rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.10)),
        rgba(10, 18, 30, calc(var(--ns-day, 0) * 0.5));
    color: #DCE6F4;
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.30),
        0 30px 70px rgba(0, 0, 0, 0.50);
}

#login_page .login-box h2,
#login_page .streamer_title {
    color: #F3F7FF;
}

#login_page #reset_password dl input,
#login_page #mfa_verify dl input,
#login_page #login dl input,
#login_page .popUpInput {
    background-color: rgba(255, 255, 255, 0.13);
    color: #F3F7FF;
}

#login_page #login_form dl input::placeholder,
#login_page .popUpInput::placeholder {
    color: rgba(243, 247, 255, 0.55);
}

#login_page #login_form dl input:focus-visible,
#login_page .popUpInput:focus-visible,
#login_page #login_form dl button:focus-visible,
#login_page .popUpButton:focus-visible {
    outline: 2px solid rgba(243, 247, 255, 0.7);
    outline-offset: 2px;
}

#login_page #login_form form dl dd button,
#login_page .popUpButton {
    background-color: #1A7FD0;
    box-shadow: 0 0 22px rgba(26, 127, 208, 0.45);
}

#login_page #login_form form dl dd button:hover,
#login_page .popUpButton:hover {
    background-color: #2A8FE0;
}

#login_page #login_form form dl dd button.pw-reveal {
    background-color: transparent;
    box-shadow: none;
    color: rgba(243, 247, 255, 0.6);
}

#login_page #login_form form dl dd button.pw-reveal:hover {
    background-color: transparent;
    color: #F3F7FF;
}

#login_page #remember-label,
#login_page #mfa_header-element p {
    color: #DCE6F4;
}

#login_page #account_links a {
    color: #BFD3EE;
}

/* The footer sits on the deck, which is bright by day. */
#login_page #login_footer {
    text-shadow: 0 1px 3px rgba(0, 0, 0, calc(var(--ns-day, 0) * 0.65));
}

#login_page #errormsg,
#login_page #form_header-element p {
    color: #FF9A9A;
}

#login_page #successmsg {
    color: #8FE3A3;
}

#login_page .maintenance-notice {
    background: linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08)),
        rgba(10, 18, 30, calc(var(--ns-day, 0) * 0.5));
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
}

/* ---------- motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
    #night_scene * {
        animation: none !important;
    }
}