/*
  Vesper Admin — screen transitions, login/logout motion, spinners.
  Kept separate from admin.css so all the "movement" lives in one file.
*/

.screen{
  transition: opacity .32s ease, transform .32s ease;
  opacity: 1;
  transform: translateY(0);
}
.screen.fade-init{
  opacity: 0;
  transform: translateY(14px);
}

/* Wrong-password shake */
@keyframes admin-shake{
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}
.shake{ animation: admin-shake .5s; }

/* Small inline spinner, used on the login/logout buttons */
@keyframes admin-spin{ to { transform: rotate(360deg); } }
.spinner{
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.28); border-top-color: #fff;
  display: inline-block; vertical-align: -2px;
  animation: admin-spin .7s linear infinite;
}

/* Ambient glow pulse behind the login logo */
@keyframes admin-glow-pulse{
  0%, 100% { opacity: .55; transform: scale(1); }
  50% { opacity: .9; transform: scale(1.08); }
}
.login-glow{
  animation: admin-glow-pulse 3.2s ease-in-out infinite;
}

/* Login card entrance on first load */
@keyframes admin-card-in{
  from { opacity: 0; transform: translateY(18px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.login-card-enter{
  animation: admin-card-in .5s ease both;
}

/* Publish overlay dots (reused pattern from the info site) */
.publish-dots{ display:inline-block; min-width: 30px; text-align:left; }