/* Экраны пересадки: загрузка сборки, проверка входа, уход к провайдеру и возврат от него,
   выход и отказы входа.

   Отдельный файл, а не секция в dailyops.css, по одной практической причине: первый из этих
   экранов рисуется в index.html до того, как загружена сборка приложения, — значит его стили
   обязаны быть в обычном CSS и грузиться раньше всего остального. Держать их вперемешку
   со стилями экранов портала значит рано или поздно утащить туда что-нибудь, чего в этот
   момент ещё нет.

   Цвета — только токены из tokens.css: эти экраны видны в обеих темах, а тёмную на них
   включает встроенный в index.html скрипт, до первой отрисовки. */

.boot {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--wash);
  color: var(--ink);
}

/* Карточка появляется не сразу: при быстрой загрузке пересадка укладывается в те же
   полсекунды, и показанный на мгновение экран читается как мигание, а не как ответ.
   Задержка съедает этот случай целиком — а если ожидание настоящее, её никто не заметит.
   Загрузке сборки дано больше: её обычно и ждать не приходится. */
.boot__card {
  width: min(340px, 100%);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 30px 28px 32px;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  animation: boot-card-in .38s cubic-bezier(.2, .7, .3, 1) .2s both;
}

.boot--loading .boot__card { animation-delay: .5s; }

@keyframes boot-card-in {
  from { opacity: 0; transform: translateY(6px) scale(.985); }
  to { opacity: 1; transform: none; }
}

@keyframes boot-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.boot__mark {
  position: relative;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--soft);
  color: var(--accent);
}

/* Ореол вокруг марки — второй, медленный признак того, что портал занят: если полоса
   ожидания где-то не отрисуется, экран всё равно не выглядит замершим. */
.boot__mark::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 var(--soft);
  animation: boot-halo 2.4s ease-out infinite;
}

/* На спокойных экранах ждать нечего — пульсировать тоже незачем. */
.boot--failed .boot__mark::after,
.boot--notfound .boot__mark::after,
.boot--signed-out .boot__mark::after { animation: none; }

@keyframes boot-halo {
  0% { box-shadow: 0 0 0 0 var(--soft); }
  70% { box-shadow: 0 0 0 12px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.boot__mark-glyph {
  font-size: 14px;
  font-weight: 650;
  letter-spacing: .02em;
}

.boot--failed .boot__mark { background: var(--warnSoft); color: var(--warn); }
.boot--failed .boot__mark-glyph { font-size: 18px; }

/* Ошибка в адресе — не поломка портала: марка остаётся нейтральной, но с контуром,
   иначе в тёмной теме она сливается с карточкой. */
.boot--notfound .boot__mark {
  background: var(--card2);
  color: var(--ink3);
  box-shadow: inset 0 0 0 1px var(--line);
}
.boot--notfound .boot__mark-glyph { font-size: 18px; }

.boot--signed-out .boot__mark { background: var(--okSoft); color: var(--ok); }

.boot__title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.35;
}

.boot__note {
  max-width: 34ch;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink2);
}

/* Полоса ожидания ходит между краями: конца у неё нет, потому что и оценки времени нет —
   рисовать движение слева направо значило бы обещать прогресс, которого никто не считает. */
.boot__progress {
  width: 100%;
  max-width: 180px;
  height: 3px;
  margin-top: 2px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--line);
}

.boot__progress > span {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
  animation: boot-sweep 1.4s ease-in-out infinite alternate;
}

@keyframes boot-sweep {
  from { transform: translateX(0); }
  to { transform: translateX(150%); }
}

.boot__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}

/* Две кнопки в узкую карточку не встают рядом и переносятся разной ширины — столбик
   одинаковых читается как выбор из двух, а не как случайно съехавшая строка. */
.boot__actions:has(> :nth-child(2)) {
  flex-direction: column;
  align-items: stretch;
  width: min(100%, 220px);
}

/* Кнопки повторяют .btn-primary и .btn-ghost из dailyops.css, но заведены здесь заново:
   эти экраны обязаны выглядеть одинаково и там, где стили портала ещё не пригодились. */
.boot__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  background: var(--accent);
  color: var(--card);
  cursor: pointer;
  text-decoration: none;
  transition: opacity .12s ease, border-color .12s ease, color .12s ease;
}

.boot__button:hover { opacity: .9; color: var(--card); }

.boot__button--ghost {
  background: var(--card2);
  border-color: var(--line);
  color: var(--ink2);
  font-weight: 500;
}

.boot__button--ghost:hover { opacity: 1; border-color: var(--accent); color: var(--accent); }

.boot__button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .boot { padding: 16px; }
  .boot__card { padding: 26px 20px 28px; gap: 11px; }
  .boot__actions { width: 100%; }
  .boot__actions .boot__button { flex: 1 1 auto; }
}

/* Сдержанность по требованию системы: движение убрано, но задержка появления сохранена —
   она защищает не от анимации, а от мигания. Полоса ожидания вместо бега дышит: совсем
   неподвижный индикатор ожидания означал бы, что портал завис. */
@media (prefers-reduced-motion: reduce) {
  .boot__card {
    animation-name: boot-fade;
    animation-duration: .2s;
    animation-timing-function: linear;
  }

  .boot__mark::after { animation: none; }

  .boot__progress > span {
    width: 100%;
    animation: boot-breathe 2.6s ease-in-out infinite;
  }

  @keyframes boot-breathe {
    0%, 100% { opacity: .35; }
    50% { opacity: 1; }
  }
}