/* ============================================================================
 * login-scene.css — v2.8.161 r2
 *
 * Cinematic login background system with 4 composition modes:
 *   - replace   = photo as sky + mountains, native TS bg gated off
 *   - overlay   = native TS bg stays + photo on top with opacity
 *   - glass     = native TS bg + heavily blurred photo (subtle brand tint)
 *   - cinematic = replace + film grain + vignette
 *
 * All effects respect navbar perf-tier picker and OS prefers-reduced-motion.
 * Light + dark mode parity built in (per GOLD RULE).
 * ============================================================================ */

/* ─── Root scene container ──────────────────────────────────────────────── */
.ts-login-scene,
.ts-bg-preview {
    --anim-duration: 30s;
    --anim-timing: ease-in-out;
    --photo-opacity: 1;
    --mountains-opacity-mult: 1;
}
.ts-login-scene {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

/* In REPLACE / CINEMATIC mode, scene paints its own base gradient.
   In OVERLAY / GLASS mode, scene is transparent so native TS bg shows through. */
.ts-login-scene[data-mode="replace"],
.ts-login-scene[data-mode="cinematic"] {
    background: linear-gradient(180deg, var(--bg-gradient-top, #0a1426) 0%, var(--bg-gradient-bottom, #04070f) 100%);
}
.ts-login-scene[data-mode="overlay"],
.ts-login-scene[data-mode="glass"] {
    background: transparent;
}

/* ─── Layered effect classes ────────────────────────────────────────────── */
.ts-login-scene__layer { position: absolute; inset: 0; pointer-events: none; will-change: transform, opacity; }

.ts-login-scene__sky,
.ts-bg-preview .ts-bg-image {
    background-image: var(--bg-url, none);
    background-position: var(--bg-position, center center);
    background-size: var(--bg-size, cover);
    background-repeat: no-repeat;
    filter: blur(var(--bg-blur, 0px));
    transform-origin: center center;
    opacity: var(--photo-opacity, 1);
    mix-blend-mode: var(--blend-mode, normal);
}

/* Glass mode = soft blur + low opacity, photo recedes behind glass card */
.ts-login-scene[data-mode="glass"] .ts-login-scene__sky {
    filter: blur(calc(var(--bg-blur, 0px) + 18px)) saturate(1.15);
}

/* Atmospheric haze gradient from photo into mountain area (replace/cinematic only) */
.ts-login-scene__haze {
    background:
        radial-gradient(ellipse 80% 40% at 50% 75%, rgba(15, 23, 42, 0.55) 0%, transparent 60%),
        linear-gradient(180deg, transparent 0%, transparent 55%, rgba(2, 6, 23, 0.45) 78%, rgba(2, 6, 23, 0.78) 100%);
}
[data-bs-theme="light"] .ts-login-scene__haze {
    background:
        radial-gradient(ellipse 80% 40% at 50% 75%, rgba(15, 23, 42, 0.32) 0%, transparent 60%),
        linear-gradient(180deg, transparent 0%, transparent 60%, rgba(15, 23, 42, 0.30) 80%, rgba(15, 23, 42, 0.55) 100%);
}
.ts-login-scene[data-mode="overlay"] .ts-login-scene__haze,
.ts-login-scene[data-mode="glass"] .ts-login-scene__haze {
    display: none;
}

/* Dim overlay (user-controlled). Hidden in glass mode (photo already low-opacity). */
.ts-login-scene__overlay {
    background: var(--bg-overlay-color, #020617);
    opacity: var(--bg-overlay-opacity, 0.32);
}
.ts-login-scene[data-mode="glass"] .ts-login-scene__overlay { display: none; }

/* Vignette + grain + chromatic */
.ts-login-scene__vignette { box-shadow: inset 0 0 220px 60px rgba(0, 0, 0, 0.65); pointer-events: none; }
.ts-login-scene__grain {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/></svg>");
    mix-blend-mode: overlay;
    opacity: 0.22;
}
.ts-login-scene__chromatic {
    background: linear-gradient(120deg, rgba(255, 50, 100, 0.06) 0%, transparent 25%, rgba(40, 200, 255, 0.06) 100%);
    mix-blend-mode: screen;
}

/* ─── Mountains (gated by data-mountains=on|off + opacity multiplier) ──── */
.ts-login-scene__mountains {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    pointer-events: none;
}
.ts-login-scene[data-mountains="off"] .ts-login-scene__mountains { display: none; }
.ts-login-scene__mountains svg { display: block; width: 100%; height: auto; }
.ts-login-scene__mountains--back  { height: 38vh; opacity: calc(0.55 * var(--mountains-opacity-mult, 1)); filter: blur(1px); z-index: 2; }
.ts-login-scene__mountains--mid   { height: 32vh; opacity: calc(0.80 * var(--mountains-opacity-mult, 1)); z-index: 3; }
.ts-login-scene__mountains--front { height: 26vh; opacity: calc(1    * var(--mountains-opacity-mult, 1)); z-index: 4; }

.ts-login-scene__mountains--back  svg path { fill: #1a2640; }
.ts-login-scene__mountains--mid   svg path { fill: #0e1729; }
.ts-login-scene__mountains--front svg path { fill: #040814; }
[data-bs-theme="light"] .ts-login-scene__mountains--back  svg path { fill: #2c3a55; }
[data-bs-theme="light"] .ts-login-scene__mountains--mid   svg path { fill: #1c2738; }
[data-bs-theme="light"] .ts-login-scene__mountains--front svg path { fill: #0a1020; }

.ts-login-scene__mountains::after {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 18%;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.18));
    pointer-events: none;
}

.ts-login-scene__ground-glow {
    position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
    width: 80vw; height: 18vh;
    background: radial-gradient(ellipse at 50% 100%, rgba(99, 102, 241, 0.18) 0%, transparent 60%);
    pointer-events: none; z-index: 5;
}
[data-bs-theme="light"] .ts-login-scene__ground-glow {
    background: radial-gradient(ellipse at 50% 100%, rgba(99, 102, 241, 0.10) 0%, transparent 60%);
}

/* ─── Animations ─────────────────────────────────────────────────────── */
.ts-login-scene[data-anim="ken-burns"] .ts-login-scene__sky,
.ts-login-scene[data-anim="cinematic"] .ts-login-scene__sky {
    animation: tsSceneKenBurns var(--anim-duration, 30s) ease-in-out infinite alternate;
}
.ts-login-scene[data-anim="zoom-in"]  .ts-login-scene__sky { animation: tsSceneZoomIn  var(--anim-duration, 30s) ease-in-out infinite alternate; }
.ts-login-scene[data-anim="pan-left"] .ts-login-scene__sky { animation: tsScenePanLeft var(--anim-duration, 30s) linear infinite alternate; }
.ts-login-scene[data-anim="pan-right"] .ts-login-scene__sky { animation: tsScenePanRight var(--anim-duration, 30s) linear infinite alternate; }
.ts-login-scene[data-anim="pulse"]    .ts-login-scene__sky { animation: tsScenePulse    var(--anim-duration, 30s) ease-in-out infinite; }
.ts-login-scene[data-anim="cinematic"] .ts-login-scene__overlay { animation: tsSceneOverlayBreath calc(var(--anim-duration, 30s) * 0.6) ease-in-out infinite alternate; }

[data-speed="slow"]   { --anim-duration: 30s; }
[data-speed="medium"] { --anim-duration: 18s; }
[data-speed="fast"]   { --anim-duration: 10s; }

@keyframes tsSceneKenBurns {
    0%   { transform: scale(1.04) translate(0, 0); }
    100% { transform: scale(1.16) translate(-1.5%, -1%); }
}
@keyframes tsSceneZoomIn   { 0% { transform: scale(1.0); } 100% { transform: scale(1.18); } }
@keyframes tsScenePanLeft  { 0% { transform: translateX(0) scale(1.08); } 100% { transform: translateX(-2.5%) scale(1.08); } }
@keyframes tsScenePanRight { 0% { transform: translateX(0) scale(1.08); } 100% { transform: translateX(2.5%) scale(1.08); } }
@keyframes tsScenePulse {
    0%, 100% { filter: blur(var(--bg-blur, 0px)) brightness(1.0); opacity: var(--photo-opacity, 1); }
    50%      { filter: blur(var(--bg-blur, 0px)) brightness(1.12); opacity: calc(var(--photo-opacity, 1) * 0.92); }
}
@keyframes tsSceneOverlayBreath {
    0%   { opacity: var(--bg-overlay-opacity, 0.32); }
    100% { opacity: calc(var(--bg-overlay-opacity, 0.32) * 0.7); }
}

/* ─── Perf tier + reduced motion ────────────────────────────────────── */
body[data-perf-tier="saver"] .ts-login-scene__sky,
body[data-perf-tier="saver"] .ts-login-scene__overlay,
body[data-perf-tier="saver"] .ts-login-scene__grain,
body[data-perf-tier="saver"] .ts-login-scene__chromatic {
    animation: none !important;
    transform: none !important;
}
body[data-perf-tier="saver"] .ts-login-scene__grain,
body[data-perf-tier="saver"] .ts-login-scene__chromatic { display: none; }
@media (prefers-reduced-motion: reduce) {
    .ts-login-scene__sky, .ts-login-scene__overlay,
    .ts-bg-image, .ts-bg-overlay { animation: none !important; transform: none !important; }
}

/* ─── App-wide background (unchanged) ────────────────────────────────── */
.ts-app-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; background-color: transparent; }
.ts-app-bg__image {
    position: absolute; inset: 0;
    background-image: var(--app-bg-url, none); background-position: center center;
    background-size: cover; background-repeat: no-repeat;
    opacity: calc(var(--app-bg-opacity, 8) / 100);
    filter: blur(var(--app-bg-blur, 12px));
}
.ts-app-bg__dim {
    position: absolute; inset: 0;
    background: rgba(2, 6, 23, calc(var(--app-bg-dim, 40) / 100));
}
[data-bs-theme="light"] .ts-app-bg__dim { background: rgba(255, 255, 255, calc(var(--app-bg-dim, 40) / 100)); }
.ts-app-bg--fixed  { position: fixed; }
.ts-app-bg--scroll { position: absolute; }
body[data-perf-tier="saver"] .ts-app-bg__image { filter: none; }

/* ─── Z-stack safety ─────────────────────────────────────────────────── */
.ts-login-scene + main,
body:has(.ts-login-scene) main { position: relative; z-index: 10; }