/*
 * The faint mark in the middle of the page while the bundle is still on its way - the only thing
 * on screen between the HTML arriving and React's first commit, which is otherwise a blank page
 * for as long as the scripts and the first locale catalog take.
 *
 * A file in public/ rather than a rule in index.css: in dev that stylesheet arrives through the
 * module graph, i.e. with the very scripts this stands in for, and would paint nothing. It is not
 * inline either, so the CSP (nginx/security-headers.inc) does not lean on 'unsafe-inline' for one
 * more thing.
 *
 * The mark sits BESIDE #root, not in it: `pnpm run shot`, `perf` and `i18n-widths` all read "#root
 * has children" as "React has rendered", and a splash inside it would make that true at once. It
 * goes away the moment React puts anything into #root, with no script to remove it.
 */

.boot-splash {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
    /* The system ink of whatever `color-scheme` theme-boot.js put on <html> - near-black on the
       light page, near-white on the dark one - because the design tokens are not loaded yet in
       dev. An engine without system colours drops the line and inherits, which is the same ink. */
    color: CanvasText;
}

.boot-splash svg {
    width: 84px;
    height: 84px;
    opacity: 0;
    /* The delay is what keeps a warm reload quiet: when the app is up in a few hundred ms the mark
       never shows, and a mark that flashed for 100ms before every screen would be worse than the
       blank page it replaces. */
    animation: boot-splash-in 500ms ease-out 300ms forwards;
}

/* The visor and the dots: white in the mark, but on the near-white ink of the dark page white would
   erase them, so here they take the page's own colour - the same system pair as the ink above. */
.boot-splash svg path:last-child {
    fill: Canvas;
}

@keyframes boot-splash-in {
    to {
        opacity: 0.07;
    }
}

/* The fade is dropped, the delay is kept - the same trade the blanket rule in index.css makes. */
@media (prefers-reduced-motion: reduce) {
    .boot-splash svg {
        animation-duration: 1ms;
    }
}

#root:not(:empty) ~ .boot-splash {
    display: none;
}