/* Local geometric reproduction of the supplied Face ID animation.
   For presentation only: no camera, biometric capture, or bank authentication.
   Timing and size were measured from the supplied video, not from a library. */
.face-login-overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  outline: none;
  background: #fff;
}
.face-login-page {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #fff;
  color: #555;
}
.face-login-page-toolbar {
  position: absolute;
  top: var(--safe-top);
  left: 0;
  width: 100%;
  height: calc(44 * var(--u));
}
.face-login-back {
  position: absolute;
  left: calc(9 * var(--u));
  top: 0;
  width: calc(38 * var(--u));
  height: calc(44 * var(--u));
  display: grid;
  place-items: center;
  color: #555;
}
.face-login-back svg {
  width: calc(17 * var(--u));
  height: calc(20 * var(--u));
  stroke-width: 1.65;
}
.face-login-page-support {
  position: absolute;
  right: calc(16 * var(--u));
  top: calc(8 * var(--u));
  width: calc(23 * var(--u));
  height: calc(23 * var(--u));
}
.face-login-page-support svg { width: 100%; height: 100%; stroke-width: 1.4; }
.face-login-boc-mark {
  position: absolute;
  top: calc(100 * var(--u) + var(--safe-top));
  left: calc(50% - 19 * var(--u));
  width: calc(38 * var(--u));
  height: calc(38 * var(--u));
  color: #b92d46;
  stroke-width: 5;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}
.face-login-masked-phone {
  position: absolute;
  top: calc(178 * var(--u) + var(--safe-top));
  left: 0;
  width: 100%;
  margin: 0;
  text-align: center;
  font-size: calc(21 * var(--u));
  line-height: calc(28 * var(--u));
  color: #333;
}
.face-login-page-glyph {
  position: absolute;
  top: calc(289 * var(--u) + var(--safe-top));
  left: calc(50% - 28 * var(--u));
  width: calc(56 * var(--u));
  height: calc(56 * var(--u));
  color: #8379ce;
  stroke-width: 2.6;
}
.face-login-page-hint {
  position: absolute;
  top: calc(382 * var(--u) + var(--safe-top));
  left: 0;
  width: 100%;
  margin: 0;
  text-align: center;
  font-size: calc(14 * var(--u));
  line-height: calc(21 * var(--u));
  color: #999;
}
.face-login-page-more {
  position: absolute;
  bottom: calc(32 * var(--u) + var(--safe-bottom));
  left: 0;
  width: 100%;
  font-size: calc(13 * var(--u));
  text-align: center;
  color: #aaa;
}
.face-login-loading-toast {
  position: absolute;
  top: calc(330 * var(--u) + var(--safe-top));
  left: calc(50% - 75 * var(--u));
  width: calc(150 * var(--u));
  height: calc(49 * var(--u));
  border-radius: calc(4 * var(--u));
  background: #fff;
  box-shadow: 0 0 0 calc(1 * var(--u)) rgba(232, 228, 234, .24);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(11 * var(--u));
  font-size: calc(15 * var(--u));
  color: #666;
}
.face-login-loader {
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
  stroke-width: 2.7;
  animation: face-loading-turn 900ms linear infinite;
  animation-play-state: paused;
}
.face-login-overlay:is([data-phase='preloading'], [data-phase='postloading']) .face-login-loader { animation-play-state: running; }
.face-login-loader-track { color: #f6f0f3; }
.face-login-loader-arc { color: #c95170; }
.face-login-verification-backdrop {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(241, 236, 240, .38);
  -webkit-backdrop-filter: blur(calc(8 * var(--u)));
  backdrop-filter: blur(calc(8 * var(--u)));
  opacity: 0;
  transition: opacity 267ms ease-out;
  pointer-events: none;
}
.face-login-overlay:is([data-phase='preloading'], [data-phase='postloading']) .face-login-page::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(221, 215, 226, .24);
  pointer-events: none;
}
.face-login-page-toolbar, .face-login-loading-toast { z-index: 1; }
.face-login-overlay:is([data-phase='preloading'], [data-phase='postloading']) .face-login-verification-backdrop {
  visibility: hidden;
}
.face-login-overlay:not([data-phase='preloading']):not([data-phase='postloading']) .face-login-loading-toast {
  visibility: hidden;
}
.face-login-overlay:not([data-phase='preloading']):not([data-phase='postloading']) .face-login-verification-backdrop {
  opacity: 1;
}
.face-login-hud {
  position: relative;
  width: calc(144 * var(--u));
  height: calc(164 * var(--u));
  z-index: 2;
  opacity: 0;
  transition: opacity 267ms ease-out;
}
.face-login-panel {
  position: absolute;
  inset: 0;
  border-radius: calc(12 * var(--u));
  background: rgba(226, 222, 227, .64);
  opacity: 0;
  transform: scale(.97);
  transition: opacity 167ms ease-out, transform 167ms ease-out;
}
.face-login-icon {
  position: absolute;
  top: calc(22 * var(--u));
  left: calc(34 * var(--u));
  width: calc(76 * var(--u));
  height: calc(76 * var(--u));
  color: #fff;
  opacity: 0;
  transition: opacity 133ms ease-out;
}
.face-login-icon > svg,
.face-login-orbits,
.face-login-orbit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  stroke-width: 2.55;
}
.face-login-scan,
.face-login-rounding,
.face-login-orbits,
.face-login-success { opacity: 0; }
.face-login-scan { transition: opacity 67ms linear; }
.face-login-label {
  position: absolute;
  bottom: calc(22 * var(--u));
  left: 0;
  width: 100%;
  text-align: center;
  font-size: calc(16 * var(--u));
  line-height: calc(22 * var(--u));
  font-weight: 400;
  color: #39353c;
  opacity: 0;
  transition: opacity 133ms ease-out;
}
.face-login-overlay:is([data-phase='face'], [data-phase='rounding'], [data-phase='orbits'], [data-phase='success']) .face-login-hud,
.face-login-overlay:is([data-phase='face'], [data-phase='rounding'], [data-phase='orbits'], [data-phase='success']) .face-login-panel,
.face-login-overlay:is([data-phase='face'], [data-phase='rounding'], [data-phase='orbits'], [data-phase='success']) .face-login-icon,
.face-login-overlay:is([data-phase='face'], [data-phase='rounding'], [data-phase='orbits'], [data-phase='success']) .face-login-label {
  opacity: 1;
  transform: none;
}
.face-login-overlay[data-phase='face'] .face-login-scan { opacity: 1; }
.face-login-overlay[data-phase='rounding'] .face-login-rounding { opacity: 1; }
.face-login-overlay[data-phase='rounding'] .face-login-rounding rect {
  transform-box: fill-box;
  transform-origin: center;
  animation: face-rounded-close 100ms linear both;
}
.face-login-overlay[data-phase='orbits'] .face-login-orbits {
  opacity: 1;
  perspective: calc(210 * var(--u));
}
/* The native reference forms a softly lit cyan/blue/violet ball, with
   differently tilted rings, before the white confirmation circle appears.
   All ring motion is transform/opacity; the small rim glow is static. */
