/* Заставка входа «ППkafe» (vhod-portal.js). Классы на <html> ставит login.html в <head>:
   vhod-js — JS есть (итог: форма на зелёном поле ПП), vhod-play — движение разрешено
   (форма ждёт заставку), vhod-done — заставка кончилась, vhod-skip — пропущена тапом/клавишей.
   Без JS ни один класс не встаёт — страница входа ровно как была.
   Цвета — палитра ПП из DESIGN.md: #2e9e4f / #1e7a3c / #123c1e, лист — светлый #e7f3e1,
   подпись — #33503c (--ink-500, 7:1 на листе). */

:root{
  --vhod-paper:#e7f3e1;
  /* одно и то же поле и сквозь буквы, и фоном страницы — поэтому стык не виден */
  --vhod-field:radial-gradient(130% 95% at 50% 0%,#2e9e4f 0%,#1e7a3c 52%,#123c1e 100%);
}

/* ---------- итог: форма на зелёном поле ---------- */
html.vhod-js,.vhod-js .login-page{background:#1e7a3c}
/* поле — фиксированный слой во весь экран, а не background-attachment:fixed (на iOS не работает) */
.vhod-js .login-page::before{content:'';position:fixed;inset:0;background:var(--vhod-field);pointer-events:none}
.vhod-js .login{position:relative;z-index:1;box-shadow:0 12px 32px rgba(18,60,30,.28),0 1px 0 rgba(0,0,0,.06)}

/* ---------- заставка ---------- */
.vhod{display:none}
.vhod-play:not(.vhod-done) .vhod{display:block;position:fixed;inset:0;z-index:50;overflow:hidden;
  background:var(--vhod-paper);
  /* страховка: JS не дошёл или умер на полпути — лист сам уходит, форма сама проявляется */
  animation:vhod-ujti .3s linear 3.2s forwards}
.vhod-defs{position:absolute;width:0;height:0;overflow:hidden}
/* поле сквозь буквы: двигается только клип (масштаб/крен на clipPath, перенос на тексте),
   сам слой стоит — will-change держит его отдельным слоем, filter нет нарочно */
.vhod-field{position:absolute;inset:0;background:var(--vhod-field);
  -webkit-clip-path:url(#vhod-clip);clip-path:url(#vhod-clip);will-change:transform}

.vhod-play:not(.vhod-done) .login{opacity:0;transform:translateY(8px);
  animation:vhod-pokazhi .3s linear 3.2s forwards}
/* проявление формы — только opacity и transform, ease-out quart, без отскока (DESIGN.md) */
.vhod-play.vhod-done .login{opacity:1;transform:none;
  transition:opacity .32s cubic-bezier(.25,1,.5,1),transform .32s cubic-bezier(.25,1,.5,1)}
.vhod-play.vhod-skip .login{transition:none}

/* блюда вокруг слова: внешний слой летит (transform/opacity из JS), средний покачивается (CSS),
   картинка просто повёрнута. Кадры качания — без CSS-переменных: с var() в keyframes Chrome
   не отдаёт анимацию композитору и считает её на главном потоке (замер: лишние 33-мс кадры) */
.vhod-blyudo{position:absolute;will-change:transform,opacity;pointer-events:none}
.vhod-kach{animation:vhod-kach-2 3.4s ease-in-out infinite alternate}
.vhod-kach-1{animation-name:vhod-kach-1}
.vhod-kach-3{animation-name:vhod-kach-3}
.vhod-blyudo img{display:block;width:100%;height:auto}
@keyframes vhod-kach-1{from{transform:translateY(-3px)}to{transform:translateY(3px)}}
@keyframes vhod-kach-2{from{transform:translateY(-4.5px)}to{transform:translateY(4.5px)}}
@keyframes vhod-kach-3{from{transform:translateY(-6px)}to{transform:translateY(6px)}}

/* подпись и знак на листе: видны и пока ждём шрифт/картинки — лист не пустой */
.vhod-podpis{position:absolute;will-change:opacity;left:16px;right:16px;bottom:calc(18px + env(safe-area-inset-bottom));margin:0;
  text-align:center;font-size:13px;font-weight:600;letter-spacing:.01em;color:#33503c}
.vhod-znak{position:absolute;will-change:opacity;top:calc(16px + env(safe-area-inset-top));left:16px;width:36px;height:36px;
  border-radius:10px;background:#1e7a3c;color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:13px;letter-spacing:-.01em}

@keyframes vhod-ujti{to{opacity:0;visibility:hidden}}
@keyframes vhod-pokazhi{to{opacity:1;transform:none}}