/* Состояния загрузки — макеты «Состояния загрузки / Загрузка сайта» (476:2939).

   🔴 §2, инвариант 1: всё здесь — надстройка. Страницы приходят с сервера
   готовыми, поэтому «скелетон всей страницы» не нужен: он показывал бы серые
   плашки поверх содержимого, которое уже в HTML. Остаются четыре места, где
   человек правда ждёт: переход по ссылке, фото, которое ещё качается,
   перезапрос выдачи и отправка заявки.

   Всё, что зависит от скрипта, привязано к html.js (его ставит <head>) или к
   классам, которые вешает loading.js. Без скрипта ни одно правило не
   срабатывает, и страница выглядит как раньше. */

/* ─── 1. Полоса прогресса сверху ──────────────────────────────────────────
   Оранжевая, 3 px, над шапкой. Растёт transform-ом, а не шириной: ширина
   пересчитывает раскладку на каждом кадре, а полоса живёт как раз тогда,
   когда страница и так занята. */
.ld-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100000;
  background: #EE6321; pointer-events: none;
  transform: scaleX(0); transform-origin: 0 50%;
  opacity: 0;
}
.ld-bar.is-on { opacity: 1; }
/* Рост 30% -> 85%: первая ступень быстрая (ответ сервера), вторая тянется —
   полоса не упирается в край и не «врёт», что вот-вот закончится. */
.ld-bar.is-30 { transform: scaleX(.3); transition: transform .25s ease-out, opacity .1s; }
.ld-bar.is-85 { transform: scaleX(.85); transition: transform 8s cubic-bezier(.1, .6, .2, 1); }

/* Без анимации: просто полоса на 60%. */
@media (prefers-reduced-motion: reduce) {
  .ld-bar.is-30, .ld-bar.is-85 { transform: scaleX(.6); transition: none; }
}

/* ─── 2. Заглушка под фото ────────────────────────────────────────────────
   Серый #E9EBEF с бликом, пока ленивая картинка не загрузилась. Фон лежит на
   самом <img>: загруженная картинка закрывает его собой, а до загрузки он и
   есть заглушка — ни обёрток, ни правок в шаблонах.

   Только под html.js и только пока нет .is-loaded: без скрипта блик некому
   снять, и он крутился бы под уже показанным фото вечно. */
html.js img[loading="lazy"]:not(.is-loaded) {
  background-color: #E9EBEF;
  background-image: linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.65) 50%, rgba(255,255,255,0) 70%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  background-position: 150% 0;
  animation: ld-shine 1.4s linear infinite;
}
/* Подпись alt не должна просвечивать сквозь блик, пока файл идёт. */
html.js img[loading="lazy"]:not(.is-loaded):not([aria-hidden]) { color: transparent; }

@keyframes ld-shine {
  from { background-position: 150% 0; }
  to   { background-position: -50% 0; }
}

/* ─── 3. Выдача при перезапросе (swap.js) ────────────────────────────────
   Карточки приглушаются, поверх идёт блик. Прозрачность задаёт и main.css
   через [data-busy] (.55); здесь она уточняется до .5 по макету. */
.is-loading { position: relative; }
[data-busy].is-loading { opacity: .5; }
.is-loading::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(100deg, rgba(233,235,239,0) 30%, rgba(233,235,239,.9) 50%, rgba(233,235,239,0) 70%);
  background-size: 200% 100%;
  animation: ld-shine 1.4s linear infinite;
}

/* Строка ошибки: красный только у текста (#D93B3B), без плашек. */
.ld-err {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 16px; font-size: 14px; line-height: 20px; font-weight: 600;
  color: #D93B3B;
}
.ld-err__retry {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: #D93B3B; text-decoration: underline;
}
.ld-err--form { margin: 10px 0 0; font-size: 13px; line-height: 18px; }

/* ─── 4. Кнопка отправки заявки ───────────────────────────────────────── */
/* Приглушённый оранжевый (макет 480:3400), кольцо слева, повторное нажатие
   невозможно. Селектор по классу формы, а не по трём разным классам кнопок:
   окно, встроенная форма и посадочная красятся одним правилом. */
button.ld-sending {
  background: #F4B79B; color: #fff; cursor: default; pointer-events: none;
  box-shadow: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
.ld-spin {
  flex: none; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.55); border-top-color: #fff;
  animation: ld-turn .8s linear infinite;
}
@keyframes ld-turn { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  html.js img[loading="lazy"]:not(.is-loaded),
  .is-loading::after { animation-duration: 3s; }
  .ld-spin { animation-duration: 2.4s; }
}