.face-login-orbit {
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}
.face-login-orbit .orbit-halo { stroke-width: 7; opacity: .12; }
.face-login-orbit .orbit-core { stroke-width: 2.8; }
.face-login-orbit .orbit-fill { stroke: none; opacity: .09; }
.orbit-one { animation: face-orbit-one 550ms linear both; }
.orbit-two { animation: face-orbit-two 550ms linear both; }
.orbit-three { animation: face-orbit-three 550ms linear both; }
.face-login-overlay:not([data-phase='orbits']) .face-login-orbit { animation: none; }
.face-login-overlay[data-phase='success'] .face-login-success,
.face-login-overlay[data-phase='leaving'] .face-login-success { opacity: 1; }
.face-login-check { stroke-dasharray: 41; stroke-dashoffset: 41; }
.face-login-overlay[data-phase='success'] .face-login-check {
  animation: face-check 250ms 90ms linear both;
}
.face-login-overlay[data-phase='leaving'] .face-login-verification-backdrop { opacity: 0; }
.face-login-overlay[data-phase='leaving'] .face-login-check { stroke-dashoffset: 0; }
.face-login-overlay[data-phase='leaving'] .face-login-hud { opacity: 0; }
/* Keep the final white confirmation visible while the HUD dissolves. */
.face-login-overlay[data-phase='leaving'] .face-login-panel,
.face-login-overlay[data-phase='leaving'] .face-login-icon,
.face-login-overlay[data-phase='leaving'] .face-login-label { opacity: 1; transform: none; }
@keyframes face-loading-turn { to { transform: rotate(360deg); } }
@keyframes face-rounded-close {
  from { transform: scale(.98); opacity: .78; }
  to { transform: scale(1.035); opacity: 1; }
}
@keyframes face-orbit-one {
  0% { transform: rotateZ(-5deg) rotateY(0deg) rotateX(0deg); }
  22% { transform: rotateZ(25deg) rotateY(70deg) rotateX(15deg); }
  50% { transform: rotateZ(45deg) rotateY(150deg) rotateX(-25deg); }
  75% { transform: rotateZ(10deg) rotateY(250deg) rotateX(5deg); }
  100% { transform: rotateZ(0deg) rotateY(360deg) rotateX(0deg); }
}
@keyframes face-orbit-two {
  0% { transform: rotateZ(0deg) rotateY(10deg) rotateX(10deg); }
  22% { transform: rotateZ(30deg) rotateY(85deg) rotateX(25deg); }
  50% { transform: rotateZ(85deg) rotateY(210deg) rotateX(-35deg); }
  75% { transform: rotateZ(125deg) rotateY(310deg) rotateX(15deg); }
  100% { transform: rotateZ(180deg) rotateY(370deg) rotateX(0deg); }
}
@keyframes face-orbit-three {
  0% { transform: rotateZ(0deg) rotateY(-8deg) rotateX(-8deg); opacity: .6; }
  22% { transform: rotateZ(-20deg) rotateY(-80deg) rotateX(-15deg); opacity: .9; }
  50% { transform: rotateZ(-55deg) rotateY(-175deg) rotateX(20deg); opacity: 1; }
  75% { transform: rotateZ(-25deg) rotateY(-280deg) rotateX(-10deg); opacity: .9; }
  100% { transform: rotateZ(0deg) rotateY(-360deg) rotateX(0deg); opacity: .6; }
}
@keyframes face-check { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .face-login-verification-backdrop, .face-login-hud, .face-login-panel,
  .face-login-icon, .face-login-label, .face-login-scan { transition: none; }
  .face-login-panel { transform: none; }
  .face-login-orbit,
  .face-login-loader,
  .face-login-overlay[data-phase='rounding'] .face-login-rounding rect,
  .face-login-overlay[data-phase='success'] .face-login-check { animation: none; }
  .face-login-overlay[data-phase='success'] .face-login-check { stroke-dashoffset: 0; }
  .orbit-two, .orbit-three { opacity: 0; }
}
@media (prefers-reduced-transparency: reduce) {
  .face-login-verification-backdrop { background: #eee9ee; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .face-login-panel { background: #ddd9df; }
}