app/static/animations.css

/* ═══════════════════════════════════════════════════════════════════════════
   ResearchIT — Animations
   All @keyframes and animation utility classes.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Skeleton shimmer ─────────────────────────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ── Fade in with upward slide ────────────────────────────────────────────── */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Fade in only ─────────────────────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Toast slide in/out ───────────────────────────────────────────────────── */
@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateX(40px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes toastOut {
  from {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateX(40px) scale(0.95);
  }
}

/* ── Save button pulse ────────────────────────────────────────────────────── */
@keyframes savePulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* ── Checkmark pop (onboarding tile) ──────────────────────────────────────── */
@keyframes checkPop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* ── Loading dot pulse ────────────────────────────────────────────────────── */
@keyframes dotPulse {
  0%, 80%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  40% {
    opacity: 1;
    transform: scale(1.1);
  }
}

/* ── Card stagger entrance ────────────────────────────────────────────────── */
@keyframes cardIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Subtle glow pulse (hero, active elements) ────────────────────────────── */
@keyframes glowPulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.7; }
}

/* ── Spin (loading indicators) ────────────────────────────────────────────── */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Gradient shift (brand/hero background) ───────────────────────────────── */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ══════════════════════════════════════════════════════════════════════════ */
/* Utility animation classes                                                 */
/* ══════════════════════════════════════════════════════════════════════════ */

.animate-fade-in {
  animation: fadeIn 0.3s ease-out;
}

.animate-fade-in-up {
  animation: fadeInUp 0.4s ease-out;
}

.animate-card-in {
  animation: cardIn 0.35s ease-out both;
}

/* Staggered card entrance — assign via inline style or nth-child */
.animate-card-in:nth-child(1) { animation-delay: 0s; }
.animate-card-in:nth-child(2) { animation-delay: 0.05s; }
.animate-card-in:nth-child(3) { animation-delay: 0.1s; }
.animate-card-in:nth-child(4) { animation-delay: 0.15s; }
.animate-card-in:nth-child(5) { animation-delay: 0.2s; }
.animate-card-in:nth-child(6) { animation-delay: 0.25s; }
.animate-card-in:nth-child(7) { animation-delay: 0.3s; }
.animate-card-in:nth-child(8) { animation-delay: 0.35s; }
.animate-card-in:nth-child(9) { animation-delay: 0.4s; }
.animate-card-in:nth-child(10) { animation-delay: 0.45s; }

.animate-glow {
  animation: glowPulse 3s ease-in-out infinite;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.animate-gradient {
  background-size: 200% 200%;
  animation: gradientShift 4s ease infinite;
}