/* The loader, rebuilt from the owner's portfolio intro (perz.dev intro-loader):
   the logo twice, a faint base and a fill revealed left to right, and a thin
   line along the bottom. Both follow real loading progress (--p, 0 to 1).
   The roost and the paint tool share it. */
.loader {
  --p: 0;
  position: fixed; inset: 0; z-index: 40;
  display: grid; place-items: center; align-content: center; gap: 18px;
  overflow: hidden;
  background: var(--perz-canvas);
  color: var(--perz-text);
}
.loader-logo { display: grid; width: 112px; aspect-ratio: 1; }
.loader-logo img {
  grid-area: 1 / 1; display: block; width: 100%; height: 100%; object-fit: contain;
}
.loader-base { opacity: .16; }
.loader-fill { clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0); transition: clip-path 280ms cubic-bezier(.65, 0, .35, 1); }
.loader-line {
  position: absolute; bottom: 0; left: 0; width: 100%; height: 2px;
  background: currentColor; transform-origin: left; transform: scaleX(var(--p));
  transition: transform 280ms cubic-bezier(.65, 0, .35, 1);
}
.loader-text { margin: 0; min-height: 1.4em; font: 500 14px/1.4 var(--perz-font-body); color: var(--perz-text-secondary); }
/* done: the cover lifts away, as the portfolio's does */
.loader.lift { animation: loader-lift 600ms cubic-bezier(.76, 0, .24, 1) forwards; pointer-events: none; }
@keyframes loader-lift { to { transform: translateY(-100%); visibility: hidden; } }
.loader[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .loader-fill, .loader-line { transition: none; }
  .loader.lift { animation: loader-fade 200ms linear forwards; }
  @keyframes loader-fade { to { opacity: 0; visibility: hidden; } }
}