/* FriendShire Loader — dark glass style */
:root {
  /* можно не трогать: подхватит твою типографику */
  --pl-radius: 22px;
  --pl-border: rgba(255, 255, 255, 0.10);
  --pl-soft: rgba(255, 255, 255, 0.06);
  --pl-muted: rgba(255, 255, 255, 0.72);
  --pl-ease: cubic-bezier(0.2, 0.9, 0.25, 1);
}

/* Сам экран */
#page-loader {
  position: fixed;
  inset: 0;
  z-index: 999999;

  display: grid;
  place-items: center;

  /* Очень тёмный фон + “северное сияние” как у градиентов на сайте */
  background:
    radial-gradient(900px 520px at 50% 38%, rgba(255,255,255,0.08), transparent 60%),
    radial-gradient(700px 420px at 20% 30%, rgba(120,160,255,0.10), transparent 62%),
    radial-gradient(780px 460px at 80% 70%, rgba(180,120,255,0.10), transparent 64%),
    radial-gradient(900px 520px at 50% 85%, rgba(255,255,255,0.05), transparent 65%),
    #05060a;

  opacity: 1;
  transform: translateZ(0);
  transition: opacity 520ms var(--pl-ease), transform 520ms var(--pl-ease);
}

/* Тонкий “шум/дымка”, чтобы выглядело богаче */
#page-loader::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), transparent 40%),
    linear-gradient(0deg, rgba(255,255,255,0.05), transparent 45%);
  opacity: 0.55;
}

/* Мягкий “живой” свет позади карточки */
#page-loader::after {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(170,190,255,0.18),
      rgba(180,120,255,0.12) 35%,
      transparent 68%);
  filter: blur(22px);
  opacity: 0.75;
  transform: translateY(-10px);
  animation: pl-ambient 2200ms ease-in-out infinite;
  pointer-events: none;
}

@keyframes pl-ambient {
  0%, 100% { opacity: 0.65; transform: translateY(-12px) scale(1); }
  50%      { opacity: 0.85; transform: translateY(-6px)  scale(1.03); }
}

/* “Стеклянная” карточка как у твоих .glass/.glass-lite */
.pl-wrap {
  position: relative;
  display: grid;
  place-items: center;
  gap: 12px;

  padding: 18px 18px;
  border-radius: var(--pl-radius);

  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--pl-border);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow:
    0 22px 70px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

/* Маленький “бейдж” вокруг спиннера — прям как hero-badge/chapter-ico */
.pl-wrap::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 14px;
  width: 10px;
  height: 10px;
  border-radius: 4px;
  background: rgba(255,255,255,0.12);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 0 16px rgba(170,190,255,0.15);
  opacity: 0.85;
}

/* Спиннер — не “обычный бордер”, а красивый conic + glow */
.pl-spinner {
  width: 46px;
  height: 46px;
  border-radius: 50%;

  background:
    conic-gradient(
      from 180deg,
      rgba(255,255,255,0.00),
      rgba(255,255,255,0.95)
    );

  /* дырка внутри (кольцо) */
  -webkit-mask: radial-gradient(circle, transparent 56%, #000 57%);
          mask: radial-gradient(circle, transparent 56%, #000 57%);

  filter:
    drop-shadow(0 0 14px rgba(170,190,255,0.28))
    drop-shadow(0 0 26px rgba(180,120,255,0.14));

  animation: pl-rot 900ms linear infinite;
}

/* Внутренний “глаз” чтобы выглядело как премиальный лоадер */
.pl-spinner::after {
  content: "";
  position: absolute;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.10), transparent 60%);
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%);
          mask: radial-gradient(circle, transparent 62%, #000 63%);
}

@keyframes pl-rot { to { transform: rotate(360deg); } }

.pl-text {
  font-family: var(--main-font, system-ui, -apple-system, Segoe UI, Roboto, Arial);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.2px;
  color: var(--pl-muted);
  user-select: none;
}

/* Скрываем контент сайта, пока лоадер активен (класс ставит loader.js) */
html.is-loading body > :not(#page-loader) {
  opacity: 0;
  pointer-events: none;
}

/* Красивое исчезновение */
html.is-loading--done #page-loader {
  opacity: 0;
  transform: scale(0.985);
  pointer-events: none;
}

/* На телефонах — компактнее */
@media (max-width: 520px) {
  #page-loader::after { width: 420px; height: 420px; }
  .pl-wrap { padding: 16px; border-radius: 20px; }
}

/* Уважение к prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  #page-loader, #page-loader::after { animation: none !important; transition: none !important; }
  .pl-spinner { animation: none !important; }
}