/* Страница входа (docs/09, раздел 11; правки заказчика от 04.09.2026,
   пп. 10–16). Подключается только из login.html.

   Шапки на странице нет совсем (п. 10) — base.html отдаёт пустой блок shapka.
   Вместо логотипа и «Входа в систему» — одно название «М01.Маркетинг» крупно
   и жирно (пп. 11–12). Кольцо и орбита из декора удалены (п. 13); поверх
   плашки с графиком, испечённой в растре позади дома-логотипа, стоит своя
   плашка-дубль (п. 14) — с 05.09.2026 БЕЗ анимации: ни дрейфа, ни появления
   (правка заказчика, docs/09, раздел 14, п. 1). Сообщения входа — внизу
   страницы, плашкой над подвалом (п. 16).

   Тема системы строго светлая (п. 8), style.css других палитр не содержит —
   отдельного принудительного переопределения токенов здесь больше не нужно.

   Движение — по docs/08 и навыку emil-design-eng. Вход — редкое действие,
   поэтому delight уместен: каскадное появление (ease-out, из scale(0.95)
   и прозрачности, шаг 70 мс) и медленный дрейф декора (только transform,
   7–12 с, linear по замкнутой траектории — постоянное движение без рывков).
   ease-in не используется нигде; prefers-reduced-motion выключает дрейф
   и оставляет появлению только прозрачность.

   Внешний слой .vhod-dekor отвечает за появление, внутренний .vhod-dekor__drayf —
   за дрейф: два transform-а на одном элементе затёрли бы друг друга. */

/* ==========================================================================
   Каркас страницы поверх фоновой композиции
   ========================================================================== */

/* Содержимое по центру экрана; на широком экране — справа, в спокойной
   серой части композиции, чтобы дом-логотип оставался виден целиком.
   110px — подвал и отступы main: шапки на странице нет. */
.soderzhimoe {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100svh - 110px);
  padding-bottom: 24px;
}

/* Сообщения входа (ошибка, блокировка, «вы вышли») — внизу страницы,
   плашкой над подвалом (правка заказчика от 04.09.2026, п. 16). Разметку
   рисует base.html в начале main — вниз её уводит позиционирование, поэтому
   читалки объявляют сообщение сразу, а карточка формы остаётся по центру. */
.soobshcheniya {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 60px;
  z-index: 5;
  width: min(420px, calc(100% - 32px));
  margin: 0 auto;
  animation: vhod-poyavlenie 400ms var(--ease-out) both;
  animation-delay: 40ms;
}

/* ==========================================================================
   Фон: fon.png целиком + вуаль под шапкой
   ========================================================================== */

.vhod-fon {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden; /* дрейфующий декор не создаёт горизонтальной прокрутки */
}

.vhod-fon__kartinka {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Смещение к дому: при обрезке на узком экране в кадре остаётся
     композиция слева, а не пустое серое поле справа. */
  object-position: 25% 50%;
}

.vhod-fon__vual {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(246, 247, 249, 0.9) 0, rgba(246, 247, 249, 0) 20%),
    linear-gradient(0deg, rgba(246, 247, 249, 0.55) 0, rgba(246, 247, 249, 0) 16%);
}

/* ==========================================================================
   Собственный парящий декор в стилистике композиции
   ========================================================================== */

.vhod-dekor {
  position: absolute;
  animation: vhod-poyavlenie 420ms var(--ease-out) both;
}

.vhod-dekor__drayf { will-change: transform; }

.vhod-dekor svg { display: block; }

/* Стеклянная плашка мини-графика. Настоящего размытия здесь нет намеренно:
   backdrop-filter на вечно движущемся элементе пересчитывался бы каждый кадр
   (дорого, особенно в Safari — docs/08), а полупрозрачный белый поверх
   мягкого фото выглядит тем же матовым стеклом. */
.vhod-dekor__plashka {
  padding: 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 12px 32px rgba(31, 37, 47, 0.12);
}

/* Шарики. */
.vhod-dekor--sharik-1 .vhod-dekor__drayf,
.vhod-dekor--sharik-3 .vhod-dekor__drayf {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #ff8a76, #f5301c 55%, #c81f12);
  box-shadow: 0 8px 16px rgba(200, 31, 18, 0.28);
}

