/* Boot overlay. External because the strict style-src 'self' CSP forbids an
   inline <style>. Colours are literals, not tokens: this file has to paint
   before the bundled CSS (which defines the tokens) has necessarily arrived. */

.pageload{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#0A0A0A;
  /* Failsafe: clears itself if main.ts never runs (a throw, not a disabled
     JS engine, which nojs.css already covers). */
  animation:pl-failsafe 0s linear 10s forwards;
}

/* The ground is the page's own background colour, so an instant overlay is
   invisible on a fast load. Only the mark is delayed, which is what would
   otherwise flash for 80 ms and read as a glitch. */
.pageload-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  opacity:0;
  animation:pl-reveal .5s ease-out .25s forwards;
}

.pageload-mark{
  font:600 .8125rem/1 "Archivo","Archivo Fallback",system-ui,sans-serif;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#E8E8E8;
}

.pageload-bar{
  position:relative;
  display:block;
  overflow:hidden;
  width:min(46vw,260px);
  height:2px;
  margin-top:1.25rem;
  background:#2A2A2A;
}

.pageload-bar span{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:40%;
  background:#E63946;
  animation:pl-sweep 1.15s cubic-bezier(.65,0,.35,1) infinite;
}

html.ready .pageload{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .45s ease,visibility 0s linear .45s;
}

@keyframes pl-reveal{to{opacity:1}}
@keyframes pl-sweep{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
@keyframes pl-failsafe{to{opacity:0;visibility:hidden}}

@media (prefers-reduced-motion: reduce){
  .pageload-inner{animation-duration:.01ms;animation-delay:.25s}
  .pageload-bar span{animation:none;width:100%;opacity:.55}
  html.ready .pageload{transition:none}
}