/* RTT.Kiosk host — minimal boot/splash styles (extracted from the monolith wwwroot\css\app.css + index.html inline style).
   All app styling lives in _content/RTT.UI/css/rtt-theme.css + component-scoped/inline styles. */

html, body {
    /* 2026-11-14 modern REYSTI skin, was: font-family: 'cascadiacode', Arial, sans-serif; */
    font-family: var(--rtt-font-family, 'Sora', system-ui, sans-serif);
    color: var(--rtt-text);
    background-color: var(--rtt-bg); /* CLASSIC-UI fidelity: original monolith showed plain black (was var(--rtt-bg, #0a0a14)) */
    margin: 0;
    height: 100%;
}

h1:focus {
    outline: none;
}

/* Monolith splash container (SOURCE css\site.css: #app { display:flex; flex-direction:column; }).
   height:100% chains html/body -> #app -> #divLogo_index so the glowing-logo wobble
   animation (divEffects apply3dGlowingTextEffect) gets the full viewport and is not clipped. */
#app {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.imgOverlay {
    justify-self: center;
    align-self: center;
}

#divLoading {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    justify-content: center;
    align-content: center;
}

#divLogo_index {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 100%;
    min-height: 230px;
    padding-top: 60px;
    height: 100%;
    flex-grow: 1;
}

/* Blazor WASM download progress ring (monolith app.css) */
.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: var(--rtt-border-strong); /* 2026-11-14, was: white (classic track) */
        stroke-width: 0.35rem; /* 2026-11-14, was: 0.6rem */
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: var(--rtt-primary); /* 2026-11-14, was: var(--color_a, var(--rtt-primary)) */
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    /* 2026-11-14, was: font-family 'cascadiacode'; font-size 20px; font-weight bolder */
    font-family: var(--rtt-font-mono, 'Martian Mono', monospace);
    font-size: var(--rtt-font-size-sm, 0.875rem);
    font-weight: var(--rtt-font-weight-medium, 500);
    letter-spacing: 0.08em;
    color: var(--rtt-text); /* CLASSIC-UI fidelity: original value (was var(--rtt-text, white)) */
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "");
    }

/* ==================================================================================================================
   BOOT SPLASH (2026-10-29, user: "the 3D REYSTI loading animation is not nice, make it more classy")
   was: Intro.gif + Logo.png + a progress ring + divEffects apply3dGlowingTextEffect (3D wobbling glowing text whose
   injected global <style> even leaked into the kiosk pages). Now: the REYSTI night ground, one soft breathing glow,
   the wordmark in Sora whose letters rise in one after the other (the single orchestrated moment), and a hairline
   that fills with the real Blazor download progress (--blazor-load-percentage, WASM host). The MAUI host loads
   locally without that variable: class rs-indet shows a calm travelling light instead.
   Ids divLogo_index / divDlProgress / divLoading are kept: host-bridge.js setBlazorAppAsLoaded() hides them.
   Colors = the REYSTI tokens of rtt-theme.css (fallbacks only for the instant before that sheet applies).
   ================================================================================================================== */
#divLogo_index.rs-splash {
    --rs-bg: var(--rtt-bg, #0a0a14);
    --rs-ink: var(--rtt-text, #f0f0f5);
    --rs-accent: var(--rtt-primary, #84baf8);
    --rs-accent-rgb: var(--rtt-primary-rgb, 132, 186, 248);
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(18px, 3.2vmin, 34px);
    min-height: 0;
    height: auto;
    padding: 0;
    background: var(--rs-bg);
    color: var(--rs-ink);
    font-family: 'Sora', system-ui, sans-serif;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

.rs-glow {
    position: absolute;
    left: 50%;
    top: 46%;
    width: 120vmax;
    height: 120vmax;
    transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, rgba(var(--rs-accent-rgb), .16), rgba(var(--rs-accent-rgb), .05) 45%, transparent 100%); /* soft edge: no visible ring */
    pointer-events: none;
    animation: rs-breathe 6s ease-in-out infinite;
}

.rs-mark {
    position: relative;
    display: flex;
    padding-left: .42em; /* optical centring: the tracking adds space after the last letter */
    font-size: clamp(30px, 8.5vmin, 96px);
    font-weight: 600;
    letter-spacing: .42em;
    line-height: 1;
}

.rs-mark span {
    display: inline-block;
    animation: rs-rise .9s cubic-bezier(.16, 1, .3, 1) both;
}

.rs-mark span:nth-child(2) { animation-delay: .07s; }
.rs-mark span:nth-child(3) { animation-delay: .14s; }
.rs-mark span:nth-child(4) { animation-delay: .21s; }
.rs-mark span:nth-child(5) { animation-delay: .28s; }
.rs-mark span:nth-child(6) { animation-delay: .35s; }

.rs-line {
    position: relative;
    width: clamp(120px, 26vmin, 260px);
    height: 2px;
    border-radius: 2px;
    background: rgba(var(--rs-accent-rgb), .16);
    overflow: hidden;
    animation: rs-fade .8s ease .5s both;
}

.rs-line i {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--blazor-load-percentage, 0%);
    background: var(--rs-accent);
    box-shadow: 0 0 12px rgba(var(--rs-accent-rgb), .7);
    transition: width .25s ease-out;
}

.rs-pct {
    min-height: 1.2em;
    font-size: clamp(11px, 1.5vmin, 15px);
    font-weight: 500;
    letter-spacing: .18em;
    font-variant-numeric: tabular-nums;
    color: rgba(var(--rs-accent-rgb), .75);
    animation: rs-fade .8s ease .6s both;
}

.rs-pct::after { content: var(--blazor-load-percentage-text, ""); }

/* no progress value (MAUI host): a light travels along the line */
.rs-indet .rs-line i {
    width: 34%;
    background: linear-gradient(90deg, transparent, var(--rs-accent), transparent);
    animation: rs-travel 1.6s cubic-bezier(.45, .05, .55, .95) infinite;
}

@keyframes rs-rise { from { opacity: 0; transform: translateY(.35em); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes rs-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rs-breathe { 0%, 100% { opacity: .7; transform: translate(-50%, -50%) scale(.96); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); } }
@keyframes rs-travel { from { transform: translateX(-110%); } to { transform: translateX(310%); } }

@media (prefers-reduced-motion: reduce) {
    .rs-glow, .rs-mark span, .rs-line, .rs-pct { animation: none; }
    .rs-indet .rs-line i { animation: none; width: 100%; opacity: .5; }
}