/* ============================================================
   Tsinglan Wiki — Page loading veil
   --------------------------------------------------------------
   Pair with:
     - wiki/layout.html          (#page-loader markup + inline hook)
     - static/js/page-loader.js  (dismisses it, re-shows on navigation)

   The artwork is a transparent animated .webp (dark navy line work),
   so the veil reuses the page paper colour — the flip from veil to
   content is a plain colour-to-colour cut with no flash.

   Off by default. Only html.is-page-loading reveals it; the class is
   added by the inline script in <head>, so a blocked/disabled script
   can never leave a stuck overlay over the content.
   ============================================================ */

.page-loader {
  position: fixed;
  inset: 0;
  /* Above the mobile TOC drawer (1090) and the members dialog (1095). */
  z-index: 1200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  background-color: var(--mustard);
  background-image: radial-gradient(circle at 50% 44%, var(--cream) 0 26%, transparent 68%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.42s ease, visibility 0.42s ease;
}

html.is-page-loading .page-loader {
  opacity: 1;
  visibility: visible;
  /* Swallow clicks while the page is still assembling. */
  pointer-events: auto;
}

/* ----- Jellyfish artwork ----- */

.page-loader__art {
  display: block;
  width: clamp(200px, 44vw, 360px);
  height: auto;
  filter: drop-shadow(0 6px 14px rgba(31, 66, 107, 0.22));
  animation: page-loader-bob 2.8s ease-in-out infinite;
}

@keyframes page-loader-bob {
  0%,
  100% {
    transform: translateY(-6px);
  }

  50% {
    transform: translateY(6px);
  }
}

/* ----- Indeterminate progress bar ----- */

.page-loader__bar {
  position: relative;
  overflow: hidden;
  width: clamp(140px, 26vw, 220px);
  height: 0.32rem;
  border-radius: 999px;
}

.page-loader__bar::before,
.page-loader__bar::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: inherit;
  background-color: var(--navy);
}

/* Track */
.page-loader__bar::before {
  left: 0;
  right: 0;
  opacity: 0.22;
}

/* Travelling dash */
.page-loader__bar::after {
  left: 0;
  width: 38%;
  animation: page-loader-slide 1.25s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes page-loader-slide {
  from {
    transform: translateX(-110%);
  }

  to {
    transform: translateX(265%);
  }
}

/* ----- Reduced motion / print ----- */

@media (prefers-reduced-motion: reduce) {
  .page-loader {
    transition: none;
  }

  .page-loader__art,
  .page-loader__bar::after {
    animation: none;
  }

  /* Static bar so the veil still reads as "working". */
  .page-loader__bar::after {
    width: 100%;
    opacity: 0.4;
    transform: none;
  }
}

@media print {
  .page-loader {
    display: none !important;
  }
}