/* ═══════════════════════════════════════════════
   mini task ai — Animations
   ═══════════════════════════════════════════════ */

/* ── Entrance Animations ── */
@keyframes slideUp {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

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

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

@keyframes slideInLeft {
  from { transform: translateX(-24px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

@keyframes scaleUp {
  from { transform: scale(0.8); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* ── AI Pulse Glow ── */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(124,58,237,0.4); }
  50%      { box-shadow: 0 0 20px rgba(124,58,237,0.8), 0 0 40px rgba(124,58,237,0.3); }
}

@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.3); opacity: 0.7; }
}

/* ── Aurora Background ── */
@keyframes aurora {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Shimmer / Skeleton ── */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

/* ── Checkmark ── */
@keyframes checkmark {
  0%   { stroke-dashoffset: 50; }
  100% { stroke-dashoffset: 0; }
}

/* ── Confetti ── */
@keyframes confetti-fall {
  0%   { transform: translateY(-10px) rotate(0deg);   opacity: 1; }
  100% { transform: translateY(100px) rotate(720deg); opacity: 0; }
}

/* ── Typing Dots ── */
@keyframes typing-dot {
  0%, 60%, 100% { transform: translateY(0); }
  30%           { transform: translateY(-8px); }
}

/* ── Spin ── */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Float ── */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* ── Sweep ── */
@keyframes sweep {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}

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

/* ── Border Glow ── */
@keyframes border-glow {
  0%, 100% { border-color: rgba(124, 58, 237, 0.25); }
  50%      { border-color: rgba(139, 92, 246, 0.6); }
}

/* ── Shake (error) ── */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* ── Progress bar fill ── */
@keyframes fillProgress {
  from { width: 0; }
}

/* ── Slide out for delete ── */
@keyframes slideOutRight {
  from { transform: translateX(0); opacity: 1; max-height: 80px; }
  to   { transform: translateX(100px); opacity: 0; max-height: 0; padding: 0; margin: 0; }
}

/* ── Tab underline slide ── */
@keyframes underlineSlide {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ── Flash highlight ── */
@keyframes flash-highlight {
  0% { background-color: rgba(124, 58, 237, 0.3); }
  100% { background-color: transparent; }
}

/* ── Typewriter cursor ── */
@keyframes blink-cursor {
  0%, 100% { border-color: var(--accent-violet); }
  50% { border-color: transparent; }
}

/* ── Particle float ── */
@keyframes particle-float {
  0% { transform: translate(0, 0) scale(1); opacity: 0.3; }
  25% { transform: translate(10px, -20px) scale(1.1); opacity: 0.4; }
  50% { transform: translate(-5px, -40px) scale(0.9); opacity: 0.2; }
  75% { transform: translate(15px, -60px) scale(1.05); opacity: 0.35; }
  100% { transform: translate(0, -80px) scale(1); opacity: 0; }
}

/* ── Ripple effect ── */
@keyframes ripple {
  0% { transform: scale(0); opacity: 0.5; }
  100% { transform: scale(4); opacity: 0; }
}

/* ── Stagger animation helper ── */
.stagger-1 { animation-delay: 50ms; }
.stagger-2 { animation-delay: 100ms; }
.stagger-3 { animation-delay: 150ms; }
.stagger-4 { animation-delay: 200ms; }
.stagger-5 { animation-delay: 250ms; }
.stagger-6 { animation-delay: 300ms; }
.stagger-7 { animation-delay: 350ms; }
.stagger-8 { animation-delay: 400ms; }

/* ── Animation Utilities ── */
.animate-slideUp    { animation: slideUp var(--duration-enter) var(--ease-spring) both; }
.animate-slideDown  { animation: slideDown var(--duration-enter) var(--ease-spring) both; }
.animate-fadeIn     { animation: fadeIn var(--duration-slow) var(--ease-smooth) both; }
.animate-scaleIn    { animation: scaleIn var(--duration-slow) var(--ease-spring) both; }
.animate-pulse      { animation: pulse-glow 2s ease-in-out infinite; }
.animate-float      { animation: float 3s ease-in-out infinite; }
.animate-spin       { animation: spin 1s linear infinite; }
.animate-shimmer    {
  background: linear-gradient(90deg, transparent 0%, rgba(139,92,246,0.1) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* ── Transition Utilities ── */
.transition-all {
  transition: all var(--duration-base) var(--ease-smooth);
}
.transition-transform {
  transition: transform var(--duration-base) var(--ease-smooth);
}
.transition-colors {
  transition: color var(--duration-fast) var(--ease-smooth),
              background-color var(--duration-fast) var(--ease-smooth),
              border-color var(--duration-fast) var(--ease-smooth);
}