.vhod-dekor--sharik-3 .vhod-dekor__drayf { width: 12px; height: 12px; }

.vhod-dekor--sharik-2 .vhod-dekor__drayf {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #ffffff, #e8eaef 60%, #ccd1d9);
  box-shadow: 0 10px 20px rgba(31, 37, 47, 0.18);
}

   испечённой в растре позади дома-логотипа: при object-position 25% 50%
   та занимает примерно левые 2–16% ширины и 24–46% высоты кадра на обычных
   мониторах. Точного пиксельного совпадения при object-fit: cover не бывает —
   и не нужно: элемент читается как продолжение композиции. Остальные свои
   элементы живут в правой, пустой половине — не наслаиваются на растровые.

   Плашка-дубль НЕ анимируется совсем (правка заказчика от 05.09.2026,
   docs/09, раздел 14, п. 1): ни дрейфа, ни каскадного появления — она
   продолжает неподвижный растровый элемент, и любое её движение читалось
   бы как расслоение фона. */
.vhod-dekor--grafik   { right: 26%; top: 15%; }
.vhod-dekor--stolbiki { right: 24%; bottom: 17%; }
.vhod-dekor--sharik-1 { right: 36%; top: 42%; }
.vhod-dekor--sharik-2 { right: 6%;  top: 12%; }
.vhod-dekor--sharik-3 { right: 30%; bottom: 34%; }

/* Каскад появления: шаг 70 мс (docs/09 — 50–80 мс). Плашки-дубля в каскаде
   нет — она без анимации вовсе (правка от 05.09.2026, п. 1). */
.vhod-dekor--grafik   { animation-delay: 210ms; }
.vhod-dekor--stolbiki { animation-delay: 280ms; }
.vhod-dekor--sharik-1 { animation-delay: 350ms; }
.vhod-dekor--sharik-2 { animation-delay: 420ms; }
.vhod-dekor--sharik-3 { animation-delay: 490ms; }

/* Дрейф (парение): замкнутые траектории с linear — постоянное медленное
   движение без видимых остановок. Разные длительности и отрицательные
   задержки рассинхронизируют элементы, чтобы фон не «дышал» в такт.
   Плашка-дубль за домом не дрейфует (правка от 05.09.2026, п. 1). */
.vhod-dekor--grafik   .vhod-dekor__drayf { animation: vhod-drayf-a 9s   linear infinite; animation-delay: -2s; }
.vhod-dekor--stolbiki .vhod-dekor__drayf { animation: vhod-drayf-a 10s  linear infinite; animation-delay: -6s; }
.vhod-dekor--sharik-1 .vhod-dekor__drayf { animation: vhod-drayf-b 7s   linear infinite; }
.vhod-dekor--sharik-2 .vhod-dekor__drayf { animation: vhod-drayf-a 8s   linear infinite; animation-delay: -3s; }
.vhod-dekor--sharik-3 .vhod-dekor__drayf { animation: vhod-drayf-b 6.5s linear infinite; animation-delay: -1.5s; }

/* ==========================================================================
   Название и карточка формы
   ========================================================================== */

.vhod {
  width: min(420px, 100%);
  margin: 0;
  text-align: center;
}

/* Название системы — крупно и жирно, со сдержанным появлением: ease-out,
   450 мс (в пределах 500 мс), из прозрачности и scale(0.95) — не из нуля. */
.vhod__nazvanie {
  margin: 0 0 18px;
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--m01-text);
  animation: vhod-poyavlenie 450ms var(--ease-out) both;
}

/* Стеклянная карточка формы. Размытие 18px — в пределах 20px из docs/08;
   карточка неподвижна, поэтому настоящее стекло здесь дёшево. Подложка
   достаточно плотная, чтобы читаемость полей не зависела от пестроты фона. */
.vhod .kartochka {
  text-align: left;
  padding: 20px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 18px 48px rgba(20, 24, 32, 0.16);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  animation: vhod-poyavlenie 450ms var(--ease-out) both;
  animation-delay: 120ms;
}

/* Браузер без размытия получает почти непрозрачную подложку — поля не должны
   просвечивать фоном (тот же приём, что у шапки в style.css). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .vhod .kartochka { background: rgba(255, 255, 255, 0.95); }
}

/* Поля — непрозрачный белый (унаследован из style.css через токены,
   здесь закреплено явно): читаемость важнее эффекта. Размер шрифта 17px
   и высота 48px приходят из style.css. */
