/*
 * The page around the demo: a container that fills the window, and the loading screen inside it.
 *
 * Colours are Ava3DControl's, hard-coded rather than inherited: this document is framed by demo.html on the
 * site, which has the palette, but it is also a page in its own right that someone may open directly, and a
 * loading screen that only looks right inside a frame is a loading screen that is wrong half the time.
 *
 * Dark in both themes, because the thing that appears when it finishes is a black viewport.
 */

html, body { height: 100%; }

#out {
    position: absolute;
    inset: 0;
    background: #0d1016;
}

.avalonia-splash {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #0d1016;
    color: #dde2ec;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    pointer-events: none;
}

/* Avalonia adds this class when the application takes the canvas over. */
.avalonia-splash.splash-close {
    display: none;
    opacity: 0;
    transition: opacity 200ms, display 200ms;
}

/* Sized against the viewport rather than in fixed pixels.

   This was laid out on a laptop and read correctly there, and on a large display the whole thing —
   wordmark, the line asking for a key, the bar under it — sat in the middle of an acre of black at the
   size of a caption. It is the only thing on screen at that moment and the one instruction the visitor
   has to follow, so it should be legible from where somebody sits to watch a film.

   clamp rather than a media query: the small end is what this already was, the large end stops the
   wordmark becoming a banner on a 5K monitor, and everything between is one continuous scale. The em
   sizes below then follow the brand rather than repeating the arithmetic. */
.boot {
    width: min(clamp(420px, 30vw, 780px), calc(100vw - 48px));
    text-align: center;
}

.boot-brand {
    margin: 0 0 1.05em;
    font-size: clamp(21px, 2.1vw, 42px);
    font-weight: 650;
    letter-spacing: -0.01em;
}

.boot-brand span { color: #7fd8a0; }

/* The version, beside the wordmark and deliberately quieter than it: same baseline, because they are one
   line of type rather than a title and a caption, and grey because which build this is matters to somebody
   reporting a fault and to nobody else. */
.boot-brand .boot-version {
    color: #6f7889;
    font-size: 0.52em;
    font-weight: 500;
    letter-spacing: 0;
    margin-left: 0.6em;
    font-variant-numeric: tabular-nums;
}

.boot-brand .boot-version:empty { display: none; }

.boot-line {
    margin: 0 0 0.85em;
    font-size: clamp(13.5px, 1.15vw, 23px);
    color: #949dad;
    font-variant-numeric: tabular-nums;
}

.boot-track {
    height: clamp(4px, 0.32vw, 7px);
    border-radius: 999px;
    background: #222a36;
    overflow: hidden;
}

.boot-bar {
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: #7fd8a0;
    transition: width 180ms linear;
}

.boot-hint {
    margin: 1.3em 0 0;
    font-size: clamp(12px, 0.95vw, 18px);
    line-height: 1.55;
    color: #6f7889;
}

/* The one instruction that has to be obeyed before anything happens, and it is below the bar rather than
   above it on purpose: the eye goes down the splash — name, what it is doing, how far it has got — and
   what to do next belongs at the end of that, not buried in the middle of it as a status line.

   Loud, because everything else here is deliberately quiet and a whisper among whispers is invisible. This
   is the only moment in the demo where nothing happens until the visitor acts, so it is the only thing on
   the page allowed to shout. The accent green rather than white: it is the same colour as the finished
   progress bar directly above it, which ties the two together as one "ready — go" rather than reading as
   an unrelated warning. */
.boot.waiting .boot-hint {
    margin-top: 1.1em;
    font-size: clamp(34px, 2.6vw, 50px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: #9fe6ba;
}

/* The failure state. Anything that reaches here has already cost the visitor a wait, so it says what went
   wrong in one sentence and gives them somewhere to go rather than apologising. */
.boot.failed .boot-track { display: none; }
.boot.failed .boot-line { color: #e88f8f; }
.boot.failed .boot-hint { color: #949dad; }
.avalonia-splash .boot.failed { pointer-events: auto; }
.boot-hint a { color: #7fd8a0; }

/* The sound waiting for a gesture. See notice() in audio.js for why it is the page saying this and not the
   application, and why it is a label rather than a button.

   Top centre, which is the one edge of this viewport nothing else uses: the diagnostics sit top left, the
   captions run along the bottom, and the step buttons are bottom right. Pointer-events off so it cannot
   swallow the very click it is asking for — a notice that has to be dismissed before it can be obeyed is
   worse than no notice. */
#audio-wait {
    position: absolute;
    top: 62px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 7px 14px;
    border: 1px solid #2C3444;
    border-radius: 999px;
    background: #141821D9;
    color: #dde2ec;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 12px;
    white-space: nowrap;
    pointer-events: none;

    /* Above the application, which is the only place it could usefully be. Avalonia's host is a positioned
       canvas filling the page, so a label with no z-index is a label behind the picture — and this one
       exists precisely for the case where the sound switch is on, nothing is coming out, and the reason is
       a browser policy nobody can guess at. An invisible explanation is worse than none, because it reads
       as the demo having no answer. */
    z-index: 40;
}