/* PE-Class v1.20.20 — exact header color and a real 2.5s lock opening */

#loginScreen.peLoginScreen .peLoginIdentity h2 {
  color: var(--pe-login-app-title-color, var(--header-app-title-color, #2b96e5)) !important;
}

/* Replace the platform-dependent emoji with a stable, code-drawn lock. */
#loginScreen.peLoginScreen .peLoginLock {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  line-height: 0;
  overflow: visible;
}

#loginScreen.peLoginScreen .peLoginLock svg {
  width: 21px;
  height: 21px;
  display: block;
  overflow: visible;
}

#loginScreen.peLoginScreen .peLoginLockShackle,
#loginScreen.peLoginScreen .peLoginLockBody,
#loginScreen.peLoginScreen .peLoginLockKeyhole {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

#loginScreen.peLoginScreen .peLoginLockShackle,
#loginScreen.peLoginScreen .peLoginLockBody {
  stroke-width: 1.9;
}

#loginScreen.peLoginScreen .peLoginLockKeyhole {
  stroke-width: 1.7;
}

/*
 * Earlier layers animated the whole emoji. Stop that motion in the accepted
 * state and move only the shackle so the lock visibly opens.
 */
#loginScreen.peLoginScreen .loginBtn.is-unlocked .peLoginLock,
#loginScreen.peLoginScreen .peLoginAuth.is-unlocked .loginBtn .peLoginLock,
#loginScreen.peLoginScreen.is-unlocked .loginBtn .peLoginLock {
  animation: none !important;
  opacity: 1;
  transform: none;
}

#loginScreen.peLoginScreen .loginBtn.is-unlocked .peLoginLockShackle,
#loginScreen.peLoginScreen .peLoginAuth.is-unlocked .loginBtn .peLoginLockShackle,
#loginScreen.peLoginScreen.is-unlocked .loginBtn .peLoginLockShackle,
#loginScreen.peLoginScreen .peLoginLock[data-lock-state="unlocked"] .peLoginLockShackle {
  transform-box: view-box;
  transform-origin: 7px 10px;
  will-change: transform;
  animation: peLoginShackleOpen12020 2.5s cubic-bezier(.34, .08, .19, 1) both;
}

#loginScreen.peLoginScreen .loginBtn.is-unlocked .peLoginLockKeyhole,
#loginScreen.peLoginScreen .peLoginAuth.is-unlocked .loginBtn .peLoginLockKeyhole,
#loginScreen.peLoginScreen.is-unlocked .loginBtn .peLoginLockKeyhole {
  animation: peLoginKeyholeConfirm12020 2.5s ease both;
}

@keyframes peLoginShackleOpen12020 {
  0%, 8% {
    transform: translate(0, 0) rotate(0deg);
  }
  28% {
    transform: translate(0, -.45px) rotate(-4deg);
  }
  52% {
    transform: translate(-.2px, -1px) rotate(-12deg);
  }
  74% {
    transform: translate(-.45px, -1.5px) rotate(-21deg);
  }
  100% {
    transform: translate(-.7px, -1.9px) rotate(-30deg);
  }
}

@keyframes peLoginKeyholeConfirm12020 {
  0%, 34% { opacity: .72; }
  58% { opacity: 1; }
  76% { opacity: .58; }
  100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  #loginScreen.peLoginScreen .loginBtn.is-unlocked .peLoginLockShackle,
  #loginScreen.peLoginScreen .peLoginAuth.is-unlocked .loginBtn .peLoginLockShackle,
  #loginScreen.peLoginScreen.is-unlocked .loginBtn .peLoginLockShackle,
  #loginScreen.peLoginScreen .peLoginLock[data-lock-state="unlocked"] .peLoginLockShackle {
    animation: none !important;
    transform-box: view-box;
    transform-origin: 7px 10px;
    transform: translate(-.7px, -1.9px) rotate(-30deg);
  }

  #loginScreen.peLoginScreen .loginBtn.is-unlocked .peLoginLockKeyhole,
  #loginScreen.peLoginScreen .peLoginAuth.is-unlocked .loginBtn .peLoginLockKeyhole,
  #loginScreen.peLoginScreen.is-unlocked .loginBtn .peLoginLockKeyhole {
    animation: none !important;
    opacity: 1;
  }
}