/* ============================================================
   css/animations.css — Keyframes & Transitions
   ============================================================ */

/* Fade in upward */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeInUp .3s ease forwards; }

/* Metric counter pop */
@keyframes countPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.metric-value.updated { animation: countPop .25s ease; }

/* Spinner */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  display: inline-block; width: 15px; height: 15px;
  border: 2px solid var(--border);
  border-top-color: var(--purple);
  border-radius: 50%;
  animation: spin .55s linear infinite;
  vertical-align: middle;
}

/* Table row slide in */
@keyframes rowIn {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}
.ticket-row-anim {
  animation: rowIn .2s ease forwards;
}

/* Pulse glow on featured card */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 var(--purple-glow); }
  50%       { box-shadow: 0 0 24px 6px var(--purple-glow); }
}
.pulse-glow { animation: pulseGlow 2.5s ease-in-out infinite; }

/* Skeleton shimmer */
@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position:  200% 0; }
}
.skeleton {
  display: block;
  background: linear-gradient(90deg,
    var(--bg-card) 25%,
    var(--shimmer-mid) 50%,
    var(--bg-card) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: 4px;
  height: 14px;
}
.skeleton-badge {
  width: 48px;
  height: 20px;
  border-radius: 999px;
}
.skeleton-title {
  width: 70%;
  height: 18px;
  margin: 0.5rem 0;
}
.skeleton-text {
  width: 50%;
  height: 14px;
}
.skeleton-text-sm {
  width: 40%;
  height: 12px;
}
.skeleton-btn {
  width: 110px;
  height: 32px;
  border-radius: var(--radius-sm);
  margin-top: 0.75rem;
}
.skeleton-metric {
  width: 60%;
  height: 28px;
}
.skeleton-metric-sm {
  width: 45%;
  height: 12px;
  margin-top: 0.35rem;
}
.skeleton-cell {
  flex: 1;
  min-width: 0;
  height: 14px;
}
.skeleton-row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--border);
}
.skeleton-row:last-child { border-bottom: none; }
.skeleton-card {
  pointer-events: none;
}
.skeleton-stack {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.skeleton-rec-card {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.skeleton-table-wrap { overflow-x: auto; }
.skeleton-table-head {
  display: flex;
  gap: 0.75rem;
  padding-bottom: 0.5rem;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid var(--border);
}
.skeleton-table-head .skeleton-cell { height: 12px; opacity: 0.7; }
.session-loading .metric-value,
.session-loading .metric-sub-value .val {
  color: transparent !important;
}

/* Toast slide in */
@keyframes toastIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.toast-anim { animation: toastIn .28s ease forwards; }

/* Page entrance */
.page-wrapper { animation: fadeInUp .35s ease; }

/* Auth background orb drift */
@keyframes authOrbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(18px, -24px) scale(1.04); }
  66%       { transform: translate(-14px, 16px) scale(.97); }
}

@media (prefers-reduced-motion: reduce) {
  .app-bg-orb { animation: none !important; }
}