/* Dedicated boot screen. Indeterminate until the actual bootstrap completes. */
#loader{display:grid;place-items:center;position:fixed;inset:0;z-index:9999;background:var(--bg);opacity:1;visibility:visible;transition:opacity .24s ease,visibility .24s;overflow:hidden}
.boot-content{display:flex;flex-direction:column;align-items:center;width:min(280px,72vw);padding:20px 0;transform:translateY(-12px)}
.boot-mark{display:grid;place-items:center;width:210px;max-width:100%;aspect-ratio:1;margin-bottom:34px}
.boot-mark img{display:block;width:100%;height:100%;object-fit:contain;opacity:0;transform:translateY(6px);transition:opacity .32s ease,transform .4s cubic-bezier(.2,.7,.2,1);border-radius:12px}
#loader.mark-ready .boot-mark img{opacity:1;transform:none}
.boot-track{width:140px;height:2px;overflow:hidden;border-radius:8px;background:color-mix(in srgb,var(--text) 10%,transparent);position:relative}
.boot-track span{position:absolute;inset:0 auto 0 0;width:32%;border-radius:inherit;background:var(--accent);transform:translateX(-105%);animation:boot-travel 1.4s cubic-bezier(.4,0,.2,1) infinite}
.boot-caption{margin-top:16px;color:var(--muted);font-size:11px;font-weight:450;letter-spacing:.035em}
#loader.is-complete .boot-track span{animation:none;transform:none;width:100%;transition:width .14s ease}
#loader.is-leaving{opacity:0;visibility:hidden;transition-duration:.24s}
@keyframes boot-travel{0%{transform:translateX(-105%)}100%{transform:translateX(420%)}}
@media(max-width:700px){.boot-mark{width:180px;margin-bottom:30px}.boot-track{width:120px}}
@media(prefers-reduced-motion:reduce){#loader,.boot-mark img{transition:none}.boot-mark img{transform:none}.boot-track span{animation:none;transform:none;width:45%;opacity:.7}}
