/*
 * Login-Szene: realistische Ebene. Einzige Datei mit erlaubten Farbverläufen
 * (ausdrückliche Freigabe für die Login-Illustration, siehe test_no_css_gradients_static.py).
 */

/* Canvas-Himmel (sky-renderer.js) ersetzt Tönung, Sonne, Mond und Sterne aus CSS. */
.login-premium .login-sky-canvas {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Unsichtbar, aber im Layout: Positionen und Mondbild bleiben für das Szenenmodell messbar. */
.login-premium .login-sky--canvas > :not(.login-sky-canvas) {
    visibility: hidden;
}

.login-premium:has(.login-sky--canvas) .login-branding::after {
    opacity: 0;
}

/*
 * Belichtung folgt stufenlos der Sonnenhöhe (--rail-solar-elevation, Grad):
 * Tag 1, Dämmerung gedimmt, Nacht deutlich dunkler und entsättigt.
 */
.login-premium {
    --rail-night: clamp(0, calc((var(--rail-solar-elevation, 30) * -1 - 1) / 9), 1);
    --rail-dusk-light: clamp(0.34, calc(0.95 + var(--rail-solar-elevation, 30) * 0.035), 1);
    --rail-dusk-saturation: clamp(0.5, calc(1 + var(--rail-solar-elevation, 30) * 0.03), 1);
}

.login-premium :is(.login-city-foreground, .overhead-line, .train-ground, .train-track-container) {
    filter: brightness(var(--rail-dusk-light)) saturate(var(--rail-dusk-saturation));
}

.login-premium .train-animation {
    filter: brightness(clamp(0.55, calc(var(--rail-dusk-light) + 0.15), 1)) saturate(var(--rail-dusk-saturation));
}

/* Zugkörper: Glanz nur auf den echten Formen (Wagenkörper, Führerhaus, Nase) – nicht auf dem
   rechteckigen Container .train-engine, sonst entstehen helle Vierecke vorne und hinten. */
.login-premium :is(.train-wagon-body, .train-cabin, .train-nose) {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(20, 28, 40, 0.1) 100%);
}

/* Bodenschatten und Kontakt: der Zug steht auf den Gleisen statt zu schweben. */
.login-premium .train {
    filter: drop-shadow(0 0.35rem 0.3rem rgba(10, 14, 22, 0.28));
}

/* Kontaktschatten am feststehenden Radsatz, nicht am drehenden Rad: sonst dreht der Versatz
   mit und wirkt wie eine Unwucht. Ein runder Schatten bleibt beim Rollen vollkommen ruhig. */
.login-premium .train-wheel-set {
    filter: drop-shadow(0 0.0625rem 0.09rem rgba(0, 0, 0, 0.22));
}

/* Frontscheibe: getöntes Glas mit Glanzkante. */
.login-premium .train-windscreen {
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.42) 0 22%, rgba(255, 255, 255, 0) 22% 60%, rgba(255, 255, 255, 0.12) 60% 66%, rgba(255, 255, 255, 0) 66%);
    box-shadow: inset 0 -0.15rem 0.3rem rgba(0, 0, 0, 0.25);
}

/* Fenster: getöntes Glas mit feiner Spiegelung, nachts warm beleuchtet. */
.login-premium .train-window {
    background-image: linear-gradient(120deg, rgba(255, 255, 255, 0.28) 0 12%, rgba(255, 255, 255, 0) 12% 58%, rgba(255, 255, 255, 0.1) 58% 63%, rgba(255, 255, 255, 0) 63%);
    background-color: color-mix(in srgb, #ffd58a calc(var(--rail-night) * 100%), var(--rail-wagon-window-color));
    box-shadow: 0 0 calc(var(--rail-night) * 0.6rem) color-mix(in srgb, rgba(255, 196, 110, 0.85) calc(var(--rail-night) * 100%), transparent);
}

/* Scheinwerfer: Kegel nach vorne, nur in Dämmerung und Nacht sichtbar. */
.login-premium .train-engine.front .train-headlight::after {
    position: absolute;
    top: 50%;
    left: 100%;
    width: 9rem;
    height: 2.6rem;
    background: linear-gradient(90deg, rgba(255, 244, 214, 0.6) 0%, rgba(255, 244, 214, 0.18) 45%, rgba(255, 244, 214, 0) 100%);
    clip-path: polygon(0 44%, 100% 0, 100% 100%, 0 56%);
    content: '';
    filter: blur(2px);
    opacity: var(--rail-night);
    pointer-events: none;
    transform: translateY(-50%);
}

.login-premium .train-headlight {
    box-shadow: 0 0 calc(0.5rem + var(--rail-night) * 0.9rem) var(--rail-train-headlight);
}

.login-premium .train-tail-light {
    box-shadow: 0 0 calc(0.32rem + var(--rail-night) * 0.7rem) var(--rail-train-tail-light);
}

/* Schienen: feiner Glanz auf dem Schienenkopf. */
.login-premium .train-rail {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 60%);
}