/* PE-Class v1.20.19 — deliberate unlock transition and Fold7 cover balance */

/*
 * Keep the accepted state fully legible while the authenticated app prepares
 * behind the login overlay. The JS hold matches this 2.3-second motion.
 */
#loginScreen.peLoginScreen .loginBtn.is-unlocked:disabled {
  cursor: default;
  opacity: 1;
}

#loginScreen.peLoginScreen .loginBtn.is-unlocked .peLoginLock,
#loginScreen.peLoginScreen .peLoginAuth.is-unlocked .loginBtn .peLoginLock,
#loginScreen.peLoginScreen.is-unlocked .loginBtn .peLoginLock {
  animation: peLoginUnlockSlow12019 2.2s cubic-bezier(.22, .72, .24, 1) both;
}

#loginScreen.peLoginScreen .loginBtn.is-unlocked,
#loginScreen.peLoginScreen .peLoginAuth.is-unlocked .loginBtn,
#loginScreen.peLoginScreen.is-unlocked .loginBtn {
  animation: peLoginSuccessGlow12019 2.2s ease-in-out both;
}

@keyframes peLoginUnlockSlow12019 {
  0% {
    opacity: .72;
    transform: scale(.84) rotate(-9deg);
  }
  24% {
    opacity: 1;
    transform: scale(.96) rotate(-5deg);
  }
  52% {
    opacity: 1;
    transform: scale(1.14) rotate(3deg);
  }
  76% {
    transform: scale(1.04) rotate(-1deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

@keyframes peLoginSuccessGlow12019 {
  0% {
    box-shadow: 0 8px 18px rgba(27, 164, 99, .13);
    filter: saturate(.88);
  }
  48% {
    box-shadow: 0 13px 28px rgba(27, 164, 99, .28);
    filter: saturate(1.08);
  }
  100% {
    box-shadow: 0 10px 23px rgba(27, 164, 99, .2);
    filter: saturate(1);
  }
}

/*
 * Fold7's tall cover display has more vertical room than the compact login
 * shell needs. Centering that shell avoids concentrating all spare space
 * below it. The height guard drops this rule as soon as the keyboard opens.
 */
@media (max-width: 480px) and (min-height: 760px) and (pointer: coarse) {
  html.pe-android.pe87FoldDevice:not(.pe87FoldWide)[data-pe-device="compact"][data-pe-fold-wide="false"]
  #loginScreen.loginScreen.peLoginScreen {
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  #loginScreen.peLoginScreen .loginBtn.is-unlocked,
  #loginScreen.peLoginScreen .loginBtn.is-unlocked .peLoginLock,
  #loginScreen.peLoginScreen .peLoginAuth.is-unlocked .loginBtn,
  #loginScreen.peLoginScreen .peLoginAuth.is-unlocked .loginBtn .peLoginLock {
    animation: none !important;
  }
}