/* ==========================================================================
   Моушен у рамці телефона — hero «/» (з 27.09.2026 замість відео й мокапа).
   Розмітка й JS — resources/views/_landing_partials/hero_motion.blade.php,
   сюжет, таймлайн і рішення — docs/landing_v3_notes.md, розділ «Моушен
   у рамці телефона».

   Інваріанти, які легко зламати правкою:
   1. Базові стилі кожного .lvm-a дорівнюють кадру відпочинку — 19 % (1,9 с,
      сторінка оплати). Тому reduced-motion — просто animation: none: на
      екрані лишається сторінка оплати.
   2. Одна шкала на всі елементи: T = 10 с, 1 % = 0,1 с, затримка 0. Зсув
      у часі — окремий блок @keyframes, а не animation-delay: із затримками
      петлі розійшлися б. Крива на кадрі діє до наступного кадру.
   3. Усе стоїть на абсолютних координатах екрана рамки 272×590 (масштаб
      --k ставить JS у hero.blade.php): заміна шрифту не зсуває цілей дотику.
   4. Пропорції — як у справжнього телефона (28.09.2026): сторінка оплати в тих
      самих розмірах, що _partials/phone_mockup (create.css, .cr-pp-*), решта
      сцен — у тому ж масштабі. Кегль «під читання на мобільному» (≈1,45×) власник
      відхилив: «сильно крупно», деталей менше, ніж на відео.
   Рухаються лише transform, opacity і stroke-dashoffset — без will-change.
   «Крок» (два кадри з різницею 0,1 %) робиться лише під непрозорим шаром.
   ========================================================================== */

/* Кнопка паузи стоїть поруч із телефоном — позиціюється від його обгортки. */
.lv3-hero-phone { position: relative; }
/* Дрейф і похитування телефона (v3.css, lv3Drift/lv3Sway) повернуто 28.09.2026 —
   власник: «може покачування телефона вернути». 27.09 їх вимикали, бо Understanding
   WCAG 2.2.2 радить один механізм паузи на весь рух: тож кнопка паузи і пауза поза
   в'юпортом тепер зупиняють і їх (.is-paused нижче), а reduced-motion вимикає в
   v3.css. Поворот ±0,6° трохи змʼякшує дрібний текст у рамці — оцінює власник. */
.lv3-hero-phone.is-paused .lv3-drift, .lv3-hero-phone.is-paused .lv3-sway { animation-play-state: paused; }
/* Власний контекст накладання екрана — щоб сцени, що виїжджають (transform),
   обрізались його заокругленими кутами. Чи тримає це Safari на iOS, перевіряє
   живий тест; якщо кути протікають — -webkit-mask-image на цьому ж елементі. */
.lv3-hero-phone .cr-phone-screen { isolation: isolate; }

/* text-align: left — мобільний .lv3-hero-grid центрує текст (v3.css), і без
   цього центрування успадкувалось би в рамку. */
/* Петля безкінечна (власник 28.09.2026: «анімацію я б зробив зацикленою»; до того
   2,19 петлі й паркування на сторінці оплати). Зупинка руху — кнопкою паузи
   (WCAG 2.2.2), і сам ролик стоїть поза в'юпортом та у фоновій вкладці. */
.lvm { --lvm-dur: 10s; --lvm-count: infinite; position: absolute; inset: 0; z-index: 0; isolation: isolate; text-align: left;
  font-family: var(--font-sans); color: var(--ink-900); -webkit-font-smoothing: antialiased; }
.lvm-a { animation-duration: var(--lvm-dur); animation-timing-function: linear; animation-delay: 0s;
  animation-iteration-count: var(--lvm-count); animation-fill-mode: both; }
/* Пауза — лише класом. WAAPI play()/pause() не викликати: після них
   animation-play-state більше не керує анімацією (css-animations-2). */
.lv3-hero-phone.is-paused .lvm-a { animation-play-state: paused; }
/* Базові стилі = кадр відпочинку, тож без анімацій на екрані сторінка оплати.
   Кнопка паузи без руху не потрібна. JS для цього не треба: вимкнули
   налаштування на ходу — CSS сам запустить анімації заново. */
@media (prefers-reduced-motion: reduce) {
  .lvm .lvm-a { animation: none !important; }
  .lvm-toggle { display: none !important; }
}

