.app-body .panel,
.app-body .stat-card,
.app-body .about-card,
.legal-card,
.auth-card {
  animation: surfaceIn .22s ease both;
}

.app-body .panel,
.app-body .stat-card,
.app-body .about-card,
.legal-card,
.auth-card,
.btn,
.icon-btn,
.legal-tabs a,
.sidebar-nav a {
  will-change: transform, box-shadow, border-color;
}

.app-body:not(.motion-off) .btn:hover,
.app-body:not(.motion-off) .icon-btn:hover,
.auth-body:not(.motion-off) .btn:hover,
.auth-body:not(.motion-off) .icon-btn:hover,
.legal-tabs a:hover {
  transform: translateY(-1px);
}

.app-body:not(.motion-off) .panel:hover,
.app-body:not(.motion-off) .stat-card:hover,
.app-body:not(.motion-off) .about-card:hover,
.legal-card:hover {
  transform: translateY(-1px);
}

.legal-card:nth-child(2n) > i {
  color: var(--teal);
  background: #eefaf7;
}

.legal-card:nth-child(3n) > i {
  color: var(--gold);
  background: #fffaeb;
}

@keyframes surfaceIn {
  from {
    opacity: .92;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.motion-off .panel,
.motion-off .stat-card,
.motion-off .about-card,
.motion-off .legal-card,
.motion-off .auth-card {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .panel,
  .stat-card,
  .about-card,
  .legal-card,
  .auth-card,
  .btn,
  .icon-btn,
  .legal-tabs a,
  .sidebar-nav a {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}