/**
 * Preloader: анимация при первой загрузке и при переходах (Barba).
 * Подключать до основного контента для отсутствия мигания.
 */

/* Блокировка скролла при открытом прелоадере */
body.no-scroll {
  overflow: hidden;
  position: fixed;
  inset: 0;
  touch-action: none;
  overscroll-behavior: none;
}

/* Контейнер контента: блюр и снятие блюра (первая загрузка) */
.page-wrapper {
  filter: blur(0);
  transition: filter 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: filter;
}

.page-wrapper.transition-blur,
.page-wrapper.blur {
  filter: blur(16px) !important;
}

.page-wrapper.load {
  filter: blur(0) !important;
}

/* При переходе Barba блюрим обёртку, а не контейнер — контейнер может заменяться, блюр бы пропадал */
[data-barba="wrapper"] {
  filter: blur(0);
  transition: filter 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: filter;
}

[data-barba="wrapper"].transition-blur,
[data-barba="wrapper"].blur {
  filter: blur(16px) !important;
}

[data-barba="wrapper"].load {
  filter: blur(0) !important;
}

/* Прелоадер: оверлей */
#preloader,
.page-wrapper,
.preloader-icon {
  will-change: opacity, filter, transform;
}

#preloader {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  background: var(--black-1000, #010104);
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), background 0.3s ease;
  will-change: opacity;
  justify-content: center;
  align-items: center;
}

/* Состояние: первая загрузка — прелоадер виден, иконка крутится */
#preloader.active {
  opacity: 1;
  pointer-events: auto;
}

/* Этап 1 перехода: blur контента, но preloader уже блокирует клики */
#preloader.blur {
  opacity: 0;
  pointer-events: auto;
  background: transparent;
}

/* Этап 2 перехода: чёрный экран и видимая иконка */
#preloader.end,
#preloader.cover {
  opacity: 1;
  pointer-events: auto;
  background: var(--black-1000, #010104);
}

/* Состояние: уход чёрного (reveal новой страницы) */
#preloader.reveal {
  opacity: 0;
  pointer-events: auto;
}

/* Состояние: скрытие прелоадера после анимации */
#preloader.load {
  background: transparent;
  opacity: 0;
  pointer-events: none;
}

/* Иконка-спиннер 4×4rem */
#preloader .preloader-icon {
  width: 4rem;
  height: 4rem;
  flex-shrink: 0;
}

.preloader-icon {
  transform: rotate(0);
  opacity: 1;
  animation: rotate360 1s ease-out infinite;
  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.4s ease-out;
  will-change: transform, filter, opacity;
}

@keyframes rotate360 {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(220deg);
  }
}

/* Скрытие иконки только при уходе прелоадера (фаза reveal), не при cover — при переходе иконка крутится на чёрном */
#preloader.load.icon-hide .preloader-icon {
  opacity: 0;
}

/* Полное скрытие прелоадера */
#preloader.close {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}