.lvm-scene { position: absolute; inset: 0; overflow: hidden; }
.lvm-status { position: absolute; z-index: 8; top: 12px; left: 24px; right: 22px; height: 20px; display: flex; align-items: center; justify-content: space-between;
  font: 600 10.5px/1 var(--font-sans); color: var(--ink-700); }
.lvm-batt { width: 19px; height: 9px; border: 1.2px solid currentColor; border-radius: 3px; opacity: .7; box-sizing: border-box; }
.lvm-home { position: absolute; z-index: 8; left: 82px; bottom: 8px; width: 108px; height: 4px; border-radius: 2px; background: rgba(10,15,28,.3); }
.lvm-mono { font-family: var(--font-mono); letter-spacing: 0; }

/* A — чат клієнта. Нейтральний месенджер, не Telegram; тло — рекомендація
   для шпалер із розділу палітри docs/landing_v3_notes.md. Повідомлення внизу,
   над полем вводу, як у справжньому чаті. */
.lvm-chat { z-index: 1; background: #DCE3EE; }
.lvm-chat-bar { position: absolute; top: 0; left: 0; right: 0; height: 76px; background: rgba(255,255,255,.78); border-bottom: 1px solid rgba(10,15,28,.06); }
.lvm-chat-back { position: absolute; top: 41px; left: 9px; font: 400 24px/24px var(--font-sans); color: var(--brand-accent); }
.lvm-chat-ava { position: absolute; top: 40px; left: 27px; width: 30px; height: 30px; border-radius: 50%; background: var(--brand-accent-soft); color: var(--brand-accent);
  display: flex; align-items: center; justify-content: center; font: 700 13px/1 var(--font-display); }
.lvm-chat-name { position: absolute; top: 41px; left: 65px; font: 700 12.5px/15px var(--font-display); letter-spacing: -.015em; white-space: nowrap; }
.lvm-chat-sub { position: absolute; top: 57px; left: 65px; font: 500 9px/11px var(--font-sans); color: var(--ink-500); }
/* Дата — над першим повідомленням дня, як у месенджерах. */
.lvm-chat-day { position: absolute; top: 276px; left: 0; right: 0; text-align: center; }
.lvm-chat-day span { display: inline-block; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.6); font: 600 9px/11px var(--font-sans); color: var(--ink-600); }
.lvm-out { position: absolute; top: 302px; right: 10px; max-width: 196px; box-sizing: border-box; padding: 7px 10px 7px 11px; border-radius: 14px 14px 4px 14px;
  background: var(--brand-accent); color: var(--paper); font: 500 11.5px/15px var(--font-sans); }
.lvm-time { font: 500 8px/1 var(--font-sans); opacity: .6; }
.lvm-out .lvm-time { display: inline-block; margin-left: 6px; }
.lvm-in { position: absolute; top: 356px; left: 10px; width: 214px; box-sizing: border-box; padding: 7px 9px 17px; border-radius: 14px 14px 14px 4px; background: var(--paper); }
.lvm-in .lvm-time { position: absolute; right: 9px; bottom: 6px; color: var(--ink-500); opacity: 1; }
.lvm-in-t { font: 500 11.5px/15px var(--font-sans); }
.lvm-link { display: block; margin-top: 2px; font: 500 11px/15px var(--font-sans); color: var(--brand-accent); text-decoration: underline; white-space: nowrap; }
.lvm-card { position: relative; margin-top: 6px; padding: 5px 8px 6px 9px; border-left: 2.5px solid var(--brand-accent); border-radius: 3px 8px 8px 3px;
  background: rgba(37,59,94,.07); transform-origin: 50% 50%; }
.lvm-card-s { font: 700 9.5px/12px var(--font-sans); color: var(--brand-accent); }
.lvm-card-t { margin-top: 1px; font: 700 10.5px/13px var(--font-sans); }
.lvm-card-d { margin-top: 2px; font: 500 9.5px/12px var(--font-sans); color: var(--ink-600); white-space: nowrap; }
.lvm-chat-input { position: absolute; left: 10px; right: 10px; bottom: 22px; height: 30px; box-sizing: border-box; border-radius: 15px; background: var(--paper); color: var(--ink-400);
  display: flex; align-items: center; justify-content: space-between; padding: 0 10px 0 13px; font: 500 10.5px/1 var(--font-sans); }

