/* ============================================================
   02-ПРЕЛОАДЕР
   Белый экран с логотипом, который показывается, пока грузится
   страница. Логотип «рисуется» линией, потом закрашивается.

   Тайминги логики (сколько ждать, когда прятать) - в js/01-прелоадер.js.
   Здесь только внешний вид.
   ============================================================ */

.preloader {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Белая заливка поверх всей страницы.
   Когда прелоадер прячется, её высота уезжает в 0 - получается
   эффект «шторка уходит вверх». */
.preloader__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  transition: 0.5s ease-out;
}

.preloader__logo {
  position: relative;
  z-index: 2;
  width: 40px;
  height: 52px;
  transition: 0.3s ease-out;
}

@media (max-width: 767px) {
  .preloader__logo {
    width: 30px;
    height: 39px;
  }
}


/* ------------------------------------------------------------
   АНИМАЦИЯ РИСОВАНИЯ ЛОГОТИПА

   Приём такой: контур логотипа - это линия. Мы делаем её пунктиром,
   у которого длина штриха равна длине всего контура, и «сдвигаем»
   пунктир так, что линии не видно. Потом сдвиг убираем - и линия
   как будто рисуется от начала до конца.

   Числа 135.38 и 33.13 - это реальные длины двух контуров логотипа
   в пикселях. Менять их нельзя: они привязаны к форме букв.

   Класс .active добавляет и снимает JS каждые 2 секунды - логотип
   «дышит», пока идёт загрузка.
   ------------------------------------------------------------ */

/* Внешний контур - буква O */
.preloader__logo .svg-elem-1 {
  stroke-dasharray: 135.3853607178px;
  stroke-dashoffset: 135.3853607178px;
  transition:
    stroke-dashoffset 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
}

.preloader__logo.active .svg-elem-1 {
  stroke-dashoffset: 0;
}

/* Точка внутри - появляется на 0.12 с позже, чтобы был каскад */
.preloader__logo .svg-elem-2 {
  fill: transparent;
  stroke-dasharray: 33.1354808807px;
  stroke-dashoffset: 33.1354808807px;
  transition:
    stroke-dashoffset 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
}

.preloader__logo.active .svg-elem-2 {
  fill: #e5e5e5;
  stroke-dashoffset: 0;
}


/* ------------------------------------------------------------
   УХОД ПРЕЛОАДЕРА
   Класс is_hide вешает JS, когда страница готова.
   ------------------------------------------------------------ */

.preloader.is_hide .preloader__overlay {
  height: 0;
}

.preloader.is_hide .preloader__logo {
  opacity: 0;
}