/* ============================================================
   ANIMATIONS v3.0 — animations.css
   Premium micro-interactions & transitions
   ============================================================ */

/* ══ Base keyframes ══ */
@keyframes fadeIn      { from{opacity:0}                    to{opacity:1} }
@keyframes fadeOut     { from{opacity:1}                    to{opacity:0} }
@keyframes slideUp     { from{opacity:0;transform:translateY(18px)} 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(32px)} to{opacity:1;transform:translateX(0)} }
@keyframes slideOutRight{from{opacity:1;transform:translateX(0)} to{opacity:0;transform:translateX(32px)} }
@keyframes slideInLeft { from{opacity:0;transform:translateX(-24px)} to{opacity:1;transform:translateX(0)} }
@keyframes scaleIn     { from{opacity:0;transform:scale(0.92)} to{opacity:1;transform:scale(1)} }
@keyframes dropIn      { from{opacity:0;transform:translateY(-10px) scale(.96)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes spin        { to{transform:rotate(360deg)} }
@keyframes shimmer     { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes float       { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }

/* ══ Page transition ══ */
@keyframes pageIn {
  from { opacity:0; transform:translateY(12px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ══ KPI Counter ══ */
@keyframes countUp {
  from { opacity:0; transform:translateY(8px) scale(0.95); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}

/* ══ Pulse / Live indicator ══ */
@keyframes pulse-ring {
  0%   { transform:scale(1);   opacity:0.8; }
  70%  { transform:scale(1.8); opacity:0; }
  100% { transform:scale(1.8); opacity:0; }
}
@keyframes pulse-dot {
  0%,100% { opacity:1; }
  50%     { opacity:0.5; }
}
@keyframes glow-pulse {
  0%,100% { box-shadow:0 0 0 0 rgba(37,99,235,0.4); }
  50%     { box-shadow:0 0 0 8px rgba(37,99,235,0); }
}
@keyframes glow-pulse-green {
  0%,100% { box-shadow:0 0 0 0 rgba(16,185,129,0.4); }
  50%     { box-shadow:0 0 0 8px rgba(16,185,129,0); }
}

/* ══ Progress bar fill ══ */
@keyframes fillBar {
  from { width:0%; }
}

/* ══ Card reveal (stagger) ══ */
@keyframes cardReveal {
  from { opacity:0; transform:translateY(20px) scale(0.97); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}

/* ══ Utility Classes ══ */
.a-fade-in    { animation:fadeIn    0.28s ease both; }
.a-slide-up   { animation:slideUp   0.30s ease both; }
.a-slide-down { animation:slideDown 0.25s ease both; }
.a-scale-in   { animation:scaleIn   0.25s cubic-bezier(0.34,1.30,0.64,1) both; }
.a-spin       { animation:spin      0.75s linear infinite; }

/* Staggered children */
.stagger > * { animation:cardReveal 0.35s ease both; }
.stagger > *:nth-child(1) { animation-delay: 0.05s; }
.stagger > *:nth-child(2) { animation-delay: 0.10s; }
.stagger > *:nth-child(3) { animation-delay: 0.15s; }
.stagger > *:nth-child(4) { animation-delay: 0.20s; }

/* Lift on hover */
.lift { transition:box-shadow var(--t-base), transform var(--t-base); }
.lift:hover { box-shadow:var(--shadow-lg); transform:translateY(-3px); }

/* ══ Live Status Indicator ══ */
.live-dot {
  position:relative; display:inline-flex; align-items:center;
  width:10px; height:10px; flex-shrink:0;
}
.live-dot::before {
  content:''; position:absolute; inset:0;
  border-radius:50%;
  animation:pulse-ring 1.8s ease-out infinite;
}
.live-dot::after {
  content:''; position:absolute; inset:1px;
  border-radius:50%;
  animation:pulse-dot 1.8s ease-in-out infinite;
}
.live-dot.green::before { background:rgba(16,185,129,0.5); }
.live-dot.green::after  { background:var(--color-accent); }
.live-dot.red::before   { background:rgba(239,68,68,0.5); }
.live-dot.red::after    { background:var(--color-danger); }
.live-dot.orange::before{ background:rgba(245,158,11,0.5); }
.live-dot.orange::after { background:var(--color-warning); }
.live-dot.blue::before  { background:rgba(37,99,235,0.5); }
.live-dot.blue::after   { background:var(--color-primary); }

/* ══ Skeleton Loader ══ */
.skeleton {
  background:linear-gradient(90deg,var(--bg-surface-2) 25%, var(--border-color) 50%, var(--bg-surface-2) 75%);
  background-size:200% 100%;
  animation:shimmer 1.6s ease-in-out infinite;
  border-radius:var(--border-radius);
}
.skeleton-text { height:14px; width:100%; }
.skeleton-text.w-75 { width:75%; }
.skeleton-text.w-50 { width:50%; }
.skeleton-avatar { width:48px; height:48px; border-radius:50%; }
.skeleton-btn { height:34px; width:100px; border-radius:var(--border-radius); }

/* ══ Progress bar animation ══ */
.progress-fill { animation:fillBar 0.8s cubic-bezier(0.4,0,0.2,1) both; }

/* ══ Theme icons ══ */
.icon-sun  { display:block; transition:opacity var(--t-fast),transform var(--t-fast); }
.icon-moon { display:block; transition:opacity var(--t-fast),transform var(--t-fast); position:absolute; left:0; top:0; }

[data-theme="light"] .icon-sun  { opacity:1;  transform:scale(1) rotate(0deg); }
[data-theme="light"] .icon-moon { opacity:0;  transform:scale(0.5) rotate(90deg); }
[data-theme="dark"]  .icon-sun  { opacity:0;  transform:scale(0.5) rotate(-90deg); }
[data-theme="dark"]  .icon-moon { opacity:1;  transform:scale(1) rotate(0deg); }

/* ══ Number count-up ══ */
.kpi-val { animation:countUp 0.5s cubic-bezier(0.34,1.56,0.64,1) both; }