/* B — сторінка оплати: палітра ink/volt, як на справжній links/show, розміри —
   як у _partials/phone_mockup (create.css, .cr-pp-*). */
.lvm-pay { z-index: 2; background: var(--ink-50); }
/* Низ сторінки йде під смугу «додому» — згасання, як .cr-pp-fade мокапа
   (create.css): інакше смуга перекреслювала б рядок реквізитів на кадрі
   відпочинку — його показує кожна петля, а з reduced-motion він єдиний. */
.lvm-pay::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 58px; background: linear-gradient(rgba(248,250,252,0), var(--ink-50) 72%); }
.lvm-url { position: absolute; top: 38px; left: 12px; right: 12px; height: 24px; border-radius: 8px; background: var(--ink-100); color: var(--ink-600);
  display: flex; align-items: center; justify-content: center; gap: 4px; font: 500 10px/1 var(--font-sans); }
.lvm-via { position: absolute; top: 72px; right: 14px; display: inline-flex; align-items: center; gap: 3px; font: 500 8px/10px var(--font-sans); color: var(--ink-500); }
.lvm-merchant { position: absolute; top: 86px; left: 14px; right: 14px; font: 700 14px/17px var(--font-display); letter-spacing: -.02em; white-space: nowrap; }
.lvm-amt-k { position: absolute; top: 113px; left: 14px; font: 700 9.5px/11px var(--font-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-500); }
.lvm-amt { position: absolute; top: 127px; left: 14px; font: 700 34px/32px var(--font-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lvm-amt span { color: var(--ink-400); font-weight: 500; margin-left: 4px; }
.lvm-purpose { position: absolute; top: 166px; left: 14px; right: 14px; font: 500 12px/16px var(--font-sans); color: var(--ink-600); white-space: nowrap; }
.lvm-banks-head { position: absolute; top: 196px; left: 14px; right: 14px; display: flex; align-items: baseline; justify-content: space-between; gap: 6px; white-space: nowrap;
  font: 700 12.5px/15px var(--font-sans); }
.lvm-banks-hint { font: 500 8.5px/10px var(--font-sans); color: var(--ink-500); }
.lvm-banks { position: absolute; top: 217px; left: 14px; right: 14px; display: flex; flex-direction: column; gap: 7px; }
/* isolation на ряду: накладка «натиснуто» з z-index −1 лягає над його тлом
   і під вмістом, а не під тлом усієї сцени. */
.lvm-bank { position: relative; isolation: isolate; height: 48px; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 0 10px 0 11px;
  border-radius: 12px; border: 1px solid var(--ink-200); background: var(--paper); color: var(--ink-400); }
.lvm-bank img { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: var(--ink-100); }
/* Банк без лого в конфізі — плитка з першою літерою, як на links/show. */
.lvm-bank-ph { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; background: var(--ink-100); color: var(--ink-600);
  display: flex; align-items: center; justify-content: center; font: 700 13px/1 var(--font-display); }
.lvm-bank-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lvm-bank-n { font: 700 12.5px/15px var(--font-sans); color: var(--ink-900); white-space: nowrap; overflow: hidden; }
.lvm-bank-s { margin-top: 1px; font: 500 9.5px/12px var(--font-sans); color: var(--ink-500); white-space: nowrap; }
.lvm-bank svg { flex-shrink: 0; }
/* Кольори й тінь — зі стану .opening сторінки оплати (links/show). */
.lvm-pressed { position: absolute; inset: -1px; z-index: -1; border-radius: 12px; background: var(--volt-100); border: 1px solid var(--volt-500);
  box-shadow: 0 4px 14px -4px rgba(198,242,78,.6); opacity: 0; }
.lvm-more { height: 32px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; padding: 0 11px; border-radius: 10px;
  border: 1px solid var(--ink-200); background: var(--paper); font: 600 11px/1 var(--font-sans); color: var(--ink-700); }
.lvm-more svg { color: var(--ink-500); }
.lvm-manual { position: absolute; top: 429px; left: 14px; right: 14px; height: 42px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between;
  padding: 0 11px; border-radius: 12px; border: 1px dashed var(--ink-300); background: var(--paper); color: var(--ink-500); }
.lvm-manual > span { display: flex; flex-direction: column; }
.lvm-manual-t { font: 700 11px/13px var(--font-sans); color: var(--ink-900); }
.lvm-manual-s { margin-top: 1px; font: 500 8.5px/11px var(--font-sans); }
.lvm-rows { position: absolute; top: 477px; left: 14px; right: 14px; padding: 0 11px; border-radius: 12px; border: 1px solid var(--ink-200); background: var(--paper); }
.lvm-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--ink-100); color: var(--ink-400); }
.lvm-row > span { display: flex; flex-direction: column; min-width: 0; }
.lvm-row-k { font: 500 8.5px/11px var(--font-sans); color: var(--ink-500); }
.lvm-row-v { font: 600 10.5px/14px var(--font-sans); color: var(--ink-900); white-space: nowrap; }
/* Сімейство повторено: скорочення font: у .lvm-row-v стоїть нижче за .lvm-mono і
   перекрило б його (та сама специфічність). IBAN на сторінці оплати моноширинний. */