.vhod input[type="text"],
.vhod input[type="password"] {
  background: #ffffff;
  border-color: #d8dbe1;
}

.vhod .knopka { width: 100%; }

/* ==========================================================================
   Ключевые кадры
   ========================================================================== */

/* Появление: из scale(0.95) и прозрачности, никогда из scale(0) (docs/08). */
@keyframes vhod-poyavlenie {
  from { opacity: 0; transform: translateY(10px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Появление без движения — для prefers-reduced-motion. */
@keyframes vhod-tihoe-poyavlenie {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Дрейф: два замкнутых контура (начало = конец, скорость почти постоянная). */
@keyframes vhod-drayf-a {
  0%   { transform: translate3d(0, 0, 0); }
  25%  { transform: translate3d(7px, -9px, 0); }
  50%  { transform: translate3d(0, -15px, 0); }
  75%  { transform: translate3d(-7px, -8px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes vhod-drayf-b {
  0%   { transform: translate3d(0, 0, 0); }
  25%  { transform: translate3d(-6px, 7px, 0); }
  50%  { transform: translate3d(2px, 13px, 0); }
  75%  { transform: translate3d(8px, 6px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* ==========================================================================
   Щадящее движение: дрейф выключен, появление — только прозрачность
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .vhod-dekor__drayf { animation: none; }

  .soobshcheniya,
  .vhod-dekor,
  .vhod__nazvanie,
  .vhod .kartochka {
    animation-name: vhod-tihoe-poyavlenie;
    animation-duration: 200ms;
  }

  /* Плашка-дубль без анимации при любых настройках (правка от 05.09.2026). */
}

/* ==========================================================================
   Широкий экран: карточка справа, в спокойной части композиции
   ========================================================================== */

@media (min-width: 1100px) {
  .soderzhimoe {
    align-items: flex-end;
    padding-right: 56px;
  }

     остаётся на месте — она привязана к растровой плашке за домом, а не
     к карточке. Карточка стоит у правого края колонки содержимого (максимум
     1100px по центру), поэтому «слева от карточки» привязано к центру экрана
     (calc от 50%), а не к процентам ширины: проценты уезжали бы под карточку
     на широких мониторах. */
  .vhod-dekor--grafik   { right: auto; left: calc(50% - 30px); top: 13%; }
  .vhod-dekor--stolbiki { right: auto; left: calc(50% + 10px); bottom: 13%; }
  .vhod-dekor--sharik-1 { right: auto; left: calc(50% + 30px); top: 38%; }
  .vhod-dekor--sharik-2 { right: 30%; top: 8%; }
  .vhod-dekor--sharik-3 { right: 18%; top: 30%; }
}

/* ==========================================================================
   Телефон: фон кадрируется к дому, декор — только лёгкий
   ========================================================================== */

/* Средние экраны (планшет, узкое окно): дом попадает под карточку —
   вуаль плотнее, чтобы форма и подписи читались на любой кадрировке,
   а крупные плашки (включая дубль за домом) спрятаны: за плотной вуалью
   дублировать нечего. */
@media (max-width: 1099px) {
  .vhod-fon__vual { background: rgba(246, 247, 249, 0.72); }
  .vhod-dekor--grafik,
  .vhod-dekor--stolbiki { display: none; }
}

@media (max-width: 700px) {
  /* В кадре остаётся дом; пустое серое поле уходит за обрез. */
  .vhod-fon__kartinka { object-position: 28% 50%; }

  /* Крупные плашки убраны выше: на 375px они наслаивались бы на карточку
     и испечённую в фоне композицию. Лёгкий декор живёт выше и ниже
     карточки — она на телефоне почти во всю ширину. */
  .vhod-dekor--sharik-1 { right: auto; left: 8%; top: 26%; }
  .vhod-dekor--sharik-2 { right: 10%; top: auto; bottom: 7%; }
  .vhod-dekor--sharik-3 { right: 42%; bottom: 17%; }

  /* Подпись подвала на 375px переносится на две строки — плашка сообщений
     поднимается, чтобы не накрывать её. */
  .soobshcheniya { bottom: 78px; }
}