/* Page loader overlay — глобально, без влияния на верстку страниц */
/* кастомизируемые параметры размера/скорости */
:root{
  --pl-size: 120px;    /* было 64px → чуть больше */
  --pl-dot:  30px;    /* размер “квадратиков” */
  --pl-speed: 1.6s;   /* было 1s → медленнее */
}

#page-loader{
  position: fixed; inset: 0;
  /* поднимем поверх любых модалок */
  z-index: 2147483647; /* max 32-bit int, надёжнее чем 9999 */
  display: none; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--bg-0) 86%, transparent);
  backdrop-filter: blur(2px);
}
html.is-loading #page-loader{ display: flex; animation: pl-fade .12s ease-out both; }

.pl-spinner{
  width: var(--pl-size);
  height: var(--pl-size);
  position: relative;
  /* фиксированные цвета: белый и фиолетовый */
  background-image:
    linear-gradient(#ffffff var(--pl-dot), transparent 0),
    linear-gradient(#7c4dff   var(--pl-dot), transparent 0),
    linear-gradient(#7c4dff   var(--pl-dot), transparent 0),
    linear-gradient(#ffffff var(--pl-dot), transparent 0);
  background-repeat: no-repeat;
  background-size: var(--pl-dot) var(--pl-dot);
  background-position: left   top,
                       left   bottom,
                       right  top,
                       right  bottom;
  animation: pl-rotate var(--pl-speed) linear infinite;
}

@keyframes pl-rotate{
  0%   { width: var(--pl-size); height: var(--pl-size); transform: rotate(0deg); }
  50%  { width: calc(var(--pl-size) * .47); height: calc(var(--pl-size) * .47); transform: rotate(180deg); }
  100% { width: var(--pl-size); height: var(--pl-size); transform: rotate(360deg); }
}

@keyframes pl-fade { from { opacity: 0 } to { opacity: 1 } }

@media (prefers-reduced-motion: reduce) {
  .pl-spinner{ animation: none; }
}