/* The lines-and-arrow mark has a quiet entrance and a small hover lift. */
.nav-logo .mark, .auth-brand .mark, .footer-logo .mark {
  animation: pb-logo-arrive 520ms cubic-bezier(.2,.8,.2,1) both;
  transition: transform 220ms ease, box-shadow 220ms ease;
  border-radius: 8px;
}
.nav-logo .mark, .footer-logo .mark { width: 27px; height: 27px; }
.auth-brand .mark { width: 30px; height: 30px; }
.nav-logo:hover .mark, .nav-logo:focus-visible .mark,
.footer-logo:hover .mark { transform: translateY(-2px) rotate(-3deg); box-shadow: 0 5px 12px #00000016; }
@keyframes pb-logo-arrive {
  from { opacity: .5; transform: translateY(4px) scale(.93); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 560px) {
  .nav-logo .mark, .footer-logo .mark { width: 25px; height: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-logo .mark, .auth-brand .mark, .footer-logo .mark { animation: none; transition: none; }
}