/* The load screen (Ryan picked "Morph", 14 Oct; docs/loader): Scout's waveform pulses once, its outer bars fly out and
   become the brackets, the word opens from the middle and the orange overprint lands a beat later. About 700 ms, CSS only,
   so it plays before any script has loaded; then the wordmark holds until the first screen is drawn, and goes at once if
   that's already happened (app.js removes #boot). Overprint ink on cream, square, centred clear of the status bar; Reduce
   Motion shows the wordmark, still. No progress line. */
.boot{--boot-paper:#EFEBE1;--boot-blue:#0A5AA8;--boot-orange:#FF6C2F;position:fixed;inset:0;z-index:70;display:grid;place-items:center;background:var(--boot-paper);
  padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px);transition:opacity .18s ease}
.boot.out{opacity:0;pointer-events:none}
.boot-ring,.boot-wm{grid-area:1/1}
.boot-ring{width:96px;height:96px;color:var(--boot-blue)}
.boot-ring svg{display:block;width:100%;height:100%;overflow:visible}
.boot-b,.boot-c{transform-box:fill-box;transform-origin:center}
.boot-wm{position:relative;width:min(300px,76vw);aspect-ratio:6426/1342}
.boot-wm svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.boot-letters{fill:var(--boot-blue)}.boot-marks{fill:var(--boot-orange)}.boot-shadow{fill:var(--boot-orange);transform:translate(2px,2px)}

@media (prefers-reduced-motion:no-preference){
  .boot-b{animation:bootPulse .24s ease-in-out both}
  .b1{animation-delay:18ms}.b2{animation-delay:36ms}.b3{animation-delay:54ms}.b4{animation-delay:72ms}
  .b1,.b2,.b3{animation:bootPulse .24s ease-in-out both,bootSink .15s cubic-bezier(.2,.8,.2,1) .25s both}
  .b2{animation-delay:36ms,265ms}.b3{animation-delay:54ms,280ms}.b1{animation-delay:18ms,250ms}
  .b0{animation:bootPulse .24s ease-in-out both,bootFlyL .3s cubic-bezier(.2,.8,.2,1) .25s both}
  .b4{animation:bootPulse .24s ease-in-out 72ms both,bootFlyR .3s cubic-bezier(.2,.8,.2,1) .25s both}
  .boot-c{animation:bootLetGo .22s cubic-bezier(.2,.8,.2,1) .26s both}
  .boot-marks{animation:bootIn 90ms linear .47s both}
  .boot-letters{animation:bootOpen .3s cubic-bezier(.2,.8,.2,1) .38s both}
  .boot-shadow{animation:bootLand .36s cubic-bezier(.3,1.4,.5,1) .44s both}
}
@media (prefers-reduced-motion:reduce){.boot-ring{display:none}}
@keyframes bootPulse{0%,100%{transform:scaleY(1)}40%{transform:scaleY(1.7)}75%{transform:scaleY(.55)}}
@keyframes bootSink{to{transform:scaleY(.1);opacity:0}}
@keyframes bootFlyL{80%{transform:translateX(-74px) scaleY(2.3);fill:var(--boot-orange);opacity:1}to{transform:translateX(-74px) scaleY(2.3);fill:var(--boot-orange);opacity:0}}
@keyframes bootFlyR{80%{transform:translateX(66px) scaleY(2.3);fill:var(--boot-orange);opacity:1}to{transform:translateX(66px) scaleY(2.3);fill:var(--boot-orange);opacity:0}}
@keyframes bootLetGo{to{transform:scale(1.6);opacity:0}}
@keyframes bootIn{from{opacity:0}to{opacity:1}}
@keyframes bootOpen{from{clip-path:inset(0 50% 0 50%)}to{clip-path:inset(0 0 0 0)}}
@keyframes bootLand{from{clip-path:inset(0 50% 0 50%);transform:translate(7px,5px)}to{clip-path:inset(0 0 0 0);transform:translate(2px,2px)}}