/* =================================================================
   PAGE LOADER v3 — pl- prefixed, cannot collide with Tailwind/theme.
   Loaded ONLY from includes/header.php (public site), never by admin.
   CSS self-destructs after 5s even if JS fails.
   ================================================================= */
#pageLoader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: var(--color-neutral-bg);
  animation: plSelfDestruct .6s ease 5s forwards;
}
#pageLoader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  animation: none;
  transition: opacity .5s ease, visibility .5s ease;
}
#pageLoader.is-done .pl-wrap {
  transform: scale(.8);
  opacity: 0;
}

@keyframes plSelfDestruct {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

.pl-wrap {
  position: relative;
  width: 130px;
  height: 130px;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1), opacity .4s ease;
}
.pl-ring {
  position: absolute;
  border-radius: 9999px;
  border-style: solid;
  border-color: transparent;
}
.pl-ring-a {
  inset: 0;
  border-width: 3px;
  border-top-color: var(--color-primary);
  border-right-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
  animation: plSpin 1.6s linear infinite;
}
.pl-ring-b {
  inset: 12px;
  border-width: 3px;
  border-top-color: var(--color-accent);
  animation: plSpinRev 1.1s linear infinite;
}
.pl-ring-c {
  inset: 24px;
  border-width: 2px;
  border-top-color: var(--color-primary-dark);
  border-left-color: color-mix(in srgb, var(--color-accent) 45%, transparent);
  animation: plSpin 2.4s linear infinite;
}
.pl-logo {
  position: absolute;
  inset: 36px;
  display: grid;
  place-items: center;
}
.pl-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: plPulse 1.8s ease-in-out infinite;
}
.pl-logo i,
.pl-logo svg {
  color: var(--color-primary);
}

@keyframes plSpin    { to { transform: rotate(360deg); } }
@keyframes plSpinRev { to { transform: rotate(-360deg); } }
@keyframes plPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  .pl-ring,
  .pl-logo img { animation: none; }
}