/* preloader.css */
/* --- Стили для экрана-заставки (preloader) --- */

/* Основной контейнер заставки */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bg-primary, #ffffff); /* Используем переменную темы или белый цвет по умолчанию */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* Очень высокий z-index, чтобы быть поверх всего */
  transition: opacity 0.5s ease-out, visibility 0.5s ease-out; /* Плавное исчезновение */
}

/* Состояние для скрытия */
#preloader.preloader-hidden {
  opacity: 0;
  visibility: hidden;
}

/* Стили для контента заставки (например, логотипа или спиннера) */
#preloader-content {
  text-align: center;
  /* Добавь сюда стили для логотипа, если нужно */
  /* Например: */
  /* width: 100px; */
  /* height: 100px; */
  /* background-image: url('path/to/logo.svg'); */
  /* background-size: contain; */
  /* background-repeat: no-repeat; */
}

/* Пример простого спиннера */
#preloader-spinner {
  border: 4px solid rgba(0, 0, 0, 0.1); /* Светлая граница */
  border-left-color: var(--accent-primary, #1DA1F2); /* Цвет акцента */
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite; /* Анимация вращения */
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Текст под спиннером (опционально) */
#preloader-text {
  margin-top: 10px;
  color: var(--text-secondary, #657786); /* Используем переменную темы или серый цвет */
  font-size: 14px;
}