/**
 * Animations CSS - Skeletons, micro-interactions, page transitions
 */

/* ============================================
   SKELETON LOADERS
   ============================================ */
.skel {
  display: block;
  background: linear-gradient(
    90deg,
    var(--gray-100) 25%,
    var(--gray-200) 50%,
    var(--gray-100) 75%
  );
  background-size: 200% 100%;
  border-radius: var(--radius-sm);
  animation: skeletonWave 1.4s ease-in-out infinite;
}

.skel-text { height: 12px; margin-bottom: 8px; }
.skel-text:last-child { margin-bottom: 0; }
.skel-text-sm { width: 60%; }
.skel-text-md { width: 80%; }
.skel-text-lg { width: 100%; }

.skel-circle {
  border-radius: 50%;
  width: 40px; height: 40px;
}

.skel-rect { border-radius: var(--radius-md); }

.skel-card {
  height: 120px;
  border-radius: var(--radius-lg);
}

.skel-row {
  height: 44px;
  margin-bottom: 6px;
  border-radius: var(--radius-sm);
}

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

/* ============================================
   PAGE / ENTRANCE ANIMATIONS
   ============================================ */
.page-enter {
  animation: pageEnter 0.4s var(--ease-out) both;
}

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

/* Stagger helper (apply --i: 0,1,2...) */
.stagger {
  animation: staggerIn 0.4s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}

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

/* Highlight flash for newly-added rows */
.row-flash {
  animation: rowFlash 1.4s var(--ease-out);
}
@keyframes rowFlash {
  0%   { background: rgba(91, 110, 245, 0.18); }
  100% { background: transparent; }
}

/* Pulse for live indicators */
.pulse {
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* Soft slide-in from right (for drawers / panels) */
.slide-in-right {
  animation: slideInRight 0.3s var(--ease-out) both;
}
@keyframes slideInRight {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}