/* ============================================================================
   Adapta CRM — прелоадер сайта (кинематографичная заставка).
   Порт заставки приложения (frontend/splashscreen.html) на веб-страницы:
   эмблема-плитка, орбитальные частицы, прогресс-бар, финальный «всплеск».
   Подключается на index.html, magazine.html, instruction.html.
   ============================================================================ */

#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% -10%, #0e1830 0%, #070b16 45%, #04060c 100%);
  color: #eaf1ff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: opacity 620ms ease, visibility 620ms ease;
}
#preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }

/* Сетка-миллиметровка */
.pl-grid {
  position: absolute;
  inset: -2px;
  background-image:
    linear-gradient(to right, rgba(56, 189, 248, 0.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(56, 189, 248, 0.10) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(70% 65% at 50% 45%, #000 0%, transparent 78%);
  mask-image: radial-gradient(70% 65% at 50% 45%, #000 0%, transparent 78%);
  opacity: 0;
  animation: pl-grid-in 1800ms ease-out forwards;
}

/* Дышащее свечение */
.pl-aura {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 900px;
  height: 900px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(56, 189, 248, 0.20) 0%, rgba(56, 189, 248, 0.06) 38%, rgba(56, 189, 248, 0) 68%);
  filter: blur(6px);
  opacity: 0;
  animation: pl-aura-in 2400ms ease-out 240ms forwards, pl-aura-breathe 11s ease-in-out 2800ms infinite;
}

/* Вращающиеся лучи */
.pl-rays {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 1400px;
  height: 1400px;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    from 0deg,
    rgba(56, 189, 248, 0) 0deg,
    rgba(56, 189, 248, 0.10) 24deg,
    rgba(56, 189, 248, 0) 60deg,
    rgba(52, 201, 138, 0) 180deg,
    rgba(52, 201, 138, 0.08) 210deg,
    rgba(52, 201, 138, 0) 250deg,
    rgba(56, 189, 248, 0) 360deg
  );
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 62%);
  mask-image: radial-gradient(circle, #000 0%, transparent 62%);
  opacity: 0;
  animation: pl-rays-in 2800ms ease-out 400ms forwards, pl-rays-spin 52s linear 400ms infinite;
}

/* Световая «линза» */
.pl-lens {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 1200px;
  height: 2px;
  transform: translate(-50%, -50%) scaleX(0);
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.55), transparent);
  filter: blur(1px);
  opacity: 0;
  animation: pl-lens-in 1800ms cubic-bezier(0.22, 0.61, 0.36, 1) 1000ms forwards;
}

/* Центральная композиция */
.pl-center {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  text-align: center;
  padding: 0 20px;
}

/* Эмблема-плитка */
.pl-emblem {
  position: relative;
  width: 168px;
  height: 168px;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(26px) scale(0.82) rotateX(18deg);
  animation: pl-emblem-in 1800ms cubic-bezier(0.16, 1, 0.3, 1) 240ms forwards;
  perspective: 900px;
}
.pl-ring {
  position: absolute;
  inset: -26px;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(56, 189, 248, 0) 0deg,
    rgba(56, 189, 248, 0.85) 90deg,
    rgba(52, 201, 138, 0.85) 200deg,
    rgba(56, 189, 248, 0) 330deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  filter: drop-shadow(0 0 14px rgba(56, 189, 248, 0.55));
  opacity: 0;
  animation: pl-ring-in 1400ms ease-out 1400ms forwards, pl-ring-spin 18s linear 1400ms infinite;
}
.pl-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(56, 189, 248, 0.5);
  opacity: 0;
  animation: pl-pulse 5.2s ease-out 2200ms infinite;
}
.pl-pulse--2 { animation-delay: 3800ms; }
.pl-tile {
  position: relative;
  width: 132px;
  height: 132px;
  border-radius: 34px;
  background: linear-gradient(180deg, #16406a 0%, #0c2c4e 55%, #08203a 100%);
  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(143, 221, 253, 0.18) inset,
    0 0 44px rgba(56, 189, 248, 0.28);
  overflow: hidden;
  transform-style: preserve-3d;
}
.pl-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(143, 221, 253, 0.9) 0%, rgba(56, 189, 248, 0.55) 22%, rgba(17, 150, 233, 0) 55%);
  opacity: 0.9;
  mix-blend-mode: screen;
}
.pl-gloss {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 58%;
  border-radius: 34px 34px 60% 60% / 34px 34px 40% 40%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.06) 55%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}
