/* ══════════════════════════════════════════════════════
   CSA Intranet 2026 — Animations v2
   ══════════════════════════════════════════════════════ */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp 0.4s ease both; }
.fade-1 { animation-delay: 0.05s; }
.fade-2 { animation-delay: 0.10s; }
.fade-3 { animation-delay: 0.15s; }
.fade-4 { animation-delay: 0.20s; }
.fade-5 { animation-delay: 0.28s; }
.fade-6 { animation-delay: 0.36s; }

@keyframes csaPulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.csa-live-dot { animation: csaPulse 2s infinite; }

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

.csa-bar-fill { transition: width 0.8s cubic-bezier(0.22,0.68,0,1.2); }

.csa-kpi-card, .csa-dash-card { transition: box-shadow var(--t-base), transform var(--t-base); }

.csa-skeleton {
  background: linear-gradient(90deg, var(--surface2) 25%, var(--border) 50%, var(--surface2) 75%);
  background-size: 200% 100%;
  animation: csaSkeleton 1.5s infinite;
  border-radius: var(--r-sm);
}
@keyframes csaSkeleton { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

[data-tooltip] { position: relative; }
[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: var(--steel); color: #fff;
  font-size: 11px; padding: 5px 9px; border-radius: 6px;
  white-space: nowrap; pointer-events: none; z-index: 100;
  font-family: var(--font-sans);
}