/* Keep the background steady while the authentication panel changes. */
.recovery-success {
  width: 72px; height: 72px; margin: 0 auto 24px;
  display: grid; place-items: center; border-radius: 50%;
  color: #20d995; background: rgba(32,217,149,.1);
  border: 1px solid rgba(32,217,149,.35);
  box-shadow: 0 0 28px rgba(32,217,149,.14);
}
.recovery-success svg { width: 44px; height: 44px; }
.recovery-success path {
  stroke: currentColor; stroke-width: 3.5; stroke-linecap: round;
  stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 0;
  animation: recovery-tick 550ms ease-out both;
}
.recovery-email { display: block; margin-top: 12px; overflow-wrap: anywhere; color: inherit; font-size: .9em; }
.recovery-help { text-align: center; color: inherit; font-size: 15px; line-height: 1.7; margin: 18px 0 0; }
.recovery-help--small { font-size: 13px; opacity: .75; }
@keyframes recovery-tick { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }
.auth-page .panel {
  animation: auth-arrive 420ms cubic-bezier(.2,.75,.25,1) both;
}
.auth-page.auth-leaving .panel {
  animation: auth-depart 180ms ease-in both;
  pointer-events: none;
}
@keyframes auth-arrive {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes auth-depart {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .recovery-success path { animation: none; }
  .auth-page .panel, .auth-page.auth-leaving .panel { animation: none; }
}