/* flow-auth.js — только раскладка и анимация своих обёрток; кривые и длительности — токены переходов ДС (--tr-*, --sx-*) */

/* Сплеш: карта из нижней трети в центр с проявлением (модальное появление ДС, x2.4 по длительности), затем уходит вверх с растворением */
.lda-rise { transform: translateY(0); opacity: 1;
  transition: transform calc(var(--tr-modal-ms, 420ms) * 2.4) var(--tr-modal-ease, cubic-bezier(.32, .72, 0, 1)),
    opacity calc(var(--tr-modal-ms, 420ms) * 2.4) var(--tr-modal-ease, cubic-bezier(.32, .72, 0, 1)); }
.lda-rise.is-below { transform: translateY(240px); opacity: 0; }
/* уход: 40 px вверх и прозрачность одной кривой — полностью прозрачна ровно в −40 px */
.lda-rise.is-gone { transform: translateY(-40px); opacity: 0;
  transition: transform var(--tr-modal-ms, 420ms) var(--tr-dismiss-ease, cubic-bezier(.4, 0, 1, 1)), opacity var(--tr-modal-ms, 420ms) var(--tr-dismiss-ease, cubic-bezier(.4, 0, 1, 1)); }
.lda-rise.is-still { transition: none; }
/* У BigCard нет пропа, убирающего «•• last4» (при пустом last4 остаются точки) — номер скрыт только на сплеше. Предложение: проп в products/_shared/bigcard.js */
.lda-rise .cd-card__num { visibility: hidden; }

/* Сплеш → вход: экран входа под сплешем; градиент сплеша сжимается к верху до высоты тона градиента экрана (320 px) с мягким нижним краем и гаснет */
.lda-auth { position: relative; }
.lda-splash { position: absolute; left: 0; top: 0; right: 0; height: var(--uz-screen-h, 812px); overflow: hidden; z-index: 40;
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent);
  transition: height calc(var(--tr-modal-ms, 420ms) * 2) var(--tr-modal-ease, cubic-bezier(.32, .72, 0, 1)),
    opacity calc(var(--tr-modal-ms, 420ms) * 2) var(--tr-dismiss-ease, cubic-bezier(.4, 0, 1, 1)); }
.lda-splash.is-out { height: 320px; opacity: 0; pointer-events: none; }
/* «Hello, Sardor» и индикатор ПИН-кода: подъезжают на 40 px с проявлением (появление элементов ДС, x1.4 по длительности) */
.lda-up { transform: translateY(40px); opacity: 0;
  transition: transform calc(var(--sx-el-ms, 420ms) * 1.4) var(--sx-el-ease, cubic-bezier(0, 0, .2, 1)),
    opacity calc(var(--sx-el-ms, 420ms) * 1.4) var(--sx-el-ease, cubic-bezier(0, 0, .2, 1)); }
.lda-up.is-on { transform: none; opacity: 1; }
/* Плашка Face ID (U.pending.FaceId) в обёртке .lda-face — морфинг из Dynamic Island и обратно, как в iOS.
   Обёртка на 5 px выше экрана (координаты ниже — в обёртке, y экрана + 5). Анимируется сам бейзел ДС — его рамка, а не масштаб:
   закрыт — ровно остров хоста 120×35 r17,5 в (127,5; 10,5 экрана) = (127,5; 15,5 обёртки), без тени, глиф скрыт;
   открыт — бейзел ДС 145×145 r42 в (115; 10 обёртки = 5 экрана), тень ДС, глиф виден. Края и скругление плавно переходят одно в другое,
   верхний край всё время идёт монотонно — остров не выглядывает. Раскрытие — упругая кривая плашки ДС (cubic-bezier(.2, .9, .3, 1.15)), 520 мс;
   сжатие — --tr-modal-ease, 420 мс: глиф гаснет и уменьшается в первой трети, бейзел доходит ровно до размера острова и дальше снимается под ним
   (цвет тот же #000, остров хоста лежит выше экрана — снятие не видно). Своё появление/скрытие ДС (u-faceid-in/-out) здесь отключено. */
.lda-face { position: absolute; left: 0; right: 0; top: -5px; bottom: 0; z-index: 90; pointer-events: none; }
.lda-face .u-faceid { animation: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.lda-face .u-faceid__bezel { left: 127.5px; top: 15.5px; width: 120px; height: 35px; border-radius: 17.5px; overflow: hidden;
  box-shadow: 0 12px 74px rgb(0 0 0 / 0); animation: none !important; opacity: 1 !important;
  transition-property: left, top, width, height, border-radius, box-shadow;
  transition-duration: var(--tr-modal-ms, 420ms); transition-timing-function: var(--tr-modal-ease, cubic-bezier(.32, .72, 0, 1)); }
.lda-face.is-open .u-faceid__bezel { left: 115px; top: 10px; width: 145px; height: 145px; border-radius: 42px; box-shadow: 0 12px 74px rgb(0 0 0 / .22);
  transition-duration: 520ms; transition-timing-function: cubic-bezier(.2, .9, .3, 1.15); }
.lda-face .u-faceid__glyph > * { opacity: 0; transform: scale(.4);
  transition: opacity 200ms ease, transform calc(var(--tr-modal-ms, 420ms) * .6) var(--tr-modal-ease, cubic-bezier(.32, .72, 0, 1)); }
.lda-face.is-open .u-faceid__glyph > * { opacity: 1; transform: none;
  transition: opacity 260ms ease 120ms, transform 520ms cubic-bezier(.2, .9, .3, 1.15) 60ms; }
.lda-face > * { pointer-events: auto; }

/* Главная: блоки подъезжают на 24 px с проявлением лесенкой (появление элементов экрана успеха ДС: --sx-el-ms, --sx-el-ease, шаг --sx-stagger) */
.lda-in { animation: lda-in var(--sx-el-ms, 420ms) var(--sx-el-ease, cubic-bezier(0, 0, .2, 1)) both;
  animation-delay: calc(60ms + var(--sx-stagger, 70ms) * var(--lda-i, 0)); }
@keyframes lda-in { from { opacity: 0; transform: translateY(24px); } }

/* ПИН-клавиатура прибита к низу экрана — как .tb-bottom витрины (products/auth/tobe.js, вход по ПИН-коду) */
.uz .lda-bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; flex-direction: column; }
/* корень сценария: без своей раскладки (нужен только для перевода текстов ДС без пропа) */
.lda-en { display: contents; }
@media (prefers-reduced-motion: reduce) { .lda-rise, .lda-splash, .lda-up, .lda-face, .lda-face * { transition-duration: 1ms !important; } .lda-in { animation-duration: 1ms; animation-delay: 0ms; } }