.lvm-row-v.lvm-mono { font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; }

/* Запуск застосунку: іконка першого ряду виростає в центр білого екрана.
   Стартовий transform ставить її точно поверх іконки в ряду (центр 41; 241),
   кінцева — 64px у центрі (136; 270). */
.lvm-launch-bg { z-index: 4; background: var(--paper); opacity: 0; }
.lvm-launch-icon { position: absolute; z-index: 5; top: 238px; left: 104px; width: 64px; height: 64px; border-radius: 16px; object-fit: cover;
  opacity: 0; transform: translate(-95px, -29px) scale(.47); }

/* C — нейтральний екран банку: будова «Платежу за реквізитами», без логотипа
   й кольорів банку. Поле — підпис над сірою коробкою, як у застосунках банків. */
.lvm-form { z-index: 3; background: var(--paper); opacity: 0; }
.lvm-form-back { position: absolute; top: 39px; left: 10px; font: 400 24px/24px var(--font-sans); color: var(--ink-900); }
.lvm-form-t { position: absolute; top: 42px; left: 30px; font: 700 13.5px/17px var(--font-display); letter-spacing: -.02em; white-space: nowrap; }
.lvm-form-note { position: absolute; top: 60px; left: 30px; font: 500 8.5px/11px var(--font-sans); color: var(--ink-400); white-space: nowrap; }
.lvm-f { position: absolute; left: 14px; right: 14px; }
.lvm-f-k { font: 500 9px/11px var(--font-sans); color: var(--ink-500); white-space: nowrap; }
.lvm-f-v { position: relative; isolation: isolate; margin-top: 3px; height: 28px; box-sizing: border-box; display: flex; align-items: center; gap: 8px; padding: 0 10px;
  border-radius: 8px; border: 1px solid var(--ink-200); background: var(--ink-50); font: 600 11px/14px var(--font-sans); white-space: nowrap; }
