/* Состояния кнопки в форме «Получить Мюсли».

   Отдельный файл, а не правка style.css и page.css: те два приезжают с холста
   (style.css — заменой файла, page.css — скриптом scripts/musli-port.py), и
   правка в них пропала бы при следующем переносе. Форма же живёт только на
   сайте — вместе с form.js и lead.php. Подключается последним, поэтому
   переопределять ничего не приходится.

   Разметку кнопки тоже не трогаем: и «Отправляю», и ответ вписывает form.js. */

:root {
  /* Зелёный «сделано» — пастельный маркер той же светлоты, что жёлтый и
     розовый на странице. Чернила на нём читаются без смены цвета текста. */
  --green: oklch(0.91 0.12 145);
}

/* ── пока отправляется ─────────────────────────────────────────────────── */

/* Точки должны стоять вплотную к слову: базовое правило кнопки разносит
   содержимое по краям (там справа стрелка), и точки уехали бы к другому краю. */
/* Точки должны стоять вплотную к слову и на его строке: базовое правило
   кнопки разносит содержимое по краям (там справа стрелка), а выравнивание
   по строке держит точки там же, где они были бы в многоточии. */
.access-form button.is-sending {
  justify-content: flex-start;
  align-items: baseline;
  cursor: progress;
}

/* Три точки вместо многоточия: многоточие стоит на месте и не говорит,
   что что-то происходит. Точки — настоящие знаки препинания, а не кружки:
   кружок приходится ставить по высоте самому, и он всегда чуть мимо, а
   точка садится на строку сама, ровно как в многоточии. */
.form-dots { letter-spacing: .06em; }
.form-dots i {
  font-style: normal;
  opacity: .22;
  animation: form-dot 1.05s infinite;
}
.form-dots i:nth-child(2) { animation-delay: .17s; }
.form-dots i:nth-child(3) { animation-delay: .34s; }

@keyframes form-dot {
  0%, 62%, 100% { opacity: .22; }
  31%           { opacity: 1; }
}

/* Кому движение мешает — точки просто стоят, смысл «идёт отправка» несёт
   сам текст кнопки. */
@media (prefers-reduced-motion: reduce) {
  .form-dots i { animation: none; opacity: .55; }
}

/* ── когда заявка дошла ────────────────────────────────────────────────── */

/* Ответ вписан в саму кнопку: человек смотрит на неё в момент нажатия,
   и строчка под формой в этот момент остаётся незамеченной. */
.access-form button.is-done {
  display: block;
  background: var(--green);
  cursor: default;
  font-size: 17px;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  text-wrap: pretty;
}
.access-form button.is-done .form-done-cat {
  display: block;
  margin-top: 6px;
  font-size: 19px;
}

/* Браузер гасит текст выключенной кнопки своим серым — цвет задаём сами. */
.access-form button:disabled { color: var(--ink); opacity: 1; }

/* Ответ продублирован в строке под формой: она объявлена role="status", и
   без неё экранный диктор о результате не скажет — кнопка к этому моменту
   выключена. Глазами эта копия не нужна, поэтому её не видно, но она есть. */
.form-success.is-quiet {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}