/* iPhone 16 Pro: рамка из титана, черная кромка стекла, Dynamic Island, боковые кнопки.
   Разметку дает src/components/iphone.mjs. Здесь только то, что нужно главной (натуральный титан,
   темный экран, экран Apple Pay). Другие цвета титана, светлый экран и экран кошелька
   лежат в /static/iphone-wallet.css и подключаются только там, где нужны. Размер задается одной переменной --w (ширина телефона),
   все внутри в var(--u) = 1 pt телефона: ширина телефона 431 pt, экран 402 x 874 pt. */

.iphone {
  --w: 300px;
  --u: calc(var(--w) / 431);
  /* титан: блик, светлый, средний, темный */
  --ti-1: #ece8e1;
  --ti-2: #bfbab1;
  --ti-3: #918c83;
  --ti-4: #5c5852;
  position: relative;
  flex: none;
  width: var(--w);
  height: calc(var(--u) * 903);
  margin: 0;
  font-family: var(--font, -apple-system, BlinkMacSystemFont, "SF Pro Web", system-ui, sans-serif);
  font-size: calc(var(--u) * 17);
  line-height: 1.25;
  letter-spacing: 0;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
}
.iphone *, .iphone *::before, .iphone *::after { box-sizing: border-box; }
.iphone p, .iphone ul { margin: 0; padding: 0; }
.iphone svg { display: block; }

/* Рамка (5,5 pt видно спереди), профиль как на снимках Apple: снаружи металл темнее (лента уходит
   от зрителя), ближе к стеклу яркий блик и светлый кант. Цвет меняется по кругу (conic) от света сверху слева. */
.ip-frame {
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: calc(var(--u) * 76.5);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0) 12%, rgb(0 0 0 / 0) 85%, rgb(0 0 0 / 0.2)),
    conic-gradient(from 0deg at 50% 50%,
      var(--ti-2) 0deg, var(--ti-1) 18deg, var(--ti-3) 34deg, var(--ti-4) 62deg, var(--ti-2) 92deg, var(--ti-3) 122deg,
      var(--ti-1) 152deg, var(--ti-3) 172deg, var(--ti-4) 200deg, var(--ti-3) 236deg, var(--ti-2) 268deg, var(--ti-4) 300deg,
      var(--ti-1) 332deg, var(--ti-2) 360deg);
  box-shadow:
    inset 0 0 0 calc(var(--u) * 0.4) rgb(0 0 0 / 0.5),
    inset 0 0 calc(var(--u) * 1.4) calc(var(--u) * 1.4) rgb(0 0 0 / 0.38),
    0 calc(var(--u) * 34) calc(var(--u) * 70) calc(var(--u) * -22) rgb(0 0 0 / 0.42),
    0 calc(var(--u) * 8) calc(var(--u) * 18) calc(var(--u) * -6) rgb(0 0 0 / 0.28);
}

/* Стекло с черной кромкой (9 pt): у края стекла темно-серый скос, дальше черное.
   Тени наружу рисуют на рамке блик и светлый кант у стекла. */
.ip-bezel {
  position: absolute;
  inset: calc(var(--u) * 5.5);
  border-radius: calc(var(--u) * 71);
  background: #000;
  box-shadow:
    inset 0 0 calc(var(--u) * 2.6) calc(var(--u) * 0.8) rgb(48 46 47),
    0 0 0 calc(var(--u) * 0.3) rgb(10 10 10 / 0.9),
    0 0 0 calc(var(--u) * 1.1) rgb(255 255 255 / 0.2),
    0 0 calc(var(--u) * 0.8) calc(var(--u) * 2.3) rgb(255 255 255 / 0.42);
}

.ip-screen {
  position: absolute;
  inset: calc(var(--u) * 9);
  overflow: hidden;
  border-radius: calc(var(--u) * 62);
  clip-path: inset(0 round calc(var(--u) * 62));
  background: #000;
  color: #fff;
  isolation: isolate;
}

