html, body {
  scroll-behavior: auto; /* чтобы не было двойной плавности */
}

/* === PRELOADER — стили === */

.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #0A0A0A;               /* чёрный фон */
  display: flex;
  align-items: center;               /* центр по вертикали */
  justify-content: center;           /* центр по горизонтали */
  pointer-events: auto;

  /* вся шторка (фон + текст) уезжает вверх */
animation:
  preloader-enter 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards 0.6s,  /* ← добавили 0.2s delay */
  preloader-slide 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards 1s;
}

/* полностью убрать после анимации (класс вешает JS) */
.preloader--gone {
  display: none;
}

/* Блок из двух строк — центр экрана, текст по левому краю */
.preloader-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  will-change: transform;

  /* лёгкий «масляный» дрейф во время набора букв */
  animation: pl-block-drift 2s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

/* Общие настройки текста */
.preloader-line {
  display: block;
  font-family: "DrukTextWideTT", sans-serif; /* имя шрифта как в Тильде */
  text-transform: uppercase;
  color: #F5F5F5;
  white-space: nowrap;
}

/* Верхняя строка: PLUZHNOV */
.preloader-line--top {
  font-size: 50px;
  letter-spacing: 0.04em;
  line-height: 1;
  margin-bottom: 6px;
  transform: translateX(-2px);   /* оптическая компенсация Druk */
}

/* Нижняя строка: PRODUCTION */
.preloader-line--bottom {
  font-size: 20px;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* Анимация букв — вылетают из глубины, перелёт, оседание */

.preloader-letter {
  display: inline-block;
  transform-origin: center center;
  opacity: 0;
  filter: blur(8px);
  will-change: transform, opacity, filter;

  animation: pl-letter-rise 1.3s cubic-bezier(0.19, 1, 0.22, 1) forwards;
  animation-delay: calc(0.04s * var(--i)); /* волна по буквам */
}

/* Немые пробелы */
.preloader-letter--space {
  width: 0.7em;
  animation: none !important;
  opacity: 1;
  filter: none;
  transform: translateY(0);
}

/* Буквы: длинный путь снизу → перелёт → оседание */

@keyframes pl-letter-rise {
  0% {
    opacity: 0;
    transform: translateY(700px);
    filter: blur(16px);
  }
  45% {
    opacity: 1;
    transform: translateY(0px);   /* чуть перелетели строку */
    filter: blur(0px);
  }
  70% {
    opacity: 1;
    transform: translateY(0px);     /* лёгкое «проседание» */
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0);       /* финальная позиция */
    filter: blur(0);
  }
}

/* Плавный дрейф блока, без дёрганий: одна траектория */

@keyframes pl-block-drift {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100px);   /* насколько он «уползёт» во время сборки */
  }
}

/* ШТОРКА: вся сцена (фон + логотип) уезжает вверх */

@keyframes preloader-slide {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100vh);  /* полностью за верх экрана */
  }
}

/* Меньше дерганий для людей с reduced motion */

@media (prefers-reduced-motion: reduce) {
  .preloader,
  .preloader-block,
  .preloader-line,
  .preloader-letter {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* === MOBILE OPTIMIZATION === */

@media (max-width: 640px) {

  /* уменьшаем общий дрейф, чтобы на телефоне не уезжало слишком высоко */
  @keyframes pl-block-drift {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(-28px); /* меньше дрейфа на мобильных */
    }
  }

  /* уменьшаем размеры текста */
  .preloader-line--top {
    font-size: 26px;                /* было 50px — примерно x2 меньше */
    letter-spacing: 0.03em;
    margin-bottom: 4px;
    transform: translateX(-1px);    /* компенсация Druk под малый размер */
  }

  .preloader-line--bottom {
    font-size: 12px;                /* было 20px */
    letter-spacing: -0.01em;
  }

  /* уменьшаем расстояние, из которого буквы прилетают */
  @keyframes pl-letter-rise {
    0% {
      opacity: 0;
      transform: translateY(120px); /* меньше глубины на телефоне */
      filter: blur(12px);
    }
    45% {
      opacity: 1;
      transform: translateY(0px);
      filter: blur(0px);
    }
    70% {
      opacity: 1;
      transform: translateY(0px);
      filter: blur(0);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0);
    }
  }

  /* сама шторка тоже движется немного чище */
  @keyframes preloader-slide {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(-100vh);
    }
  }
}