.page-transition { animation: pageFade .28s ease both; }
.section, .card, .stat, .dashboard-preview { animation: revealUp .45s ease both; }
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255,255,255,.32);
  transform: scale(0);
  opacity: 0;
}
.btn:active::after { animation: ripple .38s ease; }
details[open] { animation: revealUp .22s ease; }
.toast { animation: toastIn .26s ease; }
@keyframes pageFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes revealUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes dropdownIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toastIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes ripple { 0% { opacity: 1; transform: scale(0); } 100% { opacity: 0; transform: scale(18); } }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.45); opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}