/*
file                startup-shell.css
version             0.5.0b1
date                12.10.26

dude-code_alex_lauterbach

CSP-safe first paint matching the established React session-loading indicator.
*/

:root {
    color-scheme: dark;
    --startup-bg: #15151f;
    --startup-overlay: rgba(21, 21, 31, 0.94);
    --startup-text: #f4efe9;
    --startup-accent-start: #d87566;
    --startup-accent-mid: #c99bcc;
    --startup-accent-end: #98a5ff;
    --startup-border: rgba(244, 239, 233, 0.075);
}

:root[data-theme="lcars"] {
    --startup-bg: #12131a;
    --startup-overlay: rgba(18, 19, 26, 0.92);
    --startup-text: #f1f2f6;
    --startup-accent-start: #ff6f61;
    --startup-accent-mid: #9b5de5;
    --startup-accent-end: #4cc9f0;
    --startup-border: rgba(255, 255, 255, 0.04);
}

:root[data-theme="dracula"] {
    --startup-bg: #282a36;
    --startup-overlay: rgba(40, 42, 54, 0.92);
    --startup-text: #f8f8f2;
    --startup-accent-start: #ff79c6;
    --startup-accent-mid: #bd93f9;
    --startup-accent-end: #8be9fd;
    --startup-border: rgba(248, 248, 242, 0.08);
}

:root[data-theme="modern-dark"] {
    --startup-bg: #111113;
    --startup-overlay: rgba(17, 17, 19, 0.92);
    --startup-text: #edeef0;
    --startup-accent-start: #b0b4ba;
    --startup-accent-mid: #baa7ff;
    --startup-accent-end: #4ccce6;
    --startup-border: rgba(237, 238, 240, 0.08);
}

:root[data-theme="dark"] {
    --startup-bg: #0d0e14;
    --startup-overlay: rgba(13, 14, 20, 0.92);
    --startup-text: #edeef0;
    --startup-accent-start: #baa7ff;
    --startup-accent-mid: #b0b4ba;
    --startup-accent-end: #4ccce6;
    --startup-border: rgba(237, 238, 240, 0.08);
}

:root[data-theme="modern-light"] {
    color-scheme: light;
    --startup-bg: #eceef2;
    --startup-overlay: rgba(236, 239, 244, 0.78);
    --startup-text: #1d1d1f;
    --startup-accent-start: #ff9f0a;
    --startup-accent-mid: #af52de;
    --startup-accent-end: #007aff;
    --startup-border: rgba(29, 29, 31, 0.08);
}

@font-face {
    font-family: "Barlow";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/Barlow-400.ttf") format("truetype");
}

* {
    box-sizing: border-box;
}

html,
body,
#root {
    min-height: 100%;
}

body {
    margin: 0;
    background: var(--startup-bg);
    line-height: 1.42;
}

.startup-shell {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 16px;
    background: var(--startup-overlay);
    font-family: "Barlow", "Avenir Next Condensed", sans-serif;
}

.startup-shell__loading-panel {
    display: grid;
    width: min(360px, 100%);
    gap: 14px;
}

.startup-shell__loading-track {
    width: 100%;
    height: 14px;
    overflow: hidden;
    border: 1px solid var(--startup-border);
    border-radius: 999px;
    background: transparent;
}

.startup-shell__loading-bar {
    width: 42%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        var(--startup-accent-start),
        var(--startup-accent-mid),
        var(--startup-accent-end)
    );
    animation: startup-shell-progress 1.1s ease-in-out infinite alternate;
}

.startup-shell__loading-label {
    margin: 0;
    color: var(--startup-text);
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    text-align: center;
    text-transform: uppercase;
}

@keyframes startup-shell-progress {
    from {
        transform: translateX(-4%);
    }

    to {
        transform: translateX(142%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .startup-shell__loading-bar {
        width: 100%;
        animation: none;
    }
}