/* ================================================================
   Task Management Platform — Animations
   ================================================================ */

/* Notification slide-in (when user is on notifications page) */
@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.notif-slide-in {
  animation: slideInDown 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Fade in for general elements */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.fade-in { animation: fadeIn 0.3s ease both; }

/* Scale in for cards on first load */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

.scale-in { animation: scaleIn 0.25s ease both; }

/* Pulse — for online indicator */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

.online-dot.online {
  animation: pulse 2.5s ease-in-out infinite;
}

/* Shake for error inputs */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-6px); }
  40%       { transform: translateX(6px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}

.shake { animation: shake 0.35s ease; }

/* Row highlight for real-time task updates (status changes) */
@keyframes rowHighlight {
  0%   { background-color: #fffbe6; }
  100% { background-color: transparent; }
}

.row-updated {
  animation: rowHighlight 1.8s ease-out forwards;
}

/* ── New task arrival: slide-in + 20s glow pulse ── */
@keyframes taskSlideIn {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes taskNewGlow {
  0%, 100% {
    background-color: rgba(22, 119, 255, 0.09);
    outline: 2px solid rgba(22, 119, 255, 0.35);
    outline-offset: -1px;
  }
  50% {
    background-color: rgba(22, 119, 255, 0.02);
    outline: 2px solid rgba(22, 119, 255, 0.08);
    outline-offset: -1px;
  }
}

.task-new {
  /* 0.4s entrance, then 10 × 2s glow = 20s */
  animation:
    taskSlideIn  0.4s ease-out both,
    taskNewGlow  2s   ease-in-out 10 forwards;
  animation-delay: 0s, 0.4s;
}

/* Kanban card pop-in */
@keyframes cardPop {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.card-pop { animation: cardPop 0.3s ease both; }

/* Badge count bump */
@keyframes badgeBump {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}

.badge-bump { animation: badgeBump 0.3s ease; }

/* Sidebar slide (mobile) */
@keyframes sidebarSlideIn {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

@keyframes sidebarSlideInRtl {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

.sidebar-open[dir="ltr"] .app-sidebar {
  animation: sidebarSlideIn 0.3s ease;
}

.sidebar-open[dir="rtl"] .app-sidebar {
  animation: sidebarSlideInRtl 0.3s ease;
}

/* Flash message entry */
@keyframes flashIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.flash { animation: flashIn 0.3s ease both; }

/* Critical bell shake — applied via JS when critical notification arrives */
@keyframes bellShake {
  0%, 100% { transform: rotate(0deg); }
  10%       { transform: rotate(-20deg); }
  20%       { transform: rotate(20deg); }
  30%       { transform: rotate(-18deg); }
  40%       { transform: rotate(18deg); }
  50%       { transform: rotate(-12deg); }
  60%       { transform: rotate(12deg); }
  70%       { transform: rotate(-6deg); }
  80%       { transform: rotate(6deg); }
  90%       { transform: rotate(-3deg); }
}

.bell-shake {
  animation: bellShake 0.8s ease-in-out;
  transform-origin: top center;
}

/* Critical notification slide-in — bolder entrance than regular */
@keyframes slideInCritical {
  0%   { opacity: 0; transform: translateY(-30px) scale(0.96); }
  60%  { opacity: 1; transform: translateY(4px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.notif-critical.notif-slide-in {
  animation: slideInCritical 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}