/* The loading screen.
 *
 * Three things make this safe rather than a liability:
 *
 *  1. It is visible by default and removed by script. The reverse would show
 *     the page first and then cover it, which is worse than no loader at all.
 *  2. A <noscript> rule hides it outright, so a browser without JavaScript
 *     never meets a curtain nothing will lift.
 *  3. A CSS animation fades it out regardless after a few seconds. If the
 *     script fails, throws, or is blocked, the site still becomes usable on
 *     its own. A loading screen that can trap a visitor is a broken site.
 *
 * The backdrop is a 64px thumbnail blurred up and inlined as a data URI: a
 * loading screen that waits on a download would be a contradiction.
 */

/* Once per visit. Clicking Home from another page is a fresh page load, so
   without this the overlay would reappear every time, which is charming once
   and irritating thereafter. The class is set by an inline script in the head
   so the overlay never paints at all on a repeat visit. */
.loader-seen .loader { display: none; }

.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  /* Without this the two rows stretch to fill the height and the caption ends
     up stranded near the bottom instead of sitting with the wordmark. */
  align-content: center;
  overflow: hidden;
  background: var(--c-dark);
  /* Failsafe: see note 3 above. Runs whatever the script does. */
  animation: loader-failsafe 0ms linear 12s forwards;
}

.loader__bg {
  position: absolute;
  /* Oversized so the blur has material to work with and does not bleed a
     pale edge in from outside the element. */
  inset: -12%;
  background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAwICQsJCAwLCgsODQwOEh4UEhEREiUbHBYeLCcuLisnKyoxN0Y7MTRCNCorPVM+QkhKTk9OLztWXFVMW0ZNTkv/2wBDAQ0ODhIQEiQUFCRLMisyS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0v/wAARCAArAEADASIAAhEBAxEB/8QAGQAAAwEBAQAAAAAAAAAAAAAABAUGAwEC/8QALxAAAgEDAwEGBgEFAAAAAAAAAQIDAAQRBRIhMRMiQVFhcQYUQoGRoTIjUsHh8P/EABkBAQADAQEAAAAAAAAAAAAAAAIAAwQBBf/EAB4RAAICAQUBAAAAAAAAAAAAAAABAhESAxMhMUFR/9oADAMBAAIRAxEAPwAy0+ILdiRMrxk4z9Qpra3trMu6OVPucEfY1CQhxlkwxHOCaJZx2gYDaQPqHjWDcaNOCL8MoHFZlCxzUzpmsNZRhLgF7ZBhTjlB/kUybWiV3xCPZ681ZuRSsD05NjMxY8q4EHiM0rbWHKblVScchRmuxX87KH3A56DFR60Tm1IZFeeAPxXnbg8j9UrlvJnzl3A8QKykYPjJOMZAzQeuvEJaL9Ysttc0lIXaPTUcnuliMHnxwTgY9vCk4M148k1kJDtY9z+R2joT5U807QbWGMkSsX3EFlIxjHuf3QMY1PRtWe4trd7mBv6TNsGHHXH+65SsXSPcem6rMIxJZygNkkd05GM8c+Wa3fQb+BA6oVG3tBsOcj18abfDcs19JfSahK1rCrgxKw/gCTwW9OmPWip9ft5WSwiJ7RXCb4iAUPPPPH4qNfCW/SYa6eEJ25Malgr4TvD1APp58UVHNHI6ntZUDjukjav/AH6qmn+HLS53rqU8s4TBRyNmPMYHWpbWL3TrBGj063LpHkO288HPAH2FBw44IpV2Mvl02YkY7s8EnBz6AUFdDsWLgs25ud3n51no12NRuLeOLtIVxhgRuQdTkc5p89jbSoYZI7jec95ANrdehI9qqwkmW5RaIe2uZg7yWM6OrTpEm4cgMOufc+VNrfWjatP89HMI4n7Ituym7HTwGOmOKj9OYxzoEOMTIaoWAlsr8yAMTdDOfHlK9BpGW2UVlrthNFHC0qwCIY3dkWVxk8ErzS+613T5dRG/S4DFHGOznxyGHj0z+aBurSCTV5gYwAtqGAU4AO4jPFKrWV5EG9s+9DFdoalfDKBfjRbmPErXAP8Aa7Ej8UHFdWyxuk8LOCxyDgZLfV5ZoWzVRcHuIfUqCfzTi+sLXe4EKqAuRt45wPKhKkuBOLTo615aWNhGluSkUr7m2sQ2QMYz7HwphZ6xplsDI0124xhlaTf1H2P7qOiJJBPOR9qzWRy0w3Hgcc+tV0w5H//Z");
  background-size: cover;
  background-position: center;
  filter: blur(42px) saturate(1.15) brightness(0.62);
  transform: scale(1.1);
}

/* A wash over the blur so the type has something consistent to sit on,
   whatever part of the photograph ends up behind it. */
.loader__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 60% at 50% 50%,
              rgba(35, 35, 31, 0.15), rgba(35, 35, 31, 0.62));
}

.loader__mark {
  position: relative;
  font-family: var(--f-display);
  font-size: clamp(2.75rem, 10vw, 7.5rem);
  line-height: var(--lh-display);
  letter-spacing: -0.02em;
  text-align: center;
  padding-inline: var(--gutter);

  /* The fill. One gradient, a hard stop at --fill, clipped to the glyphs:
     everything left of the stop is white, everything right of it is the
     unfilled grey. Moving one custom property moves the waterline. */
  --fill: 0%;
  background-image: linear-gradient(
    90deg,
    #FBF8F1 0%,
    #FBF8F1 var(--fill),
    rgba(251, 248, 241, 0.26) var(--fill),
    rgba(251, 248, 241, 0.26) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Smooths the gap between one random jump and the next so the fill moves
     rather than snapping. */
  transition: --fill 420ms var(--ease);
}

.loader__mark em { font-style: italic; }

/* The custom property has to be registered for a browser to interpolate it;
   without this the transition above does nothing and the fill jumps. */
@property --fill {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

/* Pinned low rather than tucked under the wordmark, so the mark itself sits
   dead centre and the caption reads as a footer to it. */
.loader__caption {
  position: absolute;
  inset-inline: 0;
  bottom: calc(var(--s7) + env(safe-area-inset-bottom, 0px));
  margin: 0;
  font-family: var(--f-ui);
  font-size: var(--t-caps);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: rgba(251, 248, 241, 0.5);
  text-align: center;
}

/* Removal. The class goes on, the overlay fades, and the script takes the
   element out of the document when the transition ends. */
.loader--done {
  opacity: 0;
  pointer-events: none;
  transition: opacity 900ms var(--ease);
}

@keyframes loader-failsafe {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* Someone who has asked for less motion gets the page, not a performance. */
@media (prefers-reduced-motion: reduce) {
  .loader { animation-delay: 0ms; }
  .loader__mark { transition: none; }
}