.lvm-f--rcv { top: 84px; }
.lvm-f--code { top: 134px; } .lvm-f--code .lvm-f-v { font: 500 11px/14px var(--font-mono); }
.lvm-f--iban { top: 184px; } .lvm-f--iban .lvm-f-v { font: 500 10px/14px var(--font-mono); letter-spacing: -.01em; }
.lvm-f--pur { top: 234px; }
.lvm-f--sum { top: 284px; } .lvm-f--sum .lvm-f-v { height: 32px; font: 700 15px/1 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.lvm-f--card { top: 340px; } .lvm-f--card .lvm-f-v { height: 34px; background: var(--paper); }
.lvm-f--card svg { margin-left: auto; color: var(--ink-400); }
/* Картка списання — нейтральний прямокутник, без платіжної системи й банку. */
.lvm-cardic { position: relative; width: 24px; height: 16px; border-radius: 3px; background: var(--ink-700); flex-shrink: 0; }
.lvm-cardic::after { content: ''; position: absolute; left: 4px; top: 5px; width: 6px; height: 5px; border-radius: 1px; background: var(--ink-300); }
/* «Зберегти як шаблон» — є в застосунках банків під формою (видно на відео 09.2026). */
.lvm-tpl { position: absolute; top: 400px; left: 14px; display: flex; align-items: center; gap: 7px; font: 500 10.5px/13px var(--font-sans); color: var(--ink-700); white-space: nowrap; }
.lvm-tpl-box { width: 14px; height: 14px; box-sizing: border-box; border-radius: 4px; border: 1.5px solid var(--ink-300); background: var(--paper); flex-shrink: 0; }
/* Підсвітка поля — мова .pp-active кабінету (create.css). */
.lvm-hl { position: absolute; inset: -1px; z-index: -1; border-radius: 8px; background: var(--volt-100); box-shadow: 0 0 0 2px rgba(198,242,78,.45); opacity: 0; }
/* Чип — мова тосту «Скопійовано» сторінки оплати: читається як наша підказка,
   а не елемент інтерфейсу банку. */
.lvm-chip-row { position: absolute; top: 482px; left: 0; right: 0; display: flex; justify-content: center; }
.lvm-chip { height: 26px; display: inline-flex; align-items: center; gap: 5px; padding: 0 11px; border-radius: 999px; background: var(--ink-900); color: var(--paper);
  font: 700 10.5px/1 var(--font-sans); white-space: nowrap; opacity: 0; transform: translateY(6px); }
.lvm-chip svg { color: var(--volt-500); flex-shrink: 0; }
.lvm-btn { position: absolute; top: 526px; left: 14px; right: 14px; height: 36px; border-radius: 10px; background: var(--ink-900); color: var(--paper);
  display: flex; align-items: center; justify-content: center; font: 700 12.5px/1 var(--font-sans); }

/* Плашка підтвердження обличчям поверх форми; гліф змінюється на галочку.
   Без напису «Face ID» — див. коментар у розмітці. */
.lvm-fid { position: absolute; z-index: 5; top: 231px; left: 96px; width: 80px; height: 80px; box-sizing: border-box; border-radius: 18px;
  background: rgba(242,244,248,.97); box-shadow: 0 10px 30px -10px rgba(10,15,28,.45); color: var(--ink-700);
  display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.9); }
/* Галочка лягає точно на місце гліфа: (80 − 34) / 2 = 23 з обох боків. */
.lvm-fid-ok { position: absolute; top: 23px; left: 23px; }
.lvm-fid-ok path { stroke-dasharray: 19; stroke-dashoffset: 19; }

/* D — результат. Коло чорнильне, не --success: зелена пляма на першому
   екрані. Брендування MyIBAN немає — сервіс самого платежу не бачить. */
.lvm-done { z-index: 6; background: var(--paper); text-align: center; opacity: 0; }
.lvm-ok { position: absolute; top: 146px; left: 108px; width: 56px; height: 56px; border-radius: 50%; background: var(--ink-900);
  display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.6); }
.lvm-ok path { stroke-dasharray: 23; stroke-dashoffset: 23; }
.lvm-ok svg { color: var(--paper); }
.lvm-done-t { position: absolute; top: 218px; left: 0; right: 0; font: 700 15px/19px var(--font-display); letter-spacing: -.02em; opacity: 0; transform: translateY(6px); }
.lvm-done-a { position: absolute; top: 242px; left: 0; right: 0; font: 700 28px/32px var(--font-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; opacity: 0; transform: translateY(6px); }
.lvm-done-r { position: absolute; top: 280px; left: 0; right: 0; font: 500 10.5px/14px var(--font-sans); color: var(--ink-500); white-space: nowrap; opacity: 0; transform: translateY(6px); }
.lvm-done-card { position: absolute; top: 312px; left: 16px; right: 16px; padding: 2px 11px; border-radius: 12px; border: 1px solid var(--ink-200); background: var(--ink-50);
  text-align: left; opacity: 0; transform: translateY(6px); }
/* Підпис над значенням, а не поруч: повний IBAN у рядок із підписом не вміщається. */
.lvm-done-row { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; font: 500 8.5px/11px var(--font-sans); color: var(--ink-500); white-space: nowrap; }
.lvm-done-row + .lvm-done-row { border-top: 1px solid var(--ink-200); }
.lvm-done-row span:last-child { font-size: 10px; line-height: 13px; color: var(--ink-900); font-weight: 600; }
/* Специфічність вища за span:last-child вище — інакше правило мертве. */
.lvm-done-row span.lvm-mono:last-child { font-size: 9.5px; font-weight: 500; }
.lvm-done-btn { position: absolute; top: 526px; left: 14px; right: 14px; height: 36px; border-radius: 10px; background: var(--ink-100); color: var(--ink-900);
  display: flex; align-items: center; justify-content: center; font: 700 12.5px/1 var(--font-sans); }

/* Дотик — 30px, як слід пальця в записі екрана. Базовий scale(.75) — це 30px
   з 40; біле кільце — щоб коло було видно і на чорній кнопці. */
.lvm-tap { position: absolute; z-index: 7; width: 40px; height: 40px; border-radius: 50%; background: rgba(10,15,28,.18);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.85), 0 0 0 1.5px rgba(10,15,28,.3); opacity: 0; transform: scale(.75); }
.lvm-tap--a { top: 427px; left: 97px; }
.lvm-tap--b { top: 221px; left: 92px; }
.lvm-tap--c { top: 524px; left: 116px; }

