/* Прелоадер: звуковая волна рисуется слева направо на бумажном фоне.

   Мотив взят у иллюстраций сайта - та же оранжевая звуковая волна, что в
   первой сцене на главной, и тот же тон бумаги. Внутри нет ни одной картинки
   и ни одного шрифта: экран загрузки, который сам чего-то ждёт по сети, свою
   задачу не выполняет. */

.preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #faf5ea;
  opacity: 1;
  transition: opacity 0.45s ease;

  /* Страховка на случай, если скрипт не загрузится или упадёт: через шесть
     секунд слой уходит сам. Иначе сайт остался бы навсегда закрыт заставкой. */
  animation: preloader-failsafe 0.4s ease 6s forwards;
}

.preloader.is-done {
  opacity: 0;
  pointer-events: none;
}

@keyframes preloader-failsafe {
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

.preloader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 3vw, 26px);
}

/* Размеры в атрибутах width и height у картинки заданы не ради вёрстки, а
   чтобы браузер знал пропорцию до её загрузки и не дёрнул волну вниз, когда
   логотип появится. */
.preloader-logo {
  width: clamp(128px, 34vw, 176px);
  height: auto;
  opacity: 0;
  animation: preloader-appear 0.6s 0.1s ease forwards;
}

@keyframes preloader-appear {
  to { opacity: 1; }
}

.preloader-wave {
  width: clamp(200px, 62vw, 420px);
  height: auto;
  overflow: visible;
}

/* pathLength в разметке приравнивает длину линии к 100, поэтому штрих и сдвиг
   задаются в тех же условных единицах при любой форме кривой. */
.preloader-wave path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation:
    preloader-draw 1s cubic-bezier(0.65, 0, 0.35, 1) forwards,
    preloader-breathe 1.7s 1s ease-in-out infinite;
}

@keyframes preloader-draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* Если страница грузится дольше секунды, волна не замирает намертво, а тихо
   дышит - видно, что процесс идёт. */
@keyframes preloader-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  .preloader-wave path {
    stroke-dashoffset: 0;
    animation: none;
  }

  .preloader-logo {
    opacity: 1;
    animation: none;
  }
}