/* ─────────────────────────────────────────────────────────────────────────────
   loader.css — the Mosaique page loader (includes/loader.php + js/loader.js).
   Linked from head.php so the overlay paints on the very first frame. Everything
   here degrades: no JS → never displayed; reduced motion → no tile flips, fade only.
   ───────────────────────────────────────────────────────────────────────────── */

/* Only ever shown when JS is running (head.php adds html.reveal-ready from a script). */
.loader { display: none; }
html.reveal-ready .loader {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 100;                       /* above nav (40), scrim (50) and drawer (60) */
  background: transparent;            /* the SVG's own cream rect covers the page while loading; it drops away at the break so the tiles shatter OVER the live site */
  overflow: hidden;
  transition: opacity .45s var(--ease, ease);
}
html.reveal-ready .loader.is-leaving { pointer-events: none; }   /* the page underneath is usable as soon as the break starts */
html.reveal-ready .loader.is-done  { opacity: 0; }
html.reveal-ready .loader[hidden]  { display: none; }

/* Lock scroll while the loader is up (loader.js toggles this) */
html.is-loading, html.is-loading body { overflow: hidden; }

.loader__mosaic {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Every tile shrinks about its own centre when it goes. */
.loader .tile {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

/* Progress bar, bottom centre. loader.js drives --progress (0–1) and sets aria-valuenow. */
.loader__bar {
  position: absolute;
  left: 50%;
  bottom: clamp(28px, 6vh, 64px);
  width: min(260px, 60vw);
  height: 3px;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, .12);
  border-radius: 2px;
  overflow: hidden;
  transition: opacity .25s linear;
}
.loader__fill {
  display: block;
  height: 100%;
  width: 100%;
  background: #728C8B;
  transform-origin: 0 50%;
  transform: scaleX(var(--progress, 0));
  transition: transform .2s ease-out;
}
.loader.is-leaving .loader__bar { opacity: 0; }

/* At the reveal the cream backdrop goes first (fast), so the page shows through every gap a tile leaves. */
.loader__bg { transition: opacity .28s linear; }
.loader.is-leaving .loader__bg { opacity: 0; }

/* Exit: the grid stays put and tiles vanish one at a time. loader.js sets each tile's --out-delay in a
   random order; TILE_OUT in loader.js matches the .35s here. */
.loader.is-leaving .tile {
  transition: transform .35s cubic-bezier(.55, 0, .7, .4), opacity .35s linear;
  transition-delay: var(--out-delay, 0ms);
  transform: scale(.6);
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .loader .tile { transition: none !important; }
  .loader.is-leaving .tile { transform: none; opacity: 1; }
  html.reveal-ready .loader { transition-duration: .3s; }
}