/* Отражение на стекле: еле заметное, как на снимке товара */
.ip-glass {
  position: absolute;
  z-index: 5;
  inset: calc(var(--u) * 5.5);
  border-radius: calc(var(--u) * 71);
  pointer-events: none;
  background: linear-gradient(116deg, rgb(255 255 255 / 0.075) 0%, rgb(255 255 255 / 0.025) 24%, rgb(255 255 255 / 0) 40%);
  box-shadow: inset 0 0 0 calc(var(--u) * 0.6) rgb(255 255 255 / 0.05);
}

/* Боковые кнопки: торчат из рамки на 2 pt */
.ip-btn {
  position: absolute;
  z-index: 0;
  width: calc(var(--u) * 6);
  background: linear-gradient(90deg, var(--ti-4), var(--ti-1) 30%, var(--ti-2) 55%, var(--ti-3) 80%, var(--ti-4));
  box-shadow: inset 0 0 0 calc(var(--u) * 0.45) rgb(0 0 0 / 0.3);
}
.ip-action, .ip-vol-up, .ip-vol-down { left: calc(var(--u) * -2.2); border-radius: calc(var(--u) * 2.2) 0 0 calc(var(--u) * 2.2); }
.ip-side, .ip-cam { right: calc(var(--u) * -2.2); border-radius: 0 calc(var(--u) * 2.2) calc(var(--u) * 2.2) 0; background: linear-gradient(270deg, var(--ti-4), var(--ti-1) 30%, var(--ti-2) 55%, var(--ti-3) 80%, var(--ti-4)); }
.ip-action { top: calc(var(--u) * 186); height: calc(var(--u) * 38); }
.ip-vol-up { top: calc(var(--u) * 262); height: calc(var(--u) * 72); }
.ip-vol-down { top: calc(var(--u) * 350); height: calc(var(--u) * 72); }
.ip-side { top: calc(var(--u) * 290); height: calc(var(--u) * 118); }
/* Camera Control почти вровень с рамкой: темное стекло в металлической оправе */
.ip-cam {
  right: calc(var(--u) * -0.9);
  top: calc(var(--u) * 566);
  height: calc(var(--u) * 82);
  background: linear-gradient(270deg, var(--ti-4), #2c2c2f 25%, #4a4a4f 55%, #1d1d20 80%, var(--ti-4));
}

/* Dynamic Island iPhone 17 Pro (Apple iOS 27 UI Kit, «Status Bars/iPhone 17 Pro»; владелец 20.10.2026 - остров
   и фронталка как у 17, не у 18): капсула 125 x 37 pt, верх 14, по центру экрана. Камера (Apple Design
   Resources, рамка iPhone 17 Pro @3x: центр объектива 18,5 pt от правого конца) стоит в центре правого
   скругления: корпус 22 pt, кольцо объектива 10,7 pt и стекло 8,7 pt. Цвета приглушены почти до черного
   (владелец 20.10.2026: фронталку «менее заметной»), как на снимках Apple, где объектив едва угадывается.
   Рисунок камеры общий для острова и для раскрытого острова Face ID (--ip-lens). */
.iphone { --ip-lens: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cdefs%3E%3CradialGradient id='g' cx='.5' cy='.5' r='.5'%3E%3Cstop offset='0' stop-color='%23040410'/%3E%3Cstop offset='.62' stop-color='%23090926'/%3E%3Cstop offset='.7' stop-color='%2314143c'/%3E%3Cstop offset='.78' stop-color='%23020a16'/%3E%3Cstop offset='1' stop-color='%2305161d'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='11' cy='11' r='11' fill='%23010203'/%3E%3Ccircle cx='11' cy='11' r='9.4' fill='%23030405'/%3E%3Ccircle cx='11' cy='11' r='5.3' fill='%230b0d13'/%3E%3Ccircle cx='11' cy='11' r='4.35' fill='url(%23g)'/%3E%3Cpath d='M7.8 13.7a4.35 4.35 0 0 0 6.4 0' fill='none' stroke='%231a0836' stroke-width='.8'/%3E%3Cpath d='M7.8 8.3a4.35 4.35 0 0 1 6.4 0' fill='none' stroke='%230f1c27' stroke-width='.8'/%3E%3C/svg%3E"); }
.ip-island {
  position: absolute;
  z-index: 3;
  top: calc(var(--u) * 14);
  left: 50%;
  width: calc(var(--u) * 125);
  height: calc(var(--u) * 37);
  margin-left: calc(var(--u) * -62.5);
  border-radius: calc(var(--u) * 18.5);
  background: #000;
}
.ip-island::after {
  content: "";
  position: absolute;
  top: calc(var(--u) * 7.5);
  right: calc(var(--u) * 7.5);
  width: calc(var(--u) * 22);
  height: calc(var(--u) * 22);
  background: var(--ip-lens) center / 100% 100% no-repeat;
}

/* Строка статуса iOS 27, iPhone 17 Pro (Apple iOS 27 UI Kit, «Status Bars/iPhone 17 Pro»): «9:41» SF Pro Semibold
   17,67 pt, строка 22, верх 21,5, по центру x 67,25; связь x 291,3, Wi-Fi x 319,6 (19,3 pt), батарея x 346,911,
   верх 25,667; между значками 8-9 pt, низ значков на 39,33, середина батареи = середина времени (32,5). */
.ip-status { position: absolute; z-index: 2; inset: 0 0 auto; height: calc(var(--u) * 59); color: #fff; pointer-events: none; }
.ip-time {
  position: absolute;
  top: calc(var(--u) * 21.5);
  left: calc(var(--u) * 21.25);
  width: calc(var(--u) * 92);
  text-align: center;
  font-size: calc(var(--u) * 17.67);
  line-height: calc(var(--u) * 22);
  font-weight: 600;
  letter-spacing: -0.025em;
  font-feature-settings: "case";
  transition: opacity .25s ease;
}
.ip-sys { position: absolute; inset: 0; }
.ip-sys svg { position: absolute; fill: currentColor; }
.ip-sig { left: calc(var(--u) * 291.3); top: calc(var(--u) * 26.98); width: calc(var(--u) * 19.3); height: calc(var(--u) * 12.35); }
.ip-wifi { left: calc(var(--u) * 319.6); top: calc(var(--u) * 25.65); width: calc(var(--u) * 19.3); height: calc(var(--u) * 13.68); }
.ip-bat { left: calc(var(--u) * 346.911); top: calc(var(--u) * 25.667); width: calc(var(--u) * 29.333); height: calc(var(--u) * 13.667); }

/* Полоска «домой» */
.ip-home {
  position: absolute;
  z-index: 2;
  bottom: calc(var(--u) * 8);
  left: 50%;
  width: calc(var(--u) * 144);
  height: calc(var(--u) * 5);
  margin-left: calc(var(--u) * -72);
  border-radius: calc(var(--u) * 3);
  background: #fff;
}

/* ---------- Экран Apple Pay ----------
   Копия экрана оплаты iOS 26/27 в светлой теме (src/components/iphone.mjs, applePayScreen). Размеры
   в pt экрана 402 x 874 сняты по снимкам Apple. Экран сам делает строку статуса черной и прячет
   полоску «домой» (ее закрывает стопка карт). Фон задан через .iphone .ip-ap: файл подключается
   после site.css и перекрывает старую подсветку .ap-vis .ip-ap. */
.iphone .ip-ap { position: absolute; inset: 0; background: #f2f2f7; color: #000; text-align: center; }
.ip-ap ~ .ip-status { color: #000; }
.ip-ap ~ .ip-home { display: none; }
/* На снимках Apple экран без бликов, черный остров чисто черный: отражение стекла над этим экраном убираем */
.iphone:has(.ip-ap) .ip-glass { background: none; }
.ip-ap > * { position: absolute; }
/* метка для site.js (data-reveal): когда верх экрана виден, ставит .is-in и запускает анимацию */
.ip-ap-go { top: calc(var(--u) * 150); left: 50%; width: 1px; height: 1px; pointer-events: none; }

/* Выбранная карта: 367 x 231 pt, скругление 12 pt, мягкая тень вниз, плотная тень у нижнего края
   (как под темной картой на снимке Apple: 165–175 на 1–2 pt ниже карты; по бокам ее почти нет)
   и волосок по краю. Картинка своя для Wallet (card-wallet-*.webp: без чипа и имени). Светлую кромку,
   нарисованную в самом файле карты (3 px из 860), срезаем: картинка на 1,3 pt шире рамки. */
.ip-ap-card {
  top: calc(var(--u) * 76.5);
  left: calc(var(--u) * 17.5);
  width: calc(var(--u) * 367);
  height: calc(var(--u) * 231);
  overflow: hidden;
  border-radius: calc(var(--u) * 12);
  background: #2b2b2b;
  box-shadow:
    0 calc(var(--u) * 5) calc(var(--u) * 8) calc(var(--u) * -4) rgb(0 0 0 / 0.3),
    0 calc(var(--u) * 9) calc(var(--u) * 24) calc(var(--u) * -8) rgb(0 0 0 / 0.45),
    0 0 calc(var(--u) * 14) rgb(0 0 0 / 0.035);
}
.ip-ap-img {
  position: absolute;
  top: calc(var(--u) * -1.3);
  left: calc(var(--u) * -1.3);
  display: block;
  width: calc(100% + var(--u) * 2.6);
  height: calc(100% + var(--u) * 2.6);
  max-width: none;
  object-fit: cover;
}
.ip-ap-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 calc(var(--u) * 0.5) rgb(0 0 0 / 0.15); }
/* Последние цифры номера, как их рисует Wallet поверх карты: внизу слева, белым, SF Pro Regular.
   По снимкам Apple (в пересчете на карту 367 pt): точки Ø 3,1 через 8,67 pt, центр первой в 22,6 pt
   от левого края и в 22,7 pt над нижним, цифры с 60,9 pt, высота цифр 11,7 pt, базовая линия в 18,1 pt
   над нижним краем. Строка нулевой высоты: базовая линия лежит на 0,34em ниже top почти в любом шрифте. */
.ip-ap-l4 {
  position: absolute;
  z-index: 1;
  left: calc(var(--u) * 21.05);
  top: calc(var(--u) * 207.46);
  display: flex;
  align-items: baseline;
  height: 0;
  font-size: calc(var(--u) * 16);
  line-height: 0;
  font-weight: 400;
  letter-spacing: 0;
  color: #fff;
  white-space: nowrap;
}
.ip-ap-l4 i {
  position: relative;
  top: calc(var(--u) * -3.05);
  flex: none;
  width: calc(var(--u) * 3.1);
  height: calc(var(--u) * 3.1);
  margin-right: calc(var(--u) * 5.57);
  border-radius: 50%;
  background: currentColor;
}
.ip-ap-l4 i:nth-child(4) { margin-right: calc(var(--u) * 9.8); }

/* Кольцо 64 pt с центром в (201; 398,5) и строка под ним: SF Pro 20 pt, трекинг -0,45 pt, базовая линия 463,7 */
.ip-ap-mid { top: calc(var(--u) * 366.5); left: 0; right: 0; height: calc(var(--u) * 110); }
.ip-ap-ring { width: calc(var(--u) * 64); height: calc(var(--u) * 64); margin: 0 auto; overflow: visible; }
.ip-ap-ring > g { transform-origin: 50% 50%; }
.ip-ap-t {
  position: absolute;
  top: calc(var(--u) * 77.6);
  left: calc(var(--u) * 12);
  right: calc(var(--u) * 12);
  font-size: calc(var(--u) * 20);
  line-height: calc(var(--u) * 25);
  font-weight: 400;
  letter-spacing: calc(var(--u) * -0.45);
  color: #78787e;
  text-wrap: balance;
}
.ip-ap-t2, .ip-ap-done { opacity: 0; }

/* Остальные карты стопкой у нижнего края: каждая следующая назад на 11 pt выше и на 14 pt уже */
.ip-ap-stack { inset: 0; pointer-events: none; }
.ip-ap-sc {
  position: absolute;
  height: calc(var(--u) * 226);
  border-radius: calc(var(--u) * 10.5);
  box-shadow: 0 0 0 calc(var(--u) * 0.5) rgb(0 0 0 / 0.16), 0 calc(var(--u) * -1) calc(var(--u) * 4) rgb(0 0 0 / 0.1);
}
.ip-ap-sc1 { top: calc(var(--u) * 783); left: calc(var(--u) * 36); width: calc(var(--u) * 330); background: linear-gradient(180deg, #3a3a3d, #1f1f21 18%); }
.ip-ap-sc2 { top: calc(var(--u) * 794); left: calc(var(--u) * 29); width: calc(var(--u) * 344); background: linear-gradient(90deg, #d9d6d0, #f3f1ec 50%, #d4d1cb); }
.ip-ap-sc3 { top: calc(var(--u) * 805); left: calc(var(--u) * 22); width: calc(var(--u) * 358); background: linear-gradient(175deg, #154c86, #0c3e72 45%, #0a3666); }

/* Face ID: Dynamic Island раскрывается в черный квадрат 143 x 145 pt, верх 10, радиус 40 (Apple iOS 27 UI Kit,
   «FaceID/Authenticating»). Размер и место квадрата по времени сняты покадрово с ролика Apple «How to pay
   in store with iPhone» (2026): к 267 мс почти полный размер, к 380 мс перелет на 2,3 %, к 600 мс успокаивается.
   Покадровые точки (каждые 33 мс) по прямым давали рывки - скорость скакала на каждом кадре и обрывалась на
   267 мс (владелец 20.10.2026: «дерганный»). Теперь одна гладкая кривая до перелета, cubic-bezier(.35, .25, .3, 1),
   подобрана по тем же замерам (расхождение до 4 %), и мягкий возврат. Радиус всегда 40: пока квадрат ниже 80 pt,
   браузер сам ужимает скругление до половины высоты, и капсула переходит в квадрат, как на ролике.
   Камеру рисуем поверх (.ip-ap-cam) ровно на месте камеры острова: она часть телефона и не двигается. */
.ip-ap-pearl {
  z-index: 4;
  left: calc(var(--u) * 138.5);
  top: calc(var(--u) * 14);
  width: calc(var(--u) * 125);
  height: calc(var(--u) * 37);
  border-radius: calc(var(--u) * 40);
  background: #000;
  opacity: 0;
}
.ip-ap-cam {
  z-index: 4;
  left: calc(var(--u) * 234);
  top: calc(var(--u) * 21.5);
  width: calc(var(--u) * 22);
  height: calc(var(--u) * 22);
  background: var(--ip-lens) center / 100% 100% no-repeat;
}
.ip-ap-fid { z-index: 4; left: calc(var(--u) * 166); top: calc(var(--u) * 47.5); width: calc(var(--u) * 70); height: calc(var(--u) * 70); opacity: 0; overflow: visible; }
.ip-ap-fid .ip-ap-br, .ip-ap-fid .ip-ap-rg, .ip-ap-fid .ip-ap-fc { transform-box: view-box; transform-origin: 71.5px 72.5px; }
.ip-ap-fid .ip-ap-rg { opacity: 0; }

/* Анимация (один раз, 6,2 с, отсчет после паузы 0,3 с), времена по ролику Apple:
   0-600 мс остров раскрывается; 367-433 мс появляются зеленые уголки и лицо (32 -> 66 pt), до 667 мс лицо
   «осматривается»; 700-768 мс значок сужается до 52 pt (поворот); 768-868 мс уголки сходятся в круг; до 2236 мс
   держится; 2236-2370 мс гаснет; 2250-2630 мс остров сворачивается. Дальше, как раньше: кольцо и строка,
   по телефончику в кольце проходит блик, телефон гаснет, галочка рисуется слева направо, «Готово».
   Без JS (нет .js) и при «уменьшить движение» анимации нет: на экране «Поднесите устройство к считывателю». */
@media (prefers-reduced-motion: no-preference) {
  .js .ip-ap-go:not(.is-in) ~ .ip-ap-mid { opacity: 0; }
  .ip-ap-go.is-in ~ * { animation: 6.2s cubic-bezier(0.32, 0.72, 0, 1) 0.3s both; }
  .ip-ap-go.is-in ~ .ip-ap-pearl { animation-name: ip-ap-pearl; animation-timing-function: linear; }
  /* сам остров прячем, пока он раскрыт: квадрат рисуется вместо него */
  .ip-screen:has(.ip-ap-go.is-in) > .ip-island { animation: ip-ap-isl 6.2s linear 0.3s both; }
  .ip-ap-go.is-in ~ .ip-ap-fid { animation-name: ip-ap-fid; animation-timing-function: linear; }
  .ip-ap-go.is-in ~ .ip-ap-fid .ip-ap-br { animation: ip-ap-br 6.2s linear 0.3s both; }
  .ip-ap-go.is-in ~ .ip-ap-fid .ip-ap-rg { animation: ip-ap-rg 6.2s linear 0.3s both; }
  .ip-ap-go.is-in ~ .ip-ap-fid .ip-ap-fc { animation: ip-ap-look 6.2s linear 0.3s both; }
  .ip-ap-go.is-in ~ .ip-ap-mid { animation-name: ip-ap-in; }
  .ip-ap-go.is-in ~ .ip-ap-mid > *, .ip-ap-go.is-in ~ .ip-ap-mid g, .ip-ap-go.is-in ~ .ip-ap-mid rect { animation: 6.2s cubic-bezier(0.32, 0.72, 0, 1) 0.3s both; }
  .ip-ap-go.is-in ~ .ip-ap-mid .ip-ap-ring { animation-name: ip-ap-ring; }
  .ip-ap-go.is-in ~ .ip-ap-mid .ip-ap-phone { animation-name: ip-ap-out; }
  .ip-ap-go.is-in ~ .ip-ap-mid .ip-ap-sheen { animation-name: ip-ap-sheen; animation-timing-function: cubic-bezier(0.45, 0, 0.4, 1); }
  .ip-ap-go.is-in ~ .ip-ap-mid .ip-ap-t1 { animation-name: ip-ap-fade; }
  .ip-ap-go.is-in ~ .ip-ap-mid .ip-ap-t2 { animation-name: ip-ap-t2; }
  .ip-ap-go.is-in ~ .ip-ap-mid .ip-ap-done { animation-name: ip-ap-done; animation-timing-function: step-end; }
  .ip-ap-go.is-in ~ .ip-ap-mid .ip-ap-wipe { animation-name: ip-ap-wipe; animation-timing-function: cubic-bezier(0.45, 0, 0.35, 1); }
}
/* Доли 6,2 с: 6,129 % = 380 мс, 9,677 % = 600 мс, 36,29 % = 2250 мс, 42,419 % = 2630 мс. Кривая у точки
   задает ход до следующей точки; где кривой нет - ровно (linear из правила выше). */
@keyframes ip-ap-pearl {
  0% { opacity: 1; left: calc(var(--u) * 138.5); top: calc(var(--u) * 14); width: calc(var(--u) * 125); height: calc(var(--u) * 37); animation-timing-function: cubic-bezier(0.35, 0.25, 0.3, 1); }
  6.129% { left: calc(var(--u) * 128.95); top: calc(var(--u) * 9.9); width: calc(var(--u) * 144.1); height: calc(var(--u) * 147.5); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  9.677% { left: calc(var(--u) * 129.5); top: calc(var(--u) * 10); width: calc(var(--u) * 143); height: calc(var(--u) * 145); }
  36.290% { left: calc(var(--u) * 129.5); top: calc(var(--u) * 10); width: calc(var(--u) * 143); height: calc(var(--u) * 145); opacity: 1; animation-timing-function: cubic-bezier(0.4, 0.05, 0.35, 1); }
  42.419% { left: calc(var(--u) * 138.5); top: calc(var(--u) * 14); width: calc(var(--u) * 125); height: calc(var(--u) * 37); opacity: 1; }
  42.581%, 100% { left: calc(var(--u) * 138.5); top: calc(var(--u) * 14); width: calc(var(--u) * 125); height: calc(var(--u) * 37); opacity: 0; }
}
@keyframes ip-ap-isl { 0% { opacity: 0; } 42.419% { opacity: 0; } 42.581%, 100% { opacity: 1; } }
/* значок: появляется с 367 мс и плавно дорастает к 600 мс; 700-768 мс сужается (поворот, ускоряясь),
   768-868 мс разворачивается уже кругом (замедляясь); 2236-2370 мс гаснет */
@keyframes ip-ap-fid {
  0% { opacity: 0; transform: scale(0.46); }
  5.919% { opacity: 0; transform: scale(0.46); animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1); }
  9.677% { opacity: 1; transform: scale(0.97); }
  11.290% { opacity: 1; transform: scale(0.97); animation-timing-function: cubic-bezier(0.45, 0, 0.85, 0.55); }
  12.387% { opacity: 1; transform: scale(0.79, 0.97); animation-timing-function: cubic-bezier(0.15, 0.45, 0.3, 1); }
  14% { opacity: 1; transform: none; }
  36.065% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
  38.226%, 100% { opacity: 0; transform: scale(0.94); }
}
@keyframes ip-ap-br {
  0% { opacity: 1; transform: none; }
  12.387% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
  14%, 100% { opacity: 0; transform: scale(0.9); }
}
@keyframes ip-ap-rg {
  0% { opacity: 0; transform: scale(1.1); }
  12.387% { opacity: 0; transform: scale(1.1); animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
  14%, 100% { opacity: 1; transform: none; }
}
/* лицо «осматривается»: каждый ход с разгоном и торможением, без рывков */
@keyframes ip-ap-look {
  0% { transform: none; }
  6.984% { transform: none; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  8.387% { transform: translateX(-2px); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  9.839% { transform: translateX(1.8px); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  10.968%, 100% { transform: none; }
}
@keyframes ip-ap-in { 0%, 42.468% { opacity: 0; } 47.339%, 100% { opacity: 1; } }
@keyframes ip-ap-ring { 0%, 42.468% { transform: scale(0.86); } 48.855%, 100% { transform: none; } }
/* блик по экрану телефончика: один проход сверху вниз за 1,9 с, пока на экране «Поднесите…» */
@keyframes ip-ap-sheen { 0%, 50% { transform: none; } 81.048%, 100% { transform: translateY(92px); } }
@keyframes ip-ap-out { 0%, 90% { opacity: 1; transform: none; } 93.210%, 100% { opacity: 0; transform: scale(0.8); } }
@keyframes ip-ap-fade { 0%, 90% { opacity: 1; } 93.210%, 100% { opacity: 0; } }
@keyframes ip-ap-t2 { 0%, 92.403% { opacity: 0; } 96.484%, 100% { opacity: 1; } }
@keyframes ip-ap-done { 0%, 93.210% { opacity: 0; } 93.290%, 100% { opacity: 1; } }
@keyframes ip-ap-wipe { 0%, 93.210% { transform: none; } 98.887%, 100% { transform: translateX(28px); } }

/* Карта на экране кошелька как в Wallet: без светлой кромки. Кромка (3 px из 860) нарисована в самом файле карты,
   ее срезает clip-path со скруглением карты; поверх легкая внутренняя тень (::after). */
.ip-wl-img { clip-path: inset(.56% .35% round 2.4% / 3.8%); }
.ip-wl-card::after {
  content: "";
  position: absolute;
  inset: .56% .35%;
  border-radius: 2.4% / 3.8%;
  box-shadow: inset 0 0 calc(var(--u) * 6) rgb(0 0 0 / .35);
  pointer-events: none;
}