/* The opening screen. The palette is inverted — blue ground, bone marks — so lifting the curtain
   is the same gesture as the page arriving: the colour that was behind everything becomes the
   thing behind everything.

   The overlay is in the markup and styled by a render-blocking stylesheet, so it is there on the
   first paint rather than flashing the page and then covering it. The animation below is the
   fallback: if the script never runs nothing lifts it, so the whole thing fades on its own and the
   site is still usable. */
.boot{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  background:var(--line);color:var(--ground);overflow:hidden;
  animation:boot-clear .5s ease 6s forwards}
@keyframes boot-clear{to{opacity:0;visibility:hidden;pointer-events:none}}

/* The ground, a field of pixels over the solid background in the same colour.

   The canvas holds one pixel per cell and is stretched over the viewport with no smoothing, so the
   cell size is the image's resolution rather than a size anything is drawn at. Without
   `pixelated` the browser interpolates and the dither becomes a blur. */
.boot-veil{position:absolute;inset:0;z-index:0;width:100%;height:100%;image-rendering:pixelated}
/* Leaving: the whole screen goes up in one piece, words and all. Slow out of rest and quick at
   the end, like a blind let go. 1.1s matches SLIDE in boot.js. */
.boot.is-out{animation:none;transform:translateY(-100%);transition:transform 1.1s cubic-bezier(.7,0,.2,1)}

/* The stage is as wide as the words, not a box they sit inside, and the words are one line now —
   so it is centred by being only as wide as itself. The line must not wrap, which is why its size
   is tied to the viewport in typekit.css: a stepped size would wrap somewhere between its steps
   and a wrapped line is not a centred one. */
.boot-stage{position:relative;z-index:1;width:max-content;max-width:86vw}
.boot-lines{position:relative;z-index:2;margin:0;text-align:center;white-space:nowrap}
.boot-line{display:block;opacity:0}
.boot-line.is-in{animation:boot-line .42s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes boot-line{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}


/* Behind the screen there is nothing but the grid. Revealing the whole site square by square
   means the band, the navigation and the card all arrive through the same hole at once, which is
   more than one thing to look at and so reads as none of them. The pixels come apart over an empty
   page ruled by the dashed lines, and the site arrives on top of that once they are gone.

   The class is added by the script rather than written into the markup, so a page whose script
   never runs is never left with its contents hidden and nothing to unhide them. */
html.is-booting .field,
html.is-booting .topbar,
html.is-booting .card,
html.is-booting .locale{opacity:0}
html.is-booting .topbar,
html.is-booting .card,
html.is-booting .locale{transform:translateY(-6px)}

/* The transition is declared only for the arrival, so it is not left on the card and the
   navigation for the rest of the visit. Declaring it in the state being moved to is enough —
   a transition is read from the style being changed into, not the one being left. */
html.is-arriving .field,
html.is-arriving .topbar,
html.is-arriving .card,
html.is-arriving .locale{transition:opacity .5s ease var(--in,0s),transform .5s cubic-bezier(.2,.7,.3,1) var(--in,0s)}
html.is-arriving .topbar{--in:.14s}
html.is-arriving .card,
html.is-arriving .locale{--in:.22s}

/* Nothing to watch, so nothing is shown: the page is simply there. */
@media(prefers-reduced-motion:reduce){
  .boot{animation:none;opacity:0;visibility:hidden}
  /* Played on purpose with ?boot=1: it fades rather than travels. */
  .boot.is-out{transform:none;opacity:0;transition:opacity .3s ease}
}