.loading { height: 260px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.loading span { width: 5px; height: 5px; border-radius: 50%; background: var(--blue); animation: loading-dot .7s ease-in-out infinite alternate; }
.loading span:nth-child(2) { animation-delay: .12s; }
.loading span:nth-child(3) { animation-delay: .24s; }

.page-loading-screen {
  position: fixed;
  z-index: 3000;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--paper);
  transition: opacity .32s ease, visibility .32s ease;
}
.page-loading-screen.is-complete { opacity: 0; visibility: hidden; pointer-events: none; }

.page-loading-vessel { display: grid; place-items: center; gap: 22px; text-align: center; }
.page-loading-mark {
  position: relative;
  width: 136px;
  height: 136px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--paper-raised);
}
.page-loading-letter {
  position: relative;
  z-index: 1;
  width: 74px;
  height: 74px;
  background: rgba(23, 23, 19, .16);
  -webkit-mask: var(--asimov-mark);
  mask: var(--asimov-mark);
}
/* The same glyph again, filled and clipped to a rising waterline. */
.page-loading-letter::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  -webkit-mask: var(--asimov-mark);
  mask: var(--asimov-mark);
  clip-path: polygon(0 100%, 0 89%, 16% 84%, 31% 90%, 47% 84%, 63% 89%, 79% 83%, 100% 88%, 100% 100%);
  animation: loading-water 2.8s cubic-bezier(.42, 0, .2, 1) var(--page-loading-delay, 0ms) infinite;
}
.page-loading-copy { margin: 0; color: var(--ink); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.page-loading-copy::after { content: "···"; display: inline-block; width: 1.6em; overflow: hidden; vertical-align: bottom; animation: loading-ellipsis 1.2s steps(4, end) var(--page-loading-delay, 0ms) infinite; }

@keyframes loading-dot { to { opacity: .25; } }
@keyframes loading-water {
  0%, 12% { clip-path: polygon(0 100%, 0 89%, 16% 84%, 31% 90%, 47% 84%, 63% 89%, 79% 83%, 100% 88%, 100% 100%); }
  52%, 72% { clip-path: polygon(0 100%, 0 24%, 16% 18%, 31% 25%, 47% 19%, 63% 25%, 79% 17%, 100% 23%, 100% 100%); }
  100% { clip-path: polygon(0 100%, 0 89%, 16% 84%, 31% 90%, 47% 84%, 63% 89%, 79% 83%, 100% 88%, 100% 100%); }
}
@keyframes loading-ellipsis { to { width: 0; } }

@media (prefers-reduced-motion: reduce) {
  .loading span,
  .page-loading-letter::after,
  .page-loading-copy::after { animation: none; }
  .page-loading-letter::after { clip-path: polygon(0 100%, 0 42%, 16% 37%, 31% 43%, 47% 37%, 63% 43%, 79% 36%, 100% 42%, 100% 100%); }
}