/* Page loader, September 29. One loader for every page (the case study and
   the password page): a white veil with the AS mark inside loading.dev's Arc
   (MIT, Jakub Krehel and Paul Faivret, https://loading.dev), ported to plain
   SVG and CSS so it fits the CSP (self-hosted, no inline script).

   The mark only fades in after 160ms, so a fast load shows no spinner at all.
   site-loader.js lifts the veil once fonts and the first image are ready.
   Without the script the veil still lifts by itself after 8s. */
.site-loader {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  background: #ffffff;
  transition: opacity 360ms cubic-bezier(.23, 1, .32, 1), visibility 0s linear 360ms;
  animation: site-loader-failsafe 0s linear 8s forwards;
}
.site-loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.site-loader__mark {
  position: relative;
  width: 64px;
  height: 64px;
  opacity: 0;
  animation: site-loader-in 240ms cubic-bezier(.23, 1, .32, 1) 160ms forwards;
}
.site-loader__logo { position: absolute; inset: 0; margin: auto; width: 26px; height: auto; }
.site-loader__track,
.site-loader__arc { position: absolute; inset: 0; width: 100%; height: 100%; }
.site-loader__track { color: #eceff3; }
.site-loader__arc {
  color: #0d1524;
  transform-origin: center;
  /* loading.dev Arc, "stacked" easing: a linear turn plus an eased turn. */
  animation: site-loader-rotate 800ms linear infinite, site-loader-rotate 1600ms cubic-bezier(.77, 0, .175, 1) infinite;
  animation-composition: add;
}
@keyframes site-loader-rotate { to { transform: rotate(360deg); } }
@keyframes site-loader-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes site-loader-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* Arc inside a button (the password page's submit). */
.btn-arc { width: 18px; height: 18px; flex: none; animation: site-loader-rotate 800ms linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .site-loader { transition: none; }
  .site-loader__mark { animation: none; opacity: 1; }
  .site-loader__arc, .btn-arc { animation: none; }
}
@media print { .site-loader { display: none; } }