/* ============================== */
/* KEYFRAMES                      */
/* ============================== */

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

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

@keyframes pulse {
  0%   { transform: scale(1);   box-shadow: 0 0 0 0   rgba(34, 197, 94, 0.55); }
  70%  { transform: scale(1.2); box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);    }
  100% { transform: scale(1);   box-shadow: 0 0 0 0   rgba(34, 197, 94, 0);    }
}

@keyframes scramble {
  0%   { opacity: 0.6; filter: blur(2px); letter-spacing: 0.04em; }
  50%  { opacity: 0.9; filter: blur(1px); letter-spacing: 0.02em; }
  100% { opacity: 1;   filter: blur(0);   letter-spacing: normal; }
}

/* Canvas cards gentle float (desktop only). Pause on drag. */
@keyframes card-float-a {
  0%,100% { translate: 0 0; }
  50%     { translate: 0 -4px; }
}
@keyframes card-float-b {
  0%,100% { translate: 0 0; }
  50%     { translate: 0 3px; }
}

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  [data-draggable] {
    animation: card-float-a 7s ease-in-out infinite;
  }
  [data-card="sticky-2"],
  [data-card="sticky-4"],
  [data-card="chart"] {
    animation-name: card-float-b;
    animation-duration: 8s;
  }
  [data-card="sticky-1"]  { animation-delay: -1s; }
  [data-card="sticky-2"]  { animation-delay: -3s; }
  [data-card="sticky-3"]  { animation-delay: -2s; }
  [data-card="sticky-4"]  { animation-delay: -4s; }
  [data-card="kanban"]    { animation-delay: -1.5s; }
  [data-card="chart"]     { animation-delay: -2.5s; }
  [data-card="backlog"]   { animation-delay: -3.5s; }
  [data-draggable].is-dragging { animation: none; }
}

/* ============================== */
/* ANIMATION UTILITIES            */
/* ============================== */

.animate-fade-up {
  animation: fadeUp 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.animate-scale-in {
  animation: scaleIn 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .animate-fade-up,
  .animate-scale-in,
  .status-dot {
    animation: none !important;
  }
  * { scroll-behavior: auto !important; }
}