/* Кнопка паузи (WCAG 2.2.2: рух довший за 5 с мусить мати зупинку).
   Поза aria-hidden блока телефона, коло 32px, зона дотику 44px через ::before.
   Лише класи, жодних інлайн-токенів --lv3-cta-* (замок LandingRenderTest). */
.lvm-toggle { position: absolute; left: 100%; bottom: 6px; margin-left: 10px; width: 32px; height: 32px; padding: 0; border-radius: 50%;
  border: 1.5px solid var(--lv3-hero-line); background: transparent; color: var(--lv3-hero-fg); display: inline-flex; align-items: center; justify-content: center; }
/* Атрибут hidden (кнопку показує JS) сам не сховає: display з авторського CSS
   перекриває його стан (MDN, hidden). Без JS кнопка нічого б не робила. */
.lvm-toggle[hidden] { display: none; }
.lvm-toggle::before { content: ''; position: absolute; inset: -6px; }
.lvm-toggle:focus-visible { outline: 2px solid var(--lv3-hero-fg); outline-offset: 2px; }
.lvm-toggle .lvm-ic-play { display: none; }
/* Десктопна сітка hero на 861–1060px: права колонка вузька, і кнопка праворуч
   від телефона виходила за край вікна (на 861 видно 2px із 32) — а на цих
   ширинах вона єдиний механізм паузи. Там її місце — ліворуч, у проміжку між
   колонками. 1060, а не 1000, — запас на смугу прокрутки Windows. */
@media (min-width: 861px) and (max-width: 1060px) {
  .lvm-toggle { left: auto; right: 100%; margin: 0 10px 0 0; }
}
.lv3-hero-phone.is-user-paused .lvm-toggle .lvm-ic-play { display: block; }
.lv3-hero-phone.is-user-paused .lvm-toggle .lvm-ic-pause { display: none; }

/* Хореографія: T = 10 с, 1 % = 0,1 с. Крива на кадрі діє до наступного кадру.
   Криві — літерали-копії токенів: cubic-bezier(.22,1,.36,1) = --ease-out,
   cubic-bezier(.65,0,.35,1) = --ease-in-out (colors_and_type.css). */
.lvm-tap--a { animation-name: lvm-tap-a; } .lvm-tap--b { animation-name: lvm-tap-b; } .lvm-tap--c { animation-name: lvm-tap-c; }
.lvm-card { animation-name: lvm-card; }
.lvm-pay { animation-name: lvm-pay; }
.lvm-pressed { animation-name: lvm-pressed; }
.lvm-launch-bg { animation-name: lvm-launch-bg; }
.lvm-launch-icon { animation-name: lvm-launch-icon; }
.lvm-form { animation-name: lvm-form; }
.lvm-f--rcv .lvm-hl { animation-name: lvm-hl-1; } .lvm-f--code .lvm-hl { animation-name: lvm-hl-2; } .lvm-f--iban .lvm-hl { animation-name: lvm-hl-3; }
.lvm-f--pur .lvm-hl { animation-name: lvm-hl-4; } .lvm-f--sum .lvm-hl { animation-name: lvm-hl-5; }
.lvm-chip { animation-name: lvm-chip; }
.lvm-btn { animation-name: lvm-btn; }
.lvm-fid { animation-name: lvm-fid; } .lvm-fid-face { animation-name: lvm-fid-face; } .lvm-fid-ok path { animation-name: lvm-fid-ok; }
.lvm-done { animation-name: lvm-done; }
.lvm-ok { animation-name: lvm-ok; } .lvm-ok path { animation-name: lvm-ok-path; }
.lvm-done-t { animation-name: lvm-rise-1; } .lvm-done-a { animation-name: lvm-rise-2; } .lvm-done-r { animation-name: lvm-rise-3; } .lvm-done-card { animation-name: lvm-rise-4; }

