/* =====================================================================
   Panel Guard — page loader / transition overlay
   Shown on first paint (so there is no flash of unstyled content), and
   re-shown briefly whenever the visitor follows an internal link, so
   every navigation reads as one continuous, branded transition.
   ===================================================================== */

#pg-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #0b0630 0%, #160959 45%, #550001 100%);
  transition: opacity .45s ease, visibility 0s linear 0s;
}
#pg-loader.pg-loader--hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease, visibility 0s linear .45s;
  pointer-events: none;
}

#pg-loader .pg-loader-inner { text-align: center; }

#pg-loader .pg-loader-type {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-inline-end: 3px solid #fff;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: clamp(1.3rem, 4vw, 2rem);
  font-weight: 700;
  letter-spacing: .04em;
  max-width: 13ch;
  animation:
    pg-loader-type 1.1s steps(11, end) infinite alternate,
    pg-loader-caret .8s step-end infinite;
}
/* The two halves of the name pick up the logo's own two colours */
#pg-loader .pg-loader-type .pg-loader-word--panel { color: #e2545a; }
#pg-loader .pg-loader-type .pg-loader-word--guard { color: #8b86e8; }

@keyframes pg-loader-type {
  0%   { max-width: 0; }
  60%  { max-width: 13ch; }
  100% { max-width: 13ch; }
}
@keyframes pg-loader-caret {
  50% { border-color: transparent; }
}

#pg-loader .pg-loader-bar {
  width: 160px;
  height: 3px;
  margin: 1.2rem auto 0;
  background: rgba(255,255,255,.22);
  overflow: hidden;
  border-radius: 999px;
}
#pg-loader .pg-loader-bar::after {
  content: '';
  display: block;
  width: 40%;
  height: 100%;
  background: #fff;
  border-radius: 999px;
  animation: pg-loader-bar 1.1s ease-in-out infinite;
}
@keyframes pg-loader-bar {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

@media (prefers-reduced-motion: reduce) {
  #pg-loader .pg-loader-type { animation: none; max-width: 13ch; border-inline-end-color: transparent; }
  #pg-loader .pg-loader-bar::after { animation: none; width: 100%; transform: none; }
  #pg-loader { transition: opacity .15s ease, visibility 0s linear 0s; }
  #pg-loader.pg-loader--hidden { transition: opacity .15s ease, visibility 0s linear .15s; }
}

@media print {
  #pg-loader { display: none !important; }
}