@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

.skeleton {
  background: linear-gradient(90deg, var(--bg3) 25%, var(--bg4) 50%, var(--bg3) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius);
}

.fade-in  { animation: fadeIn  .25s ease forwards; }
.slide-in { animation: slideDown .25s ease forwards; }
.pulse    { animation: pulse   2s   ease infinite; }

.processing-modal.show .processing-box { animation: slideDown .3s ease; }
.overlay-modal.show    .modal-box      { animation: slideDown .25s ease; }

.clip-card { transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.clip-card:hover { box-shadow: 0 8px 30px rgba(124,92,252,0.12); }

.nav-item { transition: background .15s ease, color .15s ease; }
.btn      { transition: background .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease; }
.account-card { transition: border-color .15s ease, background .15s ease; }

.progress-fill { transition: width .5s cubic-bezier(0.4, 0, 0.2, 1); }