/* ============================================================
   animations.css — Keyframes, transitions, motion utilities
   ============================================================ */

/* ── Keyframes ──────────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; pointer-events: none; }
}

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

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

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: scale(1); }
}

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

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

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

@keyframes skel-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .45; }
}

/* ── Utility animation classes ──────────────────────────────── */
.anim-fade-in      { animation: fadeIn     .2s var(--ease); }
.anim-slide-up     { animation: slideUp    .22s var(--ease); }
.anim-scale-in     { animation: scaleIn    .18s var(--ease); }
.anim-slide-right  { animation: slideInRight .2s var(--ease); }
.anim-pulse        { animation: pulse      1.6s ease infinite; }

/* Toast auto-dismiss animation */
.toast.dismissing {
  animation: fadeOut .3s var(--ease) forwards;
}

/* Page transition */
.page.active { animation: fadeIn .18s var(--ease); }

/* Chart container entrance */
.chart-wrap { animation: fadeIn .35s var(--ease); }

/* Sidebar item hover */
.nav-item {
  transition: background var(--dur) var(--ease),
              color     var(--dur) var(--ease);
}

/* Card hover lift */
.card:hover,
.kpi-card:hover {
  transition: box-shadow var(--dur) var(--ease),
              transform  var(--dur) var(--ease);
}

/* Modal entrance */
.modal           { animation: scaleIn .18s var(--ease); }
.modal-overlay   { animation: fadeIn  .15s var(--ease); }

/* Drop zone transitions */
.drop-zone {
  transition: border-color var(--dur) var(--ease),
              background   var(--dur) var(--ease);
}

/* Skeleton shimmer — defined in components.css, referenced here */
/* .skel uses the skel @keyframes above */

/* Button press feedback */
.btn {
  transition: background  var(--dur) var(--ease),
              box-shadow  var(--dur) var(--ease),
              opacity     var(--dur) var(--ease),
              transform   var(--dur) var(--ease);
}

/* KPI value counter effect (class added by JS) */
.kpi-value.updating {
  animation: scaleIn .15s var(--ease);
}

/* Upload guide header pulse */
@keyframes guidePulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(37,99,235,.25); }
  50%       { box-shadow: 0 2px 18px rgba(37,99,235,.45); }
}
.guide-pulse { animation: guidePulse 3s ease-in-out infinite; }

/* Inline box selector expand */
@keyframes expandDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
#inline-box-selector-row td > div { animation: expandDown .15s var(--ease); }

/* Inline edit active row highlight */
tr.inline-edit-active { background: rgba(37,99,235,.04) !important; }