@import "tailwindcss";

@keyframes cancel-chip-press {
  0%, 70% { transform: scale(1); }
  74% { transform: scale(0.92); }
  80% { transform: scale(1.05); }
  86%, 100% { transform: scale(1); }
}

.animate-cancel-press {
  animation: cancel-chip-press 4s ease-in-out infinite;
}

@keyframes cursor-tap {
  0%, 55% { opacity: 0; transform: translate(12px, 10px) scale(1); }
  62% { opacity: 1; transform: translate(2px, 2px) scale(1); }
  70% { transform: translate(2px, 2px) scale(0.8); }
  78% { transform: translate(2px, 2px) scale(1.05); }
  86%, 100% { opacity: 0; transform: translate(2px, 2px) scale(1); }
}

.animate-cursor-tap {
  animation: cursor-tap 4s ease-in-out infinite;
}

@keyframes flash-success {
  0%, 100% { transform: scale(1); }
  35% { transform: scale(1.3); }
}

.animate-flash-success {
  animation: flash-success 0.5s ease-out;
}

@keyframes spine-flow {
  to { background-position: 0 10px; }
}

.timeline-spine {
  background-image: repeating-linear-gradient(to bottom, #d1d5db 0, #d1d5db 4px, transparent 4px, transparent 10px);
  background-size: 2px 10px;
  background-repeat: repeat-y;
  background-position: 0 0;
  animation: spine-flow 0.8s linear infinite;
}

@keyframes spine-flow-horizontal {
  to { background-position: 10px 0; }
}

.timeline-spine-horizontal {
  background-image: repeating-linear-gradient(to right, #d1d5db 0, #d1d5db 4px, transparent 4px, transparent 10px);
  background-size: 10px 2px;
  background-repeat: repeat-x;
  background-position: 0 0;
  animation: spine-flow-horizontal 0.8s linear infinite;
}