.pl-sheen {
  position: absolute;
  top: -60%;
  left: -120%;
  width: 60%;
  height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: rotate(18deg);
  filter: blur(2px);
  animation: pl-sheen 5.2s ease-in-out 1800ms infinite;
}
.pl-glyph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 5px 6px rgba(2, 18, 31, 0.65));
}
.pl-glyph svg { width: 74px; height: 74px; display: block; }

/* Название и слоган */
.pl-brand { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pl-name {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0.4px;
  line-height: 1.1;
  background: linear-gradient(180deg, #ffffff 0%, #cfe9ff 55%, #8fd9fa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 24px rgba(56, 189, 248, 0.25);
  opacity: 0;
  transform: translateY(10px);
  animation: pl-rise-in 1240ms cubic-bezier(0.16, 1, 0.3, 1) 1800ms forwards;
}
.pl-tagline {
  font-size: 13.5px;
  color: #7c8aa8;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px);
  animation: pl-rise-in 1240ms cubic-bezier(0.16, 1, 0.3, 1) 2080ms forwards;
}

/* Прогресс */
.pl-progress {
  width: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  animation: pl-rise-in 1120ms ease-out 2360ms forwards;
}
.pl-bar {
  position: relative;
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: #131c2e;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.10) inset;
}
.pl-bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 38%;
  border-radius: 999px;
  background: linear-gradient(90deg, #2ba7e0, #38bdf8, #34c98a);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.6);
  animation: pl-indeterminate 3s ease-in-out infinite;
}
.pl-label {
  font-size: 11px;
  color: #7c8aa8;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

/* Версия */
.pl-version {
  position: fixed;
  bottom: 16px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 11px;
  color: #7c8aa8;
  letter-spacing: 0.6px;
  opacity: 0;
  animation: pl-rise-in 1120ms ease-out 2640ms forwards;
}

/* Финальный всплеск */
.pl-flash {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(circle at 50% 46%, rgba(255, 255, 255, 0.9) 0%, rgba(56, 189, 248, 0.35) 30%, rgba(56, 189, 248, 0) 62%);
  opacity: 0;
  animation: pl-flash 1240ms ease-out 3000ms forwards;
}

/* Частицы */
.pl-particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.pl-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.9);
  opacity: 0;
  animation: pl-particle-float linear infinite;
}

/* ============================ KEYFRAMES ============================ */
@keyframes pl-grid-in { to { opacity: 1; } }
@keyframes pl-aura-in { to { opacity: 1; } }
@keyframes pl-aura-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.9; }
  50%      { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
}
@keyframes pl-rays-in { to { opacity: 1; } }
@keyframes pl-rays-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes pl-lens-in { to { opacity: 1; transform: translate(-50%, -50%) scaleX(1); } }
@keyframes pl-emblem-in { to { opacity: 1; transform: translateY(0) scale(1) rotateX(0deg); } }
@keyframes pl-ring-in { to { opacity: 1; } }
@keyframes pl-ring-spin { to { transform: rotate(360deg); } }
@keyframes pl-pulse {
  0%   { opacity: 0.7; transform: scale(0.9); }
  100% { opacity: 0; transform: scale(1.5); }
}
@keyframes pl-sheen {
  0%   { left: -120%; }
  55%  { left: 140%; }
  100% { left: 140%; }
}
@keyframes pl-rise-in { to { opacity: 1; transform: translateY(0); } }
@keyframes pl-indeterminate {
  0%   { left: -38%; }
  60%  { left: 100%; }
  100% { left: 100%; }
}
@keyframes pl-flash {
  0%   { opacity: 0; }
  18%  { opacity: 0.9; }
  100% { opacity: 0; }
}
@keyframes pl-particle-float {
  0%   { opacity: 0; transform: translateY(0) scale(0.6); }
  12%  { opacity: 0.9; }
  80%  { opacity: 0.7; }
  100% { opacity: 0; transform: translateY(-120px) scale(1.1); }
}

/* Доступность: уважаем reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .pl-grid, .pl-aura, .pl-rays, .pl-lens,
  .pl-emblem, .pl-ring, .pl-pulse, .pl-name,
  .pl-tagline, .pl-progress, .pl-version {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .pl-sheen, .pl-flash, .pl-particle { animation: none !important; opacity: 0 !important; }
  .pl-bar::after { animation: none; left: 0; width: 100%; }
}

/* Мобильная адаптация */
@media (max-width: 620px) {
  .pl-emblem { width: 132px; height: 132px; }
  .pl-tile { width: 104px; height: 104px; border-radius: 28px; }
  .pl-glyph svg { width: 58px; height: 58px; }
  .pl-name { font-size: 26px; }
  .pl-tagline { font-size: 11.5px; }
  .pl-progress { width: 210px; }
}