/* PE-Class v1.20.42 — finish unlocking before success color and fill Fold7 cover */

/* Keep the action blue while the authenticated lock is physically opening. */
#loginScreen.peLoginScreen .loginBtn.is-unlocking:disabled {
  cursor: wait;
  opacity: 1;
}

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

/*
 * The green success state starts only after the 2.5-second opening finishes.
 * Pin the completed geometry so older success selectors cannot restart it.
 */
#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);
  will-change: auto;
}

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

@keyframes peLoginShackleOpen12022 {
  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);
  }
}

@media (prefers-reduced-motion: reduce) {
  #loginScreen.peLoginScreen .loginBtn.is-unlocking .peLoginLockShackle,
  #loginScreen.peLoginScreen .peLoginLock[data-lock-state="unlocking"] .peLoginLockShackle {
    animation: peLoginShackleOpen12022 2.5s cubic-bezier(.34, .08, .19, 1) both !important;
  }
}

/*
 * Fold7's tall cover display should use the available height, not float a
 * short login card between two empty bands. The keyboard-height guard keeps
 * the normal compact scrolling fallback when the on-screen keyboard opens.
 */
@media (max-width: 480px) and (min-height: 768px) and (pointer: coarse) {
  html.pe-android.pe87FoldDevice:not(.pe87FoldWide)[data-pe-device="compact"][data-pe-fold-wide="false"]
  #loginScreen.peLoginScreen .peLoginShell {
    align-self: stretch;
  }

  html.pe-android.pe87FoldDevice:not(.pe87FoldWide)[data-pe-device="compact"][data-pe-fold-wide="false"]
  #loginScreen.peLoginScreen .peLoginIntro,
  html.pe-android.pe87FoldDevice:not(.pe87FoldWide)[data-pe-device="compact"][data-pe-fold-wide="false"]
  #loginScreen.peLoginScreen #loginForm.loginCard.peLoginAuth {
    justify-content: space-between;
  }
}

@media (forced-colors: active) {
  #loginScreen.peLoginScreen .loginBtn.is-unlocking .peLoginLockShackle {
    forced-color-adjust: auto;
  }
}