/* Дотики A (1,1 с — картка в чаті), B (2,2 с — перший банк), C (5,6 с — «Переказати»). */
@keyframes lvm-tap-a { 0%, 11% { opacity: 0; transform: scale(.75); animation-timing-function: cubic-bezier(.22,1,.36,1); }
  11.8%, 12.8% { opacity: 1; transform: scale(.75); animation-timing-function: cubic-bezier(.22,1,.36,1); } 14%, 100% { opacity: 0; transform: scale(1); } }
@keyframes lvm-tap-b { 0%, 22% { opacity: 0; transform: scale(.75); animation-timing-function: cubic-bezier(.22,1,.36,1); }
  22.8%, 23.8% { opacity: 1; transform: scale(.75); animation-timing-function: cubic-bezier(.22,1,.36,1); } 25%, 100% { opacity: 0; transform: scale(1); } }
@keyframes lvm-tap-c { 0%, 56% { opacity: 0; transform: scale(.75); animation-timing-function: cubic-bezier(.22,1,.36,1); }
  56.8%, 57.8% { opacity: 1; transform: scale(.75); animation-timing-function: cubic-bezier(.22,1,.36,1); } 59%, 100% { opacity: 0; transform: scale(1); } }
@keyframes lvm-card { 0%, 11.8% { transform: scale(1); animation-timing-function: cubic-bezier(.22,1,.36,1); }
  12.4% { transform: scale(.97); animation-timing-function: cubic-bezier(.22,1,.36,1); } 13.6%, 100% { transform: scale(1); } }
/* B виїжджає знизу на 1,3–1,6 с; на 85,9→86 % кроком повертається вниз під
   непрозорим D — глядач цього не бачить. */
@keyframes lvm-pay { 0%, 13% { transform: translateY(100%); animation-timing-function: cubic-bezier(.22,1,.36,1); }
  16%, 85.9% { transform: translateY(0); } 86%, 100% { transform: translateY(100%); } }
@keyframes lvm-pressed { 0%, 22.8% { opacity: 0; animation-timing-function: cubic-bezier(.22,1,.36,1); } 23.6%, 85.9% { opacity: 1; } 86%, 100% { opacity: 0; } }
@keyframes lvm-launch-bg { 0%, 25% { opacity: 0; animation-timing-function: cubic-bezier(.22,1,.36,1); }
  27%, 28.5% { opacity: 1; animation-timing-function: cubic-bezier(.65,0,.35,1); } 30.5%, 100% { opacity: 0; } }
@keyframes lvm-launch-icon { 0%, 24.9% { opacity: 0; transform: translate(-95px, -29px) scale(.47); }
  25% { opacity: 1; transform: translate(-95px, -29px) scale(.47); animation-timing-function: cubic-bezier(.65,0,.35,1); }
  28.5% { opacity: 1; transform: translate(0, 0) scale(1); animation-timing-function: cubic-bezier(.65,0,.35,1); }
  30.5%, 100% { opacity: 0; transform: translate(0, 0) scale(1); } }
/* C з'являється кроком під білим шаром запуску, тож відкривається вже заповненою. */
@keyframes lvm-form { 0%, 28.4% { opacity: 0; } 28.5%, 85.9% { opacity: 1; } 86%, 100% { opacity: 0; } }
/* П'ять полів підсвічуються по черзі з кроком 0,08 с — «заповнилось само». */
@keyframes lvm-hl-1 { 0%, 30.5% { opacity: 0; animation-timing-function: cubic-bezier(.22,1,.36,1); } 31.7%, 33.5% { opacity: 1; animation-timing-function: cubic-bezier(.65,0,.35,1); } 35.5%, 100% { opacity: 0; } }
@keyframes lvm-hl-2 { 0%, 31.3% { opacity: 0; animation-timing-function: cubic-bezier(.22,1,.36,1); } 32.5%, 34.3% { opacity: 1; animation-timing-function: cubic-bezier(.65,0,.35,1); } 36.3%, 100% { opacity: 0; } }
@keyframes lvm-hl-3 { 0%, 32.1% { opacity: 0; animation-timing-function: cubic-bezier(.22,1,.36,1); } 33.3%, 35.1% { opacity: 1; animation-timing-function: cubic-bezier(.65,0,.35,1); } 37.1%, 100% { opacity: 0; } }
@keyframes lvm-hl-4 { 0%, 32.9% { opacity: 0; animation-timing-function: cubic-bezier(.22,1,.36,1); } 34.1%, 35.9% { opacity: 1; animation-timing-function: cubic-bezier(.65,0,.35,1); } 37.9%, 100% { opacity: 0; } }
@keyframes lvm-hl-5 { 0%, 33.7% { opacity: 0; animation-timing-function: cubic-bezier(.22,1,.36,1); } 34.9%, 36.7% { opacity: 1; animation-timing-function: cubic-bezier(.65,0,.35,1); } 38.7%, 100% { opacity: 0; } }
@keyframes lvm-chip { 0%, 34% { opacity: 0; transform: translateY(6px); animation-timing-function: cubic-bezier(.22,1,.36,1); }
  36%, 85.9% { opacity: 1; transform: translateY(0); } 86%, 100% { opacity: 0; transform: translateY(6px); } }
@keyframes lvm-btn { 0%, 56.8% { transform: scale(1); animation-timing-function: cubic-bezier(.22,1,.36,1); }
  57.4% { transform: scale(.97); animation-timing-function: cubic-bezier(.22,1,.36,1); } 58.6%, 100% { transform: scale(1); } }
/* Face ID: 5,85–6,55 с. Плашка зникає кроком уже під непрозорим D. */
@keyframes lvm-fid { 0%, 58.5% { opacity: 0; transform: scale(.9); animation-timing-function: cubic-bezier(.22,1,.36,1); }
  59.7%, 65.5% { opacity: 1; transform: scale(1); } 65.6%, 100% { opacity: 0; transform: scale(.9); } }
@keyframes lvm-fid-face { 0%, 61.8% { opacity: 1; animation-timing-function: cubic-bezier(.65,0,.35,1); } 62.4%, 100% { opacity: 0; } }
@keyframes lvm-fid-ok { 0%, 62.2% { stroke-dashoffset: 19; animation-timing-function: cubic-bezier(.65,0,.35,1); } 63.4%, 100% { stroke-dashoffset: 0; } }
/* D закривається зсувом униз, а не згасанням: перехресне згасання D→A давало
   подвійну експозицію тексту. */
@keyframes lvm-done { 0%, 63.5% { opacity: 0; transform: translateY(0); animation-timing-function: cubic-bezier(.22,1,.36,1); }
  65.5%, 86% { opacity: 1; transform: translateY(0); animation-timing-function: cubic-bezier(.65,0,.35,1); } 90.5%, 100% { opacity: 1; transform: translateY(100%); } }
@keyframes lvm-ok { 0%, 64.5% { opacity: 0; transform: scale(.6); animation-timing-function: cubic-bezier(.22,1,.36,1); }
  66.5% { opacity: 1; transform: scale(1.06); animation-timing-function: cubic-bezier(.65,0,.35,1); } 68%, 100% { opacity: 1; transform: scale(1); } }
@keyframes lvm-ok-path { 0%, 65.5% { stroke-dashoffset: 23; animation-timing-function: cubic-bezier(.65,0,.35,1); } 68%, 100% { stroke-dashoffset: 0; } }
@keyframes lvm-rise-1 { 0%, 65.5% { opacity: 0; transform: translateY(6px); animation-timing-function: cubic-bezier(.22,1,.36,1); } 68%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes lvm-rise-2 { 0%, 66% { opacity: 0; transform: translateY(6px); animation-timing-function: cubic-bezier(.22,1,.36,1); } 68.5%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes lvm-rise-3 { 0%, 66.5% { opacity: 0; transform: translateY(6px); animation-timing-function: cubic-bezier(.22,1,.36,1); } 69%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes lvm-rise-4 { 0%, 67.5% { opacity: 0; transform: translateY(6px); animation-timing-function: cubic-bezier(.22,1,.36,1); } 70%, 100% { opacity: 1; transform: translateY(0); } }